끄적끄적

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

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

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을 빌드 시점에서 만들..