분류 전체보기 (76) 썸네일형 리스트형 Git 브랜치 전략: Trunk-Based에서 GitHub Flow로의 여정 안녕하세요! 오늘은 개발 팀의 생산성과 코드 품질에 큰 영향을 미치는 Git 브랜치 전략에 대해 이야기해보려고 합니다. 특히 제가 경험한 Trunk-Based Development에서 GitHub Flow로의 전환 과정을 중심으로 실제 적용 사례와 배운 점들을 공유하겠습니다.주요 Git 브랜치 전략 비교저는 주로 세 가지 브랜치 전략을 경험해보았습니다: Git Flow, GitHub Flow, 그리고 Trunk-Based Development입니다. 각 전략의 특징을 간략히 살펴보겠습니다. Git FlowGit Flow는 가장 구조화된 브랜치 전략입니다:feature 브랜치: 모든 새로운 기능 개발은 여기서 시작develop 브랜치: 개발 중인 기능들이 모이는 통합 브랜치release 브랜치: 출시 준비.. [React-Query] Query Key 관리와 개선 경험 React Query를 도입하면서 또 하나의 중요한 고민은 queryKey 관리였습니다. 여러 파일에 걸쳐 queryKey를 관리하다 보니 재사용성과 유지보수 측면에서 어려움을 겪었는데요, 이를 해결하기 위한 전략을 공유하고자 합니다. Query Key 중앙 관리 시스템 도입여러 파일에 분산된 queryKey를 하나의 모듈로 통합 관리하는 방식을 도입했습니다.// queries/queryKeys.tsexport const QUERY_KEYS = { GENERAL: { PLANS: { INDEX: ['plans'], }, PLAN: { INDEX: (planId: number) => ['plan', planId], }, PLACES: { INDEX: .. 레거시 코드를 React Query로 개선한 리팩토링 이야기 이커머스 플랫폼의 결제 시스템을 유지보수하면서 React Query를 도입하여 코드 품질과 성능을 개선한 경험을 공유하려고 합니다. 기존 코드의 문제점 발견프로젝트에 투입되어 코드를 분석하던 중, 데이터 패칭 로직이 대부분 useEffect로 구현되어 있는 것을 발견했습니다.// 기존 코드const [memberAddress, setMemberAddress] = useState(null);const [isLoading, setIsLoading] = useState(true);useEffect(() => { if (!router.isReady) return; fetchMemberAddress(); createOrderProducts();}, [router, router.isReady]);const f.. [코드트리 한달후기] 코드트리로 코딩 테스트 준비하기 이번 글에서는 제가 한 달 동안 코드트리를 활용해 코딩 테스트를 준비한 경험을 공유하고자 합니다. 현재 많은 개발자들이 사용하는 백준이나 프로그래머스와는 어떤 차별점이 있는지, 어떤 장단점이 있는지 솔직하게 이야기해보려고 합니다.코드트리를 선택한 이유사실 알고리즘 공부를 시작할 때 가장 힘들었던 건 "도대체 어디서부터 시작해야 하지?" 라는 고민이었어요. 프로그래머스에서 문제를 몇 번 풀어봤는데, 개념도 제대로 모르는 상태에서 문제부터 풀려니 너무 막막하더라고요. 그러던 중 운이 좋게도 글또에서 코드트리와 함께하는 이벤트를 준비해주셔서 참여하게 됐습니다. 사실 코드트리라는 플랫폼은 전부터 알고 있었지만, 실제로 사용해본 건 이번이 처음이라 제 솔직한 후기를 남겨보려고 합니다! 코드트리 플랫폼 특징문제 구.. React Coupon Selector에서 발생한 isToggle과 maxPriceCoupon 동기화 문제 해결하기 들어가며개발을 하다 보면 간단해 보이는 기능도 실제 구현 과정에서 예상치 못한 복잡성을 마주치게 됩니다. 최근 제가 경험한 쿠폰 선택 기능 구현 과정이 바로 그랬습니다. 자동/수동 쿠폰 선택이라는 겉보기에 단순한 기능이, 여러 상태값들이 얽히면서 꽤나 까다로운 문제로 발전했던 경험을 공유하고자 합니다. 구현하고자 했던 기능우리 프로젝트에서는 사용자에게 두 가지 쿠폰 선택 방식을 제공하고자 했습니다:자동 선택: 시스템이 자동으로 최대 할인 쿠폰을 선택수동 선택: 사용자가 직접 원하는 쿠폰을 선택이를 위해 isToggle이라는 상태값으로 자동/수동 모드를 전환하고, maxPriceCoupon으로 최대 할인 쿠폰을 관리하는 방식을 선택했습니다. 발생한 문제처음에는 단순하게 접근했습니다. isToggle이 fa.. [Tailwind CSS] gap vs space 유틸리티의 차이점 이해하기 Tailwind CSS를 사용하다 보면 요소들 간의 간격을 조절하기 위해 gap과 space 유틸리티를 자주 사용하게 됩니다. 저 역시 프로젝트를 진행하면서 두 유틸리티를 번갈아가며 사용했는데, 어느 순간 "이 상황에서는 어떤 유틸리티를 사용하는 게 더 적절할까?"라는 의문이 들었습니다. 관련 내용을 찾아보니 얼핏 비슷해 보이는 이 두 유틸리티가 실제로는 서로 다른 상황에 특화되어 있고, 각각의 장단점이 있다는 것을 알게 되었습니다. 이번 글에서는 제가 알게 된 두 유틸리티의 차이점과 적절한 사용 사례에 대해 함께 알아보도록 하겠습니다. gap 유틸리티gap 유틸리티는 Grid나 Flexbox 레이아웃에서 사용되는 CSS gap 속성을 기반으로 합니다.주요 특징Grid나 Flexbox 컨테이너에만 적용 .. [React]React useImperativeHandle Hook 깊게 이해하기 useImperativeHandle이란?useImperativeHandle은 React에서 제공하는 Hook으로, ref를 통해 부모 컴포넌트에 노출할 인스턴스 값을 사용자가 직접 정의할 수 있게 해주는 기능입니다. 기본적으로 부모 컴포넌트에서 자식 컴포넌트의 DOM 노드에 직접 접근할 때 ref를 사용하지만, useImperativeHandle을 사용하면 노출하고자 하는 메서드나 값들을 직접 선택하여 제공할 수 있습니다.사용 시기useImperativeHandle은 다음과 같은 상황에서 주로 사용됩니다:부모 컴포넌트에서 자식 컴포넌트의 특정 메서드를 호출해야 할 때컴포넌트의 내부 구현을 숨기고 특정 기능만 외부에 노출하고 싶을 때기존 DOM 요소의 메서드나 속성을 커스터마이즈하고 싶을 때실제 사용 예시.. [데이터베이스] One-to-Many와 Many-to-Many 관계 1. One-to-Many 관계 (1:N 관계)One-to-Many 관계는 하나의 엔티티가 여러 개의 다른 엔티티와 연결될 수 있는 관계를 말합니다. 이 관계에서 "하나"에 해당하는 엔티티는 "다수"에 해당하는 엔티티의 부모 역할을 하며, "다수"는 자식 엔티티로 볼 수 있습니다.1.1 주요 특징단방향성: 부모에서 자식으로의 명확한 방향성을 가집니다참조 무결성: 자식 레코드는 반드시 유효한 부모 레코드를 참조해야 합니다CASCADE 동작: 부모 레코드 삭제 시 자식 레코드 처리 방식을 정의할 수 있습니다1.2 예시와 구현학교-학생 관계:하나의 학교(One)는 여러 명의 학생(Many)을 가질 수 있습니다반대로, 하나의 학생은 단일 학교에만 속합니다CREATE TABLE School ( id INT .. 이전 1 2 3 4 5 ··· 10 다음
