yoosmg

과 같은 페이지의 메타데이터를 수정하려면 어떻게 해야 할까? 은 하지만 소문자 First Post ); } http://localhost:3000/posts/first-post 에 접속하면 브라우저 탭에 "First Post"라고 표시된다. 개발자 도구를 확인해보면 title 태그가 에 추가된 것을 확인할 수 있다. 추가학습필요 - Head 컴포넌트에 대해 더 자세히 알아보기위해 next/head에 대한 API reference를 확인하기 - lang 속성을 추가하는 등 태그를 사용자 정의하려면 pages/_document.js 파일을 생성하여 사용자 정의할 수 있음(Custom Document 참조).

Next.js에서는 최상위public 디렉토리에 있는 정적 에셋(static assets)을 사용할 수 있다. pages처럼 root에서 참조할 수 있다. public에 me.png를 추가하면, 다음과 같이 이미지에 액세스할 수 있다: import Image from 'next/image' export function Avatar() { return } 디렉터리 이름은 꼭 public이어야 하며 변경할 수 없다. 이곳이 정적 에셋을 제공하는 데 사용되는 유일한 디렉토리다. 그리고 빌드 시점에서 디렉토리 내에 있는 에셋만 제공된다. 런타임 시 추가된 파일은 사용할 수 없다. 영구 파일 저장이 필요하다면 AWS S3와 같은 타사 서비스를 사용하는 것이 좋다. 이미지 추가하기(일반적인 경우) HTML tag..

일반적으로 웹사이트와 웹 애플리케이션은 많은 다양한 페이지로 구성된다. 이제 애플리케이션에 페이지를 추가하는 방법을 살펴보자. Next.js의 페이지 Next.js에서 페이지란 디렉터리 안에 있는 파일에서 익스포트 한 React 컴포넌트다. 페이지는 파일 이름을 기반으로 경로와 연결된다. 아래는 예시다. pages/index.js는 / 경로에 연결된다. pages/posts/first-post.js는 /posts/first-post 경로에 연결된다. pages/posts/first-post.js를 생성하여 어떻게 작동하는지 살펴보자. 새 페이지 만들기 posts 디렉터리 안에 first-post.js파일을 만들고 아래와 같이 입력해 보자. (컴포넌트 이름은 어떻게 지어도 괜찮지만, export defa..

Next.js app 생성하기 Next.js 앱을 생성하려면 터미널을 열고 앱을 생성하려는 디렉터리에 다음 명령을 실행해 준다 npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" 개발서버 실행하기 이제 nextjs-blog라는 새 디렉터리가 생겼다. npm run dev 실행하고 http://localhost:3000에 접속하면 다음 페이지가 표시된다. 이 페이지는 Next.js에 대한 유용한 정보를 보여주는 스타터 템플릿 페이지. 페이지 편집하기 스타터 페이지를 편집하려면, Next.js 개발 서버가 실행 중인지 확인한다...

Next.js는 웹 애플리케이션을 제작하기 위한 빌딩 블록을 제공하는 flexible 한 React 프레임워크다. 이게 정확히 무엇을 의미할까? React와 Next.js가 무엇이며 어떻게 도움이 되는지 알아보자. 웹 애플리케이션의 빌딩 블록 최신 애플리케이션을 구축할 때는 고려해야 할 몇 가지 사항이 있다. 예를 들면 다음과 같다: ✔️ User Interface - 사용자가 애플리케이션을 소비하고 상호 작용하는 방식. ✔️ Routing - 사용자가 애플리케이션의 여러 부분을 탐색하는 방법. ✔️ Data Fetching - 데이터 위치 및 데이터 가져오는 방법. ✔️ Rendering - 정적 또는 동적 콘텐츠를 렌더링 하는 시기와 위치. ✔️ Integrations - 사용하는 타사 서비스(CMS..

nvm install => curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash check list => nvm ls-remote choose what you want => nvm use v16.19.1 confirm => node -v

Error code @firebase/firestore: Firestore (9.17.1): Uncaught Error in snapshot listener: FirebaseError: \[code=permission-denied\]: Missing or insufficient permissions. Solution Cloud Firestore내 Rules의 config를 다음과 같이 변경한다. (상황에 맞게 택1) // 1. for Test mode // Allow read/write access to all users under any conditions // Warning: **NEVER** use this rule set in production; it allows // anyone to over..