코린이의 개발 일지

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 이미지뿐만 아니라 동적으로 불러오는 모든 이미지들을 캐싱하는 것을 확인할 수 있다. 우리 서비스 특성상, 사용자 위치 근처에 있는 장소들의 ..

문제 상황 뉴스피드 무한스크롤이 게시물 페이지 들어갔다가 router.back으로 돌아오면 맨 위로 스크롤이 원상 복구되는 문제 사용자 경험 측면에서 상당히 불편한 문제라서 꼭 고치고 싶었다. 해결 방안 같은 팀원분이 이런식으로 해보는것이 어떻냐는 방법을 제시해 주셔서 그걸로 시도해봤다. 스크롤 y 위치와 , 불러온 전체 뉴스피드 목록 전역상태로 관리 뒤로가기 버튼 누를시, 전역 상태 불러와서 렌더링 뉴스피드는 현재 페이지네이션으로 동작한다 (usePaginator 훅이 pages(불러온 뉴스피드 목록)을 반환한다.) 처음 코드 export default function MainSection() { const scrollRef = useRef(); const [scroll, setScroll] = use..