Tech/NextJS

Next13의 서버 컴포넌트를 활용한 data fetching 방법에 대해 공부하다보면 상당부분이 react-query와 흡사하다는 것을 느낄 수 있다. Next13의 data-fetching 그리고 react-query Next 13 버전에서는 fetch() api를 지원하여 서버 컴포넌트 내부에서 data fetching이 좀 더 간편하도록 도와준다. fetch 옵션을 통해 캐싱 , revalidate 등의 기능도 쉽게 사용할 수 있다. 여기서 한가지 궁금증이 생겼다. 그렇다면 next13에서 react-query 사용할 필요가 없을까?? 보통 react-query를 사용하는 이유의 대부분이 next13의 fetch api가 지원하고있는 기능을 사용하기 위해서라고 생각한다. 캐싱, 동기화 및 업데이트..

Next를 접하면서 생긴 궁금증이 있다. Next는 서버 사이드 렌더링 기법을 사용하고 서버 사이드 렌더링은 서버에서 컴포넌트를 해석하여 사용자에게 보여줄 페이지를 구성한다. 별도로 구현한 백엔드 서버가 있는 것도 아닌데 여기서 서버는 어떤 서버를 말하는 것일까..? 궁금해서 찾아보게 되었다. 📌 서버란? 클라이언트의 요청에 응답하여 서비스를 제공하는 프로그램이다. 이때 제공하는 서비스에 따라 종류가 여러개로 나뉘게 된다. ex ) 웹 서버, db 서버, 캐시 서버 등 📌 웹 서버와 웹 애플리케이션 서버 서버의 다양한 종류가 있지만 관련 핵심인 웹 서버와 웹 애플리케이션 서버에 대해 얘기해보고자 한다. 🎇 웹 서버 ( Web Server ) 클라이언트로부터 http 요청을 받아 정적인 컨텐츠( html,..

개요 평소 스타일링 도구는 styled-components를 주로 사용했었으나 이번에 Next를 경험하게 되면서 가장 호환성이 좋은 tailwindCSS를 사용하게 되었다. 새로운 기술 투성이라 기록으로 남겨 기억하기 위해 작성하게 됐당 세팅 방법 1. 프로젝트 생성하기 $ npx create-next-app@latest my-project --typescript --eslint $ cd my-project 2. TailwindCSS 설치하기 $ npm install -D tailwindcss postcss autoprefixer $ npx tailwindcss init -p 설치 후 init 명령을 실행하면 tailwind.config.js와 postcss.config.js 파일이 자동 생성된다. 3...