끄적끄적

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

문득이자 예전부터 해보고 싶었던, 관련 분야의 게시판을 만들어 보기로 했습니다. 사실 게시판이라고 하면 단순히 CRUD만 있는 간단한 프로젝트 아니냐 라고 할 수 있지만, 그렇게 따지면 무엇이 신선하고 실용적일까.. 하는 생각에 사용자에게 친숙하지만, 내가 하고 싶은, 필요할 것 같은 서비스를 만들어 보는거 자체에 큰 의미가 있다고 생각해서 만들어 보게 되었습니다. 정확히 어떠한 서비스이냐는 서비스의 완성단계에 가면 부끄럽지만 소개를 한번 드리고 싶습니다. 같이 프로젝트를 진행하는 서버 개발자 한분과의 작업을 통해 진행할 것이며, 디자이너 및 기획자는 없기에, 최대한 디자인이 잘된 라이브러리를 이용해볼것입니다. 작업의 진행방향은 디자인구성(MUI) → 상태관리 라이브러리 세팅(Recoil) → API 연..

NextJS의 강점은 바로 CSR/SSG/SSR/ISR을 모두 사용가능하며, 이를 이용한 SEO 향상 및 많은 장점들이 있습니다. 오늘은 간단하게 위 네가지의 사용법과 차이점에 대해서 알아보겠습니다. 먼저 코드로 부터 간단하게 보겠습니다. 1. CSR (Client-Side-Rendering) - 동적으로 변화하는 컨텐츠들을 계속 실시간으로 빠르게 변화시켜줄 수 있다 - 페이지 초기 로딩시 불러오는 데이터에 따라 로딩이 느릴 수 도 있으며, 새로고침시 페이지 깜박 거림발생 - SEO(Search-Engine-Optimization, 검색엔진최적화)에 약하다. 이는 웹서비스에 있어 치명적일 수 있다 function Csr(){ useEffect(() => { // 데이터 호출 }, []) return ( ..

오늘은 NextJS의 장점중 하나인 Dynamic route를 사용해보겠습니다. Dynamic route를 사용하게 된 이유는, 다양한 종류의 라우팅을 처리해야하는데, 그 때마다 app/pages 에 새로운 페이지를 추가해줘야하는 것이 매우 비효율적이었기 때문입니다. 지금 까지 dynamic route를 사용하지 않고 페이지를 추가해왔던게 매우 시간낭비였던 것임을 깨닳았네요 ㅎㅎ.. 그럼 간단한 사용법부터 알아보겠습니다. 사용할 폴더에 []를 사용하여 파일을 생성해줍니다. 저는 make라는 폴더에 생성할 것이고, 이후에 url이 .../make/test 와 같이 된다면, dynamic route를 통해서 [id]에 해당하는 페이지로 이동하게 될것입니다. 여기서 id는 원하는 변수로 지정할 수 있으며 이는..

PWA란 Progressive Web App의 줄임말입니다. 쉽게 웹사이트를 앱처럼 사용할 수 있도록 해주는 것입니다. 기존의 웹사이트들을 핸드폰에서 실행할 경우 성능상의 문제로 좋지 않은 경험을 느꼈을 수 있습니다. 하지만 PWA를 이용한다면 네이티브앱과 비슷한 성능의 앱처럼 사용할 수 있습니다. 제가 PWA를 사용하게 된 이유는 2가지입니다. 1. 웹사이트 주소를 매번 입력하여 들어오기 번거로우며, 해당 사이트의 특정 기능을 앱처럼 사용하고 싶다. 2. 핸드폰 푸쉬알림을 이용하여 사용자들의 서비스 질을 높이고 싶다. 이번 글에서는 NextJS로 만들어진 프로젝트를 PWA로 적용하는 법을 다뤄보겠습니다. ■필요한 library 설치하기 npm i next-pwa yarn add next-pwa ■web..