headlessUI ?? 최근 포스팅을 하면서 React 가 Class 기반으로 쓰였던 시절부터 쓰인 Component Pattern 에 대해서 알게 되고, 이후 Hook 과 함께 사용되는 패턴은 어떻게 사용해야 할지 궁금함이 생겨 최근 2-3일간 React 와 관련된 아티클과 발표영상들을 찾아봤다. Contaier / Presentational Component Pattern 에서 Hook 으로 넘어왔으니, 컴포넌트의 로직은 모두 Hook 으로 관리해야하는건가? 라는 궁금함에 있어서 간단한 컴포넌트들을 만들어보면서 모든 로직을 hook 으로 분리하기에는 아래와 같은 애로사항이 있었다. 1. 도메인의 성격을 가지게 되어 범용적으로 쓰이기 어려워질 수 있음 2. 도메인을 걷어내도 여러군데에 쓰이지 않고 하..

Suspense React v18 에서 실험단계를 벗어난 Suspense 에 대해서 좀 더 알아봤다. Suspense 는 데이터를 불러오는 컴포넌트를 사용할 때, 데이터 로드가 완료되는 시점 (fulfilled) 에 렌더링을 할 수있도록 도와준다, 만약 데이터가 로드되지 않은 상태라면 fallback props 를 통해 Loading 과 같은 임시적으로 보여줄 컴포넌트를 보여줄 수 있다. 사용법은 데이터를 불러오는 컴포넌트를 Suspense 로 감싸서 사용하는데, 사용 예제같은 것을 확인해보니 react-query 나 swr 에서는 suspended 상태로 만드는 옵션과 함께 간단히 사용할 수 있었다. 만약 내가 사용하고 있는 fetch 관련 hook 이 있다면, suspended 상태로 만들도록 확장하..

설정하기 프로젝트를 처음 시작하면 만들 파일이 너무나도 많습니다. 그런데 하나하나 다 만들어내기엔 너무 귀찮죠, 이를 위해서 VSC 에서는 Snippet 이라는 기능을 제공하고 있습니다. 간단하게 VSC 를 실행한 이후, Code -> Preferences -> Configure User Snippets 로 실행하면 VSC 에서 어느 확장자에 적용할 것인지 확인한 이후 설정파일을 열어줍니다. 어느 확장자에 적용할 것인지 선택했을 때, 만약 typescript react 를 선택한다면 .tsx 파일 내부에서만 설정한 snippet 를 사용할 수 있습니다. 기본 설정파일을 보면 영어로 간단히 설명이 적혀있지만, 각각의 속성에 대해서 이야기 하자면 prefix : 어느 단축어로 해당 snippet 을 사용할 ..

Font Awesome ? 프로젝트를 하다보면 특정 아이콘이 필요할 때가 있습니다. 그것은 디자이너가 Figma 로 전해줄 수도 있고, 혹은 외부에서 svg 를 다운받아서 직접 설정할 수도 있습니다. 이전 토이프로젝트를 진행할 때, React 가 아닌 간단한 HTML + CSS 로 정적페이지를 만들 때 사용했던 Font Awesome 을 React 에서도 사용할 수 있는 걸 알고있어서 Font Awesome 을 어떻게 사용할 수 있는지 간단하게 남기고자 합니다. Set Font Awesome 설치 순서는 Font Awesome 의 문서를 참고하였습니다. (6.1.2 버전 기준) npm install @fortawesome/fontawesome-svg-core npm install @fortawesome/..

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

Swagger? 프론트엔드-백엔드가 같이 프로젝트를 하면 API 명세를 통해 의사소통을 하게됩니다. 이 때 API 명세는 사람이 직접 적는 문서 형식으로 Notion, Github Wiki 등을 활용할 수는 있지만 몇가지 불편한 점이 있습니다. 1. 변경을 추적하기 어렵다는 점 2. 변경이 될 때마다 프론트엔드 에게 인지를 시켜줘야 한다는 점 3. 혹시 모를 오탈자로 고생할 일이 적어짐 세 가지 모두 프로젝트를 하면서 겪었던 문제였는데요, Swagger 를 통해 문서화를 자동화하면 이를 해결해볼 수 있습니다. 🚀 설치 npm install -D swagger-jsdoc swagger-ui-express - -D 옵션으로 devDependency 에 설치하였습니다. - swagger-ui-express 는..

JavaScript 숫자 범위 + falsy Jamie 가 알고리즘을 푸시다가 Javascript 의 문법적 요소에 관하여 질문을 주셨다. 백준 문제를 푸시는데, 1 의 숫자가 늘어나면서 몇의 자리 숫자일 때 특정 숫자(n) 의 배수가 되는지를 찾는 문제였다. ex) n 이 3 일 때 111 은 3의 배수, 3자리 이므로 3, n 이 7 일 때 111111 은 7의 배수, 6자리 이므로 6 여기서 1의 숫자가 늘어나는 것을 multiple 이라는 변수로 설정하고, multiple * 10 + 1 을 무한반복으로 찾을 때 똑같은 로직인 것 같은데 하나는 시간초과, 하나는 틀렸습니다 가 나온다는 것이었다. // 틀렸습니다 while(true){ if (!(+multiple % num)) return ~~ }..

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..