끄적끄적

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

요즘 기술 스택들을 보면 React-query를 쓰는 걸 참 많이 보는 것 같다. 그래서 React-Query가 뭔지 봤더니 더보기 Server Data 와의 동기화, 캐싱, 업데이트 등을 쉽게 다룰 수 있는 라이브러리이다. 먼저 왜 쓰는지 부터 알아보자. ● 캐싱 Caching 반복적인 데이터 호출을 방지하고, 불필요한 API콜을 하지 않아 준어 어플리케이션 속도에 긍정적이다. ● 서버 데이터 ↔ 클라이언트 데이터 분리 프로젝트의 규모에 따라 다르겠지만 어느정도 규모가 생기다보면 무자게 많은 데이터,상태 관리를 해야 하는데 서버에서 받아서 사용하는 data와 ui 관리하는 data 등 많은 데이터가 실제로 동시에 관리되고 혼잡스러워진다. 사실 이부분이 나에게 있어 가장 react-query를 사용해보고..

React 18이 발표되면서 Suspense가 나왔었습니다. 시간이 좀 지나긴 했지만, 이제라도 한번 알아볼까 합니다. 우선 React Suspesnse는 어떤 데이터를 받아오는 동안 랜더링 순서를 변화하거나 대기하며 다른 로딩화면 같은걸 띄워놓고 데이터 패칭이 완료되면 데이터를 이용한 완성된 UI를 보여준다는 느낌? 역할 인 것 같다. 이와 비슷한 역할로 그동안 작성해왔던 방법은 fetching 상태를 가지고 있는 true | false 의 상태 값을 이용하여, 데이터 받아오기가 완료되면 다시 상태를 바꾸고, 그걸로 랜더링을 조종하는 방식 이었습니다. 예를 들어 다음과 같이 짤 수 있겠죠. function App(){ const [loadingState, setloadingState] = useStat..

NextJS 의 14버전이 발표됐습니다. 13이 나오고 몇달마다 계속 새로운 업데이트가 되고있으면서 이번에 또 14버전이 나왔습니다. 역시나 프론트엔드 생태계는 정말 빠르게 변화하고 발전하고 있다는게 실감이 됩니다. 먼저 새롭게 나온 14버전의 달라진 점을 확인해보겠습니다. 공식문서에 발표된 내용을 살펴보겠습니다. ①Turbopack - 최대 53% 더 빠른 로컬 서버 시작 - 빠른 새로고침으로 최대 94% 더 빠른 코드 업데이트 ②서버 작업(안정) - 캐싱 및 재검증과 통합 - 간단한 함수 호출 또는 기본적으로 양식에서 자동 ③부분 사전 렌더링(미리보기) - 빠른 초기 정적 응답 + 스트리밍 동적 콘텐 서비스가 규모가 커지거나 코드의 양이 많아지면 로컬에서 실행하며 개발 할때 가장 스트레스 받는게 속도..

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

사실 Next를 써야 한다해서 그냥 쓰지, 쓰다보니 기본적으로 제공되는 장점이나 무엇때문에 편했는지, 빨랐는지는 알지 못한 채 사용하는 경우가 있습니다.저 또한 프로젝트에 투입될때 처음으로 Next를 경험했고, 이미 Next로 작성된 코드들을 수정하다보니 막상 뭐가 좋은지, 잘쓰고 있는건지 전혀 알지 못한채 사용 하고 있었습니다.그래서 오늘은 Next를 사용함으로써 얻는 기본적인 장점들 및 기본 개념을 한번 살펴보려고 합니다.① SSG(Static Site Generation) 과 SSR(Server-Side Rendering)SSG와 SSR 모두 서버 사이드 렌더링 (SSR) 을 의미하긴 하지만, 약간 다른 개념이다. SSG는 Next.js의 기능 중 하나로, 미리 정적인 HTML을 빌드 시점에서 만들..