코린이의 개발 일지

회사 사내 교육 프로그램에서 2주간 데이터 처리 주제의 프로젝트를 진행했다.4명이 한 팀으로 구성됐으며, 나는 프론트엔드 전반을 담당했다.발표 준비, 시연 영상, 기획 회의를 제외하면 실제 개발에 투입된 시간은 약 7일 정도였다.이번 프로젝트에서는 회사에서 Cursor AI를 제공해주어 이를 잘 활용해보기로 했다.개발 환경 세팅부터 기능 구현, 디버깅, 리팩토링까지 프론트엔드 전체를 Cursor에 의존해 진행해본 결과를 정리했다.프로젝트 개요✅ 목표여러 상권 데이터를 수집·분석해 음식점 창업을 준비하는 사용자에게 유용한 정보를 제공하는 웹 서비스를 개발✅ 사용 기술 스택TypeScriptReact.jsChart.js (데이터 시각화)Material UI, Emotion (UI 컴포넌트 & CSS-in-J..

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