본문 바로가기

전체 글

 (106)
TIL - React 훅 소개 React는 꾸준히 진화하면서 개발자들이 더 효율적으로 작업할 수 있도록 새로운 훅(Hook)을 도입하고 있습니다. 이번 글에서는 최근에 추가된 몇 가지 흥미로운 훅들을 소개하고, 그 사용 예시를 공유하고자 합니다. 1. useIduseId 훅은 컴포넌트 내에서 고유한 ID를 생성하는 데 사용됩니다. 이는 폼 요소나 ARIA 속성에서 유용하게 사용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:import { useId } from 'react';function MyComponent() { const id = useId(); return ( Name: );}  2. useSyncExternalStoreuseSyncExternalStore 훅은 외부 스..
TIL - 팀 프로젝트에서 SOLID 원칙 적용 경험 공유 이번 TIL에서는 팀 프로젝트를 진행하며 SOLID 원칙을 적용해 본 경험을 공유합니다. 설문조사 모달 창에서 단일 책임 원칙과 인터페이스 분리 원칙을 중점적으로 적용하여 리팩토링을 진행했습니다. 이 과정을 통해 모듈화와 재사용성을 개선하고자 했습니다.  리팩토링 과정useFilterFoods 커스텀 훅 분리목적: SurveyModal에서 렌더링과 관련된 로직만 남기고, 데이터 처리 로직을 useFilterFoods 커스텀 훅으로 분리구현 내용:점수 계산 및 데이터 필터링 로직을 useFilterFoods 훅으로 이동SurveyModal은 설문조사 관련 UI와 로직만 처리결과: 모듈화와 재사용성 향상컴포넌트 분리목적: 컴포넌트를 더 분리하여 역할을 명확히 하고, 코드의 유지보수성과 재사용성 향상구현 내용..
TIL - 리액트 컴포넌트 설계, SOLID 5원칙 1. SPR 단일 책임 원칙 (Single Responsibility Principle)설명:단일 책임 원칙은 클래스나 컴포넌트가 한 가지 책임만 가져야 한다는 원칙입니다.변경 요청을 하는 사람(사용자나 이해관계자)에 따라 책임을 분리합니다.비즈니스 관점에서 책임을 나누어 한 가지 책임에 대한 변경사항이 있을 때만 코드가 수정되도록 합니다.예시: 리액트 컴포넌트에서 사용자 프로필을 표시하는 부분을 예로 들겠습니다.import React from 'react';import UserInfo from './UserInfo';import UserAvatar from './UserAvatar';const UserProfile = ({ user }) => ( );export default Use..
TIL - 상태 관리 도구 비교: Redux, Zustand, React Query 이번 TIL에서는 React 애플리케이션에서 널리 사용되는 상태 관리 도구인 Redux, Zustand, React Query에 대해 알아보고, 각 도구의 장단점과 사용 예시를 정리하겠습니다. 또한, 클라이언트와 서버 상태 관리를 설명하며 예시 코드를 제공하겠습니다.목차상태 관리 개요Redux vs. Zustand vs. React Query 비교ReduxZustandReact Query서버 상태 관리와 클라이언트 상태 관리사용 예시로그인 상태 관리 예시게시글 작성 예시대규모 애플리케이션에서의 상태 관리표와 다이어그램상태 관리 도구 비교 표상태 관리 다이어그램결론1. 상태 관리 개요애플리케이션에서 상태 관리는 중요한 역할을 합니다. 상태 관리 도구는 중앙에서 상태를 관리하고, 데이터를 업데이트하며, 컴포..
TIL - React 컴포넌트의 생애주기 React 컴포넌트의 생애주기1. 마운트 (Mount)constructor: 컴포넌트가 생성될 때 호출됩니다. 상태(state)를 초기화하고, props를 초기화합니다.getDerivedStateFromProps: 컴포넌트가 마운트되기 전에 호출되며, props로부터 파생된 state를 설정할 수 있습니다.render: 컴포넌트의 JSX를 반환하여 가상 DOM을 생성합니다.componentDidMount: 컴포넌트가 마운트된 후에 호출됩니다. 이곳에서 네트워크 요청이나 DOM 조작을 수행할 수 있습니다.예제 코드class MyComponent extends React.Component { constructor(props) { super(props); this.state = { data: nu..
TIL - 트러블 슈팅 with tanstack/react-query 문제점내일배움캠프 과제로 인한 코딩 중 API 호출이 성공적으로 작동하지 않았습니다. 새로운 지출 항목을 생성하려고 했으나, 데이터가 제대로 반영되지 않고 UI에도 나타나지 않았습니다. 원인 분석에러 처리가 부족: API 호출 시 발생하는 에러를 처리하지 않아서 문제를 진단하기 어려웠습니다.로그 부족: API 호출 전후로 충분한 로그가 없어서 데이터 흐름을 추적하기 어려웠습니다.React Query 설정 누락: useMutation 훅에서 onSuccess와 onError 옵션이 누락되어 API 호출 후의 후속 처리가 제대로 이루어지지 않았습니다. 해결 방안 단계에러 처리 추가: API 호출 시 발생하는 에러를 try-catch 블록을 통해 처리하고, 콘솔에 에러 로그를 출력하도록 했습니다.로그 추가: ..
TIL - TanStack Query의 주요 개념 쿼리(Queries):데이터 패칭 작업을 나타냅니다.고유한 쿼리 키와 패치 함수(fetch function)를 사용하여 정의됩니다.자동으로 캐시되고 백그라운드에서 업데이트됩니다.뮤테이션(Mutations):서버 데이터를 변경하는 작업을 관리합니다.사용자가 데이터를 생성, 업데이트 또는 삭제할 때 사용됩니다.성공 또는 실패 시 자동으로 쿼리 캐시를 업데이트합니다.캐싱(Caching):동일한 쿼리가 여러 번 실행될 때 중복 패칭을 방지합니다.캐시된 데이터를 기반으로 빠른 UI 업데이트를 제공합니다.자동 리페칭(Automatic Refetching):데이터가 변경되었을 가능성이 있을 때 쿼리를 자동으로 다시 실행합니다.네트워크 상태 변화, 페이지 포커스, 또는 데이터 변경 이벤트와 같은 조건에서 트리거될 수 ..
TIL - SPA 블로그 프로젝트 마무리 및 다음 계획 프로젝트 마무리이번 SPA 블로그 프로젝트는 조건부 렌더링을 하는 연습을 통해 사용자 경험에 대한 고민을 하는 발전을 이루었습니다. 그러나 저번 주 팀 프로젝트에서 이미 뉴스 피드 사이트를 만들어서 앞으로 구현할 블로그가 중복이 되는 것 같아서 프로젝트를 마무리하고 다음 프로젝트에  공공데이터를 활용하기로 결정했습니다.   구현된 주요 기능PostDetailPage에서 게시물 수정 및 삭제 기능목적:  PostDetailPage에 유저 상태를 조건부 렌더링해서 게시물을 작성한 사용자가 게시물 상세 보기에서 게시물을 관리할 수 있게 하고, 다른 사용자는 홈페이지에서 게시물의 세부사항을 볼 수 있습니다 Tailwind CSS를 사용한 스타일링 개선목적: Tailwind CSS를 익히고 다양한 구성 요소의 스..

티스토리툴바