jfmam 개발 블로그

Todo [] nextjs를 이용하여 github page를 배포한다. Git 환경설정 리포지토리 만들기 github page에서 리포지토리 생성(create repository) 이름을 xxx.github.io) 로 설정 (계정이름 뒤에 github.io를 붙여서 생성) github page 브랜치 설정하기 gh-pages 브랜치 생성하기 settings > pages > source 의 브랜치를 gh-pages로 변경 프로젝트 환경설정 nextjs를 이용하여 페이지를 만들었으나 github page는 정적사이트를 배포하는데 맞추어져 있음으로 ssr기능을 지원하게 된다면 다른 배포방법을 선택하는 것을 추천한다 nvm을 통해 현재 LTS 버전으로 변경 팀 프로젝트로 진행하는 상황이였기 때문에 node의 ..

commit 문제 프로젝트의 컴밋을 관리하고 잘 기록하는 것은 중요하다. 누군가 기록을 들여다 보았을 때 어떤 기능을 하는 commit인지만 보아도 코드 전체를 보지않고 이해 할 수 있기 때문이다. eslint나 prettier같은 경우도 코드스타일을 통일시키기 위한 노력으로 나왔다. 그리고 commit 또한 통일 시키고 더 자세하게 기록할 수 있게하면 잘 관리 할 수 있지 않을까? 라는 생각에서 commit lint 설정을 생각하게 되었다. TODO? commit message 작성법 commit lint Commit message 작성법 구조 template 타입: 작업 설명(subject) // 타입과 간단한 설명을 작성한다. 여기에 **최대 50자까지 변경 사항에 대해 설명하세요** 본문(opti..

앞으로의 개발에 필요한 버전관리와 브랜치 전략이 필요한 상태이다. 브랜치 전략을 세울시 가져가야할 장점과 고려해야 할 것은 무엇일까? 버전관리에 대한 개념과 왜 적용해야 되는지에 대한 이유가 필요하다. 브랜치 전략 팀 특징 production과 development의 소스코드 분리 두명의 개발자와 앞으로도 추가적으로 늘어날 가능성이 있음 → 개별적으로 코드를 작성하고 분리 할 수 있어야한다. 실제 배포가 되고 버그에 빠른 대응을 할 수 있어야 한다. 고객을 우선적으로 생각하여 고객의 반응을 살펴봐야 할 mvp 테스트가 초기에 필요하다. gitlab flow feature, master, (pre-production), production 으로 이루어진 브랜치 전략 (pre production은 옵션) 우..

개요 코드스타일 통일을 위해 rule을 추가 vscode에서 eslint나 prettier가 제대로 동작하지 않는 경우가 발생하였고 이를 해결하는 방법에 대해 알아보자 lint 적용 방법에 대해 간단한 정리 eslint eslint vscode에서 동작이 제대로 되지 않는 경우 setting.json에 코드 추가 Ctrl + shift + p 를 눌러 setting(JSON) 파일 실행 ... "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[typescript]": { "editor.formatOnSave": true, }, "eslint.alwaysShowStatus": true, "[typescriptreact]": { "editor...

Why monorepo? 컴포넌트 재사용 중복코드 방지 Lerna와 Yarn workspaces를 활용한 패키지 관리 Why berry? 파일의 크기를 줄인다. monorepo 설정 가능 zero install 패키지 중복설치 방지, 유령의존성 발생 x node_modules로부터 우리를 구원해 줄 Yarn Berry yarn berry 설정하기 nextjs 설치 프로젝트 repo로 이동 후 yarn berry ver 다운로드 yarn set version berry yarn 프로젝트 시작 yarn init typescript 설치하기 // root directory에서 실행 yarn add -D typescript package json에 package 추가하기 // apps 디렉토리를 만들어서 nex..

캐시 란? 캐시는 자주쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치다. 리소스 요청시의 문서의 사본이 존재하면 원 서버가 아니라 캐시로 부터 제공이 된다. 불필요한 데이터 요청을 줄인다. → 네트워크 요금 비용을 줄인다 병목현상을 해결한다 → 대역폭을 늘리지 않고 페이지를 빨리 불러온다. 원서버 요청을 줄여준다 → 서버의 부하를 줄이면서 더 빨리 response한다. 거리로 인한 지연을 줄여준다. 적중과 부적중 적중: 유효한 사본이 있을 경우 캐시적중이라고 하며 해당 사본으로 응답한다. 부적중: 유효한 사본이 없을 경우 원서버에 요청하여 새로운 사본을 받아 응답한다. 에러: 유효한 사본이 없을경우 원서버에 요청하는데 새로운 사본이 없을 경우 에러 발생 재검사 💡 신선도검사: 캐시의 경우 원서버의 ..

브라우저 원리 HTML parsing → Dom 생성 CSS parsing → CSSOM 생성 DOM + CSSOM → render tree 셍성 layout → 위치와 크기를 계산한다 paint → 화면상에 실제 픽셀로 변환하여 레이어를 만든다, 색 채워넣기 composite → 레이어를 합성하여 실제 화면에 나타낸다. Reflow, Repaint layout 과정과 paint과정이 자주 일어나게 되면 웹성능이 저하된다. layout과 print 과정을 피하는 방법에 대해 알아보자. Reflow 정의 기존의 엘리멘트의 크기나 위치가 변경되는 경우 DOM 과정부터 모든과정을 다시 계산하는 과정 성능을 가장 떨어트리게 되는 부분이며 성능최적화가 가장 많이 일어나는 곳이다. width, height, fon..

브라우저에 주소 입력 DNS를 통해 ip 주소를 받는다. 브라우저 ↔ 웹서버간의 HTTP 통신 tcp ip 통신 웹서버로부터 브라우저에 요청한 주소에 알맞은 리소스를 반환 받을 수 있게 메시지를 요청한다. 웹서버에 요청한주소에 알맞은 리소스 값을 찾은 후 존재할 시에 응답메시지를 보내준다. https://amunre21.github.io/web/1-site-works/ (자세한 내용) 웹서버에서 알맞은 리소스를 반환한다. 브라우저 리소스 html 파싱하기 브라우저 리소스 html 파싱하기 (5번) HTML parsing → Dom 생성 CSS parsing → CSSOM 생성 DOM + CSSOM → render tree 셍성 layout → 위치와 크기를 계산한다 paint → 화면상에 실제 픽셀로 변..