dev-hpk 님의 블로그

React는 컴포넌트 기반의 라이브러리로, 모든 컴포넌트는 생명주기(Lifecycle)를 가집니다. 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 의미하며 이를 활용해 컴포넌트의 특정 시점에 원하는 동작을 정의할 수 있습니다. 목차 1. 리액트의 라이프사이클 단계 2. 함수형 컴포넌트와 useEffect 3. useEffect 사용 시 주의할 점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 리액트의 라이프사이클 단계위 사진은 Class 방식의 라이프 사이클입니다.함수형 방식에서는 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있습니다.1. 마운트 (Mount)정의: 컴포넌트가 생성되고 DOM에 추가되는 단계주요 메서드: componentDidMount (클래스 컴포넌트 기준)..

드디어 중급 프로젝트 시작이다!! 지난 초급 프로젝트는 팀원들 모두 첫 프로젝트를 진행하는 상황이라 소통과 일정 관리, 그리고 업무 분담 면에서 많은 어려움이 있었습니다. 작업이 겹치거나 누락되는 경우도 있었고, 서로의 의견을 조율하다가 오전을 모두 사용한 적도 있었습니다. 이런 경험은 당시에는 힘들었지만 팀 프로젝트에서 무엇이 중요한지를 배우는 값진 기회였습니다. 중급 프로젝트를 시작하며 설레는 마음도 크지만 긴장감도 함께 느껴집니다.이전 경험을 바탕으로 소통을 더욱 원활히 하고 일정 관리와 업무 분담을 철저히 계획해 프로젝트를 성공적으로 마무리하며 팀원들과 함께 좋은 결과를 만들어내고 싶습니다. 이번에는 더 나은 협업을 통해 성장과 성취를 모두 이루는 뜻깊은 시간을 기대해 봅니다✨✨ 기술 스택Next..

저번 포스팅에서 retryFetch라는 메서드를 만들어서 요청을 보내고, response의 status를 확인해 토큰을 재발급했다.const retryFetch = async ( url: string, options: RequestInit): Promise => { const response = await fetch(url, options); if (response.status === 401) { // status === 401 : Unauthorized 토큰 갱신 const refreshResponse = await fetch( `${process.env.NEXT_PUBLIC_SERVER_URL}/auth/refresh-token`, { method: "..

개발에서는 프레임워크와 라이브러리라는 용어가 자주 등장합니다. 이 둘은 개발 효율성을 높이고 코드 품질을 향상시키기 위해 사용되지만, 그 개념과 활용 방식에서 명확한 차이가 있습니다.  목차 1. 프레임워크(Framework)란? 2. 라이브러리(Library)란? 3. 프레임워크와 라이브러리의 차이 - 제어의 역전(Inversion of Control) 4. 프레임워크와 라이브러리 예시추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 프레임워크(Framework)란?프레임워크는 애플리케이션의 기본 구조를 제공하며, 개발자가 이를 기반으로 코드를 작성해 나가는 "뼈대"입니다.앱/서버 등의 구동, 메모리관리, 이벤트 루프 등 공통된 부분은 프레임워크가 관리하고, 사용자는 프레임워크가 정해준 방..

React 애플리케이션에서 폼 관리는 매우 빈번한 작업입니다. React State를 이용해 폼 상태를 관리하고, 유효성을 검증하며, 성능을 최적화하는 것은 번거로울 수 있습니다. React Hook Form은 이러한 작업을 간소화하고 성능을 최적화해 주는 가볍고 직관적인 폼 관리 라이브러리입니다.목차 1. React Hook Form이란? 2. React Hook Form 설치 및 기본 사용법 3. 주요 Hook과 함수 4. React Form vs React Hook Form추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. React Hook Form이란?React Hook Form은 React의 Hooks API를 기반으로 설계된 폼 관리 라이브러리입니다. HTML의 기본 폼 요소를 활..