본문 바로가기

프론트엔드50

[공식문서] NextJS - Assets, Metadata, and CSS #9 레이아웃 개선하기 지금까지 우리는 개념을 설명하기 위해 최소한의 React 및 CSS 코드만 추가했습니다. 데이터 가져오기에 대한 다음 레슨으로 이동하기 전에 페이지 스타일링 및 코드를 개선해 보겠습니다. components/layout.module.css 업데이트 먼저, components/layout.module.css를 열고 다음과 같이 더 다듬어진 레이아웃 및 프로필 사진 스타일로 내용을 바꾸세요. .container { max-width: 36rem; padding: 0 1rem; margin: 3rem auto 6rem; } .header { display: flex; flex-direction: column; align-items: center; } .backToHome { margin: 3.. 2023. 8. 17.
[공식문서] NextJS - Assets, Metadata, and CSS #8 전역 스타일(Global Styles) CSS Modules는 컴포넌트 레벨 스타일에 유용합니다. 하지만 모든 페이지에 대해 CSS를 로드하려면 Next.js에서도 지원하고 있습니다. 전역 CSS를 애플리케이션에 로드하려면 pages/_app.js라는 파일을 다음 내용으로 생성하세요: export default function App({ Component, pageProps }) { return ; } _app.js의 기본 내보내기는 모든 페이지를 애플리케이션 내에서 래핑하는 최상위 React 컴포넌트입니다. 이 컴포넌트를 사용하여 페이지 간에 상태를 유지하거나 여기에서처럼 전역 스타일을 추가할 수 있습니다. _app.js 파일에 대해 자세히 알아보세요. 개발 서버 재시작 중요 : pages/_app.j.. 2023. 8. 17.
[공식문서] NextJS - Assets, Metadata, and CSS #7 레이아웃 컴포넌트 만들기 먼저, 모든 페이지에서 공유될 Layout 컴포넌트를 만들어보겠습니다. 먼저 components라는 최상위 디렉토리를 생성하세요. components 디렉토리 내부에 layout.js라는 파일을 다음 내용으로 생성하세요: export default function Layout({ children }) { return {children}; } 그런 다음, pages/posts/first-post.js 파일을 열고 Layout 컴포넌트를 가져오고 가장 바깥쪽 컴포넌트로 사용하세요: import Head from 'next/head'; import Link from 'next/link'; import Layout from '../../components/layout'; export d.. 2023. 8. 16.
[공식문서] NextJS - Assets, Metadata, and CSS #6 CSS 스타일링에 대해 이제 이야기해보겠습니다. http://localhost:3000에 접속하면 이미 index 페이지에 일부 스타일이 적용된 것을 볼 수 있습니다. 파일 구조를 살펴보면 styles라는 폴더가 있고 그 안에 두 가지 CSS 파일이 있는데요: 전역 스타일시트 (globals.css)와 CSS 모듈 (Home.module.css)입니다. 프로젝트에 이러한 파일이 없는 경우 다음 링크에서 스타터 코드를 다운로드할 수 있습니다: npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/assets-metadata-css-starter" CSS 모듈 CSS .. 2023. 8. 15.
[공식문서] NextJS - Assets, Metadata, and CSS #5 서드파티 JavaScript 서드파티 JavaScript는 서드파티 출처에서 추가되는 모든 스크립트를 가리킵니다. 일반적으로 서드파티 스크립트는 분석, 광고 및 고객 지원 위젯과 같은 새로운 기능을 사이트에 도입하는 데 사용됩니다. 이러한 기능은 처음부터 작성할 필요 없이 사용할 수 있습니다. 서드파티 JavaScript 추가하기 Next.js 페이지에 서드파티 스크립트를 추가하는 방법에 대해 알아보겠습니다. 에디터에서 pages/posts/first-post.js 파일을 열고 다음 줄을 찾아보세요: 메타데이터 외에 가능한 빨리 로드하고 실행해야 하는 스크립트는 일반적으로 페이지의 이 스크립트에는 페이스북 SDK가 포함되어 있으며, 일반적으로 페이스북 소셜 플러그인 및 기타 기능을 도입하는 데 사용됩니다.. 2023. 8. 15.
[공식문서] NextJS - Assets, Metadata, and CSS #4 Metadata(메타데이터) 만약 과 같은 페이지의 메타데이터를 수정하려면 어떨까요? 은 First Post ← Back to home ); } http://localhost:3000/posts/first-post에 접속해보세요. 브라우저 탭에는 이제 "First Post"라고 표시될 것입니다. 브라우저의 개발자 도구를 사용하여 에 title 태그가 추가된 것을 볼 수 있을 것입니다. Head 컴포넌트에 대해 더 알아보려면 next/head의 API 참조 문서를 확인하세요. 만약 태그를 사용자 정의하려면(예: lang 속성 추가) pages/_document.js 파일을 생성하여 할 수 있습니다. custom Document 문서를 확인하여 더 알아보세요. 2023. 8. 15.
[공식문서] NextJS - Assets, Metadata, and CSS #3 Assets(자산) Next.js는 이미지와 같은 정적 에셋을 최상위 public 디렉터리 아래에서 제공할 수 있습니다. public 내부의 파일은 페이지와 유사하게 애플리케이션의 루트에서 참조될 수 있습니다. public 디렉터리는 robots.txt, Google 사이트 인증 및 기타 정적 에셋에도 유용합니다. 정적 파일 제공에 대한 자세한 내용은 정적 파일 제공 문서를 확인하세요. 프로필 사진 다운로드 먼저 ,프로필 사진을 가져오겠습니다. 프로필 사진을 .jpg 형식으로 다운로드하세요(또는 이 파일을 사용하세요). public 디렉터리 안에 images 디렉터리를 생성하세요. 사진을 public/images 디렉터리에 profile.jpg로 저장하세요. 이미지 크기는 약 400px x 400px 정.. 2023. 8. 15.
[공식문서] NextJS - Assets, Metadata, and CSS #1 추가한 두 번째 페이지에 현재 스타일이 적용되어 있지 않습니다. 페이지에 스타일을 위한 CSS를 추가해 보겠습니다. Next.js는 CSS와 Sass에 대한 내장 지원을 제공합니다. 이 강좌에서는 CSS를 사용할 것입니다. 이번 강좌에서는 이미지와 같은 정적 자산(asstes), 그리고 태그와 같은 페이지 메타데이터를 Next.js가 어떻게 처리하는지도 배우게 될 것입니다. 이번 강좌에서 배우게 될 내용 이번 강좌에서는 다음과 같은 내용을 배울 것입니다: Next.js에 정적 파일 (이미지 등)을 추가하는 방법. 각 페이지의 안에 들어가는 내용을 사용자 정의하는 방법. CSS Modules을 사용하여 스타일이 적용된 재사용 가능한 React 컴포넌트를 생성하는 방법. pages/_app.js에서 전역 C.. 2023. 8. 15.
[공식문서] NextJS - Assets, Metadata, and CSS #2 이전 강좌를 계속 진행 중이라면, 이 페이지를 건너뛸 수 있습니다. 다음 페이지로 이동하려면 아래 Next 버튼을 클릭하세요. 스타터 코드 다운로드 (선택 사항) 이전 강좌를 계속하지 않는 경우, 아래에서 이번 강좌의 시작 코드를 다운로드하고 설치한 다음 실행할 수 있습니다. 이를 통해 nextjs-blog 디렉터리를 설정하여 이전 강좌의 결과와 동일하게 만들 수 있습니다. 다시 말하지만, 이전 강좌를 완료한 경우에는 이 과정이 필요하지 않습니다. npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/assets-metadata-css-starter" 그런 다음 명.. 2023. 8. 15.

티스토리툴바