끄적끄적

유사한 기능의 패키지들이 많이 존재합니다.그 때 마다 무엇을 사용할지 정하는 주요 요인 중 한가지는 파일의 크기 일 것입니다.npm에 나와있는 unpackedSize가 단순히 사용하게 되면 쓸 용량이라고 생각이 될 수가 있지만,의존성이나, 개발 환경 파일, 등 많은 요소에 의해 실제 사용하게될 용량은 달라질 수 있습니다. 따라서 패키지의 의존성이나 많은 것들을 확인할 수 있는 서비스들을 알아보겠습니다. 1. 번들포비아 (https://bundlephobia.com/)위 서비스에서는 특정 라이브러리를 검색하면 의존성있는 패키지들과 용량, 속도등을 확인시켜줍니다.여기서 번들사이즈란 최종적으로 사용자에게 제공될 자바스크립트 파일의 크기이며, 웹 애플리케이션 성능과 직접적인 관련이 있습니다.  2. 패키지포비아..

HTTP 요청은 클라이언트 ↔ 서버 간의 통신을 위한 프로토콜입니다.프로토콜이란? 통신 시스템 사이에서 데어터 고환을 위해 규정된 규칙과 절차입니다.HTTP 요청의 구성으로는 Request Line, Headers, Body로 구성됩니다.Request Line은 메서드, URL, HTTP버전으로 구성됩니다.  메서드의 종류로는   - GET : 서버에서 데이터를 요청  - POST : 서버에서 데이터를 제출  - PUT : 서버에서 데이터를 업데이트  - DELETE : 서버에서 데이터를 삭제  - PATCH : 서버에 데이터를 부분적으로 업데이트  각 메서드의 예시를 보겠습니다.// GETfetch('https://test.com/api/data', { method: 'GET', headers: {..

게시판을 만들 때 테이블 리스트, 알람 리스트 를 만들 때 가상 테이블을 사용하여 효율을 향상시킬 수 있습니다.가상화란 현재 페이지에 보이는 부분만 렌더링하여 더 빠르고, 효율적인 성능이 나오게 합니다. 가장 대표적인 가상화 테이블의 라이브러리로는 react-window와 react-virtualized가 있습니다.한동안 react-virtualized가 react-window 보다 사용자수가 많았는데 갑자기 사용자가 역전이 되어있네요.react-virtualized가 용량이 약2~3배 가량 높고, 그만큼 좀 더 많은 기능을 제공하는 것 같지만,저는 단순히 테이블 요소만 리스팅하기만 하면 되므로 비교적 용량이 적은 react-window를 사용하겠습니다.# Yarnyarn add react-window#..

React에서 hook이란? 공식문서에서는 다음과 같이 정의합니다. Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. React 공식문서에서의 hook의 motivation의 결론은 다음과 같습니다. Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다. 저의 게시판에서 사용할 훅은 세션관리에 이용할 custom hook입니다.매 페이지마다 login session을 관리하여, token의 생명을 검사하고, refresh와 logout 등의 관리를 하는 hook입니다. 현재 로그인을 진행하면 cookie를 통해 accessToken과 refr..

이번 프로젝트에서 사용하기로 한 상태관리 라이브러리는 recoil 입니다. 그동안은 redux만을 사용해보았는데, 이번엔 recoil을 사용해보고 싶어서 사용해보기로 했습니다. 자주 하지 않은 업데이트, 메모리 누수.. 등 다양한 단점들이 존재하여 현재 Redux에 비해 매우 사용률이 저조하긴 하지만 그래도 react서 만든 것이기 때문에 한번쯤은 사용해볼 가치가 있다고 생각합니다. (devtools가 없어 개발자도구에서 확인이 불가능하여 매우 불편한점은.... 매우 불편...) 그래도 초기 세팅 및 사용법이 엄-청 간편하기 때문에 빠르게 작성하여 진행할 수 있다는 장점이 있습니다. // src/recoil/user.ts import { atom } from 'recoil' export const ses..