yoosmg

.env 파일에 숨겨둔 환경 변수를 불러올 때, 환경 변수 객체를 사용합니다. CRA (create react app)를 사용 중이라면, process.env를 사용합니다. ViteJS를 사용 중이라면, import.meta.env를 사용합니다. 예시: CRA: process.env.REACT_APP_API_KEY Vite: import.meta.env.VITE_API_BASE_URL Vite에서 env를 가져오는 방법에 대해 더 알아보려면 아래 링크를 확인하세요: Vite 환경 변수 및 모드

React와 Next.js는 웹 개발에서 서로 다른 용도로 사용됩니다. React는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리이며, Next.js는 서버 측 렌더링(SSR) 및 기타 최적화를 비롯한 추가 기능을 추가하기 위해 React 위에 구축된 프레임워크입니다. React와 Next.js 중 어떤 것을 선택할지는 프로젝트의 구체적인 요구 사항과 목표에 따라 달라집니다. 언제 React를 사용하나요? 정적 콘텐츠 : 애플리케이션이 작고 서버 측 렌더링이 필요하지 않으며 클라이언트 측에서 완전히 렌더링할 수 있는 경우 React만으로도 충분할 수 있습니다. 동적 콘텐츠가 적은 단순한 웹사이트나 애플리케이션이 이런 경우에 해당합니다. 단일 페이지 어플리케이션(SPA) : React는 대부분의..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

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..