사용 배경 진행하는 프로젝트에서 좋아요 기능을 넣을 일이 있었습니다. api 요청 후 DB에 좋아요가 추가된 것까지 확인 했으나, 정작 UI에는 좋아요가 반영되어 있지 않습니다. 브라우저 refresh, refocusing 등 서버 데이터 변경을 감지한 후에야 비로소 UI에도 반영이 되는 것이죠. 이에 대한 해결책을 알아보던 도중 알게 된 개념인 Optimistic UI의 적용기를 기록해보았습니다. 개념 및 사용 Optimistic UI는 단어뜻 그대로 특정 요청이 성공 할 것이라(낙관적으로) 가정을 하고 미리 요청의 결과를 보여주는 방식의 UI입니다. 사용 상황은 다음과 같습니다. 어떤 요청이 거의 확실하게 의도대로 동작한다는 보장이 있을 때 요청이 너무 늦지 않은 시간 안에 응답이 온다는 보장이 있을..

본 글은 Next.js를 사용한 프로젝트(공책)에서 어떤 렌더링 방식을 적용할지 고민해보고 적용해본 후 작성한 내용입니다. Next.js의 렌더링 방식과 특징 SSR Next.js는 기본적으로 모든 페이지를 Pre-rendering(SSR or SSG)합니다. (참조: Next.js 공식문서 - Rendering) 웹 페이지를 서버에서 최초로 렌더링하여 완전한 HTML 페이지를 클라이언트에 전달합니다. SSG로 렌더링된 페이지에서 필요한 데이터를 revalidate(재검증 및 업데이트)하고 rebuild하는 ISR(Incremental Static Regeneration)을 지원합니다. 선택기준 SEO (검색 엔진 최적화) 필요성: 검색 엔진이 페이지의 내용을 쉽게 수집할 수 있어서 검색 결과에 노출이 ..

Next/Image 컴포넌트의 기능 next를 사용하면 img태그가 아닌 next/image 의 Image태그를 사용하라고 알려주는데, 그 Next/Image에서 다양한 성능 최적화 기능을 제공하기 때문입니다. lazy loading Visual Stability Size Optimization Asset Flexibility 1. Faster Page Loads(Lazy loading) 이미지 로드 시점을 필요할 때까지 지연시킵니다. 뷰포트 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드합니다. → 당장 필요한 이미지만 빠르게 로드할 수 있게 됩니다. Next/Image를 사용하게 되면 default로 lazy loading이 적용됩니다. priority={true}로 설정하면..

용어정리 TTV(Time To View): 유저가 사이트를 볼 수 있는 타이밍 TTI(Time To Interact): 유저가 인터렉트 할 수 있는 타이밍 SEO(Search Engine Optimization): 검색 엔진 최적화. → 홈페이지가 검색엔진에 더 잘 노출되어 더 많은 유저가 접속할 수 있도록 합니다. 렌더링 방식 CSR: Client Side Rendering 동작 방식 서버에서 브라우저로 응답(빈 HTML(만 있음) + 연결된 JS 링크(리액트 코드))을 보냅니다. 브라우저에서 (연결된)JS를 다운로드 받습니다. 브라우저가 JS(리액트) 코드를 실행합니다. 페이지가 보이고 상호작용 할 수 있습니다.(TTI === TTV) 특징 클라이언트에서 전적으로 웹 렌더링(라우팅, 연산 등)을 책임..