Chunho’s DevLife

Next/Image를 사용하여 이미지 최적화를 하기위해 Next.js로 프로젝트를 진행하고 있지만, 게임 특성 상 Loaing  상태일 경우 loading indicator가 보여지는게 더 적합할 것 같아 프로젝트 전체적으로 CSR을 사용하고 있었다. 이 때, 적합한 페이지는 SSR을 적용해봐도 좋지 않을까 고민하다 상점 페이지에 SSR을 적용해본 뒤 CSR을 했을때와 어느정도의 성능 차이가 있고, 어떤 방식이 더 효율적일지 테스트를 해봐야겠다고 생각했다. 상점은 API에서 특히 더 많은 양의 데이터를 받고 있으며 렌더되는 이미지의 양도 많았다. 우선 React-Query를 사용하고 있는 환경에서 SSR을 적용하기 위해 공식문서에 나와있는 대로 SSR을 위한 초기 설정을 해주었다.https://tanst..

현재 협업을 진행하며, ClassName이 충돌하는 문제를 방지하기 위해서 그리고 컴포넌트 단위의 스타일링을 하기 위해 SCSS-Module 방식을 사용하고 있다. SCSS-Module을 사용하며, Swiper의 Pagenation Bullets에 Custom Stlye을 적용할 때, className을 찾지 못하는 Issue가 있었다. Module방식이 아닌, 일반적인 방식에서는 {_.map(products, (item) => ( ))} 위와 같이 슬라이드와 Pagenation Bullet을 만들어 준 뒤, Elemen탭에서 bullet을 선택했을 때 확인할 수 있는 .swiper .swiper-pagination { position: absolute; bottom: 65px } .swiper .swi..

소개 프로젝트를 시작할 때, 나는 Header, Nav, Section, 그리고 Footer로 기본 레이아웃을 구성했다. Nav는 항상 화면의 왼쪽 중앙에 고정되어야 했기 때문에, 화면을 Header, Section, 그리고 Footer로 나누어 설계했다. Header와 Footer의 높이는 고정되어 있었지만, Section은 나머지 영역의 100%를 차지해야 했다. 문제 레이아웃을 설정하고 Section의 높이를 100%로 지정했지만, 화면 높이를 꽉 채우지 못하는 문제가 발생했다. 이후 문제 해결을 위해 높이 값을 부모 요소인 html 및 body에 의존해야 한다는 점을 깨달았다. 원인 하지만 문제는 계속해서 발생했고, 개발자 도구를 사용하여 Elements 탭을 검사한 결과, html 및 body ..

Next/Image에서는 Lazy Loading, 이미지 사이즈 최적화, placeholder, 캐싱 등의 이미지 최적화 기능을 제공한다. lazy loading 기본적으로 다른 속성을 주지 않으면 lazy loading이 적용되어 뷰포트에 이미지가 들어왔을 때 이미지를 로드한다. 만약, loading prop에 ''eager' 값을 주면 뷰포트에 상관 없이 모든 이미지가 동시에 로드된다. 이미지 사이즈 최적화 디바이스 크기에 맞게 이미지의 사이즈가 조절되며, 용량이 작은 webp 포맷으로 변경되는 작업이 Next 서버에서 이루어지게 된다. placeholder CLS(Cumulative Layout Shift), 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder 기능을 제공한다. 이미지가 ..

처음 프로젝트를 시작할 때 Next13버전의 App dir은 Stable하지 않다는 이유로, App dir가 아닌 Pages dir를 사용하여 페이지 라우팅을 진행했었다. 이후 기획의 변경으로 프로젝트에 다국어를 지원해야 하는 상황에 직면했다. 이전에 했던 프로젝트 중에 다국어를 적용했었던 경험이 있어 어렵지 않게 적용할 수 있다고 생각했는데, Next13에서는 꽤나 많은 삽질을 하게 되었다.... (30분이면 틀은 잡아놓을 수 있다고 생각했었는데, 동작을 하지 않아 이틀을 날려먹었던 ㅎㅎ) 처음 다국어를 지원하기 위해 사용한 라이브러리는 next-translate이다. nextJS의 공식문서에 Internationalization 관련 section이 있었고 locale 관련하여 기능을 제공해 주는 것..

학부시절 처음 React로 프로젝트를 진행할 때 디자인 패턴에 대해 정확하게 인지하지 못하고 있었다. 그 때 당시 잡았던 구조와 작성했던 코드를 다시 보면 딱히 디자인 패턴이라고 할 만한 부분이 없었지만 굳이 정하자면 MVC 패턴에 가까웠던 것 같다... 서버 상태 관리 또한 이루어지지 않고 있던 상태였다. MVC 패턴의 경우 프로젝트의 규모가 커지거나 복잡해질수록 컨트롤러가 비대해진다는 문제가 있었다. 이후 어느정도 여러가지 부분들에 대한 개념이 잡힌 후 Redux, Context API를 사용하여 전역 상태 관리와 서버 상태 관리를 하며, Flux 패턴을 사용하여 당시의 프로젝트들을 진행했다. Action -> Dispathcer -> store -> view 위와 같이 단방향으로 데이터가 흘러갔기에..

IamPort에 이어 Omise PG를 연결해야 했다. 먼저 결제 페이지의 tsx 내부에 omise를 사용하기 위한 script 코드를 넣어줬다. 프로젝트는 NextJS를 사용한 SSR 아키텍쳐였기에, next/script가 제공하는 Script 태그를 사용했다. Checkout Button 클릭 시, const handleSubmit = useCallback( async (values) => { // @ts-ignore const OMISE = window.Omise // @ts-ignore const OMISE_CARD = window.OmiseCard try { const res = await postOrders(values) OMISE_CARD.configure({ publicKey: res.om..

NextJS 환경에서 Google Analytics는 다음과 같이 적용할 수 있다. 1. lib폴더에 gtag.js 파일을 생성한다. export const GA_TRACKING_ID = `${process.env.NEXT_PUBLIC_GA_TRACKING_ID}` // https://developers.google.com/analytics/devguides/collection/gtagjs/pages export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url }) } // https://developers.google.com/analytics/devguides/collection/gtagjs/events..

NextJS에서 커스텀 된 에러 페이지를 띄워주고 싶으면, NextJS에서 자체적으로 제공하는 기능을 사용하면 편리하다. https://nextjs.org/docs/advanced-features/custom-error-page Advanced Features: Custom Error Page | Next.js Override and extend the built-in Error page to handle custom errors. nextjs.org 만약 404Error가 발생했을 때 띄워줄 커스텀 페이지를 만들고 싶으면 pages 폴더에 404.tsx 파일을 생성해주면 된다. 같은 방식으로 500Error가 발생했을 때 띄워줄 커스텀 페이지는 pages 폴더에 500.tsx 이름의 파일을 생성해준다...

NextJS & Typescript 환경에서 애플 로그인을 연결하며, 몇 가지 문제와 마주했다. 우선 첫 번째로 react-apple-login 라이브러리를 사용했는데, 연결은 잘 됐지만 의존성 문제가 발생하여 배포가 안 되는 이슈가 있었다. 따라서 다른 라이브러리를 찾아봤다. 두 번째로 react-apple-signin-auth라는 라이브러리가 있어 사용해봤다. 해당 라이브러리는 타입스크립트를 사용하는 부분에서 문제가 있어 사용하지 못했다.  결국 라이브러리를 사용하지 않고 애플 공식 홈페이지에 있는 개발자 문서를 보며 react에 맞춰 적용하기로 결정했다.. Typescript를 사용하며, 기존에 없는 window객체의 값에 접근하려 했을 때 Window & typeof globalThis 에러가..