Fe-Dev

Next.js에서는 HTML 파일을 서버에서 Pre-rendering 하여 정적인 HTML 파일의 경우 클라이언트에게 대기시간 없이 빠르게 화면을 표출하고 CSR(Cllient Side Rendering)의 단점인 SEO(Search Engine Optimization)부분에서도 이점을 가져올 수 있다. Next.js 에서 지원하는 Pre-Rendering 방식은 페이지 유형에 따라 다르게 사용할 수 있는 getServerSideProps와 getStaticProps 두가지가 있다. 1. getStaticProps 정적 사이트 생성(Static-Site-Generation, SSG)으로 빌드 시점에 서버에서 데이터를 가져와서 페이지를 렌더링한 후 만들어진 정적 html 파일을 클라이언트에게 제공하는 방식..

이번 포스트는 Next.js의 Pages Router에서 제공하는 라우팅 기능중 API Routes에 관해 정리하는 포스트이다. Next.js APP으로 MySQL을 연계하여 데이터를 핸들링 하기 위해 API Routes를 사용해보며 사용방법을 정리하려 한다. API Routes Next.js 는 API Routes를 사용하여 서버사이드 로직을 작성하고 API 엔드포인트를 생성하는 기능을 제공한다. API Routes를 사용하면 Next.js 어플리케이션 내에서 백엔드의 역할을 수행하는 API 엔드포인트를 간단하게 만들 수 있다. 1. /pages/api 디렉토리생성 첫번째로 Next.js 어플리케이션 루트 디렉토리 내에서 pages 디렉토리 안에 api 디렉토리를 생성한다. 이 디렉토리는 API Rou..

React.js 를 공부하다 보니 Next.js와 TypeScript를 자연스레 접하게 되었다. 이번 포스트는 Next.js의 기본적인 개념과 디렉토리 구조 및 Route에 대해 간략히 정리하는 글이다. Next.js 란? Next.js 는 간단하게 요약하면 React의 SSR(Server Side Rendering)을 구현할 수 있도록 도와주는 프레임워크이다. React는 기본적으로 SPA(Single Page Application)로 개발하며 CSR(Client Side Rendering)으로 렌더링 되기 때문에 사용자가 최초 접속하는 시점에 모든 js 파일을 로드하고 서버에서 데이터를 가져오기 때문에 처음 접속시 시간이 지연 될 수 있다. 뿐만 아니라 렌더링을 클라이언트쪽에서 하고 렌더링이 되기 전..

Open Graph 에 대해 간략히 정리하는 글이다. 카카오톡으로 링크를 공유하다보면 해당 링크의 미리보기 이미지와 사이트의 설명이 간략하게 나오는 것을 본 적이 있는데 meta 태그를 사용하여 Open Graph를 설정해주면 가능하다. 1. index.html 설정하는 방법은 정말 간단한데 index.html 에 아래와 같이 meta 정보를 입력해주면 된다. // 썸네일로 표출될 이미지의 경로를 넣어준다. // 사이트 네임 입력 //사이트 타이틀 입력(카카오톡 미리보기는 site_name 아니라 title이 미리보기로 표출됨) //사이트 설명 입력 간단한 설정으로 위와 같이 링크 미리보기가 표출되는 것을 확인할 수 있다. 2. 캐시 초기화 썸네일 이미지를 수정하거나 타이틀을 수정한 뒤에 카카오톡에서 바..

웹 스토리지(Web Storage) 중 로컬 스토리지(Local Storage)에 대해 간략하게 정리하는 글이다. 로컬 스토리지는 클라이언트의 브라우저에서 관리하는 저장소인데 세션 스토리지(Session Storage)와 차이점이 있다면 웹 페이지의 세션이 만료되면 데이터가 지워지는 세션 스토리지와 다르게 로컬 스토리지는 세션과 관계없이 만료일이 따로 없어 직접 삭제하지 않으면 영속성이 보장된다. 물론 동일한 PC에서 동일한 브라우저일때 보장이 되고 같은 웹사이트를 여러 창으로 띄웠을 때 창 별로 데이터를 관리하는 세션 스토리지와 다르게 로컬 스토리지는 창 간에 데이터가 공유되는 차이점도 있다. ✔︎ Local Storage 사용방법 1. 데이터 저장 로컬 스토리지에 저장되는 데이터는 기본적으로 key..

저번 글에 이어서 React Router 의 응용방법에 대해 간략히 정리하는 글이다. React Router 를 이용해 페이지 이동을 할 때 파라미터를 보내는 방법과 강제로 페이지를 이동하는 방법에 대해 정리하려 한다. ✔︎ Path Variable 첫번째로 path Variable 이다. 사용방법은 아래와 같다. Route에서 path에 ":" 을 붙이고 이어서 파라미터명을 넣어주면 된다. import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Ed..

React Router를 사용하여 page를 이동하는 방법에 대해 간략히 정리하는 글이다. React는 SPA방식으로 구성되어 있는데 Router 사용방법전에 MPA 와 SPA에 대해 짚고 넘어갈 필요가 있다. ✔︎ MPA(Multiple Page Application) 와 SPA(Single Page Application) MPA란 여러개의 페이지로 구성되어 있는 어플리케이션을 말한다. 클라이언트(브라우저)가 서버로 URL을 통해 페이지 요청을 보내면 서버는 클라이언트에게 요청 url에 맞는 페이지를 반환하여 표출한다. 페이지 이동을 할 때 화면이 깜빡이면서 페이지가 이동되는 것이 MPA의 특징이다. 반면 SPA의 경우 단일 페이지로 구성되어 있기 때문에 클라이언트가 서버로 URL을 통해 페이지 요청을..

Props Drilling 을 개선하기 위한 Context 사용법에 대해 간략히 정리한 글이다. ✔︎ Props Drilling 이란 ? PropsDrilling이란 하위 컴포넌트가 상위 컴포넌트로부터 받은 props를 따로 사용하는게 아니라 자신의 다른 하위 컴포넌트에게 오로지 넘겨주기만 하는 데이터 전달 과정을 말한다. 위 화면은 React를 공부하면서 인프런 강의를 듣고 만들고 있는 간단한 react app 이다. App 컴포넌트에 하위 컴포넌트로 DiaryEditor 와 DiaryList 가 있고 DiaryList는 게시글 list를 props로 받아 하위컴포넌트인 DiaryItem으로 구성되어 있다. 위 구조를 도식화 해보면 아래와 같다. 위 그림에서 App 컴포넌트가 게시글 list(diary..