NextAuth.js로 인증을 구현할 때 세션 전략 선택은 성능에 직접적인 영향을 미친다. pixelDiff 프로젝트에서 Figma OAuth를 구현하면서 DB 세션에서 JWT로 전환한 경험을 정리한다. 문제 상황Figma OAuth 연동 후 API 응답이 체감될 정도로 느렸다. 원인을 추적해보니 매 요청마다 세션 테이블을 조회하는 데서 병목이 발생하고 있었다.[요청] → [세션 테이블 조회] → [사용자 정보 반환] → [응답] ↑ 약 400ms 소요세션 조회 자체는 단순한 쿼리지만, 네트워크 왕복(Supabase PostgreSQL)과 커넥션 오버헤드가 누적되면서 체감 지연이 발생했다. 선택지 분석전략동작 방식장점단점DB 세션매 요청마다 세션 테이블 조회서버에서 세션 무효..
사이드 프로젝트를 시작할 때마다 같은 고민이 반복된다. 프론트엔드는 React나 Next.js로 금방 결정되는데, 백엔드는 어떻게 할 것인가. Express? NestJS? 별도 서버를 띄우면 인프라가 두 배가 된다. pixelDiff를 만들면서 "Next.js API Routes만으로 얼마나 갈 수 있을까?"를 실험해봤다. 결론부터 말하면, 프로덕션급 서비스까지 충분히 가능하다. 38개 엔드포인트, OAuth 인증, PostgreSQL 연동, Rate Limiting까지 모두 Next.js 안에서 해결했다. 왜 별도 백엔드를 두지 않았나 선택지는 세 가지였다.방식장점단점Express/Fastify + React자유도 높음, 검증된 패턴두 개의 배포, 두 개의 인프라NestJS + React체계적인 구조..
디자인 비교 도구를 만들다 보면, 레이어를 이리저리 옮기는 일이 많다. Figma 이미지 위에 스냅샷을 올려놓고 위치를 조정하는데, 손이 미끄러져서 엉뚱한 데 놓는 경우가 생각보다 잦다.그럴 때마다 "아 Cmd+Z 눌러야지" 하고 습관적으로 단축키를 누르게 되는데, 당연히 안 된다. Undo 기능이 없으니까. Undo/Redo가 필요한 이유사실 처음엔 없어도 괜찮다고 생각했다. 레이어 위치 좀 틀리면 다시 드래그하면 되니까. 근데 실제로 써보니까 생각이 달라졌다. 되돌리기 기능은 "실수해도 괜찮다"는 안전망이다.이게 없으면 모든 조작이 신중해져야 하고, 그만큼 피로도가 올라간다. 특히 레이어가 여러 개일 때, 하나를 옮기다가 실수로 다른 걸 건드리면 원래 위치가 어디였는지 기억도 안 난다. 결국 Undo..
Next.js Conf에서 발표했듯이, Next.js 14는 우리의 가장 집중적인 릴리즈이에요: Turbopack: App & Pages Router에 대한 5,000개의 테스트가 통과됨 53% 더 빠른 로컬 서버 시작 Fast Refresh와 함께 94% 더 빠른 코드 업데이트 Server Actions (안정화): 점진적으로 향상된 변화 캐싱 및 재검증과 통합 단순한 함수 호출, 또는 폼과 자연스럽게 작동 Partial Prerendering (미리보기): 빠른 초기 정적 응답 + 동적 콘텐츠 스트리밍 Next.js Learn (신규): App Router, 인증, 데이터베이스 등을 교육하는 무료 강좌 Next.js Compiler: Turbocharged Next.js 13부터, 우리는 Next.j..
프론트엔드 인턴쉽에서 투두리스트 앱을 만드는 과제를 하던 중 UX를 해치는 부분을 발견했다. // 기존 코드 const updateTodoHandler = () => { setIsUpdate(() => true); const newTodo = newTodoRef.current?.value; if (isInputValid(newTodo)) return; onUpdate(todoItem.id, newTodo, todoItem.isCompleted); setIsUpdate(() => false); }; const onUpdateTodo = async (todoId: number, todoText: string, isCompleted: boolean) => { await updateTodo(todoId, tod..
다음 두 가지 방법으로 상태를 업데이트할 수 있다. const [state1, setState1] = useState({ id: '', name: '', }); const [state2, setState2] = useState({ id: '', name: '', }); setState1({ ...state1, name: e.target.value }); setState2((prevState2) => ({ ...prevState2, name: e.target.value })); 검색을 아무리 많이 해봐도 이 둘의 차이를 명확하게 짚어 주지 않아서 개인 프로젝트로 여러 가지 실험을 해봤다. 거의 동일한 기능이라고 봐도 무방하다. 하지만, 핵심적인 차이점은 이전상태를 고려하지않는다. 즉, 최신 값을 보장할 수..
프로젝트 라우팅 구조 token을 전역상태로 관리하는데 그 토큰의 변경이 감지되면 알맞게 페이지 리다이렉트를 시키는 구조이다. 문제 로그인 시 토큰을 발급받고 로컬스토리지에 저장하는데 저장 후 토큰이 감지되고 리다이렉트를 하는데 토큰의 값이 null로 request 된다. 문제 해결 과정 1. 저장이 되기 전에 리다이렉트 되나? vscode로 페이지가 라우팅 되기 전, 라우팅 되는 과정, 라우팅 후를 관찰하기 위해 debug를 사용함. 하지만 토큰이 로컬 스토리지에 저장이 되고 라우팅 되는 것을 확인할 수 있었음. 2. axios의 인스턴스가 문제인가? custom 한 api가 문제인가 싶어서 login함수를 만들고 axios로 하드코딩해서 headers에 토큰을 받아서 넘겨줬는데 여전히 null값으로 ..
React.js 프로젝트를 쉽게 생성하기 위한 툴이다. React.js를 처음 사용하는 개발자들은 개발 환경 설정이 어려울 수 있지만, Create-React-App을 사용하면 초기 설정을 간편하게 해결할 수 있다. Create-React-App 설치시 자동으로 설치되는 패키지들 Create-React-App을 사용하여 React.js 프로젝트를 생성하면 다양한 패키지들이 자동으로 설치된다. 이러한 패키지들은 React.js 프로젝트를 개발하는 데에 필요한 다양한 도구들을 제공한다. 자동으로 설치되는 패키지는 아래와 같다. react react-dom react-scripts react 와 react-dom 은 React.js 라이브러리이며, react-scripts는 Create-React-App에서 ..
