전체 글 (24) 썸네일형 리스트형 [Next.js] 5. Server Action, Form 1. 서버액션서버액션은 서버에서 수행되는 비동기 함수이다.서버액션은 form 상태관리, 캐싱, 유효성검사 관련하여 next에서 새롭게 제시하는 솔루션이다. form 데이터로 서버의 데이터 변경하는 작업을,중간 API 레이어 없이 서버에서 동작하는 함수를,클라이언트에서 직접 실행시킬 수 있다.즉, 클라이언트에서 웹서버의 함수를 직접 호출하여 서버의 데이터 변경이 가능하다. 서버액션의 핵심은 API Routes를 대체한다는 것이다.서버액션을 사용하면 클라이언트에서 API Routes 직접 호출 없이, 웹서버를 통해서 바로 실행이 가능하다. 서버액션을 이해하면서 두가지 궁금증이 생겼다.하나는 데이터 패칭과 어떤 점이 다른지와다른 하나는 서버액션의 장점이 기존방식보다 늘어난 통신과정의 증가를 감수할 만큼인가?.. [Next.js] 4. Data Fetching, Caching, ISR 1. Data Fetching백엔드 API나 데이터베이스 등 외부 소스에서 데이터를 가져오는 과정을 말한다.가져온 데이터를 기반으로 페이지나 컴포넌트를 렌더링한다. Data Fetching은 렌더링 위치에 따라 둘로 나눌 수 있다.하나는 서버이고, 다른 하나는 클라이언트이다. 2. 서버에서 Data Fetching+ 다이나믹 API 사용이 없는 라우트는 프리랜더링된다. (static page의 형태로 프리랜더링)(다이나믹 API : cookies, headers, searchParams...)1. fetch APIexport default async function Page() { const data = await fetch('https://api.vercel.app/blog') const posts.. [Library] API개발이 아직, MSW 0. Mocking, Service WorkerService Worker : 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다.서비스 워커의 개발을 통해서 효과적인 오프라인 경험 생성, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따른 응답 전달, 서버의 자산 업데이트, 푸시 알람과 백드라운드 동기화 API 로의 접근이 가능합니다. 1. MSWMSW : 서비스워커를 사용하여 HTTP 네트워크 호출을 가로채는 API 모킹 라이브러리 브라우저에 기생해서 마치 백엔드API 인척하면서요청에 가짜 데이터를 응답해주는 녀석 도입 사례1. 프론트엔드 UI개발과 백엔드 API개발이 동시에 진행될 때! (백엔드API가 없다!)(특히! 백엔드의 API 제작이 .. response.json()? MSW를 공부하면서 handlers를 제작하던 중내가 직접 response를 설정해 주고, fetch 받는 과정에서몇가지 의문이 생겨 글을 쓰게 되었다. 1. 습관처럼 쓰는 fetch 코드async funtion fetchFunction(){ const response = await fetch('https://api.movie.com/data'); const data = response.json(); console.log(data);} 지금까지 습관처럼 쓰던 fetch 코드는 위와 같았다.누군가 만들어 놓은 API를 사용할 때, 그냥.. 이렇게 하면.. 데이터가 나왔었다... 습관처럼 쓰던 fetch에서 내가 놓치고 있던 중요한 두가지 포인트는1. 위의 fetch는 기본적으로 GET 요청을.. [Next.js] 2+α. Props(params, query) props 활용 방법을 알아보자!활용 방법은 컴포넌트 종류(서버, 클라이언트)에 따라 다르다. 1. {params, searchParams}서버 컴포넌트에서 params, query 정보를 얻고싶을때 사용된다.비동기처리 해야 한다!export default async function Group({ params, searchParams,}: { params: { id: number }; searchParams: { level: number; size: number };}) { // group > [id] > page.tsx // http://localhost:3000/group/1?level=6&size=15 const paramsInfo = await params; console.l.. [Next.js] 2+α. Modal 모달제작을 통해서인터셉팅 라우트와 페러렐 라우트를 이해해보자! 0. Modal?리액트에서 모달을 구현하기 위해서는 useState 혹은 전역상태를 사용해야만 했다. 그러나 Next.js에서는 "인터셉팅 라우트"와 "페러렐 라우트"를 조합하면별도의 상태없이도 모달 구현이 가능하다. (+default.tsx) 1. Intercepting RouteA페이지에서 B페이지로 이동하고자 한다.원래라면 B페이지로 이동해야 하는데A페이지에서 B페이지로 이동할 때, B페이지 말고 C페이지를 보여주고 싶을 때(페이지 이동은 soft navigation event를 의미한다.) 현재 주소를 기준으로! (A페이지에서! 라는 기준이 중요하다)이동은 세그먼트를 기준으로! 폴더 이름 앞에 (.) (..) (..)(..) (..... [Next.js] 3. client component, CSR, SSR, sever component "use client"는 클라이언트 컴포넌트를 만들기 위해서,"use server"는 서버 액션을 만들기 위해서 사용한다.서버 컴포넌트는 없다.app directory 안에 있는 모든 컴포넌트들은 기본적으로 서버 컴포넌트이기 때문이다. 서버 컴포넌트가 클라이언트 컴포넌트가 되지 않도록클라이언트 컴포넌트로 빼줄 수 있는부분은 그때그때 _component 폴더로 빼주자! 1. client component, CSR 뿐이던 시절유저가 웹에 접속하면,리액트 실행에 필요한 코드를 다운받고, 리액트 컴포넌트 트리를 만들고, 트리를 바탕으로 DOM에서 렌더링을 진행한다. 이 방식으로는 유저가 초기 화면을 보기까지 시간이 오래 걸린다. 2. SSR 등장클라이언트가 DOM을 만들지 않는다.서버가 DOM을 만들고 클.. [Next.js] 2. App Router 프레임워크의 모든 부분은 라우터를 중심으로 설계되어야 합니다.페이지 전환, 데이터 가져오기, 캐싱, 데이터 변경 및 재검증, 스트리밍, 콘텐츠 스타일 지정 등-nextjs.org/blog/next-13-4- 0. setupnpx create-next-app@latestTS - YESLint - Ysrc/ - Yapp router - Y alias - N : @/* 외 경로 별칭 사용 여부... 1. 기본구조public : 정적에셋 저장 장소 ( / 경로로 접근 가능하다.)src : 모든 소스코드 저장 장소 ( @/로 바로 접근 가능하다. (../../../ 안해도 된다.) )ㄴapp : 주소 관련 저장 장소 next.config.ts tsconfig.json ... 2. Page Router vs Ap.. 이전 1 2 3 다음
