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

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

9.1.2 tsconfig.json 작성하기

9.1.3 next.config.js 작성하기

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

CI : 여러 기여자가 기여한 코드를 지속적으로 빌드하고 테스트해 코드의 정합성을 확인하는 과정 , 묘드의 변화가 있을 때마다 전체 소프트웨어의 정합성을 확인하기 위한 작업을 자동 으로 실행해야 함

젠킨스 : 무료 솔루션 → 깃허브 액션 , 구축에 어려움이 있지만 , 잘 구축한것들은 많은것들을 수행 가능하게 함
깃허브 액션 : 깃허브를 둘러싼 다양한 이벤트를 기반으로 깃허브에서 제공하는 가상 환경에서 사용자가 원하는 작업을 수행할 수 있도록 도와주는 서비스 , 훨씬 경제적

9.2.2 직접 작성하지 않고 유용한 액션과 깃허브 앱 가져다 쓰기

calibreapp/image-actions : 저장소에 포함돼있는 이미지를 최적화하는 액션

sharp 패키지를 이용해 거의 무손실로 압축해서 다시 커밋

lirantal/is- website- vulnerable : 특정 웹사이트를 방문해 해당 웹사이트에 라이브러리 취약점이 존재하는지 확인하는 깃허브 액션 , 직접 npx를 실행하는 액션을 만들어 사용 가능

Lighthouse CI : 현재 머지 예정인 웹사이트의 성능 지표를 측정할 수 있음

의존성에 문제가 있다면 이에 대해 문제를 알려주고 가능하다면 해결할 수 있는 풀 리퀘스트까지 열어줌

취약점을 Critical , High , Moderate , Low의 4단계로 분류

결론 : 의존성 관련 이슈를 방지하는 가장 좋은 방법은 의존성을 최소한으로 유지하는 것. 가능한 한 내재화할 수 있는 모률은 내재화하고，의존성을 최소한으로 유지하는 것이 좋다.

도커 : 애플리케이션을 ‘컨테이너’라는 단위로 패키징, ‘컨테이너’를 바탕으로 독립된 환경 에서 애플리케이션이 항상 일관되게 실행할 수 있도록 보장

..복잡하다..

웹 애플리케이션을 도커로 만들수 있음 →

도커 이미지를 도커 허브라고 하는 공간에 업로드할 수 있다. →

도커 이미지 실행하기 (구글 클라우드 플랫폼)