Next.js
1.[Next js]낙관적 업데이트
기존_앨범추가 코드 낙관적업데이트로 변경 기존_앨범삭제 코드 낙관적업데이트로 변경
2.[Next js] browser-image-compression를 사용한 이미지 성능최적화_(이미지 압축 라이브러리,AVIF 파일변환)
갤러리에서 처음 사용자가 이미지를 올릴 때 용량제한을 두지않아 이미지가 용량이 크고 양이 많아질수록 페이지 로드되는 속도가 현저히 낮아지는 현상발생압축 또는 이미지 최적화 안함반복적인 상태 업데이트 setImgSrc((prev) => \[...prev, e.target
3.[Next js] Link vs Router
스탬프를 추가하는 작업 후 바로 스탬프목록으로 이동했을 때 추가한 스탬프까지 바로 반영된 화면이 보여야하는데 반영안된상태로 새로고침이 되야 반영이되는 문제가 있다. 이 전 코드는 단순 링크이동을 위해 Link를 사용하여 이동되도록 했다.수정된 코드는 Link -> bu
4.[Next js] SSR로 초기로딩속도 높이기 (성능개선)
기능을 완성시키고 테스트하는중애 화면에 그려지는 속도가 너무 느려서 작동안되나..?싶을정도로 반영이 느린점을 개선해보려한다.CSR의 경우,서버로부터 빈 HTML과 JavaScript 파일을 넘겨 받은 다음에 Query가 실행된다.Markup > JS > QuerySSR
5.[Next js] useState의 비동기
추천관광지에서 로그인한 유저의 북마크가 있으면 체크된상태로 되야하는데 북마크체크가 되어있지않은 상태로 보여진다. 우선 값이 제대로 들어오는지 체크투어리스트 데이터 잘가져와짐 유저아이디 훅안에서 아이디값 잘 가져와짐유저아이디값 처음엔 null이었다가 가져와짐..!Load
6.[Next js] 인풋과 라벨 연결값 고정문제
//인풋과 라벨 연결값이 텍스트로 넣어놓음 -> 고정값으로 지칭하는 지역이름이 같아 계속 처음 지역에만 이미지가 넣어짐 //인풋과 라벨 연결값은 유니크한값으로 지역이름의 변수로 변경 -> 각 지역별로 이미지는 들어가지만 전체보기에서 파일자체가 열리지않음 //->
7.[Next js] SPOTIFY API 로 플레이리스트 만들기_1
과거의 싸이월드를 추억하며 사용자들이 자신의 마이페이지를 자유롭게 꾸미고, 소통할 수 있는 플랫폼을 프로젝트로 시작하였다. 각 기능들 중 플레이리스트와 테마변경 기능을 맡아 진행하게되었다. 1. SPOTIFY API 연결하기 2. SPOTIFY API 데이터 불러와
8.[Next js] SPOTIFY API 로 플레이리스트 만들기_2(추가/수정/삭제)
Supabase 추가 / 삭제 / 업데이트
9.[Next js] Next 14 세팅하기(pnpm)
Next공식문서 넥스트 14버전 pnpm 추가기능들 설치 util 공통적으로 사용되는 유틸리티 함수나 로직을 모아 두는 용도 util > supabase > client.ts util > supabase > middleware.ts Supabase 클라이언트를
10.[Next js] CSR과 SSR 분리하기, supabase 설정
우선 이번 프로젝트에서의 목표는 서버사이드 렌더링을 이용한 성능 개선 경험 챙기기와최대한 클라이언트와 서버를 나눠서 작업하기로 서버의 비중을 최대한 늘려보면서 작업하는걸 목표로 할 것이다.시작 전 간단히 해야할 부분들을 스텝으로 나누었다. Step1 (get) 더미데이
11.[Next js] Geolocation API로 현재 위치값 구하기
Geolocation API 로 현재 내 위치값을 구하고 Kakao Maps을 연동해 주어진 좌표를 주소로 변환하려한다.웹 브라우저에서 사용자의 위치 정보를 가져올 수 있는 표준 API로,환경에 따라 GPS, Wi-Fi, 셀룰러 네트워크, IP 주소 등에서 사용자의 현
12.[Next js] 현재 위치값을 카카오맵API에 연동 후 주소값 가져오기
이전에 Geolocation API 로 현재 위치의 위도와 경도를 구했다.오늘은 카카오맵API를 연동해서 구한 위도와 경도를 넘겨주어서 주소값을 추출할것이다.위도경도값이 잘 가져왔다면(setLocation에 저장된 후) getAddress함수(주소값불러오는 함수) 를
13.[Next js] 패치 비동기 함수에서 유저아이디가 안가져오는 문제(null, undefind)
userId는 잘 전해졌는데 계속 null 또는 undefind로 뜨는 문제수정01\_queryFn: () => fetchStampActive(userId!) \-> null이 아님을 보장하는 ! 사용수정02enabled: !!userId \-> enabled: use
14.[Next js]가장 오래된 날짜 구하기
날짜를 가지고있는 객체를 담은 배열에서 가장 오래된 날짜를 추출해야한다.stampDataTypeError: list.created_at.reduce is not a functionlist.created_at.reduce 이게 없다고 나옴 이유는 스트링이라 비교불가red
15.[Next js] 인코딩과 디코딩
useParams 로 가져온 값 기준으로 데아터를 더 좁혀서 추출해야한다.하지만 계속 빈값으로 추출된다. 원인은?: 난 당연히 useParams 로 가져왔을때 /서울 이라면 서울로 가져올 줄 알고 비교하는 코드를 짰는데 자꾸 빈값을 추출하길래 console을 찍어보니
16.[Next js] 갤러리 구현1 - 이미지 업로드
앨범 전체 테이블패치 앨범목록 useQuery로 data담기 탭기능 구현 (전체보기 | 지역별) AddPhotoBtn.tsx > 트러블슈팅 React 컴포넌트가 렌더링 중에 다른 컴포넌트의 상태를 업데이트하려고 할 때 발생합니다. 이는 일반적으로 잘못된 상태 업
17.[Next js] Cannot read property 'default' of null
오류메세지)eact 컴포넌트가 렌더링 중에 다른 컴포넌트의 상태를 업데이트하려고 할 때 발생합니다. 이는 일반적으로 잘못된 상태 업데이트로 인해 발생합니다. 이 문제를 해결하려면 상태 업데이트가 렌더링 중에 발생TypeError: Cannot read propertie
18.[Next js] 갤러리구현2 - 다중이미지 업로드
이 전 글에서 단일 이미지를 업로드하는건 가능했다.이제 다중이미지를 업로드하도록 수정해야한다.선택한 이미지 수만큼 데이터가 n개씩 추가되야한다.multiple 다중 이미지 선택files변수에 클릭한 대상의 파일을 저장한다. 불러온값이 n개로 Array.from()로 배
19.[Next js] 커스텀훅
기존 컴포넌트에서 state로 이벤트를 다 만들었는데 링크로 이동하는 디테일페이지에서도 이 동작이 필요해서 재사용성에 용이한 커스텀훅으로 쪼개보기로했다! 이미지 팝업열기 이벤트 기존 커스텀 훅 적용
20.[Next js] Dropdown 커스텀 훅
리스트가 길 경우를 대비해 드롭다운 기능을 넣고 커스텀훅으로 만들어서 재사용가능하도록 했다.스르륵 애니메이션도 추가하겠다.
21.[Next js] 년-월-일 날짜변환
(BF) 2024. 7. 11. (AF) 2024년 7월 11일
22.[Next js] 중복코드개선, 무한루프
1. 카테고리별 필터링된 리스트 목록화 🔎 문제점 필터링된 리스트를 목록화하는건 카테고리/지역/메인배너/추천리스트 등에 모두 같은 동작으로 중복코드가 다수 발생한다. ✅ 해결 전역함수로 인자만 전달하는 방식으로 전환했을때 중복코드를 개선할 수 있었다.
23.[Next js] spotify api 데이터 supabase 업로드 에러
🔥 이슈api 노래목록별로 추가버튼 생성 후 클릭시 supabase에 데이터가 올라가야하는데 에러supabase - playlist 테이블구성id / user_id(로그인유저 아이디) / is_main(메인노래) / created(시점) / track_name(노래이