React 개발 환경 설치

React 란 실시간 UI 업데이트와 AJAX 통신을 포함한 다양한 기능들을 제공한다. 

 

1. 컴포넌트 기반 아키텍처

• 재사용 가능성: 리액트는 UI를 독립적인 컴포넌트로 나눠 개발할 수 있게 해줍니다. 컴포넌트는 독립적으로 개발, 테스트, 재사용이 가능하여 생산성을 높입니다.
• 모듈화: 컴포넌트 기반 개발은 코드의 모듈화와 유지보수를 용이하게 합니다.

2. Virtual DOM 

• 성능 최적화: 리액트는 Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고, 필요한 부분만 업데이트하여 성능을 최적화합니다.
• 효율적인 업데이트: 변경 사항을 Virtual DOM에서 미리 계산한 후, 실제 DOM에 반영하기 때문에 빠르고 효율적인 UI 업데이트가 가능합니다.

3. 단방향 데이터 흐름

• 예측 가능성: 데이터가 한 방향으로만 흐르기 때문에 애플리케이션의 상태 관리가 용이하고, 버그를 추적하고 수정하기 쉽습니다.
• 유지보수 용이성: 단방향 데이터 흐름은 컴포넌트 간의 데이터 전달을 명확하게 하여 유지보수를 쉽게 합니다.

4. JSX

• 가독성: JSX는 HTML과 유사한 문법을 사용하여 UI를 정의하므로, 코드의 가독성을 높이고 직관적으로 UI를 작성할 수 있습니다.
• 개발자 경험: JSX를 사용하면 개발자가 더 효율적으로 코드를 작성하고 디버깅할 수 있습니다.

5. 강력한 커뮤니티와 생태계

• 방대한 자료와 도구: 리액트는 큰 커뮤니티와 다양한 서드파티 라이브러리, 도구들을 가지고 있어, 개발에 필요한 다양한 기능을 쉽게 확장할 수 있습니다.
• 지원과 문서: 리액트 관련 자료와 지원을 쉽게 찾을 수 있어, 개발 중 발생하는 문제를 빠르게 해결할 수 있습니다.

6. React Hooks

• 함수형 컴포넌트에서 상태 관리: React Hooks를 사용하면 함수형 컴포넌트에서도 상태와 생명 주기 메서드를 사용할 수 있어, 함수형 컴포넌트를 더 많이 활용할 수 있습니다.
• 간결한 코드: Hooks를 사용하면 코드가 더 간결해지고 이해하기 쉬워집니다.

7. 서버 사이드 렌더링(SSR)

• SEO 향상: 서버 사이드 렌더링을 통해 초기 로딩 시간을 단축하고, 검색 엔진 최적화(SEO)를 개선할 수 있습니다.
• 초기 로딩 속도 개선: 서버에서 미리 렌더링된 HTML을 제공하여 사용자에게 빠른 초기 로딩 속도를 제공합니다.

8. 리액트 네이티브(React Native)

• 크로스 플랫폼 개발: 리액트 네이티브를 사용하면 동일한 리액트 기술 스택으로 iOS와 Android 앱을 개발할 수 있습니다.
• 코드 재사용: 웹과 모바일 앱 개발에서 코드의 재사용이 가능하여 개발 효율성을 높입니다.

 

1. NVM 설치 & 환경설정

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

nvm-setup.zip 내려 받아서 압축 풀고 설치 파일 실행

 

windows 경우 Power Shell(관리자권한)으로 진행)

(최소 14.20.0 이상 사용)

$ nvm -v
>> nvm 버전확인

$ nvm install 14.20.0
>> node.js 설치

$ nvm use 14.20.0
>> node.js. 설정

$ node -v
# v.10.24.1

$ npm -v << version 확인
# 6.14.12

 

2. yarn, create-react-app 설치 & 구동 

$ npm install -g yarn

$ yarn create react-app do-it-example --scripts-version 2.1.7

$ cd do-it-example
$ yarn start

 

3. 예제에 필요한 라이브러리 & 설정

$ cd {리액트프로젝트}
$ yarn
>> package.json에 적힌 라이브러리 설치

>> 또한  babel-loader 호환성오류 해결을 위해서 npm 아래의 내용을 입력 후 '.env' 로 저장
SKIP_PREFLIGHT_CEHCK = true

 

 

4. vsCODE 도 설치 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined