clyde-yoon 님의 블로그

서론 이 기록은 소셜로그인을 구현하며 가진 고민들과 구현방식들에 대해 다룬다. 전제 - Next.js   1. 현재 진행하고있는 프로젝트는 소셜로그인만을 구현한다. 2. 인증플로우는 백엔드에서 프로세스 전체를 제어한다.3. 인증이 완료될 시, Home으로 리프레시토큰과 함께 리다이렉트 된다.4. 3번까지의 과정을 베이스로 코드를 구현한다. OptionsHttpOnly: ✓ (브라우저 JS에서 접근 불가)Secure: ✓ (HTTPS만 사용)SameSite: Lax (크로스사이트 요청 제한)Priority: Medium (브라우저의 쿠키 우선순위) Flowuser>FE :로그인 버튼 클릭   >BE : /auth/kakao   >Kakao로그인페이지   >사용자 인증>BE: 인증처리>자체 토큰 생성   >..

전제axios 사용react-query 사용서버컴포넌트 사용 "dependencies": { "@tanstack/react-query": "^5.64.1", "@tanstack/react-query-devtools": "^5.64.1", "next": "15.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", },app├── products │ └── [id] -- 아이템 상세보기 페이지│ ├── sections -- UI 하위 컴포넌트 │ │ ├── MainContent.tsx│ │ ├── Profile.tsx│ │ └── Reviews.tsx│ ├── ui│..

이 글은 mate프로젝트 중 작성되었습니다.2025.01.09 - [Mate프로젝트] - #4 마크다운 에디터 구현 #4 마크다운 에디터 구현LinkIssue: https://github.com/spring-bud/mate-fe/issues/6PullReq: https://github.com/spring-bud/mate-fe/pull/7기술적구현 2025.01.09 - [분류 전체보기] - 마크다운 에디터 구현하기(+preview)  고민&의사결정 과정마크다운 에clyde-yoon.tistory.com  서론 마크다운 에디터와 미리보기를  구현하려한다. 사실 하나도 할 줄 모르지만, 차근차근 해내면 결코 어려운 일이 아니라고 생각한다.(AI가 함께할테니까) 일단 먼저 만들고싶은 목표를 구체화해보자. 이것..

리엑트쿼리를 사용할 수 있는 범주들은 정말 다양하게 존재한다.페이지네이션, 무한스크롤, 유저정보관리, 장바구니, 게시판, 좋아요/싫어요버튼 , 주문 시스템, 댓글 시스템 등 무궁무진해서, 어느상황에서도 접목이 가능하다. 기존 프로젝트에선 유저의 정보를 zustand 라이브러리를 사용하여, 상태를 관리했지만, 리엑트쿼리를 통해 구현한다면, 모든 상태를 하나의 라이브러리로 관리할 수 있지 않을까? 란 생각에서 출발한 로그인 기능을 구현해 보았다.  전체 코드import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';import { UserInfo, UserUpdateData } from '@/types/user/userInfo'..

프론트를 공부하면서 자주 듣는 단어였던 '상태관리' 에 관하여 와닿지 않을시점, 프로젝트를하며 너무나도 많은 useState와 서버상태까지 관리하며, 동시에 화면에 렌더링하기위한 수많은 useEffect에 지칠 시점, 리엑트쿼리에 대하여 알게되었다. 그때의 내가 봤으면 좋았을 만한 것들을 작성해 보고 싶었다. 서론 1. 보일러 플레이트서버에서 하나의 data를 가지고온다고 가정해보자.const [data. setData] = useState(null)const fetchData = async () => { const res = await axios.get('/api/data'); setData(res.data); }res에는 호출한 데이터가 담겨있을 것이다. 그러나 이 데이터가 완벽하게 도착할 순..