yoosmg

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. Context 만들기 import React from 'react'; import { createContext } from 'react'; const NewContext = createContext(); 2. Context를 사용하려는 컴포넌트 트리 최상위에 Provider 컴포넌트 배치하기 export default function MyContext() { const username = 'Dr.Context'; const [isLogin] = useState(false); return ( ); } 3. useContext 사용해 등록한 데이터 읽어오기 function Component() { const { username, isLogin } = useContext(NewContext); retur..

메시지 구조 커밋 메시지는 제목, 본문(선택 사항), 바닥글(선택 사항) 세 부분으로 구성됩니다. 레이아웃은 다음과 같습니다. 더보기 type: Subject body footer 제목은 메시지 타입과 제목으로 구성됩니다. 타입 타입은 제목에 포함되며 아래 타입 중 하나를 선택합니다. 더보기 - feat: 새로운 기능 - fix: 버그 수정 - docs: 문서 변경 - style: 서식, 세미콜론 누락, 기타 등; 코드 변경 없음 - refactor: 프로덕션 코드 리팩토링 - test: 테스트 추가, 테스트 리팩토링; 프로덕션 코드 변경 없음 - chore: 빌드 작업, 패키지 매니저 구성 등 업데이트, 기타 등; 프로덕션 코드 변경 없음 제목 제목은 50자를 넘지 않아야 하며, 대문자로 시작하고 마침..

클라이언트 사이드 렌더링(CSR) 자바스크립트로 DOM을 조작하여 브라우저에서 HTML을 렌더링하는 방식입니다. 프로세스는 다음과 같습니다. 서버에 HTTP 요청이 이루어집니다. 서버는 요청을 수신한 후, 번들된 자바스크립트와 함께 빈 HTML shell을 클라이언트에 전송하여 응답합니다. 클라이언트는 빈 HTML shell을 수신하고, 모든 자바스크립트를 처리합니다. 자바스크립트는 DOM을 광범위하게 수정하여 최종 사용자에게 최종 HTML을 렌더링 합니다. 즉, 서버가 아닌 브라우저에서 자바스크립트를 처리하여 HTML로 렌더링 하는 것을 말합니다. CSR의 장점 CSR의 장점은 본질적으로 SSR과 정반대입니다. 전체 HTML 페이지가 클라이언트에서 자바스크립트로 빌드되므로, 인터랙티브 한 기능에 ..

Post 페이지 - Headtitle 추가하기 pages/posts/[id].js 파일 상단에 임포트를 추가하고 태그를 추가한다. // Add this import import Head from 'next/head'; export default function Post({ postData }) { return ( {/* Add this {/* Keep the existing code here */} ); } 날짜 형식 지정하기 date-fns 라이브러리를 사용해 보려고 한다. npm install date-fns 하여 설치 후 components/date.js 파일을 생성하고 Date 컴포넌트를 추가한다. date-fns 웹사이트에서 다양한 format() 문자열 옵션을 확인할 수 있는데 이번엔 'Ja..

마크다운 콘텐츠를 렌더링 하려면 remark 라이브러리를 사용하면 된다. (npm install remark remark-html). 그리고 remark 사용을 위해 lib/posts.js를 업데이트해준다. remark엔 await을 사용해야 하므로 getPostData에 async 키워드를 추가해 주었다. import { remark } from 'remark'; import html from 'remark-html'; export async function getPostData(id) { const fullPath = path.join(postsDirectory, `${id}.md`); const fileContents = fs.readFileSync(fullPath, 'utf8'); // Use g..

우선 lib/posts.js 하단에 getPostData 함수를 추가한다. 이 함수는 id를 기준으로 게시물 데이터를 반환할 것이다. export function getPostData(id) { const fullPath = path.join(postsDirectory, `${id}.md`); const fileContents = fs.readFileSync(fullPath, 'utf8'); // Use gray-matter to parse the post metadata section const matterResult = matter(fileContents); // Combine the data with the id return { id, ...matterResult.data, }; } pages/po..

이제 id값이 포함된 배열을 반환하 함수를 생성해줘야 한다. lib/posts.js를 열고 하단에 다음과 같이 getAllPostIds 함수를 작성한다. 이 함수는 posts 디렉터리에 있는 파일 이름의 목록(.md 파일 제외)을 반환한다. export function getAllPostIds() { const fileNames = fs.readdirSync(postsDirectory); // Returns an array that looks like this: // [ // { // params: { // id: 'ssg-ssr' // } // }, // { // params: { // id: 'pre-rendering' // } // } // ] return fileNames.map((fileNam..

앞서 index 페이지에 블로그 데이터를 불러왔으니 이제 개별 페이지를 만들어 보자. 해당 페이지의 URL이 아래 사진처럼 외부 블로그 데이터에 따라 달라지게 하려면 어떻게 해야할까? 외부 데이터에 따라 경로가 달라지는 페이지를 정적으로 생성하면, 동적 URL이 활성화된다. 단계 살펴보기 우선 각 포스트 경로는 /posts/로 설정하자. 여기서 는 posts폴더 내 마크다운 파일의 이름이다. 파일명이 ssg-ssr.md와 pre-rendering.md므로, 경로는 /posts/ssg-ssr 및 /posts/pre-rendering이다. 우선 pages/posts 아래에 [id].js 페이지를 만든다. [ ] 형태의 페이지는 Next.js의 다이나믹 라우트를 의미한다. 앞서 만든 다른 페이지와 마찬가지로..