개발일기

개요알수없는 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..

문제 설명 문자열 my_string, overwrite_string과 정수 s가 주어집니다. 문자열 my_string의 인덱스 s부터 overwrite_string의 길이만큼을 문자열 overwrite_string으로 바꾼 문자열을 return 하는 solution 함수를 작성해 주세요. 제한사항my_string와 overwrite_string은 숫자와 알파벳으로 이루어져 있습니다.1 ≤ overwrite_string의 길이 ≤ my_string의 길이 ≤ 1,0000 ≤ s ≤ my_string의 길이 - overwrite_string의 길이입출력 예my_stringoverwrite_stringsresult"He11oWor1d""lloWorl"2"HelloWorld""Program29b8UYP""mer..

개요회원가입 폼을 만들면서 비밀번호와 비밀번호 확인 입력 공간에 눈 아이콘을 클릭하면 암호화된 비밀번호를 볼 수 있는 기능을 개발하고 싶었다. 기능 개발 이후 테스트를 하는데 자연스럽게 tab키로 작성란을 이동했고, 비밀번호를 표시하는 눈 아이콘에 포커스가 되었다. 보통 같으면 포커스가 되지 않아야 정상 아닌가? 라고 생각했고, 웹 접근성을 고려해봐도 그렇게 필요없는 포커스라고 생각되어 tabIndex에 대해 찾아보게 되었다. tabIndextabIndex란? tabindex 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정한다. 라고 공식 문서에서 설명한다. 앞에 설명에 따르면 tabindex를 사용해서..

문제 설명 영어 점수와 수학 점수의 평균 점수를 기준으로 학생들의 등수를 매기려고 합니다. 영어 점수와 수학 점수를 담은 2차원 정수 배열 score가 주어질 때, 영어 점수와 수학 점수의 평균을 기준으로 매긴 등수를 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 0 ≤ score[0], score[1] ≤ 1001 ≤ score의 길이 ≤ 10score의 원소 길이는 2입니다.score는 중복된 원소를 갖지 않습니다. 입출력 예 scoreresult[[80, 70], [90, 50], [40, 70], [50, 80]][1, 2, 4, 3][[80, 70], [70, 80], [30, 50], [90, 100], [100, 90], [100, 100], [10, 30]][..