[React] React 프로젝트 생성 및 환경 설정

Node.js 설치
npm을 사용하려면 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측에서 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임입니다. 공식 웹사이트(https://nodejs.org/en/download/)에서 Node.js를 다운로드하여 설치할 수 있습니다.

TypeScript로 새 React 프로젝트 만들기
TypeScript로 새 React 프로젝트를 생성하려면 React 애플리케이션을 생성하는 데 널리 사용되는 도구인 Create React App(CRA)을 사용할 수 있습니다. 터미널에서 다음 명령을 실행하여 TypeScript로 새 프로젝트를 생성할 수 있습니다

이 명령은 TypeScript를 지원하는 "my-app"이라는 디렉터리에 새 React 프로젝트를 생성합니다.

npx create-react-app my-app --template typescript

React
TypeScript는 언어에 타입 어노테이션과 기타 기능을 추가하는 JavaScript의 상위 집합입니다. 런타임이 아닌 컴파일 타임에 오류를 포착하여 코드를 더욱 견고하고 유지 관리하기 쉽게 만들어줍니다.
React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. React와 함께 TypeScript를 사용하여 컴포넌트에 타입 검사 및 기타 기능을 추가할 수 있습니다.
TypeScript로 새 React 프로젝트를 생성하기 위해 --template typescript 옵션과 함께 Create React App 명령줄 도구를 사용했습니다. 이렇게 하면 미리 구성된 설정과 종속성을 포함하여 TypeScript를 지원하는 새 React 프로젝트가 생성됩니다.

 

react-router 설치 및 구성하기
React Router는 React 애플리케이션에서 라우팅을 위한 라이브러리입니다. react-router-dom과 그 유형을 설치하려면 다음 명령을 사용할 수 있습니다

react-router-dom을 설치한 후 App.tsx 파일에서 경로를 구성할 수 있습니다.

npm install --save react-router-dom @types/react-router-dom

 

React 라우터
React Router는 React 애플리케이션에서 탐색 및 라우팅을 관리하기 위한 라이브러리입니다. 이를 통해 경로를 정의하고, 탐색 이벤트를 처리하고, 컴포넌트 간에 데이터를 전달할 수 있습니다.

React Router를 설치하기 위해 npm을 사용해 react-router-dom 패키지와 해당 타입스크립트 타입을 설치했습니다. 그런 다음 Switch 및 Route 컴포넌트를 사용하여 App.tsx 파일에서 경로를 구성할 수 있습니다.

 

리코일 설치 및 구성하기
Recoil은 React 애플리케이션을 위한 상태 관리 라이브러리입니다. 다음 명령어를 사용하여 리코일과 그 유형을 설치할 수 있습니다

리코일을 설치한 후 별도의 파일에 글로벌 상태 관리를 생성하여 컴포넌트에서 사용할 수 있습니다.

npm install recoil @types/recoil

Recoil
Recoil은 애플리케이션의 전역 상태를 관리할 수 있게 해주는 React용 상태 관리 라이브러리입니다. 상태 트리를 사용하며 원자, 선택자 및 기타 유형의 상태를 생성하고 액세스할 수 있습니다.

Recoil을 설치하기 위해 npm을 사용해 recoil 패키지와 해당 타입스크립트 타입을 설치했습니다. 그런 다음 별도의 파일에 글로벌 상태 관리를 생성하고 사용RecoilState 및 사용RecoilValue 훅을 사용하여 컴포넌트에서 사용할 수 있습니다.

 

Prettier 설치 및 구성하기
Prettier는 일관된 코드 스타일을 유지하는 데 도움이 되는 코드 포맷터입니다. Prettier를 설치하려면 다음 명령을 사용하면 됩니다.

Prettier를 설치한 후 루트 디렉터리에 .prettierrc 파일을 생성하고 원하는 대로 구성할 수 있습니다.

npm install --save-dev --save-exact prettier

Prettier
Prettier는 일련의 규칙에 따라 코드를 자동으로 포맷하는 코드 포맷터입니다. 일관된 코드 스타일을 적용하고 가독성을 향상시키는 데 도움이 됩니다.

Prettier를 설치하기 위해 npm을 사용하여 prettier 패키지를 설치했습니다. 그런 다음 루트 디렉터리에 .prettierrc 파일을 생성하고 원하는 대로 구성할 수 있습니다. 또한 코드 편집기가 Prettier를 사용하여 자동으로 코드 형식을 지정하도록 구성할 수도 있습니다.

 

ESLint 설치 및 구성하기
ESLint는 오류를 포착하고 코딩 표준을 적용하는 데 도움이 되는 링터입니다. 다음 명령을 사용하여 ESLint를 설치할 수 있습니다

ESLint를 설치한 후 루트 디렉터리에 .eslintrc 파일을 생성하고 기본 설정에 따라 구성할 수 있습니다.

npm install --save-dev eslint

ESLint
ESLint는 코드를 분석하고 잠재적인 오류 및 스타일 위반을 감지하는 린터입니다. 코드 품질과 유지보수성을 강화하는 데 도움이 됩니다.

ESLint를 설치하기 위해 npm을 사용하여 eslint 패키지를 설치했습니다. 그런 다음 루트 디렉터리에 .eslintrc 파일을 만들고 기본 설정에 따라 구성할 수 있습니다. 또한 코드 편집기를 구성하여 ESLint 오류 및 경고를 표시할 수도 있습니다.

 

스타일 컴포넌트 설치 및 구성하기

styled-components는 CSS로 React 컴포넌트의 스타일을 지정하기 위한 라이브러리입니다. 스타일드 컴포넌트와 그 유형을 설치하려면 다음 명령을 사용할 수 있습니다.

스타일 컴포넌트를 설치한 후에는 스타일 컴포넌트를 생성하여 컴포넌트에서 사용할 수 있습니다.

npm install styled-components @types/styled-components

 

스타일 컴포넌트
스타일 컴포넌트는 CSS-in-JS 구문을 사용하여 React 컴포넌트의 스타일을 지정하기 위한 라이브러리입니다. 컴포넌트에서 직접 CSS를 작성할 수 있으며 소품 기반 스타일링 및 테마와 같은 기능을 제공합니다.

스타일 컴포넌트를 설치하기 위해 npm을 사용해 스타일 컴포넌트 패키지와 해당 타입스크립트 타입을 설치했습니다. 그런 다음 스타일드 함수를 사용하여 스타일드 컴포넌트를 생성하고 컴포넌트에서 사용할 수 있습니다.

 

Axios 설치 및 구성
Axios는 API에 HTTP 요청을 하기 위한 라이브러리입니다. Axios를 설치하려면 다음 명령을 사용할 수 있습니다.

Axios를 설치한 후 Axios를 사용하여 API에 HTTP 요청을 할 수 있습니다.

npm install axios

Axios
Axios는 자바스크립트로 HTTP 요청을 만들기 위한 라이브러리입니다. HTTP 요청과 응답을 처리하기 위한 간단하고 일관된 API를 제공합니다.

Axios를 설치하기 위해 npm을 사용하여 axios 패키지를 설치했습니다. 그런 다음 Axios를 사용하여 API 엔드포인트에 HTTP 요청을 할 수 있습니다.

 

머티리얼 UI 설치 및 구성

Material UI는 아름답고 반응이 빠른 UI를 구축하기 위한 React 컴포넌트 라이브러리입니다. Material UI와 그 의존성을 설치하려면 다음 명령을 사용하면 됩니다.

머티리얼 UI를 설치한 후 프로젝트에서 머티리얼 UI 컴포넌트를 사용할 수 있습니다.

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

머티리얼 UI
Material UI는 구글의 머티리얼 디자인 가이드라인에 기반한 React용 UI 컴포넌트 라이브러리입니다. 버튼, 입력, 다이얼로그와 같은 미리 빌드된 컴포넌트 세트를 제공하여 UI를 빠르게 빌드하는 데 사용할 수 있습니다.

머티리얼 UI를 설치하기 위해 npm을 사용하여 @mui/material, @emotion/react, @emotion/styled 및 @mui/icons-material 패키지를 설치했습니다. 그런 다음 머티리얼 UI 컴포넌트를 임포트하고 컴포넌트에서 렌더링하여 프로젝트에서 사용할 수 있습니다.

 

 

React Hook Form 설치 및 구성

React Hook Form은 React 애플리케이션에서 폼 상태를 관리하기 위한 라이브러리입니다. 다음 명령어를 사용하여 React Hook Form과 그 유형을 설치할 수 있습니다.

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

React Hook Form
React Hook Form은 폼 상태를 관리하기 위한 라이브러리입니다.

 

Yup 설치 및 구성

다음 명령어를 사용하여 Yup을 설치할 수 있습니다.

Yup을 사용하여 양식 입력의 유효성을 검사할 수 있습니다.

npm install yup

필요한 모든 라이브러리와 도구를 설치하고 구성했으면 애플리케이션 구축을 시작할 수 있습니다. 설치한 라이브러리와 도구를 사용하여 컴포넌트를 생성하고, 경로를 설정하고, 상태를 관리하고, UI 스타일을 지정할 수 있습니다.

 

Intellij 설정

 

개발자에게는 깔끔하고 체계적으로 정리된 코드베이스가 필수적입니다. 이는 여러 공동 작업자와 함께 대규모 프로젝트를 진행할 때 특히 중요합니다. 이 블로그 포스트에서는 React 프론트엔드를 처음 생성할 때 IntelliJ에서 "prettier"와 "eslint"를 설정하는 과정을 살펴보겠습니다.

Prettier는 여러 편집기와 IDE에서 일관된 코딩 스타일을 유지하는 데 도움이 되는 코드 포맷터입니다. 코드 검토 시 코딩 스타일에 대한 논쟁을 피하고 누가 코드를 작성하든 코드가 동일하게 보이도록 합니다. Prettier는 JavaScript, TypeScript, CSS, JSON 파일 등의 서식을 지정하는 데 사용할 수 있습니다.

IntelliJ에서 Prettier를 설정하려면 IntelliJ 플러그인 리포지토리에서 찾을 수 있는 Prettier 플러그인을 설치해야 합니다. 설치가 완료되면 저장 시 또는 리포지토리에 변경 사항을 커밋할 때 코드 서식을 지정하도록 Prettier를 구성할 수 있습니다. 이렇게 하면 코드가 항상 동일한 서식 지정 규칙을 준수하도록 보장합니다.

ESLint는 오류를 포착하고 코딩 스타일을 적용하는 데 도움이 되는 린터입니다. ESLint는 모든 개발자가 동일한 코딩 지침을 따르고 있는지 확인하는 데 도움이 되므로 대규모 프로젝트에서 작업할 때 특히 유용합니다. ESLint는 JavaScript, TypeScript 및 JSX 파일을 린트하는 데 사용할 수 있습니다.

IntelliJ에서 ESLint를 설정하려면 IntelliJ 플러그인 리포지토리에서 찾을 수 있는 ESLint 플러그인을 설치해야 합니다. 설치가 완료되면 저장 시 또는 리포지토리에 변경 사항을 커밋할 때 ESLint가 실행되도록 구성할 수 있습니다. 이렇게 하면 코드에 항상 오류가 있는지 확인하고 동일한 코딩 표준을 준수하는지 확인할 수 있습니다.

다음은 IntelliJ에서 Prettier 및 ESLint를 설정하는 방법의 예입니다:

IntelliJ 플러그인 리포지토리에서 Prettier 및 ESLint 플러그인을 설치합니다.
환경설정/설정 대화 상자를 열고 "편집기" -> "코드 스타일" -> "Prettier"로 이동합니다.
"사용" 확인란을 선택하여 Prettier를 활성화합니다.
Prettier에서 포맷할 파일 형식을 선택합니다.
저장할 때 또는 리포지토리에 변경 사항을 커밋할 때 코드 서식을 지정하도록 Prettier를 구성합니다.
환경설정/설정 대화 상자를 열고 "도구" -> "외부 도구"로 이동합니다.
"+" 아이콘을 클릭하여 새 외부 도구를 추가합니다.
다음 필드를 설정합니다:
이름: ESLint
설명: 현재 파일에서 ESLint 실행
Program: /usr/local/bin/eslint(또는 ESLint 실행 파일이 있는 위치)
인수 파일 경로$
작업 디렉토리: $ProjectFileDir$
외부 도구를 저장합니다.
환경설정/설정 대화상자를 열고 "키맵"으로 이동합니다.
"eslint"를 검색합니다.
현재 파일에서 ESLint를 실행할 키보드 단축키를 지정합니다.
변경 사항을 저장합니다.
이제 IntelliJ에서 Prettier와 ESLint를 설정했으므로 코드가 항상 형식이 잘 지정되고 오류가 없을 것이라는 확신을 가지고 안심하고 React 프론트엔드를 만들 수 있습니다.

결론적으로, 일관되고 형식이 잘 지정된 코드는 여러 공동 작업자와 함께 대규모 코드베이스를 유지 관리하는 데 매우 중요합니다. IntelliJ에서 Prettier와 ESLint를 설정하면 코드가 동일한 코딩 표준을 준수하고 오류가 없는지 확인할 수 있습니다. 자세한 내용은 IntelliJ에서 Prettier 및 ESLint 설정에 대한 공식 문서를 참조하세요

Prettier 설정: https://www.jetbrains.com/help/idea/prettier.html#ws_prettier_reformat_code
ESLint 설정하기: https://www.jetbrains.com/help/idea/eslint.html