CI/CD CI/CD는 애플리케이션 개발 단계부터 배포까지의 모든 단계를 자동화를 통해 효율적이고 빠르게 사용자에게 배포할 수 있는 것을 말합니다. (CI/CD는 DevOps 엔지니어의 핵심 업무라고 한다) CI CI는 간단히 요약하자면 빌드/테스트 자동화 과정입니다. 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미합니다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다. 지속적 통합의 실행은 소스/버전 관리 시스템에 대한 변경 사항을 정기적으로 커밋..

npm 패키지 매니저를 통해 다양한 패키지를 설치할 때, -D, -g, --save 등 다양한 옵션이 붙는 경우를 볼 수 있습니다. 오늘은 그 이유에 대해서 한번 알아보고자 합니다. npm install 명령어 옵션 --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미로 npm@5 부터는 기본 옵션으로 저장합니다. -P (--save-prod) : dependencies에 패키지를 등록, 프로젝트가 배포 시 사용될 의존성 모듈을 정의하고 설치. -D (--save-dev) : devDependencies에 패키지를 등록, 개발 단계에서만 사용하는 의존성 모듈을 정의하고 설치. -O (--save-optional) : optionalDependencies에 패키지를..

리액트를 사용해서 개발을 하면 npm build 입력으로 빌드가 완료됩니다. create-react-app은 개발 환경부터 빌드까지 모든 것이 다 갖추어져 있습니다. 하지만 프론트엔드 개발자라면 그 뒷단의 이야기에 대해 알 필요가 있습니다. 자신의 프로젝트를 온전히 커스터마이징 하고 싶다면 CRA를 이용하지 않고 환경 설정부터 빌드 세팅까지 스스로 해야 합니다. 웹팩(Webpack) 웹팩은 오픈 소스 자바스크립트 모듈 번들러입니다. 말 그대로 여러 개의 파일을 하나의 파일로 모아주는 역할을 합니다. 여러 개의 파일을 하나로 모아주는 것은 왜 필요할까요? 이전에 모듈 번들러가 없을 때는 HTML에 모든 스크립트 파일을 불러왔어야 했습니다. 그러다 ES2015부터 모듈 시스템이 등장하여 exports로 모듈..

리팩토링 - queries 분리 폴더구조, path alias 설정이 끝났으니 무거웠던 컴포넌트들의 코드를 분리시켜 주어야 한다. 폴더구조를 더 개선하기 위해서도 필요하고 성능 향상등 다양한 이유로 아무튼 해야 한다. 우리 프로젝트의 api 는 분리되어 있는 반면에 리액트 쿼리는 그렇지 않기 때문에, 가장 먼저 수정해야겠다고 생각해서 useQuery, useMutation 들을 분리시킬 것이다! 이전 Bookmark 컴포넌트 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { AxiosError } from 'axios'; import { BsHeart, BsHeartFill } from 'react..

폴더구조를 바꿔야 하는 이유? 위를 보면 알 수 있듯, 우리 프로젝트의 폴더구조는 굉장히 복잡하다. 컴포넌트 폴더 안에 따로 구분 없이 기능이 적혀있는 폴더들이 가득하기 때문에 구조를 처음 보는 사람은 절대 이해하기 어려울 것이다 (우리도 네이밍 때문에 헷갈리곤 했다). 그래서 어떻게? 팀원들끼리 상의한 결과 DDD (Domain-Driven Design) 설계 방식을 따라가면 좋지 않을까? 결론이 나왔고 '각자 폴더구조를 정리해 오자!'라고 얘기했지만 셋 모두 비효율적이라 느꼈기에 다시금 상의를 진행하였다. 이미 우리의 폴더구조는 어느 정도 페이지별로 구분이 되어있었기 때문에 여기에 맞게 작업을 진행하기로 했다. 이해하기 어렵거나 비슷한 네이밍을 가진 파일, 폴더의 이름을 변경하였고, layout의 기..

목표 이 프로젝트에 관해서 아무것도 모르는 사람이 읽고서 이해하기 쉬운가 새로운 기능을 추가하거나 기존 기능을 제거하기 쉬운가 중복되는 코드를 최소화했는가 적절한 네이밍을 부여했는가 리팩토링 순서 폴더구조 정리 ➡️ 재사용 가능한 컴포넌트 분리 ➡️ 네이밍 ➡️ 인터페이스 정의 ➡️ 테스트코드 도입 매주 월요일 저녁 8시까지 스프린트 방식으로 메인 프로젝트 리팩토링을 하기로 했다. 멘토님에게 지적받은 부분과 우리가 생각하는 보완할 점을 개선하기 위함이다. path alias를 설정, eslint를 일부 추가하였다. 폴더의 depth 가 깊어질수록 경로가 복잡해지기 때문에 path alias를 사용하여, 프로젝트 파일들을 상대경로(../../)에서 절대경로로 전부 변경해 주었다. /** tsconfig.j..