분류 전체보기

[Next.js] page router 사전 렌더링과 데이터페칭

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.10) 사전 렌더링과 데이터페칭React app 에서의 데이터 페칭리액트 앱은 CSR로 브라우저가 렌더링을 직접 처리하는 방식으로 동작했다.따라서 FCP 시점으로 오기까지도 오래 걸린다. 리액트 앱에서 데이터 페칭은 컴포넌트가 마운트된 이후에 진행되기 때문에 FCP 이후에 추가적인 시간이 소요된다.즉, 데이터 요청 시점이 느려지게 되는 단점 발생 Next.js의 다양한 사전 렌더링1. 서버사이드 렌더링(SSR)사전 렌더링의 과정 중에 데이터 패칭을 동시에 수행할 수 있다.따라서 데이터를 요청하는 시점이 매우 앞서기 때문에 사용자에게 데이터 패칭이 이미 완료된 웹페이지를 추가적인 로딩 없이 보여줄 수 있다.이는 가장 기본적인 사전 렌더링 방식이고,..

[Next.js] page router 페이지별 레이아웃 설정

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.8) 페이지별 레이아웃 설정하기페이지별로 특정 Layout 컴포넌트를 적용하는 방법import SearchableLayout from "@/components/searchable-layout";import style from "./index.module.css";import { ReactNode } from "react";export default function Home() { return ( 인덱스 H2 );}Home.getLayout = (page: ReactNode) => { return {page};}; 페이지마다 특정 Layout 컴포넌트를 적용해야 할 때가 있는데, 그럴 때는 getLayout 메..

[Next.js] page router - API Routes

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.5) API Routes2.5 API RoutesAPI Routs란?Next.js 앱에서 API를 구축할 수 있도록 도와주는 기능마치 백엔드 API 서버가 하는 일고 동일하게 간단한 API를 구축해서 브라우저로부터 요청을 받아 데이터베이스에서 데이터를 꺼내온다던가 아니면 다른 서드파티에 데이터를 불러와서 전달을 해준다는 등의 동작을 만들 수 있다. API Routes 실습pages/api 아래에 API 경로로 만들고 싶은 이름으로 파일 만들어준다. (ex api/time 으로 하고 싶으면 time.ts)import type { NextApiRequest, NextApiResponse } from "next";export default functi..

[Next.js] page router - 프리페칭

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.4) 프리페칭2.4 프리페칭프리페칭(Pre-Fetching)이란?현재 보고 있는 페이지에서 링크들을 통해 이동할 수 있는 모든 페이지들의 자바스크립트 코드를 사전에 미리 다 불러오는 기능 프리페칭이 필요한 이유사전 렌더링 파트에서 원래 Next.js에서 초기 접속 요청이 발생하면 서버가 브라우저에게 html 페이지를 응답한 이후에 후속으로 모든 자바스크립트 코드를 번들 파일 형태로 전달을 해주고, 모든 자바스크립트 코드를 번들 파일 형태로 전달해주기 때문에 페이지 이동이 발생했을 때 서버에게 별도의 요청 없이 브라우저에서 자바스크립트 코드를 실행시켜서(클라인언트 사이드 렌더링) 알아서 처리를 한다고 했다. Next.js는 모든 자바스크립트 코드들..

[Next.js] Page Router, 설정, 네비게이팅

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.1) Page Router를 소개합니다.2.2) 페이지 라우팅 설정하기2.3) 네비게이팅2.1 Page Router를 소개합니다Page Router 란?많은 기업에서 활용되고 있는 가장 안정적인 라우터특정 조건을 기준으로 웹서비스 내에 페이지를 분할하고 또 그렇게 분할된 페이지 간의 이동을 처리하는 기능을 제공파일의 이름(혹은 폴더의 이름)을 기반으로 페이지 라우팅을 제공 동적 경로/page/1, /page/2... 처럼 가변적인 값을 포함하고 있는 경로(블로그 게시글 주소 등)/page 폴더 하단에 [id].js 로 대괄호를 통해 만들어줄 수 있다. npx(node package execute)라이브러리들이 실제로 올라가있는 서버인 npmjs...

