코린이의 개발 일지

Image 컴포넌트 기능 Next.js에서 제공하는 Image 컴포넌트가 기본적으로 지원하는 최적화 기능이 있다. 1. 포맷 및 사이즈 변환 용량 최소화를 위해 png 포맷에서 webp 포맷으로 변경되어 다운로드 된 것을 확인할 수 있다. 또한 원래 이미지 사이즈가 아닌 현재 컴포넌트에 맞춰서 자동으로 사이즈 변환된 것을 확인할 수 있다. 이러한 포맷 및 사이즈 변환 작업은 이미지에 대한 최초 요청시에 Next.js 서버에서 진행되며, 이후 요청에는 캐시가 만료될 때까지 캐시된 이미지가 제공되기 때문에 첫번째 요청보다 훨씬 빠르게 이미지를 서빙할 수 있다. 만약 파일 크기 및 포맷 변환을 막고 이미지 퀄리티 그대로 가져오고 싶다면 unoptimized 옵션을 false로 주면 된다. 2. lazy loa..

프로젝트 소개 서울시 공공데이터 공모전에 아는 분과 함께 참가하게 되었다. 공공데이터를 사용해야 하던 상황이라 주제를 어떤걸로 정할까 고민하다가 '코로나 풀린 시점에 바깥 활동이 많이 늘어났으니, 놀러갈만한 장소 추천해주는 서비스 어때?' 라는 말을 시작으로 기획을 시작했다. 서비스에서 제공할 기능 목록을 우선 쭉 나열하고 그걸 바탕으로 필요한 데이터를 찾았다. 우리 서비스에서 제공할 기능은 사용자가 나들이 계획에 참고할 수 있는 약 10일간의 날씨 정보 사용자 위치 기반 주변 나들이 장소 제공 장소 검색 각 장소들의 상세 정보 제공 모바일 & 데스크탑 환경 모두 제공 크게 위 다섯가지였다. 사용한 공공데이터는 다음과 같다 서울시 주요 공원현황 데이터: http://data.seoul.go.kr/data..

프론트엔드 서버를 AWS에 배포했는데 서버가 자꾸 터지는 상황이 발생했다. EC2 t2.micro 유형으로 배포한 상태였는데, 페이지에 3번정도 접속하면 서버가 자꾸 다운되어서 그 원인을 찾아봤다. 원인 원인은 이미지 파일들이 문제였다. Next.js는 이미지 최적화를 위해 Next/Image 컴포넌트를 제공한다. Next/Image 컴포넌트는 이미지를 반복해서 요청하는 횟수를 줄이기 위해 프론트엔드 서버에 이미지를 캐싱한다. 로컬에서 빌드한 후, .next 폴더를 보면 cache 폴더가 있고 캐싱된 이미지들을 볼 수 있다. 즉 public 폴더에 있는 static 이미지뿐만 아니라 동적으로 불러오는 모든 이미지들을 캐싱하는 것을 확인할 수 있다. 우리 서비스 특성상, 사용자 위치 근처에 있는 장소들의 ..

React Sever Component란? 서버 사이드 렌더링 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식 RSC 위의 그림처럼 서버 컴포넌트는 렌더링 과정에서 클라이언트 사이드 렌더링과 서버 사이드 렌더링을 동시에 할 수 있도록 해준다. 즉 컴포넌트 별로 서버에서 렌더링할지, client에서 렌더링할지가 결정된다. RSC 동작 방식 사용자가 접속하면 브라우저가 프론트엔드 서버에 요청을 보낸다. 프론트엔드 서버는 렌더링을 시작한다. root 컴포넌트 부터 시작해서 서버 컴포넌트와 클라이언트 컴포넌트를 분리하여 렌더링을 한다. 클리이언트 컴포넌트는 일종의 ‘placeholders’로 채워 놓고, 서버 컴포넌트는 html 태그로 이루어진 트리구조로 렌더링한다. 서버는 ..