개발일기

📋 개요웹에서 이미지는 사용자 경험과 페이지 성능에 직접적인 영향을 준다. 프로젝트를 진행해보면서 웹사이트 로딩 시간에 가장 영향을 준건 역시 이미지이다. 구글 리서치 자료에 따르면 사이트의 로딩 시간이 3초 이상일 때 32%, 5초 이상은 90%, 6초 이상은 106% 마지막으로 10초가 넘으면 123%의 이탈률이 발생한다고 한다. 이는 곧 검색엔진 최적화(SEO)와 수익에도 악영향을 끼친다.웹사이트의 성능 개선하기 위해 실제 프로젝트에 적용할 수 있는 이미지 최적화 방법들을 알아보자. 1️⃣ 이미지 포맷 변경 (JPG, PNG → WebP)🖼️ WebP란?WebP 포맷은 인터넷에서 흔히 쓰이는 GIF, JPG, PNG 포맷을 대체하기 위해 개발되었습니다. WebP의 가장 큰 장점은, 이미지 품..

개요Next.js에서 NextAuth를 이용해 로그인/회원가입 기능을 구현할 때,존재하지 않는 아이디 이거나 비밀번호가 일치하지 않을 시 등의 상황에서 적절한 검증이 필요하다.처음엔 이런 오류를 처리하려면 어떻게 해야 할지 고민이 많았는데, 해결 방법을 찾다가 redirect 옵션을 발견 했다.그래서 redirect가 어떤 역할을 하는지에 대해 포스팅 하려고 한다. redirectredirect는 우선 credentials및 email providers에서만 제공되는 옵션이다. NextAuth의 signIn() 함수에는 여러가지 옵션이 있는데 그 중에서 redirect라는 옵션이 있다.redirect은 boolean값인 true값과 false값을 가질 수 있는데 만약 사용하지 않는다면 true값과 동일한..

개요supabase의 storage대신 cloudinary라는 라이브러리를 사용하기로 했다. 이유는 무료이기 때문이다. cloudinary에서 제공되는 CldUploadWidget으로 사진, 동영상 등을 쉽게 업로드 할 수 있지만, 만들고 있는 사이트에는 어울리는 것 같지 않아서 기본 업로드 방식을 사용하되 cloundinary에 이미지만 저장 하기로 했다. supabase를 사용하지 않으니까 생각보다 빈자리가 컸다. 한번 사용 해보자.  설치 npm install next-cloudinary  env 설정하기cloundinary를 사용하기 위해선 먼저 Cloud name이 필요하고, CldUploadWidget Upload Preset이 필요하다.먼저 cloudinary Docs에서는 이렇게 설명되어 ..

개요알수없는 supabase 오류로 새로운 백엔드 서비스를 사용하여 다시 프로젝트를 만들기 시작했다.간단하게 변경하고 마무리 할줄 알았지만 새로운 지식을 습득하는건 역시 어려웠다.나는 Supabase를 대신하기 위해 데이터베이스로는 postgreSQL을 사용하였고,회원가입과 로그인 관리를 위해 NextAuth를 사용하였다.NextAuth를 사용하면서 사용자의 정보를 업데이트 했을 때바로 최신화 되지 않는 것을 해결하는 방법에 대해 기록하려고 한다.     첫번째, DB데이터 최신화 하기먼저 나의 생각은 이러했다.NextAuth가 알아서 처리해주지 않을까? 라는 생각을 처음에 했다.이유는 NextAuth의 Adapter로 Prisma와 연결 했기 때문. 그래서 처음으로 시도한 방법은 DB에 저장되어 있는 ..

개요진행중인 프로젝트는 주변 매장에 후기를 남기고 자신만의 기록처럼 사용할 수도 있고, 유저들간 공유를 할 수도 있는 커뮤니티 사이트이다. 기능을 개발하면서 후기를 남긴 매장과 남기지 않은 매장들만 모아볼 수 있는 곳이 있으면 좋을 것 같아서 추가하게 되었다. 문제카카오 지도 api는 15개, 15개, 15개의 데이터를 나눠서 제공한다. 우리는 기본적으로 첫번째의 15개의 데이터를 제공받고 두번째의 15개 데이터, 세번째의 15개 데이터는 페이지네이션을 통해 제공 받는다. 여기서 내가 만약에 첫 번째 페이지의 15개의 매장 중 한 매장에 후기를 작성했다고 가정해 보자. 이 경우, “후기를 작성하지 않은 매장” 목록을 필터링하면 아래와 같이 데이터를 받아야 정상이다첫 번째 페이지: 15개 → 후기 작성으로..

개요카카오 지도 api를 사용하면서 분명 45개의 데이터를 제공한다고 되어있는데 왜 15개만 제공되는 의문이였다. 나머지 데이터를 얻기 위해 많이 헤맨 결과 pagination을 통해 45개의 데이터를 얻을 수 있다라는 걸 발견했다. 그래서 프로젝트를 진행하면서 45개의 데이터를 활용하기 위해 pagination을 구현한 것과 다른 기능을 만들면서 경험한 한계(?)에 대해 적어보려고 한다. 페이지네이션을 구현 해보자. pagination검색 결과의 페이징을 담당하는 클래스.하나의 검색 결과에 대해 페이지 이동을 쉽게 할 수 있도록 도와준다.직접 선언은 불가능하며 검색 결과를 다루는 콜백함수의 인자로 인스턴스가 생성되어 넘어온다.공식문서에 나와있는 내용이다.var places = new kakao.maps..

개요프로젝트를 진행하면 "Could not find the ' ' column of ' ' in the schema cache" 에러를 해결하는데 생각보다 너무 많은 시간을 사용한 것 같아서 이 글을 적는다. 다른 분들은 나와 같은 시간 낭비를 하지 않기를 바라면서,,  오류{code: 'PGRST204', details: null, hint: null, message: "Could not find the 'advantages' column of 'reviews' in the schema cache"}  오류 내용은 간단하다. reviews라는 테이블에서 advantages라는 컬럼이 존재하지 않는다. 그래서 만약에 위의 오류를 마주친다면 supabase에서 해당 테이블에 컬럼이 존재하는지, 또는 철자가..

개요프로젝트 진행중 좌표값으로 주소를 얻어낼 수 있는 기능을 구현하는 겸 기록도 같이 해보려고 한다. 카카오 지도 공식문서를 활용 했고, 간단한 기능이였지만 sample의 코드가 생각보다 복잡하고, 자바스크립트로 되어 있어서 시간이 걸렸지만 Docs에서 기능을 찾아보니 너무 간단하게 되어 있어서 쉽게 해결했다. 코드를 확인해 보자. 공식 문서  ✅︎ new kakao.maps.services.Geocoder() 주소-좌표간 변환 서비스 객체를 생성한다. var geocoder = new kakao.maps.services.Geocoder();   geocoder의 Constructor를 이용해서 아래 4개의 메서드를 사용할 수 있다. 나는 구 주소 및 도로명 주소와 행정동, 법정동 주소를 얻을 수 있는c..