한창 부트캠프에서 최종 프로젝트를 진행하던 중 문득 궁금한 것이 생겼다. 그건 바로 브랜치 전략이었다. 이전 프로젝트까지는 각자 브랜치를 만들어 main 브랜치에 merge 하는 방식으로 협업을 해왔다. 근데 왜 갑자기 의문이 든 건지 모르겠지만, 아무튼 git 브랜치 전략 관련해서 검색을 해봤더니 역시 실무에서 main 브랜치에 바로 merge 하는 일은 없었다. main 브랜치에 바로 merge 하면 탕비실에 끌려간다는 글을 보았다. 그 글을 보고 바로 팀원들에게 연락해 git 관련해서 규칙을 하나 추가하겠다고 말했다. 그렇게 추가한 규칙이 develop이라는 개발 단계 브랜치의 도입이었다. 일단 생각한 방법은 이런 식이다. 각자 맡은 기능별 브랜치에서 작업한다. 기능별 브랜치에서 develop 브랜..

7주 차에는 실제 서비스하는 앱을 보고 따라 만드는 클론 코딩 프로젝트를 진행했다. 물론 모든 걸 따라 만들 수는 없으니 일주일 안에 가능한 최소 스코프를 정하고 개발을 시작했다. 우리 팀은 트위터를 주제로 정했고 팀원은 총 7명으로 프론트엔드 4명은 백엔드는 3명이었다. 나는 이번 부트캠프에서 팀장을 세번 맡았었는데, 이번 클론 코딩에서도 팀장을 맡았다. 처음에는 팀장이라는 자리가 부담스러웠는데, 계속 팀장을 하다 보니 팀의 리더로서 팀원을 챙기고 이끌어나가는 게 재밌어졌다. 어쩌면 나도 몰랐던 적성을 찾은 것 같다. 우리 팀의 개발 스코프는 아래와 같이 잡았다. User 로그인 회원가입 로그아웃 소셜 로그인 Profile 사용자 프로필 조회, 수정 팔로우, 언팔로우 조회, 추가, 취소 Tweet 작성..

CRA(create-react-app)으로 리액트 프로젝트 생성하기 리액트 프로젝트를 생성하는 방법에는 여러 가지가 있지만, 현재로서 가장 쉽고 보편적인 방법인 CRA(create-react-app)를 사용해서 생성해보려 한다. CRA 프로젝트를 생성하기 위해 npx를 사용할 것이다. 여기서 npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0 버전부터 새로 추가된 도구로 npm을 좀 더 편하게 사용할 수 있게 해 준다. Node.js를 설치했다면 기본적으로 npm도 같이 설치되므로 Node.js를 처음 설치했다면 바로 사용할 수 있다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.or..

TypeScript는 널리 사용되는 오픈 소스 프로그래밍 언어로 JavaScript를 기반으로 하며 정적 타이핑을 언어에 추가한다. 개발자가 보다 유지 관리 및 확장 가능한 코드를 작성할 수 있도록 설계되었으며 최근 몇 년 동안 많은 주목을 받았다. 이 글에서는 JavaScript 프로젝트에서 TypeScript를 사용하려는 이유와 그에 따른 장단점을 살펴보자. TypeScript 사용의 주요 이점 중 하나는 개발 프로세스 초기에 오류를 발견하는 데 도움이 된다는 것이다. 코드에 정적 타이핑을 추가하면 TypeScript는 코드를 실행하기 전에 타입 관련 오류를 포착할 수 있으므로 나중에 디버깅하는 데 드는 시간과 노력을 절약할 수 있다. 이는 문제가 되기 전에 문제를 식별하고 수정하는 데 도움이 되므로..

항해 6주 차에는 백엔드분들과 협업해 미니 프로젝트를 진행했는데, 좋은 팀원분들을 만나서 만족스러운 협업을 경험할 수 있었다. 첫 협업을 하며 느낀 점 이번 첫 협업을 통해 소통과 API 명세서의 중요성을 알게 되었다. 원활한 소통과 명세서를 통한 약속을 잘 정한다면, 보다 수월하게 개발을 진행할 수 있다고 느꼈다. 그리고 팀원과 git commit 메시지나 파일 이름에 대한 컨벤션을 정하고 개발을 진행하면서 편리함을 느낄 수 있었다. 스스로 아쉬웠던 점 처음부터 몰입해서 개발을 시작했다면 더 완성도 높은 결과물을 만들 수 있지 않았을까 하는 아쉬움이 남았다. 다음 프로젝트부터는 정해진 기한 안에 만드면 된다는 생각은 하지 말고, 가능한 빠르게 결과물을 만들어서 남은 시간에는 프로젝트를 개선하고 완성도를..

React Query React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 서버 상태 관리 라이브러리다. 기존에 Redux, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어서 등장하게 되었다. QueryClientProvider 리액트 쿼리를 사용하기 위해 최상위 컴포넌트를 QueryClientProvider로 감싸준다. 쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다. import { QueryClient, QueryClientProvider } from "react-query"..