clyde-yoon 님의 블로그

목표useState를 모방한 모듈을 만들어 클로저 공부하기 준비liveserver 확장프로그램 lib/react.js더보기// lib/react.jsimport { render as domRender } from './dom.js';// 훅 관리를 위한 전역 변수들let currentComponent = null;let currentContainer = null;let hookIndex = 0;let hooks = [];// useState 구현export function useState(initialValue) { const currentIndex = hookIndex++; // 첫 실행이면 초기값 저장 if (hooks[currentIndex] === undefined) { hooks[cu..

서론 이 기록은 소셜로그인을 구현하며 가진 고민들과 구현방식들에 대해 다룬다. 전제 - 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가 함께할테니까) 일단 먼저 만들고싶은 목표를 구체화해보자. 이것..

이 글은 지금까지 사용했던 라이브러리 중 당연 최고라 생각하는 리엑트훅폼의 사용후기를 공유하고싶은 마음에 쓰게 된 글입니다. 이게 뭡니까? 한 마디로 정리하면 Form 관리를 위한 강력한 도구라고 말할 수 있다. 혹시 아래와 같은 상황을 겪었거나, 상대를 당황시킬 예정이라면 최고의 선택이 될 수 있다.  물론 극단적인 예시이다. (보통 많은 관심사나, 쓰임, 목적에 알맞는 상태들은 하나의 객체로 다룬다.) 많은 상태를 한번에 전부 다룬다는 것은 효과적이지 않다. 왜 효과적이지 않을까? 렌더링 때문이다. 렌더링은 쉽게말하면 지금 보여지고있는 모니터의 화면을 어떻게 구성할지, 설명할지 요청하는 프로세스이며, 함수의 실행이다. function Counter() { // 음~ 무엇을 그릴까요 const [..

리엑트쿼리를 사용할 수 있는 범주들은 정말 다양하게 존재한다.페이지네이션, 무한스크롤, 유저정보관리, 장바구니, 게시판, 좋아요/싫어요버튼 , 주문 시스템, 댓글 시스템 등 무궁무진해서, 어느상황에서도 접목이 가능하다. 기존 프로젝트에선 유저의 정보를 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에는 호출한 데이터가 담겨있을 것이다. 그러나 이 데이터가 완벽하게 도착할 순..