[Next.js] Next.js?

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 1.1) Next.js를 소개합니다.1.2) Next.js 사전렌더링 이해하기1.3) 실습용 백엔드 서버 세팅하기1.4) 본격적인 학습에 앞서Next.js 라는 기술은 어떤 특징을 가지고 있는가?Next.js- Next.js : 리액트만을 위한 리액트 전용의 웹 개발 프레임워크 기존의 리액트 기술 + 페이지 라우팅 + 다양한 최적화 기능 등등의 추가 기능들을 몇 개 덧붙여 놓은 리액트의 확장판 vercel에서 개발Framework vs LibraryNext.js는 리액트 전용의 웹 개발 프레임워크이지만, React는 UI 개발을 위한 라이브러리이다. 1. 기능 구현의 주도권이 누구에게 있는가Framework : 주도권을 Framework가 가..

[리팩터링 2판] 리팩터링 카탈로그 보는 법(ch5)

ch5 리팩터링 카탈로그 보는 법리팩터링 형식- 이름 : 이름은 리팩터링 용어를 구축하는 데 중요하다. - 개요 : 리팩토링의 핵심 개념 -> 원하는 리팩터링을 찾을 때 도움 될 것이다.- 배경 : 리팩터링 기법이 왜 필요한지, 그 기법을 적용하면 안 되는 상황을 설명- 절차 : 리팩터링하는 구체적인 과정- 예시 : 해당 리팩터링 기법을 실제로 적용하는 간단한 예와 효과

[리팩터링 2판] action point(ch4)

Ch4. 테스트 구축하기테스트를 프로그래밍을 시작하기 전에 작성하면 좋은 점 : 테스트를 작성하다 보면 원하는 기능을 추가하기 위해 무엇이 필요한지 고민하게 되며, 구현보다 인터페이스에 집중하게 된다. 게다가 코딩이 완료되는 시점을 정확하게 판단할 수 있다.TDD : 테스트를 작성하고, 이 테스트를 통과하게끔 코드를 작성하고, 결과 코드를 최대한 깔끔하게 리팩터링하는 과정을 짧게 반복.리팩터링 하고 싶다면 테스트가 반드시 필요하다-> 따라서 테스트가 갖춰지지 않은 코드를 리팩터링해야 한다면, 곧바로 리팩터링 하지 않고, 먼저 자가 테스트 코드부터 작성해야 한다.테스트 작성- 실패해야 할 상황에서는 반드시 실패하게 만들자. -> 수많은 테스트를 실행했음에도 실패하는 게 없다면 테스트가 내 의도와는 다른 방..

[함께자라기] action point

함께 자라기 애자일로 가는 길(김창준)1. 자라기멘토 혹은 사수가 서로 상반된 의견을 준다면 이러한 상반된 의견과 정보 속에서 스스로 생각하는 훈련을 해야 한다.1만 시간의 법칙에서 1만 시간은 ‘자신의 기량을 향상시킬 목적으로 반복적으로 하는 수련’을 한 시간이다.애자일 철학을 활용하여 일하는 도중에도 의도적 수련을 할 수 있다.자기가 습득한 지식이나 능력은 복리로 이자가 붙는다 -> 자기계발이 중요하다.어떻게하면 더하기보다 곱하기를 더 많이 할 수 있을까?(가용시간을 늘리고 쓸데없이 낭비되는 시간을 줄이고, 잠자는 시간을 줄이는 것은 더하기적 사고이며, 집단의 지능을 높이는 것이 곱하기적 사고이다) (39-40p)1. 자신이 이미 갖고 있는 것들을 잘 활용해야 한다. 새로운 것을 유입시키는 데에만 집..