jfmam 개발 블로그

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..

덩어리 콘텐츠 빨리그리기 (LCP 최적화) 뷰포트(above page)의 컨텐츠 중 가장 큰 영역을 차지하는 이미지나 텍스트 사용자 중심의 페이지로드 속도를 판단하는 지표로 사용 그렇다면 어떻게 해야 빠르게 파싱하여 LCP를 줄일 수 있을까? css 최적화 이미지최적화 LCP 문제해결 방법 라이브러리 의존 줄이기 → 렌더 차단리소스 줄이기 youmightnotneed (https://youmightnotneed.com/date-fns ) 해당사이트를 방문하면 사용하지 않는 라이브러리를 제거해서 사용하는법을 알려준다. 웹폰트 preconnect, css preload preconnect: 미리 연결해서 준비를 해놓고 필요한 내용을 나중에 사용할 수 있게한다. DNS, TCP, TLS 왕복에 필요한 시간을 ..

개요 LCP와 CLS에 용어에 대해 이해하고 브라우저 렌더링을 최적화 시키는 방법에 대해 알아보자 CLS란? 사용자 경험을 측정하는 대표지표로 개발자 도구(lighthouse)를 통해 검사 할 수 있다. cumulative layout shift라는 의미로 페이지거 랜더링 되고 나서 새로운 DOM이 추가 되는 등에 의한 요인으로 페이지 콘텐츠가 흔들리는 경우 발생하게 된다. 이러한 문제는 사용자가 예를 들어 버튼을 누르려다가 밀리면서 다른 버튼을 누르게 되는 등 사용자 경험을 떨어뜨리기 때문에 CLS를 방지하는 것은 중요하다. CLS 발생 요인 DOM이 추가 되는 경우: DOM이 추가 되면서 사용자가 다른 버튼을 누르게 되는 경우 FOUT, FOIT: 스타일 되지 않는 폰트가 나오다가 스타일이 뒤늦게 일..

핵심 사용하지 않는 css를 제거하고 css가 렌더링을 차단하지 않게 설정한다 사용하지 않는 css 제거하는 방법 구글 light house 활용하기 문제 Remove unused css 이슈 발생 해결방법 vertical dots에서 coverage tab을통해 unused css를 찾을 수 있다. purgecss를 통해 빌드 시 사용하지 않는 클래스들을 삭제한다. 추후에 자세한 사용방법에 대해 알아봐야겠다 렌더 블록킹 리소스 제거 defer html parsing 중단없이 빠르게 진행하며 script 다운로드를 동시에 실행한다 HTML parsing이 중단없이 진행되기 때문에 화면에 나타나는 것이 빠르다 script 실행은 parsing이 끝난 후에 실행된다. async 다운로드가 끝나면 스크립트를 ..

크로스 브라우징이란? 다양한 브라우저에서 UI가 깨지지 않고 나오게 한다. 브라우저마다 제공하는 기능에 차이가 생기는 경우 기능이 제대로 동작하지 못하는 경우가 발생 할 수 있다 프로젝트를 진행하면서 safari, firefox, chrome, samsung internet, edge 에서 정상적으로 작동하는 웹을 만들고자 사용한 방법들에 대해 정리한다. 크로스 브라우징 적용방법 caniuse에서 지원하는 기능인지 검색하기 css초기화를 통해 모두 같은 UI를 보여줄 수 있게 한다.caniuse 검색하기프로젝트 코드 작성 시 브라우저 환경에 따라 제공하는지 안하는지 알려주는 사이트이다. 링크: https://caniuse.com/css 초기화 하기대부분의 초기화 css 코드는 쓸모없거나 덮여 쓰여지기 때..

이미지 마크업 최적화 브라우저에서 이미지를 불러와 다운로드하게 될 때 용량이 작을수록 최적화를 할 수 있다. 최적화 하는 방법에 대해 알아보자 정적이미지 최적화 히어로이미지 같은 정적이미지의 경우 확장자를 webp로 사용하여 저장하거나 Tinypng 사이트를 이용하여 용량을 줄인적 있다. webp 변환 TinyPng 사이트 이용하기Webp 확장자 사용하기webp확장자를 사용할 경우 png나 jpg 확장자 보다 일반적으로 50%의 용량을 줄일 수 있게된다. 현재 거의 모든 브라우저에서 지원함으로 사용할 수 있다. 현재 ie를 제외한 모든 브라우저에서 지원함으로 webp를 사용하자 sharp 라이브러리를 사용하여 확장자를 webp로 변경 할 수 있다. 링크: https://www.npmjs.com/packa..