📌 PROJECT/2305 Next.js Documentation : 번역 썸네일형 리스트형 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 번역 작업하기 - 과정 후기 번역한 파트 BuildingYourApplicaton / Optimizing / Index (메인 화면) -> 번역본 BuildingYourApplicaton / Optimizing / Fonts -> 번역본 BuildingYourApplicaton / Optimizing / Images -> 번역본 BuildingYourApplicaton / Optimizing / Metadata -> 번역본 BuildingYourApplicaton / Optimizing / Scripts -> 번역본 Optimizing: Scripts | Next.js Using App Router Features available in /app nextjs.org 되돌아보며 나의 최종 PR이 merge되면서 설레는 마음으로 시작했.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] pull을 통한 브랜치 최신화 번역 프로젝트 첫 포스팅의 브랜치 최신화에 대한 내용 중에서 이번 포스팅은 브랜치 최신화 방법 중 pull을 사용한 내용에 대한 기록이다. 해당 포스팅 발췌 내용 브랜치 최신화 시키기 ... (생략) 📌 간단한 버전 : Pull git pull 명령어는 git fetch와 git merge를 합친 것이 다. git fetch는 원격 저장소의 최신 변경 사항을 가져오고, git merge는 가져온 변경 사항을 현재 브랜치에 병합한다. a. 'git pull upstream main'을 통해 원본 레포지토리의 업데이트 내용을 Pull한다. b. 충돌한 게 있다면 해결한다. c. 'git push origin [내가 작업 중인 브랜치명]'을 통해 pull 해온 commit들을 push해준다. a. 원본 레포지.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 스크립트 (Scripts) 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Script를 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 스크립트 최적화 레이아웃 스크립트 여러 라우트에서 써드파티 스크립트를 로드하려면 next/script를 가져와서 스크립트를 레이아웃 컴포넌트에 직접 포함시키면 됩니다. // app/dashboard/layout.tsx import Script from 'next/script'; export default function Dashbo.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 메타데이터 (Metadata) 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Metadata를 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 메타데이터 동적 이미지 생성 요구 사항 : Next.js v12.2.3 이상. ImageResponse 생성자를 사용하면 JSX 및 CSS를 사용하여 동적 이미지를 생성할 수 있습니다. 이것은 오픈 그래프 이미지, Twitter 카드 등과 같은 소셜 미디어 이미지를 만드는 데 유용합니다. ImageResponse는 Edge Ru.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 이미지 (Images) 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Images를 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 이미지 최적화 예시 이미지 컴포넌트 Next.js 이미지 컴포넌트는 HTML의 엘리먼트를 확장하여 다음과 같은 기능을 제공합니다 : 향상된 성능: 최신 이미지 형식을 사용하여 각 디바이스에 대한 적절한 크기의 이미지 제공 시각적 안정성: 자동으로 누적 레이아웃 이동(CLS) 방지 더 빠른 페이지 로드: 이미지가 뷰포트에 들어갈 때만.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 글꼴 (Fonts) 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Fonts를 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 글꼴 최적화 next/font는 개인 정보 보호 및 성능 향상을 위해 자동으로 글꼴(사용자 정의 글꼴 포함)을 최적화하고 외부 네트워크 요청을 제거합니다. 🎥 : next/font 자세한 사용법 알아보기 → 유튜브(6분) next/font에는 모든 글꼴 파일에 대한 자동 자체 호스팅이 내장되어 있습니다. 다시 말해서, 기본 CSS s.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 최적화 > 메인 화면 아래는 Next.js 번역 프로젝트에 참여하게 되면서 내가 맡게 된 Optimizing 챕터의 메인 화면을 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 최적화 Next.js는 애플리케이션의 속도와 Core Web Vitals를 개선할 수 있도록 설계된 다양한 내장 최적화 기능을 제공합니다. 이 가이드는 사용자 경험을 향상시키기 위해 활용할 수 있는 최적화 기능을 다룹니다. 내장 컴포넌트 내장 컴포넌트는 일반적인 UI 최적화 구현의 복잡성을 추상화합니다. 다음과 같은 컴포넌트가 있.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 베타 번역 프로젝트] 이미지 생성 (Image Generation) -> 정식 버전에서 챕터 삭제됨 아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Image Generation을 번역한 내용입니다. * 마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다. * 내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다. * 해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다. 23.05.06. 정식 문서에서 해당 챕터의 내용는 Metadata 챕터의 일부로 이동되었습니다. 이미지 생성 요구 사항 : Next.js v12.2.3 이상. 생성자 ImageResponse를 사용하면 JSX 및 CSS를 사용하여 동적 이미지를 생성할 수 있습니다. 이것은 Open Graph 이미지, Twitte.. 📌 PROJECT/2305 Next.js Documentation : 번역 [Next.js 번역 프로젝트] 오픈소스 기여한 과정 (단계) 관심은 있었지만 쉽게 진입할 수 없었던 Next.js 프레임워크와 관련하여 좋은 기회로 현재 나온 betadocs을 (23.5.5.자로 정식 docs로 편입되었다. ㅎㅎ) 번역해보자는 스터디가 만들어져서 잽싸게 신청을 했다. 설레쟈나~~ Next.js란? Next.js는 React 기반의 서버 사이드 렌더링 및 정적 사이트 생성을 위한 프레임워크이다. 사용자가 빠르게 React 애플리케이션을 구축하고 최신 웹 개발 표준을 준수하는 것이 가능하다. 기본적으로 서버 사이드 렌더링을 지원하며, 필요한 경우 정적 사이트 생성 기능을 사용할 수도 있다. 파일 시스템 기반의 라우팅과 코드 스플리팅을 지원한다. Next.js의 가장 큰 장점 중 하나는 이미지와 CSS 파일과 같은 정적 에셋을 자동으로 최적화하여 더 .. ⬆︎ 이전 1 다음
