Develope38 [BueaFit] - next에서 로그인 인증 관리하기 로그인이 성공하면 미들웨어에서 refresh token을 쿠키에 저장하여 aceess token이 없거나 만료 되었을 때 refresh token으로 재인증하는 방식을 구현 중, 쿠키에 refresh token이 있어도 api서버에 전달되지 않는 에러가 발생했다. 0. 문제 상황리프레시 토큰이 있고, 액세스 토큰이 없으면 로그인 화면으로 redirect 되어 refresh token이 갱신되지 않고 있었다. 1. 문제 확인리프레시 요청: Response { [Symbol(state)]: { aborted: false, rangeRequested: false, timingAllowPassed: false, requestIncludesCredentials: false, type: 'default'.. 2025. 5. 2. [Next.js] - 쿠키에 있는 refresh token이 사라질 때 이번에 마주한 에러는 진짜 재밌는? 상황의 연속이었다.일단 과정은 이렇다. (앞은 쫌 주저리라 제가 해결한 방법이 궁금하시면 결론만 보세요. 근데 허무하실수도...) 당초 내가 구현하려 했던 기능은 로그인 후 미들웨어를 통해 로그인 체크 후, 로그인이 되어 있지 않으면 login 페이지로 redirect 시키고, 로그인이 확인되면 유저에게 저장된 정보를 보여주기를 원했다. 그래서 아래 처럼 개발 과정을 상상했다.1. 로그인 기능 구현일단 이번 프로젝트 로그인은 JWT를 이용한 로그인 방법으로, 로그인이 성공하면 쿠키에 refresh token이 저장된다.2. 미들웨어 설정저번에도 JWT 프로젝트를 통해 로그인 기능을 구현 했었지만, 그때는 api 통신을 바로 해서 user 정보를 가져와 해당 유저 정보가.. 2025. 4. 22. Promise 타입 명시와 비동기 작업 1. Promise 타입?넥스트를 처음 공부 할 때 API나 받아 오는 값, 매개 변수 등의 타입 명시 부분에서 조금 헤맸었다. 내가 알고 있던 Promise는 그냥 비동기를 위한 객체인 줄 알았는데, 강의에서도 친구가 알려주는 방법에서도 값을 받아 올 때 타입 명시가 Promise로 명시되길래 일단 적어보면서도 이해가 가지 않았다. 사실 Promise 자체에 그렇게 깊게 알고 있기 보다는 async await 정도나 try catch문을 쓰기 위해 개념 정도만 가볍게 훑고 지나갔는데, 그게 문제였던 것 같다. 2. 그렇다면 Type의 Promise는?내가 헷갈렸던 부분은 정확하게 Promise와 타입으로 지정된 Promise의 차이점이었다. 처음에는 내가 알고 있는 Promise가 아니고 다른 뜻이 존.. 2025. 3. 24. [Next.js] - naver 맵 띄우기 + 로드 에러 수정 Record 프로젝트는 내가 다녀온 곳의 후기를 남기는 프로그램으로, 지도가 시각적으로는 가장 메인이 되는 프로젝트다.구글지도와 카카오, 네이버 등등 고민했지만, 네이버 검색 기능으로 가게 정보(위치)도 같이 가져오기 위해 네이버 지도를 사용하였다.1. naver application 등록https://www.ncloud.com/product/applicationservice/maps NAVER CLOUD PLATFORMcloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certificationwww.ncloud.com 상단 사진의 인증 정보에서 Client ID와 .. 2025. 1. 30. [Next.js] - next를 공부하면서... 리액트를 사용하다보면 다들 리액트에서 리액트 네이티브나 넥스트도 다루는 것 같아서 굉장히 궁금했다. 리액트 네이티브는 공부하게 된다면 만들고 싶은 앱이 있어서 고민을 했지만, 결국 공부하다보면 웹에 대한 지식이 더욱 필요해 지는 것 같아서 백에 대한 개념도 배워 보고 싶어 넥스트로 정하게 되었다.물론 리액트 짱!이 되어서 새로 공부하는건 아니지만 프로그래밍 공부 자체에 변화가 필요한 시점 같아서 더 딥한 자바스크립트 공부와 넥스트 공부에 새로운 뜻을 가져보기로 했다. 1. Next.js 등장 배경?next를 알기 전에 역시 리액트에 대해 설명을 뺄 수 없을 것 같다.리액트는 자바스크립트로 이루어진 라이브러리다. 그러다보니 개인적으로 프로젝트를 진행할 때 확장이 잘 되는 듯한 느낌이 들었지만, 반대로 단점.. 2025. 1. 20. [Next.js] - Auth 관리를 위한 supabase db 셋팅 supabase는 로그인, 로그아웃, 회원가입 기능을 자체적으로 제공해준다. 전에 개인적으로 프로젝트를 진행할 땐 로그인 구현시 JWT 토큰을 이용해서 로그인, 토큰 체크 및 재발급까지 직접 코드로 작성해줘야 했는데, 이제는 기본적으로 알아서 해준다... 신기해. 하지만 당연히 기본적인 설정은 필요하다. 1. 회원가입, 로그인을 위한 테이블 생성supabase에선 프로젝트를 생성하면 자동적으로 데이터베이스를 생성해주는데, 이 때 인증 관리를 위한 auth라는 db를 따로 제공한다. 자체 제공하는 함수로 회원 가입 등 정보를 넘기면 auth 스키마에 맞춰 맞는 테이블로 정보 값을 넘기는데, 이 때 회원 가입이 진행되면 users 라는 테이블에 내가 보내는 정보가 넘어간다. 하지만, supabase에서는 .. 2025. 1. 20. 이전 1 2 3 4 ··· 7 다음
