📌 PROJECT 썸네일형 리스트형 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 1주차 KPT : 모두가 같은 마음일 수는 없다. 그리고.. 모두가 같은 마음일 수는 없어, 그건 당연해. 직장을 다니기는 했지만 커뮤니케이션 적으로 문제가 생긴 적은 단 한 번도 없었다. 학교에서는 각자의 업무가 별개여서 안내만 하면 되는 것이었고 보통은 그 업무에 대한 것은 업무 담당자가 가장 잘 알기에 관리직을 제외하고는 말을 얹을 이유가 없는 부분이었다. 특히 나의 경우, 정보 부장을 맡았을 때도 사실 정보부엔 나 혼자(ㅋㅠㅠ)였기 때문에 내가 정보부의 대소사를 결정하고, 사업 신청하고, 예산 집행하고, 시스템을 구축하여 회의 시간에 통보만 하면 되는 문제였다. 하지만, 본격적으로 팀 프로젝트를 하면서 같은 장소, 다른 마음, 각자의 전문성을 가진 사람들과 협업하여 하나의 방향을 잡고 하나의 결과를 만들어야 하는 것은 정말 쉽지 않은 부분이라는 생각이 들었.. 📌 PROJECT/2307 제로힙 : 가계부 SNS Next.js : npx next start npx next start npx next start CLI는 Next.js 애플리케이션이 프로덕션 모드로 시작할 수 있게 하는 명령어다. Next.js 프로젝트에서 해당 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾으면 아래와 같다. 즉, npx next start를 실행했을 때 어떤 코드가 작동하는 지를 찾아보려고 한다. 찾아가는 과정 사실 npm run start? yarn start 와 같이 프로덕션 모드로 시작하게 해주는 Next.js 스크립트를 먼저 찾아야 했다. 따라서 가장 기본 문서인 getting-started의 installation에서 start와 관련한 설명을 찾았다. next.js/docs/01-getting-started/01-installa.. 📌 PROJECT/2307 제로힙 : 가계부 SNS [기획 단계] 프론트엔드 기술 스택 최종 선정 및 이유 프로젝트에 본격적으로 들어가기 전에, 어떤 기술 스택을 사용해야 하는가? 그리고 왜 사용해야 하는가? 에 대해 팀 차원에서의 자료 조사 및 (필요한 경우) 블로그 포스팅 후 최종 회의를 진행했고 결정된 스택들은 아래와 같다. 프론트엔드 사용 기술 스택 ⬆️ 기술스택 3D 관계도 제작 정보 포스팅 패키지 매니저 npm 선택한 이유 : 우선 패키지 매니저의 경우, 성능을 고려한다면 pnpm이나 현재 팀 구성원의 기술 숙련도를 고려하여 기존에 사용한 npm으로 선정하게 되었다. (다음 프로젝트에서는 꼭 pnpm을 사용하고 싶다!) 비교 과정 요약 : yarn berry : 직접 의존하고 있지 않은 모듈을 require()하는 유령 의존성에 관한 문제를 해결하기 위한 Plug'n'Play(PnP)라는 새로운 패.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 기술 스택 선정 고민 : Vite vs Next.js 앞서 포스팅한 번들러 스택 선정 고민에서 내린 결론은 아래와 같았다. 즉, 우리 프로젝트에서 서버 사이드 렌더링(SSR)이 더 효율적이라면 Next.js를, 클라이언트 사이드 렌더링(CSR)이 더 효과적이라면 Vite를 쓰는 것이다. 하지만, 이와 같은 단편적인 이유 뿐만 아니라 종합적인 pros and cons를 비교하기 위해 포스팅을 하며 개념을 정리해보고자 한다. CRA와 Vite CRA (과거 공식 문서 참고) Create-React-App(이하 CRA)는 React 애플리케이션을 쉽고 빠르게 생성하기 위한 공식적이었던(과거형) 툴체인이다. 프로젝트 구성, 개발 서버, 번들링 등을 사전 구성하여 별도의 설정 없이 React 애플리케이션을 시작할 수 있도록 해준다. 즉, 프론트엔드 빌드 파이프라인을.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 기술 스택 선정 고민 : 번들러 부제 : 스스로 불러들인 재앙 발단 : 본격적으로 메인 프로젝트에 들어가기 전에 프론트엔드 팀원들과 스택 선정에 대해 심도깊은 논의를 해보고 싶었다. 전개 : '일단 저지르고 보는 파'인 나는 팀원들에게 아래와 같은 제안을 하였다. 절정 : 역시 사랑스러운 우리 팀원들은 흔쾌히 오케이! 를 외쳐주셨다. 하지만, 5번과 6번의 개념은 나와 같이 너무나 생소한 분야라고 하시는 것 같아 잽싸게 '제가 할게요' 찬스를 썼다. 결말 : 따라서 머리를 싸매며 '번들러'와 '빌드' 등과의 개념과 열심히 맞서 싸우며 정보의 바다를 헤엄치는 중이다. 하지만, 결론적으로는 프로젝트에 들어가기 전에 꼭 필요한 개념이다! 빌드란? 빌드는 배포를 하기위한 선행과정으로 작성한 코드와 애플리케이션이 사용하는 이미지, css등을 모.. 📌 PROJECT/2307 제로힙 : 가계부 SNS [기획 단계] 제로힙 프로젝트 기획서 작성 기획서 검토 회의 드디어 메인 프로젝트가 시작되었다! 우리 팀 같은 경우에는, 프론트엔드는 미리 다 스카웃이 된 상태였고 백엔드 팀원만 구하면 됐었다. 프리 프로젝트 회고 때 만난 분들 등 웬만한 분들께 제의를 드려보았지만 이미 팀이 구성되어 있는 상황이었고, 팀 빌딩 시간 때 열심히 홍보를 해서 백엔드 분 3명을 모집할 수 있었다. 기획과 문서 작업, 사용 스택 등은 이미 어느 정도 정리된 상태였기 때문에, 팀 모집 역시 작성된 기획서를 위주로 홍보를 했고, 그렇게 결성된 팀의 첫 회의 주제는 '기획서 검토하기'였다. [노션] '기획서 검토' 회의 기록 보러가기 -> 해당 기획서를 같이 검토하며, 기술적인 구현 부분이나 더 수정/보완 등 아이디어를 정교화하는 작업을 진행했다. 노션을 활용한 검토 아래와.. 📌 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 2 다음
