본문 바로가기

전체 글

 (60)
현재 프로젝트에서 브랜치 전략 개선해보기 현재 진행하고 있는 프로젝트의 브랜치 전략 - main: 제품으로 출시될 수 있는 브랜치 - dev-fe: 다음 출시 버전을 개발하는 브랜치 - feature: 기능을 개발하는 브랜치 - dev-release: 이번 출시 버전을 준비하는 브랜치 총 4가지의 브랜치를 운영하고 있습니다. 1. main에서 dev-fe 브랜치를 생성한다. 2. 기능 단위로 이슈를 등록 후 feature 브랜치를 생성한다. - 2명이서 진행했기 때문에 담당자 이름 약자(ex: ayr)/feature/이슈넘버가 들어가게 브랜치 룰을 정했습니다. 3. 기능을 완성하면 feature 브랜치를 dev-fe에 merge한다. 4. dev-fe에서 pull 받아와서 제대로 작동하는지 확인 및 버그 수정을 진행한다. 5. 제대로 작동하면,..
GitHub Flow와 Git Flow 중에 어떤 걸 선택해야하지? 원래는 Git Flow를 적용해보려고, Git Flow에 대해서 공부하고 있었는데 공부를 하면서 점점 이상하다고 느껴졌습니다. 우선 지금 진행하고 있는 프로젝트가 소규모이기도하고, 빠르게 배포하고 수정해야했기 때문에 release 브랜치를 생성하여 CI/CD가 가능하게 제작해놓았는데, Git Flow 경우에는 버전에 맞게 배포를 진행하기 때문에 이게 맞나...?라는 생각이 문득 들었는데 그 와중에 GitHub Flow라는 것을 알게 되었습니다. Git 브랜치 전략 브랜치 전략은 여러 개발자가 하나의 저장소를 사용하는 환경에서 저장소를 효과적으로 활용하기 위한 work-floew며, 브랜치 생성에 규칙을 만들어서 협업을 유연하게 하는 방법론이다. Git-Flow Git Flow 전략 간단하게 살펴보기 Gi..
개발 버전 관리 버전의 정의 효율적으로 상품을 관리하기 위한 목적으로 소프트웨어, 하드웨어 상품의 개발 단계 또는 순서를 번호로 표시한 것으로 버전에 따라 내용과 기능에 차이가 있으므로 명확하게 표시해야한다. 버전 표기 이점 버전만으로 핫픽스된 이슈, 스팩의 구현을 볼 수 있어서 대략적인 프로젝트의 히스토리를 확인할 수 있으며, 로그 정리에 도움이 된다. *핫픽스(Hotfix)란? 제품 사용 중에 발생하는 버그의 수정이나 취약점 보완, 또는 성능 향상을 위해 긴급히 배포되는 응급 패치 프로그램. *로그(log)란? 로그파일은 운영 체제나 소프트웨어가 실행 중 발생하는 이벤트등의 메세지를 기록한 파일이다. 1.0.0의 '.'의 의미 '.'을 기준으로 3 부분으로 나눌 수 있습니다. major.minor.patch 주(主)..
[리액트 공식 문서 스터디] React에도 고유 ID를 생성하기 위한 Hook이 있다고? 고유 ID를 생성하기 위해서 보통 직접만들거나, uuid 라이브러리를 이용해서 고유 ID를 생성하지 않나요? 이번에 찾아보니, React에도 고유 ID를 생성하기 위한 Hook이 존재합니다. 바로, useId입니다. 사용법 1. 컴포넌트 최상단에서 useId를 호출하고, 고유 ID값을 생성합니다. 2. 생성된 Id를 다른 속성에 전달 하라 수 있습니다. (ID는 고유해야하므로 useId를 생성하여 고유한 ID를 생성하는 게 좋다) import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); return( ) 더보기 aria-describedby란? - id위젯 또는 그룹과 이를 설명하는 텍스트 간의 관계를..
[React+TypeScript] ShortPolling, LongPolling, SSE, WebSocket 차이점 목표 실시간 알림 서비스를 구현하고자, 어떤 방식이 알림 서비스에 적합한지 알아보고, 실시간 통신 방식에 대해서 학습한다. ShortPolling 특징 - 클라이언트는 일정한 간격(예:1~2초) 으로 HTTP요청을 계속해서 보내는 방법 - 서버에서 업데이트가 없을 경우, 대부분의 요청은 빈응답으로 받는다. 단점 높은 HTTP 오버헤드가 발생한다. 불필요한 네트워크 호출이 발생한다. 실시간 통신 애플리케이션으로 적합하지 않다. HTTP 오버헤드란? - 네트워크를 통해 대상으로 라우팅되는 데이터와 함께 전송되어야하는 정보를 말하며, 올바른 대상에 도달하기 위해 전송중인 데이터에 추가로 보내지는 정보라 보면 된다. 장점 - 정보 전송의 신뢰성을 높일 수 있고 시스템을 안정적으로 운용할 수 있다. 단점 - 작은..
[html/css]글자수 넘어가면 말줄임표/원하는 줄 수에 맞게 말줄임표 아래 코드는 264px에 줄이 2줄이 넘어가면 말줄임표가 생겨나게 생성한 코드입니다. overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 264px; 그러면 아래 처럼 말줄임표가 생겨나는 것을 확인할 수 있습니다.
[리액트 공식 문서] Reducer와 Context로 확장하기 Reducer와 Context - Reducer를 사용하면 컴포넌트의 state 업데이트 로직을 통합할 수 있다. - Context를 사용하면 다른 컴포넌트들에 정보를 전달할 수 있다. reducer와 context를 결합하기 - state와 dispatch 함수를 props를 통해 전달하느 대신 context에 넣어서 사용할 수 있는데, 이점은 prop drilling 없이 TaskBoard 아래의 모든 컴포넌트 트리에서 tasks를 읽고 dispatch 함수를 실행 할 수 있다. Reducer와 context 결합 방법 1. context를 생성한다. 2. state과 dispatch 함수를 context에 넣는다. 3. 트리 안에서 context를 사용한다. Step1: Context 생성하기 - ..
[리액트 공식 문서] context로 데이터 깊숙이 전달하기 context를 사용할 때 - 정보를 전달 할 때, 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달하는데, 중간에 여러 컴포넌트를 거쳐야할 때가 있는데, context를 이용하면 깊이 여부와 무관하게 아래 트리의 모든 컴포넌트에서 일부 정보룰 사용할 수 있다. props 전달의 문제 - 트리 깊숙이 prop을 전달해야 하거나 많은 컴포넌트에 동일한 prop이 필요한 경우 prop 전달이 장황하고 불편해질 수 있다. - 만약 최상위 컴포넌트와 멀리 떨어져있다면, state를 높이 끌어올리다보면 prop drilling이라는 상황이 발생한다. Context: props 전달의 대안 context를 생성합니다. 데이터가 필요한 컴포넌트에서 해당 context를 사용합니다. 데이터를 ..

티스토리툴바