Next.js14 프로젝트

신규 프로젝트를 시작하면서 과정을 정리하는 프로젝트 시작일 : 2024.05.07프로젝트 이름 : omuk(오늘 뭐먹지?)npx create-next-app@latest프로젝트 이름을 정해주고 그 외 설정을 지정해준다.TypeScript 와 ESLint 는 yes 로

이전에 작업한 프로젝트에서 공통 컴포넌트 button, input, badge 등hooks폴더 구조 잡기 필요한 폴더 생성기본적인 틀 잡기그 다음 rootlayout 잡기전체적인 레이아웃

기본 세팅 kakao developer 에서 애플리케이션을 만든 다음 key 값을 얻는다. 그리고 내 애플리케이션>앱 설정>플랫폼 에서 Web 부분에 내 사이트 도메인을 넣어주면 기본적인 작업은 끝마쳤다. 현재는 로컬에서 개발 하고 있으므로 localhost:3

카카오 API 이용한 무한스크롤 구현하기 구현한 모습은 아래와 같다. 스크롤이 아래에 닿으면 그 다음 페이지를 불러와 화면에 보여준다. 그리고 다음 페이지를 불러올때마다 지도도 그 중심으로 움직인다. 카카오 API 를 사용해 내 주변으로 맛집을 불러오는 코드를 구현

어떤 서비스를 이용할때 내 위치 정보에 접근해도 되는지 묻는 창이 나올때가 있다. 동의 버튼을 누르면 내 위치 기반 데이터가 화면에 나타나는데, 이를 지원해주는 API 가 바로 Geolocation API 이다.나는 사이트에 접속하면 내 위치 기반 주변 음식점을 불러오

supabase 로 무한스크롤 구현하기 보통 응답을 받을때 페이지 정보를 담은 meta 정보를 같이 전달 받는데, supabase 로 서버를 구현하다보니 getNextPageParam getNextPageParam 함수는 useInfiniteQuery 에서 다음

이미지를 업로드할 때, 사용자가 선택한 파일들은 input 요소의 files 속성을 통해 접근할 수 있다. 나는 이를 배열로 변환하여 상태로 관리했다. 이 배열에는 각 파일의 메타데이터(File 객체)가 포함되어 있으며, 이 메타데이터에는 파일 이름, 크기, 유형 등의

최근 프로젝트에서 팔로워 리스트를 가져오는 기능을 구현하던 중, 나를 팔로우한 유저의 프로필 정보를 가져오는 과정이 너무 복잡하고 비효율적이라는 생각이 들었다. 그래서 리팩토링을 진행했으며, 기존 방식에서의 10여변의 API 호출을 Supabase의 조인 기능을 활용하

next.js 로 구현하면서 이번에는 꼭 메타데이터를 적용해봐야겠다는 생각이 있었다!왜냐하면 초보 개발자 입장에서는 글로만 접하는 SEO 가 도저히 이해가 안됐기 때문이다. 서버 사이드 렌더링이 왜 SEO 에 유리한지, 메타데이터는 뭐고 그게 왜 SEO 에 도움이 되는

처음 사용자와 만나다 개발을 처음 시작했을 때, 가장 인상 깊었던 순간은 hello world 를 화면에 출력하고, 로컬 환경에서 localhost:3000 으로 웹사이트를 띄웠던 경험이었습니다. 내가 작성한 코드가 눈앞에서 구현되는 것만으로도 큰 성취감을 느꼈고,

먹기록 프로젝트를 운영하면서 사이트 접속 장애를 겪은 적이 있습니다. 당시 에러 로그를 남기지 않아서 문제를 추적하는 데 어려움을 겪었는데요. 그 경험을 바탕으로 에러 핸들링의 중요성에 대해 회고글을 작성한 적이 있습니다.서비스 운영 회고 1탄 : 에러 로그의 중요성서

잇핏 프로젝트를 지인들에게 사용해달라고 요청한 후 받은 피드백 중 하나는 랜딩 페이지에서 화면 전환 시 로딩바가 오래 노출되어 오류가 난 줄 알았다는 점이었습니다.사용자에게 빈 화면 대신 로딩 상태를 시각적으로 알리기 위해 로딩바를 구현했지만, 예상보다 로딩 시간이 길

얼마 전 29CM 사이트를 둘러보다가 눈에 띄는 작은 디테일을 발견했다. 바로 최근 로그인한 계정을 알려주는 UI였다.로그인할 때마다 "내가 무슨 계정으로 로그인했더라?" 라며 헷갈려 본 적이 있다면, 이 기능이 얼마나 유용할지 공감할 것이다. 이런 사소한 불편함을 세

SST를 사용했을 때의 문제점 처음에는 SST 프레임워크를 사용해 AWS 환경에 Next.js 애플리케이션을 배포했다. Vercel처럼 간편하지는 않았지만, AWS 리소스를 직접 관리하면서 어떤 서비스를 사용하는지 파악할 수 있다는 점이 좋았다. 하지만 얼마 지나지

잇핏 프로젝트에서는 유저의 기본정보를 바탕으로 하루에 필요한 칼로리 적정량을 계산하는 과정에서 퍼널 구조를 사용했습니다. 퍼널 구조를 도입한 이유는 유저로부터 많은 정보를 받아야 하는 상황에서 단계별로 필요한 데이터만 입력받고 제공할 수 있어 유연한 정보 처리가 가능했

왜 결합도를 줄여야 하는가? 경험기반 -> 서버에서 데이터 구조가 바뀌면 프론트엔드 코드를 너무 많이 수정해야 했음 -> 개발의 기본은 모든 코드는 수정되고 확장된다 -> 즉 결합도가 높으면 코드가 변경되었을때 관련 코드를 너무 많이 수정해줘야 한다 -> 개발 생산성

잇핏 프로젝트에서는 사용자가 목표 몸무게에 도달할 수 있도록 방향성을 제시하고, 목표 달성 가능성을 분석하는 기능을 구현하고자 했다. 마치 퍼스널 트레이너처럼 사용자의 건강 데이터를 바탕으로 피드백을 제공하는 것이 핵심이었는데, 고민 끝에 AI가 이러한 역할을 수행할