01. 클린코드 리액트(React) - 클린코드, Vite

클린코드란

1. 클린코드는 무적이 아니다

• 클린코드가 무조건 최고는 아니다
• 무조건 클린코드 === 좋은코드는 아니다
• 클린코드를 지켰다며 TDD를 통과했다며 기뻐하지만 React 앱이 동작하지 않음
• 성급한 기술 도입으로 과도한 추상화 팀원들에게 피해를 줌 

 

2. 클린코드보다 중요한 것은 상당히 많다.

• 작성한 코드의 확장성
• React 앱의 완성도
• 앱의 완성도가 떨어지는 경우 사소한 동작에도 잦은 버그가 발생
• 함께 개발하는 팀원들과의 코드를 두고 할 수 있는 소통 

 

Vite란?

공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 

• 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공
• 번들링 시, Rollup 기반의 다양한 빌드 커멘드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. 

 

Creact React App 대신 사용하는 이유?

CRA는 JS로 구성된 Webpack을 사용하는데 속도가 느린편입니다. 평소에는 못느길 쑤 있지만 처리해야할 코드의 양이 많아질수록 느린 속도를 체감할 수 있고 현재 React 공식문서에 가보면 과거에는 CRA를 사용하라고 되어 있었지만 현재는 나와있지 않습니다. 그래서 Esbuild를 기반으로 만들어진 빌드툴인 Vite(비트)를 사용하게 됩니다. 

• Esbuild : Go 언어로 작성된 Js빌드툴로 속도가 빠르다.

 

본인은 Window환경이기 때문에 아래의 명령어를 입력해줬습니다.

npm create vite@latest cleanCodeReact -- --template react

을 입력하면 아래처럼 명령어가 표시되고 그대로 입력하면 정말 빠르게 build가 됩니다. npm install까지 입력해보면 

 

 

실제 생성된 폴더

 

Vs Code로 폴더를 열어보면

 

한번 실행시켜 보겠습니다. npm run dev를 입력하면 됩니다. 

아래 화면을 보시면 정말 빠르게 리액트 개발환경을 구축했습니다.