Next.js14 프로젝트

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

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

요런식으로 컴포넌트로 감싸서 children 을 렌더링하는 구조를 사용할때가 있다. 이때 Modal 컴포넌트에서 children 에 props 을 넘겨주고 싶을때, 어떻게 구현할 수 있을까?cloneElement 는 React 에서 제공하는 함수이다. 주어진 React

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

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

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

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

개요 supabase OAuth 기본적으로 supabase-js는 사용자의 session 을 저장하기 위해 localStorage 를 사용한다. 이는 클라이언트 측 앱에서 잘 작동하지만, 서버 컴포넌트에서 supabase-js를 사용하려고 할 때는 에러가 나는데,

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

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

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