doeunn.log

API란? Application Programming Interface의 약자로, 응용 프로그래밍 인터페이스라고 해석할 수 있습니다. 쉽게 말해, 컴퓨터나 컴퓨터 프로그램 사이의 연결을 의미합니다. 즉, 연결을 어떻게 할 것인가에 대한 정의라고 보면 되겠습니다. Frontend Service - Backend Service 간의 연결 Frontend가 만드는 영역을 Frontend Service, Backend가 만드는 영역을 Backend Service라고 하겠습니다. 이 두 가지가 서로 연결될 때 API가 활용됩니다. Frontend Service는 고객과 닿아있고, Backend Service는 DB에 닿아있습니다. 고객이 DB에 접근하기 위해 FE와 BE가 연결되어야 하고, 이때 API를 활용합니..

Dynamic Routes 저번 글에서 다양한 페이지들을 만들었지만 slug를 활용하면 slug에 어떤 값이 들어오든 동적으로 화면을 다룰 수 있었습니다. 그런데 slug 값으로 주었지만 실질적으로 그 slug에 따라 다르게 보여야만 우리가 의도한 바를 보일 수 있을 것입니다. [slug] 값은 어떻게 활용할 것인가? Next.js에서 제공하고 있는 ('next/router') useRouter라는 함수가 있는데요. 이 훅을 이용하여 router를 꺼내고 거기에서 slug를 꺼내볼 수 있습니다. 1 2 3 import { useRouter } from 'next/router' const router = useRouter() const { slug } = router.query cs 📜 src/pages/..

Router Routing은 흔히 네트워크 용어로 많이 사용되며, 특정 주소가 있고 그 주소에 접근하면 그 주소와 매칭되어 있는 데이터들을 받아서 사용하는 일련의 과정을 Routing이라고 합니다. 그 일을 도와주는 도구를 Router라고 합니다. React에서는 별도의 Router를 제공하지 않기 때문에 react-router라는 라이브러리릍 통해 구현합니다. Next.js의 Router는 file-system 기반입니다. 즉, file을 만들면 그것이 즉각적으로 router로 인지되어 주소와 매핑됩니다. pages/ 혹은 src/pages/ 에서 Router 기능을 사용할 수 있습니다. ❓pages/index.js 와 src/pages/index.js 둘 다 있다면? 뭐가 우선순위를 가질까? 직접 해..

Pages Next.js 프로젝트 구조 안에서 pages 안에 있는 폴더가 url과 1:1 혹은 1:N 매칭이 됩니다. Pre-rendeers와 SEO Next.js는 모든 페이지를 기본적으로 pre-render 합니다. pre-render는 말 그대로 미리 그려놓는다는 의미인데요. pre-rendering은 처음 클라이언트 쪽에서 html을 로드할 때 이미 많은 부분이 그려진 상태에서 로드를 하는 것이고, 이후에 JS 번들이 load가 되면 그제서야 Hydration이라는 과정을 거쳐 사용자와 app이 인터랙션을 할 수 있게 됩니다. html만을 가지고는 인터랙션을 할 수 없습니다(JS 코드들이 있어야 하죠?). JS 코드를 적용하는 것을 Hydration이라고 합니다. pre-render가 없는 경우..

Data Fetching Fetching = 가져오기 즉, Data Fetching은 데이터를 가져오는 작업을 말합니다. 왜 시작부터 Data Fetching인가? 화면에 무엇인가 그리려면 결국 어디선가 Data를 가져와야 합니다. 즉, 화면을 구성하기에 앞서 Data Fetching이 먼저다 !라고 생각하면 되겠습니다. Next.js가 제시하는 3+1 가지 Data Fetching 방법 ▪️ SSR ▪️ CSR ▪️ SSG ▪️ ISR 1) SSR (Server Side Render) 서버가 그린다라는 의미로, 서버가 어디선가로부터 데이터를 가져와서 그린다라는 의미 정도가 되겠습니다. Next.js에서 SSR을 담당하는 함수 : getServerSideProps 1 2 3 4 5 6 7 8 9 10 1..

Next.js 공식 홈페이지 Next.js by Vercel - The React Framework for the Web Used by some of the world's largest companies, Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds. nextjs.org 들어가보게 되면 웹을 위한 React 프레임워크라고 설명하고 있습니다. 또한 아래 설명으로는 일부 세계 최대 기업에서 사용하는 Next.js를 사용하면 최신 React 기..