나보단 잘하자

최근, 입사 후 첫 PR을 보냈다🎉 매번 master 브랜치나 깃헙 기준 main 브랜치에서 add, push 만 할 줄 알았지 깃을 알지 못했다고 봐도 무방하다. 실제 협업은 어떻게 이루어지는지 흐름을 정리해보려고 한다. 1. 자신이 수정 한 사항은 master 브랜치가 아닌 다른 브랜치를 따서 작업한다. master 브랜치 등 원본이 있는 브랜치는(통합 master라고 부르겠다) 절대 직접적으로 건드려서는 안된다. master 브랜치는 언제나 배포 가능한 상태, 안정적인 상태여야 한다. 브랜치를 딴다는 말은 브랜치를 새로 생성한다는 말이다. 기본적으로 작업 할 브랜치의 이름은 기능에 따라 feature, bugfix등으로 정한다. 아마 회사마다의 컨벤션이 있을 것이다. // 브랜치 생성 git bra..

웹페이지를 브라우저가 아닌 서버에서 보여지게 하는 방법이다. 서버는 완전히 렌더된 페이지를 클라이언트에게 보낸다. 클라이언트의 자바스크립트 번들은 vue.js 앱을 하이드레이트 하게 해준다. 이를 prerendered와 hydrate라고 하는데, prerendered는 서버사이드에서 seo를 위해 미리 보여줄 부분을 렌더링 하는 것이고, hydrate는 이후에 자바스크립트 파일들로 필요한 부분을 클라이언트에서 렌더링 하는 것이다(추가 설명). Node.js 서버 필요 자바스크립트 환경은 웹페이지를 렌더링 하기 위해 필요합니다. Node.js 서버는 vue.js 앱을 실행하기 위해 구성됩니다. 서버의 실행과 관리 서버는 serverMiddleware를 통해 실행할 수 있고 middleware를 통해 라우트..

Context 와 Helpers Context 오브젝트는 asyncData, plugins, middleware 그리고 nuxtServerInit과 같은 특정 넉스트 함수에서만 사용할 수 있습니다. 가장 중요한 것은 context가 vuex store 나 connect 인스턴스같은 다른 분야의 넉스트 앱에 접근할 수 있게 해 준다는 것입니다. 때문에 context 내에는 서버사이드에서 사용 가능한 req와 res가 있고 스토어는 항상 가능합니다. 그러나 시간이 지나면 context는 다른 매우 유용한 변수들과 줄임말들로 확장 됩니다. 이제 우리는 context를 통해 환경 변수에 접근하는 옵션 만큼 개발모드에서HMR 기능, 현재 라우트, 페이지 매개변수와 쿼리에 접근할 수 있습니다. Default로 제공..

Views Views 부분은 데이터 설정과 넉스트 앱의 특정한 라우트의 뷰의 모든것을 설명합니다. 뷰는 앱 템플릿, 레이아웃 그리고 실제 페이지에 있습니다. 또한, SEO에 중요한 각각 뷰의 헤드 섹션에 들어가는 메타 태그를 정의할 수 있습니다! Pages 모든 페이지 컴포넌트는 뷰 컴포넌트지만, 넉스트는 최대한 앱을 쉽게 만들도록 하기 위해 특별한 속성과 함수들을 추가합니다. Layouts 레이아웃은 말 그대로 레이아웃. Default layout Default.vue 파일에 디폴트 레이아웃을 정의해둡니다. 이곳에 정의 된 레이아웃은 모든 페이지에 적용됩니다(특정한 레이아웃이 적용되지 않은)! 이 디폴트 레이아웃에 를 추가하면 마치 slot처럼 이 부분에 페이지 컴포넌트를 렌더링 합니다. Custom ..