본문 바로가기

분류 전체보기50

Github 으로 협업하기 저는 혼자서 주로 개발공부를 했어서그냥 github에 프로젝트 올리는 것은 엄청 쉽지만병합하고 브랜치를 이동하고 pull 받고 하는건 익숙치 않았습니다. 이번 기회에 블로그에 정리를 하려고 합니다.  Git에서 팀원이 올린 pull request를 merge하여 최신 코드로 업데이트된 dev 브랜치의 코드를자신의 feature 브랜치에 합치는 절차는 다음과 같습니다.이 과정에서 병합 충돌이 발생할 수도 있으며, 이 경우 직접 해결해야 합니다. 1. 로컬 저장소에 dev 브랜치의 최신 코드 가져오기: 먼저, 현재 작업 중인 브랜치에서 변경 사항이 있는지 확인하고 커밋을 저장합니다. 그런 다음 dev 브랜치로 전환하여 최신 코드를 가져옵니다.# 현재 feature 브랜치에 있는 변경 사항을 커밋 (아직 커밋.. 2024. 6. 18.
React에서 Link 태그와 useNavigate 훅의 차이점 리액트에서 네비게이션을 구현할 때 많이 사용하는 방법으로 Link 태그와 useNavigate 훅이 있습니다. 이 두 가지 방법은 모두 페이지 간의 이동을 가능하게 하지만, 그 사용 방법과 용도가 약간 다릅니다. 이번 글에서는 Link 태그와 useNavigate 훅의 차이점에 대해 간단한 예제와 함께 설명해 보겠습니다. Link 태그Link 태그는 리액트 라우터에서 제공하는 컴포넌트로, 사용자에게 클릭 가능한 링크를 제공합니다. HTML의 태그와 유사하게 작동하지만, 전체 페이지의 리로드 없이 클라이언트 사이드 네비게이션을 구현할 수 있습니다.import React from 'react';import { BrowserRouter as Router, Route, Routes, Link } from 'r.. 2024. 6. 17.
클라이언트 상태관리 vs 서버 상태관리: 로그인/회원가입 및 지출 관리 시스템 구현 회고 최근에 진행한 '개인 지출 관리' 프로젝트에서 탠스택쿼리(TanStack Query)를 활용해회원가입/로그인 기능과 지출 관리 기능을 구현했습니다. 프로젝트를 하면서 드는 의문점은인증/인가, 데이터 CRUD를 탠스택 쿼리를 쓰면서 서버에서 상태를 관리하게 되었고그럼 현재 프로젝트에서 굳이 리덕스를 써서 클라이언트 상태관리를 할 필요가 없겠네? 였습니다. 굳이 클라이언트 상태 관리할게 있다면 사용자의 로그인상태나, 사용자의 정보 정도...?근데 탠스택 쿼리로 기능 구현이 충분히되는데 리덕스로 같은 작업을 2번이나 할 필요가 있을지 의문이 들었습니다. 진지하게 의문을 갖고 튜터님께 찾아가 위의 내용에 대해 질문을 드렸습니다. 돌아온 튜터님의 말씀은,"사실 현재 프로젝트에서는 크게 클라이언트 상태관리가 중요하.. 2024. 6. 14.
Zustand Zustand는 경량 상태 관리 라이브러리로, React 애플리케이션에서 쉽게 상태를 관리할 수 있도록 도와줍니다.Redux와 같은 다른 상태 관리 라이브러리와 비교했을 때,API가 간단하고 보일러플레이트 코드가 적다는 장점이 있습니다. Zustand 설치하기먼저, Zustand를 프로젝트에 설치합니다.npm install zustand 또는 Yarn을 사용하는 경우yarn add zustand Zustand 기본 사용법Zustand는 상태 저장소를 생성하는 함수를 제공합니다. 이 함수는 상태와 상태를 업데이트하는 방법을 정의합니다. 1. 상태 저장소 생성하기import create from 'zustand'const useStore = create(set => ({ count: 0, increase.. 2024. 6. 13.