doeunn.log

어떻게 해야할까? Page가 필요하겠네? 여러 input들을 받을 수 있는... API도 필요하겠네? file에 저장할 input을 전달받을... 서버에서 실제로 파일을 저장할 writePost 함수도 필요하겠네? 작성이 성공하면 해당 page로 가는 Link도 제공하면 좋겠군... 우선 필요한 파일들을 생성해 봅시다 pages/post/write.js Page 추가 pages/api/post/write.js API 추가 lib/posts.js 안에 writePost 함수 추가 먼저 글을 쓸 수 있는 페이지를 구성해 봅시다 글을 쓸 수 있는 form이 있는 페이지를 만들어보겠습니다. 📜 pages/post/write.js import { useRef } from 'react' import Layout f..

지난 포스팅에서 md 파일들에 있는 데이터를 읽어와서 SSG를 통해 렌더링을 했었습니다. 만약! 추가로 다음과 같은 요구사항이 있다면 어떻게 해야할까요? SSG를 사용해서 url: /posts/ssg-ssr 이면 posts/ssg-ssr.md를 읽어서 보여준다 url: /posts/pre-rendering 이면 posts/pre-rendering.md를 읽어서 보여준다 → /pages/posts/[slug].js 가 떠올랐어야 합니다. post의 제목들 자리에는 dynamic하게 들어가야 하기 때문에 slug를 활용해야겠습니다. SSG를 활용해서 다이나믹한 page 들을 생성하려면? getStaticPaths가 필요합니다. getStaticPaths는 생성해둬야 하는 페이지 정보를 배열로 반환합니다. 요..

Next.js를 활용하면 페이지별로 Pre-rendering 방식을 선택할 수 있다 특정 페이지 별로 이곳은 SSG, 저기는 SSR 이런 식으로 가변적으로 사용할 수 있습니다. 또 아예 Pre-render를 안 하고 싶다고 하고 CSR에서 하도록도 선택할 수 있습니다. getStaticProps를 사용하면 SSG getServerSideProps를 사용하면 SSR SSG(Static Site Generation)를 사용하면 좋은 페이지 Marketing pages Blog posts E-commerce product listings Help and documentation 위 네 가지 모두 전반적으로 정적일 수 있고 자주 바뀌지 않는 데이터들일 것입니다. 정적으로 만든다면 새로 배포하기 전까지 새로 바뀔..

public 정적 리소스를 Next.js로 서빙하기 위한 디렉토리입니다. Image Component vs 이미지를 화면에 렌더링할 수 있는 방법은 위와 같이 두 가지입니다. 1. 로드될 때 유형과 크기가 다르다 아래 이미지는 제가 컴포넌트에 ``와 ``를 같이 렌더링하여 네트워크 탭에서 확인한 결과입니다. 보시면 형식 자체가 달라졌는데요. 태그로 이미지를 로드한 경우는 png, 컴포넌트로 로드한 경우에는 webp라는 유형으로 로드가 되었는데요. webp는 구글에서 만든 이미지의 포멧입니다. png나 jpeg보다 훨씬 가볍게 동일 혹은 더 좋은 화상의 이미지를 제공할 수 있는 포멧입니다. 크롬에서는 wepb를 알아서 제공하기 때문에 최적화된 이미지 포멧으로 제공을 하게 됩니다. 용량도 좀 더 적도 더 좋..

Hook React에서 기존에 사용하던 Class형 컴포넌트에서 사용되던 메소드들 없이도 함수형 컴포넌트에서 Hook을 통해 상태 관리와 여러 기능을 사용할 수 있도록 만든 기능입니다. Hook 탄생 배경 React 컴포넌트는 클래스형 컴포넌트 & 함수형 컴포넌트로 나뉘었는데요. 기존의 개발 방식은 일반적으로 함수형 컴포넌트를 주로 사용하되, state나 life cycle method를 사용해야 할 때에만 클래스형 컴포넌트를 사용하는 방식이었습니다. 그렇게 사용했던 이유는 클래스형 컴포넌트의 어려운 클래스 문법, 어려운 축소, 어려운 로직의 재사용성이라는 단점이 존재하지만, state나 life cycle method를 사용하기 위해서는 클래스형 컴포넌트를 사용해야만 했었기 때문인데요. 이러한 불편함을..

보통 React를 배운다고 하면 react-router-dom이라는 라이브러리를 가장 먼저 알게 되는 것 같은데요. 오늘은 이 쓸 줄만 알았던 react-router-dom의 동작원리에 대해서도 알아보고! v6가 되면서 변경된 사항까지도 알아봅시다 :) React Router React에서 Router라는 건, 웹 페이지를 다시 로드하지 않고 (즉, 새로고침 X) 사용자 요청에 따라 애플리케이션의 다른 부분 또는 다른 페이지로 이동하는 프로세스입니다. 그건 그렇다치고... React Router가 필요한 이유는? 여러 페이지를 넘나들 때 웹 페이지를 다시 로드하지 않으면서 이동하기 위해서인데요. React에 router 없이도 페이지 이동은 가능합니다! 다만, 이전 페이지로 돌아온다고 했을 때, 그 이전..