FrontEnd/Next

이전 블로그에서는 Next/Image를 사용하여 드라마틱한 성능 개선을 이루었다.이번 블로그에서는 드라마틱한 성능 개선은 아니겠지만 폰트 최적화 및 트리 셰이킹을 통해 좀 더 개선을 해보려고 한다. font 최적화  Lighthouse에서 위와 같은 경고를 볼 수 있었다.이에 관련하여 해결하기 위해 FOIT와 FOUT에 대해 알아볼 필요가 있었다. FOIT(Flash of Invisible Text) FOIT란 웹폰트가 로드되는 동안 텍스트가 일시적으로 사라지는 현상을 말한다. font-display 속성을 지정해 주지 않으면 웹폰트가 아직 로드되지 않은 상태에서 해당 폰트를 사용하는 텍스트가 기본 시스템 폰트로 표시되다가, 웹폰트가 로드되고 나서야 해당 폰트로 교체되는 현상이라고 할 수 있다. FOUT..

프론트엔드에서 굉장히 중요한 작업 중 하나가 UX 최적화일 것이다. UX 최적화를 판단할 때 사용자들이 서비스와 얼마나 빠르게 인터렉션 할 수 있는지가 매우 중요한 요소이다. 우선 내가 하고있는 프로젝트의 위 장소 상세 페이지 초기 성능을 Lighthouse로 측정해보았다. 여러번의 측정 결과 대략 68~72점으로 좀 아쉬운 점수이다. jpeg 포맷의 이미지 2개를 받아오는데 드는 용량은 약 1MB로 상당히 큰 것을 확인할 수 있었다. 해당 페이지에서는 큰 이미지 2개를 슬라이더 형식으로 띄워주고 있으므로, 이미지 관련 Optimization만 잘 해줘도 성능을 좀 더 올려줄 수 있을 것 같다. img 태그 대신 Next/Image 흔히 이미지를 UI에 띄우기 위해 img 태그를 사용하곤 한다. 하지만 ..

프로젝트에서 소셜로그인을 구현하자는 얘기가 나왔고, 우선 카카오 로그인을 구현하기로 정했다. 먼저 Kakao developers 에 어플리케이션을 추가하자.그 후 사이드바의 앱 키 탭을 눌러보면  위와 같이 4개의 키를 얻을 수 있다.필수로 사용해야 할 키는 REST API 키와 JavaScript 키이다. 해당 값들을 환경변수로 다음과 같이 등록해놓자. NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY='Your JAVASCRIPT KEY'NEXT_PUBLIC_KAKAO_REST_API_KEY='Your REST API KEY 만약 추가 보안을 원한다면 보안 탭에서 Client Secret를 사용한다 (여기서는 일단 패스) . 다음으로 플랫폼 탭으로 이동 후  위에서 사용할 사이트 도메인과, ..

프론트 단에서 데이터를 효율적으로 관리하는 것은 매우 중요하다.이를 위해 Cache를 흔히 활용한다. 이번에는 Next 에서 Cache를 효율적으로 활용하기 위해 공부해보자. Request Memoization 공식문서에 따르면 요청 url과 options가 같은 fetch api 에 대해서 자동으로 기억(memoize) 한다고 나와있다.   즉, 위 그림처럼 동일한 endpoint로의 API fetch가 여러 컴포넌트에서 수행된다면 Request memoization이 동작한다.따라서 API fetch 결과를 props drilling 하지 않고, 각 컴포넌트에서 fetch를 진행해도 실제 API 요청은 최초 1번만 시행된다. 다만, memoization은 서버에서 호출되는 GET 요청에 한해서 적용되..

CEOS 에서 진행하는 프로젝트를 이제 곧 시작하게 된다. 우리는 고민 끝에 Next 도입의 필요성을 느꼈고, Next와 이에 최적화 되어있는 TailwindCSS를 사용하기로 하였다. 왜 Next를 선택하였나? Next는 기본적으로 SSR(Server Side Rendering)에 최적화 되어있는 프레임워크라고 잘 알려져있다. CSR(Client Side Rendering) CSR은 우리가 흔히 알고있는 create-react-app 으로 쉽게 세팅할 수 있다. 위 사진은 CSR의 동작 방식을 나타낸다. 사용자가 페이지에 접속하면 클라이언트(브라우저)가 이를 인지하여 서버에 해당 데이터들(HTML, JS코드 등)을 요청한다. 브라우저가 데이터를 받게 되면 JS파일을 다운로드한 후 페이지를 보여준다. 모..