9장 - 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기

9.1 Next.js로 리액트 개발 환경 구축하기

 

9.1.1 create-next-app 없이 하나씩 구축하기

 

1. npm init으로 package.json 만들기
2. react, react-dom, next 설치하기
3. devDependencies에 필요한 패키지 설치하기
   • typescript, @types/react, @types/react-dom, @types/node
   • eslint, eslint-config-next

 

9.1.2 tsconfig.json 작성하기

 

tsconfig.json에 타입스크립트 설정을 해준다.

 

작성하기 전에 

 

이렇게 JSON 최상단에 값을 넣으면 해당 JSON파일이 무엇을 의미하는지,

어떤 키와 어떤 값이 들어갈 수 있는지 알려준다.

 

올바른 값이 선언돼 있다면 VS Code나 웹스톰 같은 IDE에서 자동 완성이 가능해진다.

 

 

9.1.3 next.config.js 작성하기

 

Next.js 설정을 위한 next.config.js 를 만든다.

 

본인이 사용하고 있는 next.config.js에서 사용 가능한 옵션을 확인하고 싶다면 깃허브 저장소에서 확인할 수 있다.

 

 

9.1.4 ESLint 와 Prettier 설정하기

 

앞에서 설치한 eslint-config-next 는 단순히 코드에 있을 잠재적인 문제를 확인할 뿐,

띄어쓰기나 줄바꿈과 같이 코드의 스타일링을 정의해주지 않는다.

 

이러한 작업을 수행하기 위해 @titicaca/eslint-triple을 설치해 사용한다.

 

 

9.1.5 스타일 설정하기

 

styled-components를 설치하고,

next.config.js에 styledComponents : true를 추가한다.

>> swc가 styled-components를 사용하는 코드를 더 빠르게 변환한다.

 

 

9.1.6 애플리케이션 코드 작성

 

애플리케이션 구동에 필요한 파일은 src 폴더 내부에 있고,

하위 폴더 목록을 살펴보자.

• pages : 이 폴더 하위의 내용은 모두 실제 라우터가 된다.
  • /: 메인페이지
  • /todos/:id : 상세페이지
• components: 페이지 내부에서 사용하는 컴포넌트를 모아둔 폴더
• hooks: 직접 만든 훅을 모아둔 폴더
• types: 서버 응답 타입 등 공통으로 사용하는 타입을 모아둔 폴더
• utils: 애플리케이션 전역에서 공용으로 사용하는 유틸성 파일을 모아둔 폴더

 

9.2 깃허브 100% 활용하기

 

9.2.1 깃허브 액션으로 CI 환경 구축하기

 

CI(Continuous Integration)

- 코드의 변화를 모으고 관리하는 코드 중앙 저장소에서, 여러 기여자가 기여한 코드를 지속적으로 빌드하고 테스트해 코드의 정합성을 확인하는 과정.

 

CI는 코드의 변화가 있을 때마다 전체 소프트웨어의 정합성을 확인하기 위한 작업을 자동으로 실행해야 한다.

 

• 젠킨스{Jenkins)
  • CI에 필요한 다양한 기능을 제공하는 무료 솔루션
  • 편리하고 많은 플러그인을 통해 다양한 기능 통합 가능
  • 설치 및 유지보수가 번거로움
• 깃허브 액션
  • 깃허브에서 출시한 Saas, 깃허브 저장소와 함께 사용할 수 있는 강력한 도구
  • 깃허브 저장소를 기반으로 깃허브에서 발생하는 다양한 이벤트를 트리거 삼아 다양한 작업을 할 수 있게 도와준다.
    • 깃허브의 어떤 브랜치에 푸시가 발생하면 빌드를 수행
    • 깃허브의 특정 브랜치가 메인 브랜치를 대상으로 풀 리퀘스트가 열리면 빌드, 테스트, 정적 분석을 수행
  • 다른 CI/CD(Continuous Integration/Continuous Delivery) 솔루션을 대체할 수 있어 CI/CD 서비스로 각광받게 됐다.