만족

create-react-app 으로 리액트 프로젝트를 생성했다면 프로젝트 빌드 시에 webpack을 이용해 많은 파일들을 큰 몇개의 덩어리로 합쳐준다. webpack은 SPA(Single Page Application)을 제작하기에 제격인 빌드 도구이다. SPA의 장점은 첫 로드 후(청크를 한번에 다운로드) 추가적인 로드가 없어서 사용자에게 웹이 아니라, 마치 하나의 앱을 설치한 것 처럼 부드러운 환경을 제공할 수 있으나, 첫 로드가 오래 걸린다는 단점이 있고, 번들링 시에 파일 크기에 오버헤드가 존재한다. (실제로 Hello world를 출력하기만 하는 프로젝트를 빌드해도 100KB단위로 프로덕션이 만들어진다) 프로젝트가 작은 경우에는 그대로 프로덕션을 제공해도 로딩이 조금 더 걸리는 수준에 그치지만 ..

오늘 약 5개월동안 진행한 프로젝트에서 사용하지 않는 라이브러리 제거를 진행했다. 웹 사이트 퍼포먼스 측정 결과, 특히 사이트 로딩 속도에서 매우 처참한 결과가 나왔기 때문이다. 한번에 모든 페이지를 로드하기 때문에 초기 로드에 비교적 많은 시간이 필요한 SPA의 치명적인 단점이 굳이 필요하지 않은 의존성들과 함께 존재하면 빌드의 결과물인 청크 사이즈의 비대로 인해 로딩 시간이 더더욱 길어지게 된다. 나는 개발 초기에 사용이 간편한 부트스트랩을 사용하다가 디자인 수정 작업을 거치면서 부트스트랩보다는 material-ui가 더 적합하다는 것을 깨달았다. 그러나 이미 많은 컴포넌트들에 부트스트랩이 들러붙어 있어서 상당히 손대기 어려웠다. 대부분의 편집기나 IDE에 존재하는 Find in Path 기능을 이용..

Routing을 위해 component에 컴포넌트를 집어넣을 때, 보통은 아랫쪽처럼 하지만 뭔갈 더 집어넣어서 라우팅하기 위해 위와 같은 방법으로 컴포넌트를 만든 후, 리턴하게끔 해서 사용했었다. 그런데, 위의 방법은 문제가 있다. 아래쪽 방법으로 사용하면, 이 컴포넌트의 부모 컴포넌트가 업데이트되어도 Lol쪽은 언마운트되지 않지만, 위쪽 방법으로 사용하면 기존에 있던 와 새로 리턴되는 를 다른 인스턴스로 판단하여, 기존의 를 언마운트하고, 새로운 를 마운트한다. 간단히 말해서, 부모 컴포넌트가 업데이트 될 때마다 라우트의 컴포넌트를 새로 만든다는 뜻이다. 만약 위와 같은 방법을 사용한다면, 해당 컴포넌트의 업데이트 관련 라이프사이클을 만져주는 식으로 의도하지 않는 언마운트/마운트를 막아주어야 한다. 안..

network reqeust를 아주아주 편하게 만들어주는 작고 직관적인 라이브러리인 axios에 대해 알아보자. 설명하기에 앞서, 만약 당신이 제이쿼리를 사용하고 있고 제이쿼리에서 사용하는 기능이 쿼리셀렉트(ex: $("#test") )와 네트워크 통신(ex: $.get(...))뿐이라면 쿼리셀렉트를 기본 API로 변경하고 네트워크 부분은 axios로 교체하는 것을 추천한다. (왜냐면 compress되었다 하더라도 제이쿼리자체가 파오후라 어쩔 수 없이 로딩이 좀 걸린다) 실전압축으로다가 빠르게 알아보자. Installation 을 삽입하거나 npm을 사용중이라면 터미널에 yarn add axios를 사용해 설치하자. Axios를 사용해보자 많고많은 함수들이 구현되어 있지만, 딱 하나만 잘 써도 단물 다 ..

ListView는 꽤 옛날에 나온 놈이라 호환성이 그렇게 좋지 못하다. 제목에서도 언급했듯이 가장 많이 문제를 일으키는 경우는 ScrollView 내부에 ListView가 존재할 때 이다. 이 경우 ListView의 전체 높이가 ListView의 하나의 목록의 높이로 잡혀서 상당히 괴이한 모양의 컴포넌트를 만들어낸다. 대안은 두 가지가 있다. 첫 번째는 ListView를 버리는 방법이다. 위의 문제를 해결하기 위해서, 그리고 성능 향상을 위해서 ListView대신 RecyclerView를 이용하는 방법이다. 이 방법은 구글에 Android RecyclerView example만 쳐도 수백개의 예제가 나오므로 설명은 생략한다. 이 방법의 단점은 매우 번거롭다는 것이다. Adapter를 갈아엎는 수준으로 만..

ScrollView를 사용해서 스크롤을 구현하고 스크롤의 시작지점이나 끝지점에 hit했을 때, 저런 물결무늬가 나오는데 UI구성에 따라서 저게 상당히 흉해 보일 때가 있다. 이걸 뭐라고 불러야 하는지도 모르겠어서 검색하기도 꽤 난감했었는데 이 effect는 overScroll 할 때 발생한다고 한다. overScroll은 눈치챘겠지만, 끝이나 시작지점에 닿았음에도 같은 방향으로 계속해서 스크롤을 시도할 때를 말한다. 단순히 ScrollView의 옵션에 overScroll= "never" 하면 사라진다.

일단, fragmentTransaction단에서 커밋조차 실패한 경우에는 논외로 한다. xml에서 인플레이션했던, transaction으로 commit했던 간에, getFragmentManager().findFragmentById() 혹은 getFragmentManager().findFragmentByTag()를 분명 일치하게 입력했는데도 null을 return 하는 경우가 있다. Fragment코드를 생성할 때, Fragment클래스를 auto import하면 (alt+enter를 이용한 경우도 마찬가지) import android.support.v4.app.Fragment; 가 자동으로 import된다. 그런데, getFragmentManager().findFragmentById() 는 (getFra..

바닐라 자바스크립트로도 쿠키를 사용할 수는 있지만, JQuery를 이용하면 아주 간단하게 쿠키를 관리할 수 있다. 쿠키는 특정 정보를 서버에 저장하지 않고 대신에 사용자의 로컬에 저장하는 방법을 말한다. 먼저 Cookie 관련 메소드를 사용하기 위해서는 별도의 jquery-cookie.js 를 임포트 해야 한다. https://github.com/carhartl/jquery-cookie 위의 링크에서 다운로드 받고, 쿠키를 사용할 html에서 로 임포트한다. 먼저 쿠키 생성은 $.cookie(key, value)의 형태로 한다. 생성할 때, 유효기간이나 보안방법 등을 추가로 설정할 수도 있지만, 여기에서는 다루지 않는다. 생성한 쿠키값을 가져오려면 $.cookie(key) 처럼 key를 기반으로 valu..