정리하기 파일

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

npm init을 실행하면 package.json을 만드는 CLI를 실행할 수 있다.
Next.js 프로젝트를 실행하는 데 필요한 react, react-dom, next
devDependenciess에 필요한 패키지를 설치
- typescript, 타입스크립트 내부에서 리액트 타입 지원에 필요한 @types/react, @types/react-dom
- Node.js의 타입을 사용하기 위한 @types/node
- ESLint 사용에 필요한 eslint, eslint-config-next
- ESLint 작업을 수행하기 위해 가장 설치 및 설정이 쉬운 @titicaca.eslint-config-triple
타입스크립트 설정 : tsconfig.json
$schma는 schemaStore에서 제공해 주는 정보로, 해당 JSON 파일이 무엇을 의미하는지, 어떤 키와 어떤 값이 들어갈 수 있는지 알려주는 도구다.
Next.js 설정 : next.config.js

기본적인 폴더 구조

CI(Continuous Integration)

저장소에서 코드의 변화가 있을 때마다 전체 소프트웨어의 정합성을 확인하기 위한 작업을 자동으로 실행하는 것. 자동으로 실행해야 하는 작업이란 테스트, 빌드, 정적 분석, 보안 취약점 분석 등이 있다.

깃허브 액션은 깃허브에서 출시한 SaaS로, 깃허브 저장소와 함께 사용할 수 있는 강력한 도구다.

깃허브 액션의 본래 목적은 깃허브 저장소를 기반으로 깃허브에서 발생하는 다양한 이벤트를 트리거 삼아 다양한 작업을 할 수 있게 도와주는 것이다.

깃허브 액션의 기본 개념

러너(runner) : 파일로 작성된 깃허브 액션이 실행되는 서버를 의미한다. 특별히 지정하지 않으면 공용 깃허브 액션 서버를 이용하며, 별도의 러너를 구축해 자체적으로 운영할 수도 있다.
액션(action) : 러너에서 실행되는 하나의 작업 단위를 의미한다. yaml 파일로 작성된 내용을 하나의 액션으로 볼 수 있다.
이벤트(event) : 깃허브 액션의 실행을 일으키는 이벤트를 의미한다. 개발자의 필요에 따라 한 개 이상의 이벤트를 지정할 수 있다. 또한 브랜치를 지정하는 이벤트도 가능하다.
잡(jobs) : 하나의 러너에서 실행되는 여러 스텝의 모음을 의미한다. 하나의 액션에서 여러 잡을 생성할 수 있으며, 특별히 선언한 게 없다면 내부 가상머신에서 각 잡은 병렬로 실행된다.
스텝(step) : 잡 내부에서 일어나는 하나하나의 작업을 의미한다. 셀 명령어나 다른 액션을 실행할 수도 있다.

요약하자면 스텍들을 엮어서 잡을 만들고, 이러한 여러 개의 잡은 병렬로 실행되며, 이러한 잡을 하나 이상 모아둔 것을 액션이라고 한다. 이 액션을 실행하는 것이 러너다.

깃허브에서 제공하는 기본 액션

Netlify는 웹 애플리케이션을 배포할 수 있도록 도와주는 클라우드 컴퓨팅 서비스다.

netlify.toml 파일은 Netlify의 설정을 도와준다.

Vercel은 Next.js를 비롯한 Turborepo, SWC를 만든 회사이며, Netlify와 비슷한 클라우드 플랫폼 서비스다.

별도 플러그인을 설치해야 했던 Netlify와는 다르게, Vercel은 Next.js 서비스를 별도의 설정 없이 배포할 수 있다.

DigitalOcean은 미국의 클라우드 컴퓨팅, 호스팅 플랫폼 업체다.

Vercel과 Netlify는 정적인 웹사이트 배포에 초점을 두고 있다면, DigitalOcean은 AWS와 Google Cloud Platform과 비슷하게 조금 더 다양한 클라우드 컴퓨팅 서비스를 제공한다.

도커는 서비스 운영에 필요한 애플리케이션을 격리해 컨테이너로 만드는데 이용하는 소프트웨어다.

도커라이즈는 애플리케이션을 신속하게 구축해 배포할 수 있는 상태로 준비하는 것을 말한다.