도니 House 도니 House

Next.js가 어떻게 돌아가는지 부터 파악해보기 - 프로젝트를 진행하면서 hydration에러가 발생했습니다.React error 418이 Hydration에러가 발생했다라는 뜻이라고 합니다. - 근데 왜 발생했을까요 - 우선 Hydration이 뭔지 부터 저는 바로잡고자 다시한번 공부를 했습니다. Hydration? - 이번 Next.js에서 어떻게 렌더링을 하는지에 대해서 봅시다.- 유저가 브라우저에서 접속 요청을 하면 서버에서 사전 렌더링이 시작됩니다. 이때 Next.js는 서버 컴포넌트(SC)와 클라이언트 컴포넌트(CC)를 구분해서 처리합니다.- 서버 컴포넌트는 서버에서 실행된 뒤 RSC Payload 형태로 직렬화됩니다. 클라이언트 컴포넌트는 서버에서 HTML로 렌더링됩니다. 이 둘을 합쳐 ..

다시 한번- 더 해빗(TheHabit)이라는 습관 형성 챌린지 서비스를 다시 만들면서 겪은 이야기입니다.- 온보딩 페이지를 구현하면서 고려하지 못한 부분에 대해서 보완해보고자 프로젝트를 다시 시작했습니다. - 과거에 왜 하지 않았을까 생각해봤을때 딱 아래 사진과 똑같았습니다. - 예외 처리 혹은 다른 여러가지 상황을 고려하지 못했던거 같습니다. - 일단 작동하니 넘겼던 과거를 후회하면서... - 여러 예외 상황 등을 바로 잡아보고자 합니다. 과거의 구현이 어떻게 되었고 현재 어떻게 수정할지에 대해// 쿠키를 날것으로 직접 읽었음const token = req.cookies.get('next-auth.session-token')?.value;console.log('pathname', pathname..

다시 시작.. 프로젝트를 구현하면서 기능을 완성하는 데 집중한 나머지 다양한 관점에서 충분히 고민하지 못했다는 것을 깨달았다.구현이 끝나면 ‘이제 다 했다’는 안도감이 들었고 그 때문에 사용성이나 예외 상황 개선 가능성을 놓치기도 했다.이번 기회를 통해 구현에서 끝나는 것이 아니라 완성 이후에도 더 나은 방향을 고민하는 습관을 만들어가고자 한다. 예외 상황 생각해보기 🤔- 현재 상황을 다이어 그램으로 생각해 봤다. - 간단하다 유저가 블로그 글 생성을 할때 나가면 api를 연결해서 데이터를 유지해서 db에 insert할지 아니면 네트워크를 abosrtController로 취소할지에 대한 그림이다. AbortController로 진행 중인 저장 요청 취소하기 또는 글 생성 중 유저 이탈 시 안전하게 ..

배경피드백 생성 기능을 구현하면서 한 가지 문제를 발견했다.사용자가 버튼을 빠르게 여러 번 클릭하면 GPT API 호출이 그 횟수만큼 전송됐다. API 비용은 호출 횟수에 비례하고 동일한 피드백이 여러 번 생성되면 DB도 오염되어 막아야 했다.1차 시도 — isSubmitting으로 클라이언트 방어가장 먼저 떠오른 건 버튼 상태 관리였다. API 호출 중에는 버튼을 비활성화하면 중복 클릭 자체를 막을 수 있다.const [isSubmitting, setIsSubmitting] = useState(false);const handleGenerate = async () => { if (isSubmitting) return; setIsSubmitting(true); try { await generat..

프로젝트 문제점 - 항상 프로젝트에는 새로운 문제점이 생긴다. 👋 문제 정의- 문제점은 클라이언트 측에서 블로그 글 생성 -> 취소 할때의 문제가 있었다. 문제 해결 시도하기- 클라이에서 블로그 글 생성 -> 취소 할때의 문제가 뭔지를 우선 정의했다. 흐름은 다음과 같다. 1. 사용자가 블로그 글을 생성한다. 2. 갑자기 사용자가 블로그 글을 취소해버리거나 뒤로 가기를 눌러버린다. 3. 내가 구현한 코드에는 취소나 뒤로가기를 누르면 그대로 AI API 요청을 보낸다. - 위와 같은 문제를 나는 클라이언트 측에서 AbortController를 활용해서 비동기 작업을 취소해보도록 했다. AbortController ? - AbortController란 현재 진행중인 비동기 작업을 취소할수 있게..

React 렌더링Activity 컴포넌트를 이해하기 전에 먼저 React에서 상태 업데이트가 어떻게 이루어지고 왜 리렌더링이 발생하는지 이해할 필요가 있다.React 공식 문서에서는 Activity가 hidden 상태일 때 렌더링을 수행하지 않는다고 설명하고 있기 때문에, 이를 이해하기 위해 먼저 React의 기본 렌더링 과정을 살펴보았다.예를 들어 다음과 같은 코드가 있다고 하자.function App() {const [count, setCount] = useState(0);return ( setCount(count + 1)}>클릭);}버튼을 클릭하면 setCount가 호출되고 React는 다음과 같은 과정을 통해 UI를 업데이트한다.setState↓updateQueue에 update 추가↓render..

✅ React에서 데이터 저장 방식 정리 1) React의 상태(state)와 한계React는 컴포넌트 내부의 state로 화면에 필요한 데이터를 관리한다.setState가 호출되면 상태가 업데이트되고 UI는 자동으로 다시 렌더링된다.하지만 state는 컴포넌트 메모리에 존재하는 일시적인 값이기 때문에:페이지 새로고침컴포넌트 언마운트(페이지 이동)와 같은 상황에서 초기값으로 리셋된다.📌 중요!!state는 “리렌더링” 때문에 사라지는 것이 아니다.사라지는 이유는 오직 새로고침 또는 언마운트 때문.따라서 로그인 정보처럼 지속되어야 하는 값은 state만으로 유지할 수 없다.2) 지속적으로 유지해야 하는 데이터는 브라우저 저장소에 저장페이지 이동, 새로고침, 앱 재실행 후에도 유지해야 하는 데이터는Reac..

React hook 알아보기useCallbackuseMemo가 값을 기억했다며느 useCallbak은 인수로 넘겨받은 콜백 자체를 기억한다. 즉 useCallback은 특정 함수를 새로 만들지 않고 다시 재사용한다는 의미이다. 🧐 음 솔직히 뭔지 모르겠다 ... 예시를 보자아✅ 확인하고 넘어가기 - React에서 리 렌더링이 일어나면 함수가 다시 만들어지고 다시 실행이 된다. -> 이로 인해 함수 내부 변수가 함수 등이 다른 메모리 주소를 가르킨다. "use client";import { useEffect, useState } from "react";export default function SignupPage() { const [step, setStep] = useState(1); const on..