2020-03-15
react-logo 이슈 리엑트로 서비스를 운영할 때 api 에서 전달되는 텍스트가 길어서 특정 부분에 개행을 해야하는 경우가 있다. api 로 전달되는 텍스트 이기에 텍스트 중간에 태그 등의 강제 개행 태그를 추가할 수도 없다. 이럴때 어떻게 해야할까? 해결 html-react-parser 를 활용하면 이런 문제를 해결할 수 있다. api로 전달되는 …
2019-09-19
TLDR 리엑트 앱에 코드스플리팅을 적용한 경험에 대해 다룬다. 이와 관련된 웹펙 설정과 리엑트 코드에 대해 다룬다. 왜 code Spliting 이 필요할까? 대부분의 React 앱은 Webpack 같은 도구를 사용하여 "번들 된"파일을 갖게 된다. 번들링은 가져온 파일을 따라 하나의 파일, 즉 "번들"으로 병합하는 프로세스다. 이 번들(js)은 웹 …
2019-08-09
들어가며 webpack, babel 많이 들어는 봤으나 정작 해당 설정을 눈앞에 마주하면 아득 하기만 했다. 설정 이라는 영역은 경험이 쌓이지 않으면 단번에 이해하기가 어렵다. 또한 webpack 과 babel은 수시로 update 되고 규칙과 네이밍이 미세하게 조정되며 어려움을 더한다. 그래서 이번에 리엑트를 시작하며 CRA(create react a…
2019-07-26
TLDR Vanila JS로 검색 자동완성 라이브러리를 만든다. 코드의 재사용을 고려하여 객체를 설계했고 설계과정에서 MVC 패턴을 적용했다. 사용자와 성능을 고려하여 debounce, throttle 등의 프론트엔드 에서의 UI 제어 기술을 사용하였다. CSS 와 소스 데이터를 import 하는 부분은 범용성(db, json) 을 위해 추가적으로 수정이…
2019-07-24
TLDR webpack 을 통해 번들링한 React 활용 TODO 어플을 로드했다. CSS 가 미적용 된 상태로 DOM 컨텐츠가 로드되는 이슈가 있다. 알고보니 CSS Loader 의 sourceMap 옵션 을 켜둔 것이 원인이었다. 해당 옵션을 끄면 이슈가 해결된다. 1. 이슈 webpack 을 통해 번들링한 React 활용 TODO 어플을 로드했다.…
2019-07-24
이슈 검색창에 단어를 입력하면 검색 자동완성 이벤트가 발동해 검색어 목록을 보여준다. 리스팅 된 검색어로 검색을 하기 위해 클릭을 했는데 click 이벤트가 발동하지 않는다. 어떻게 된걸까? mouse event와 blur 이벤트의 순서에 대해 이해하면 원인을 알 수 있다. mousedown, mouseup, click & blur 이벤트 순서에 대해 알…
2019-07-12
TLDR Vanila JS로 carousel 라이브러리를 만든다. 코드의 재사용을 고려하여 객체를 설계했고 설계과정에서 obbserver 패턴을 적용했다. template literal을 활용하여 ejs, pug 등의 라이브러리 없이 templating을 경험해 본다. 브라우저 캐쉬 전략을 경험해 본다. 1. template literal 활용과 함수로직…