Presentational / Container pattern 프로젝트에 storybook 을 도입하기 전에, storybook 에 대해서 좀 더 공부해볼 필요가 있겠다는 생각이 들어서 여러 자료들을 살펴보고, 진겸님의 발표 - Say hello to storybook 도 보았다. 발표 당시가 2018년 이었는데, 강의에 소개되고 있는 Container Component pattern 에서는 이전에 테스트 관련 공부를 할 때 보았던 Presenter 라는 키워드도 있었다. (일단 여기서 1차 혼동) 발표 내용에서는 Presenter Component 라는 말을 하는데, 내가 알고있는 Presenter 는 MVP 패턴의 Presenter 라서, 어떤 로직을 제공하는 것이라고 생각을 했었는데 발표에서는 Pu..

Polyfill 은 구형 브라우저에서 지원하지 않는 기능을 제공하는 코드를 의미합니다. ES6의 Promise 같은 객체들은 ES5에 존재하지 않으므로 구문 변환 뿐만 아니라 해당 객체들을 정의하는 코드인 바벨 폴리필(babel polyfill) 을 추가해야 합니다. 1. 아주 먼 옛날.. @babel/polyfill 과거에는 @babel/polyfill 패키지를 직접 전역 스코프에 가져오는(import) 방식으로 바벨 폴리필을 추가하여 사용하기도 했습니다. @babel/polyfill 은 내부적으로 core-js/stable 와 regenerator-runtime 를 포함하고 있는데요, 현재는 @babel/polyfill 은 core-js/stable 을 직접 import 하는 방식을 사용하기 위해서 ..

어떻게 구현했는지를 보여주는 글이 아닌 React 에서 어떻게 적용할 지 생각을 정리한 글 입니다. React + Infinity Scroll 처음 React 를 공부할 때 클래스 형 리액트에서 리액트의 생명주기를 찐하게 느꼈던 기능 구현이 하나 있었는데 바로 무한 스크롤이다. 스크롤 이벤트마다 리렌더링이 일어나고, 스크롤의 위치를 받아와서 viewport 의 scroll height 를 고려하는 등 어려웠던 기억이 난다. 코드스쿼드 과정을 하면서도 무한스크롤은 아니지만 스크롤 이벤트를 받아서 Header 의 CSS 속성을 수정하는 로직을 작성했던 적도 있었는데, 그 때는 throttling 을 활용해서 무수한 이벤트가 발생하는 것을 억제했던 기억이 났다. 그래서 그것을 활용해서 접근해볼까 하다가 다른 ..

Context API 오늘은 채용관련 사전과제 위주로 풀었다. 과제 중 Context API 를 사용하려는 데, Context API 를 어떤 기준에 의해서 사용하는게 좋을 지를 고민해보다가 velopert 님이 가장 최근에 쓰신 글을 읽었다. 사실 이전에 읽은적이 있던 typescript + Context API + useReducer 를 사용하는 방법을 찾으려고 구글링했다가 최신 글로 작성하신 게 있어서 읽게됐다. 이전 글에서는 하나의 Context API 를 사용하여 value 와 actions 를 따로 쓰는 곳에서 모두 리렌더링이 일어나는 것을 막기 위해 두 개의 Provider 로 나누어서 hooks 를 만든다는 발상이 신기했었다. 이전 글과 최근 글의 차이점은 useReducer 의 dispa..

Babel polyfill - core-js 에 대하여 React Boilerplate 를 작성할 때 사용하던 babel polyfill 에 대해서 깊게 알아봤다. useBuiltIns 옵션에 있는 usage 와 entry 가 단순히 usage 는 필요한 polyfill 만 추가로 넣어주니까 이것만 사용하면 되겠다 싶었고 이전 프로젝트에서는 그대로 사용했다. 지금 사용중인 react ts boilerplate 에서 최근 코드스쿼드 슬랙에서 앨런이 공유해준 ES2022 문법중 하나인 at 메서드를 사용해보려는 과정에서 오류가 났었다. 이유는 core-js 를 다운받지 않아서 였다. 그래서 단순히 다운을 받아서 해결했다. 문득 궁금했다. core-js 를 왜 다운받아야 하는거지? node_modules 에..

PR 을 보내면서, 데모 홈페이지를 같이 첨부하는 편인데, 내 화면에선 깨지지 않던 레이아웃이 리뷰어 분의 화면에선 깨져있었다. 근데 내 화면에선 아무리봐도 레이아웃이 깨져있지도 않았고, 크롬의 글꼴 크기를 조정해보아도 깨지지 않았다. 일단 레이아웃은 - width: 700px - height: 500px 로 잡혀있는 상황이었는데, 크롬환경이 아닌 사파리 환경으로 테스트해보았다. 뭐지? 왜 사파리에서는 또 깨지지? 브라우저 별로 기본 폰트크기가 다른건가? 일단은 width, height가 px 단위로 사용되고있어서 그런가? 라는 의심으로 rem 단위로 변경해보았다. 브라우저의 폰트 크기를 따르는 rem 단위로 변경하니 레이아웃이 깨지지않았다. 일단 rem 단위로 변경하여 해결이 되었으니, 브라우저 별로 ..