리액트 사전 지식 & 프로젝트 세팅 환경 설정

NPM, NPX, YARN, → PNPM, BURN

본격적으로 리액트를 공부하려고 할 때, 터미널에 가장 먼저 치는 명령어 형식은 npm(yarn) 또는 npx가 포함된 명령어를 입력하게 됩니다. 이때, npm, yarn, npx는 무엇일까요?

NPM(Node Package Manager)

NPM은 Node Package Manager의 약자로 Node.js의 기본 패키지 관리자입니다. NPM은 Node.js와 함께 설치되며, Node.js 애플리케이션의 종속성을 관리하고 패키지를 설치, 업데이트, 제거하는 데 사용됩니다.

주요기능

• 패키지 설치:
  • dependency에 설치 : npm install <package name> —save
  • devDependency에 설치: npm install <package name> —save-dev
• 패키지 제거: npm uninstall <package name>
• 패키지 업데이트: npm update <package name>
• 패키지 실행: npm run <script_name>
• 글로벌 패키지
  • 설치: npm install -g <package name>
  • 제거: npm uninstall -g <package name>
• 패키지 초기화: npm init / npm init -y
  • pacakge.json 파일로 npm 프로젝트 초기화 명령어
• 프로젝트 생성: npm create <package name>
  • 내부적으로 npx를 사용해서 패키지를 활용하여 프로젝트 생성

특징

• node.js와 함께 설치됨
• “.npmrc” 파일을 통해 설정 가능
• “package-lock.json” 파일을 사용하여 패키지 버전을 고정

NPX(Node Package Execute)

NPX는 Node Package Execute의 약자로 이름 그대로 Node 패키지를 실행하는 도구입니다. Node.js를 설치하면 자동으로 설치됩니다. npx를 사용하면 npm으로 로컬 또는 글로벌로 다운로드 받지 않은 패키지도 실시간으로 설치하여 실행할 수 있습니다.

주요기능

• 일회성 패키지 실행: npx <package name>
• 특정 버정 패키지 실행: npx <package name>@<version>
• npx tsc → 로컬 패키지를 사용해서 실행을 해줘요. / 글로벌에 있는 것을 자동으로 참조해서 실행해줍니다. / → 네트워크에 접속해서 설치

특징

• npm과 함께 설치됨
• 개발 의존성을 줄이고 필요한 경우 패키지를 설치하여 실행
• 임시적으로 패키지를 실행할 때 유용함

YARN

YARN은 페이스북에서 개발한 패키지 매니저입니다. YARN은 더 빠르고, 더 안전하며, 더 확정적인 의존성 관리를 목표로 개발되었습니다.

주요 기능

• 패키지 설치
  • 로컬: yarn add <package name>
  • 전역: yarn global add <package name>
• 패키지 제거
  • 로컬: yarn remove <package name>
  • 전역: yarn global remove <package name>
• 패키지 업데이트: yarn upgrade <package name>
• 패키지 실행: yarn run <package name>

특징

• 병렬로 패키지를 설치하여 속도 향상
• yarn.lock 파일을 사용하여 더 확정적인 의존성 트리 생성
• 오프라인 모드 지원: 이전에 설치된 패키지를 다시 다운로드하지 않고 설치 가능

비교

기능/특징 NPM NPX YARN

기본 제공	Node.js 기본 패키지 관리자	NPM에 포함됨 (5.2.0 이상)	별도 설치 필요
패키지 설치 속도	보통	N/A	빠름
의존성 고정 파일	package-lock.json	N/A	yarn.lock
병렬 설치 지원	아니요	아니요	예
오프라인 모드	아니요	아니요	예
패키지 실행	npm run <script_name>	npx <package_name>	yarn run <script_name>
사용 편의성	보통	간편함	사용 편의성 높음

패키지 버전 읽는 법

Node.js 패키지를 설치하면 항상 패키지의 현재 버전이 세 자리의 소수점 숫자로 표기되어 있습니다.

1. Major : 주요 릴리즈
   1. 패키지에서 엄청난 변화가 있을 경우에 해당 위치의 숫자를 증가시킴
   2. 주로 이전 버전과 호환성을 깨트릴 정도의 중요한 패치의 경우 변경됨
2. Minor: 새로운 기능
   1. 패키지에서 새로운 기능이 추가 되었을 경우에 해당 위치의 숫자를 증가 시킴
   2. 이전 버전과의 호환성은 유지함
3. Patch: 버그 수정
   1. 기존에 포함되었던 기능에 대한 버그 수정을 하였을 경우 해당 위치의 숫자를 증가시킴
   2. 이전 버전과의 호환성은 유지함
4. 옵셔널
   1. 특정 버전 뒤에 문자열로 된 의미를 부여하고 싶을 때 사용

---

리액트 프로젝트 생성 방법

create-react-app

가장 고전적인 방법, 더 이상 권장되지 않음

npx로 설치하는 법

npx create-react-app my-app

npm으로 설치하는 법

npm install -g creact-react-app
create-react-app my-app

⛔ 여기서 npm을 사용하지 않는 이유는 npm은 내부 로컬 환경에 패키지를 설치해서 사용하는 방법인데, 설치 당시의 버전을 그대로 활용하기 때문에 ‘최신 버전이 아닐 확률’이 높기 때문!

 

vite → vue 창시자 → 에반 유 → 뷰 → 성능이 완전 좋음

근래에 가장 주목 받고 있는 프로젝트 생성 방법

case 1

npm create vite@latest

case 2

vite/packages/create-vite at main · vitejs/vite

vite/packages/create-vite at main · vitejs/vite

npm create vite@latest my-vue-app -- --template react // react-ts

 

⛔ 잠깐! 아까는 npm은 최신 버전이 아닐 확률 때문에 안된다면서 여기서는 npm을 사용하는 이유는? npm create 명령어는 내부적으로 npx 패키지를 활용하여 프로젝트를 생성해주기 때문에 항상 최신의 버전의 패키지를 사용하기 때문!

---

비주얼 스튜디오 코드(VSCode)

신뢰하는 폴더

비주얼 스튜디오 코드를 사용해서 새로운 폴더를 생성 및 열게 되면 아래와 같이 해당 경로(폴더)를 신뢰하는지 물어봅니다. 이는 비주얼 스튜디오의 보안된 폴더 안전 정책으로 체크 박스에 체크 후 [Yes, I Trust the authors] 버튼을 클릭하여 항상 신뢰함을 입력해주면 됩니다.

터미널 열기

비주얼 스튜디오 코드에서 가장 많이 활용하는 인터페이스 중에는 ‘터미널(Terminal)’이 있습니다. 터미널은 상단의 [Terminal] → [New Terminal]을 통해서 열 수 있으며, 실행하게 되면 하단에 터미널 관련 패널이 새롭게 열리게 됩니다.

명령어 입력하기

이전에 정리했던 “프로젝트 생성 방법” 자료를 참고하여 터미널에 명령어를 입력합니다.

저희 수업에서는 vite를 사용한 방법으로 설치하겠습니다.

 

⛔ SWC(Speedy Web Compiler)란? 자바스크립트 프로젝트의 컴파일과 번들링에 모두 사용될 수 있는, Rust라는 언어로 제작된 빌드 툴입니다. 기존에 사용하던 Babel을 대체할 수 있으며, 최근 Next.js 팀에서도 권장하고 있어 주목 받고 있는 빌드 툴입니다.

Next.js 공식 팀에서는 SWC를 사용하면 리프래시는 최소 3배, 빌드는 최소 5배 더 빠른 속도로 할 수 있다고 공식 발표했습니다.

기본 구조

주요 폴더 및 파일

1. node_modules/
   • 이 폴더는 프로젝트의 모든 의존성을 포함합니다. npm install 명령어를 실행하면 package.json 파일에 명시된 모든 의존성이 이 폴더에 설치됩니다.
   • 일반적으로 이 폴더는 버전 관리 시스템(Git 등)에 포함되지 않습니다.
2. public/
   • 정적 파일을 포함하는 폴더입니다. 이 폴더의 파일은 빌드 과정에서 그대로 복사되어 최종 빌드에 포함됩니다.
   • 기본적으로 index.html 파일이 포함되어 있습니다.
3. src/
   • 애플리케이션의 소스 코드가 포함된 폴더입니다. 대부분의 개발 작업이 이 폴더 내에서 이루어집니다.
   • 기본적으로 다음과 같은 파일과 폴더가 포함됩니다:
     • assets/: 이미지, 폰트 등의 정적 자산을 포함할 수 있는 폴더입니다.
     • App.css: App 컴포넌트의 스타일을 정의하는 CSS 파일입니다.
     • App.jsx: 메인 애플리케이션 컴포넌트 파일입니다. React 컴포넌트 구조의 시작점입니다.
     • main.jsx: 애플리케이션의 진입점 파일입니다. ReactDOM을 사용하여 App 컴포넌트를 HTML에 렌더링합니다.
4. index.html
   • 최상위 디렉토리에 있는 HTML 파일입니다. Vite는 이 파일을 기반으로 빌드하고 애플리케이션을 시작합니다.
   • public 폴더에 있는 경우도 있습니다.
5. package.json
   • 프로젝트의 메타데이터와 의존성을 정의하는 파일입니다.
   • 스크립트, 의존성, 개발 의존성, 프로젝트 이름, 버전 등의 정보가 포함되어 있습니다.
6. vite.config.ts
   • Vite의 설정 파일입니다. 이 파일을 통해 Vite의 다양한 설정을 커스터마이즈할 수 있습니다.

만약, stackoverflow를 질문하였을 때, node_modules를 건드리는 경우는 무시하기!

에러를 수정 및 개발적인 문제 해결을 위해서라도 node_modules 및 package-lock.json 파일은 건드리거나 수정해서는 절대 안됨! / 질문할 경우에는 2가지의 파일을 제외하고 질문을 해야됨

 

---

리액트를 왜 사용할까?

리액트는 왜 사용할까요? 왜 인기가 많을까요??

가장 인기 있는 프레임워크

리액트는 주간 다운로드가 항상 2천만을 넘어갈 정도로 매우 인기가 많습니다.

특히 국내 기업 인지도면에서도 리액트가 가장 많은 인지도를 가지고 있습니다. (그 다음이 vuejs)

강력한 커뮤니티와 광범위한 생태계

강력한 커뮤니티

리액트는 국내외로 인기가 많은 프레임워크이기 때문에 매우 큰 커뮤니티를 보유하고 있으며, 이에 따라 풍부한 교육 자료, 튜토리얼, 예제코드, 라이브러리가 존재합니다. 이는 학습과 문제 해결에 큰 도움이 됩니다.

광범위한 생태계

리액트는 다양한 서드파티 라이브러리와 도구를 지원합니다. 예를 들어서 상태 관리를 위한 리덕스, MobX, 스타일링을 위한 Styled-Components, CSS Modules, 라우팅을 위한 React Router 등이 있습니다. 이밖에도 여러분이 생각하는 모든 기능들은 조금만 찾아보면 리액트용 서드파티 라이브러가 있습니다.

하나를 배우면 모바일 앱까지

리액트를 배우면 React Native를 사용해서 모바일 앱을 만들 수 있습니다. 물론 아예 똑같은 문법은 아니지만, 같은 결의 언어이기 때문에 러닝 커브가 낮습니다.

돔(DOM)과 가상돔(Virtual DOM)

DOM이란?

돔은 Document Object Model을 의미합니다. 웹 브라우저에 표시되는 모든 UI 구성 요소는 웹 브라우저 내부적으로 객체 형태로 관리되고 있으며, 이를 이용해서 자바스크립트는 웹 브라우저 구성 요소에 접근할 수 있습니다. 이러한 DOM은 데이터 자료 구조 중 트리(tree) 구조인데, 그래서 다른 말로 돔 트리(DOM Tree)라고 하기도 합니다.

예를 들어서 아래와 같이 작성한 HTML 코드가 있다고 가정하겠습니다. 이러한 코드는 웹 브라우저에 표시 됙 ㅣ전에 DOM으로 변환되어 관리됩니다. (https://bioub.github.io/dom-visualizer/)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

변환된 DOM은 아래와 같은 형태입니다.

웹 브라우저는 이러한 DOM의 구성 요소 중 일부를 변경하면, 그 일부와 연결된 모든 DOM을 업데이트 한다는 동작 원리를 가지고 있습니다. 그래서 DOM 트리가 깊으면 깊을 수록, DOM 구성 요소의 변경에 대한 작업 비용이 많이 들어갑니다.

가상돔(Virtual Dom)이란?

이러한 기존 DOM을 대비하기 위해서 리액트는 가상 돔이라는 새로운 개념을 만들었습니다. 가상 돔은 기존의 DOM을 그대로 복사해서 리액트 내부 메모리에 저장합니다. 리액트에서 어떤 코드의 변경 사항이 발생하게 되면 이렇게 복사한 DOM을 사용해서 변경 사항을 처리하며, 최종적으로 실제 DOM과 비교하여 변경된 부분만 업데이트하기 때문에 DOM 구성 요소의 변경에 대한 작업 비용이 낮고 효율적입니다.

강력한 컴포넌트 기능

리액트를 가장 인기있는 프레임워크로 만들어 준 핵심 기능입니다.

리액트는 웹의 구성 요소를 아주 작은 단위로 분할해서 재사용 가능하게 독립적인 코드로 작성한 것을 말합니다. 이러한 컴포넌트를 활용하면 반복적인 웹의 구성 요소를 효과적으로 다룰 수 있습니다. (코드의 가독성 및 유지보수성 증가)

 

---

바벨

리액트에서도 당연히 바벨을 사용합니다. 바벨을 사용해서 리액트의 독자 코드 포맷인 JSX로 작성된 코드를 JS로 일괄적으로 변환합니다. 바벨이 있기 때문에 리액트에서 JSX를 사용할 수 있는 것이라는 것을 잘 기억해야 합니다.

⛔ 바벨은 파싱(parsing) → 변환(Transformation) → 출력(Print)의 세 단계에 걸쳐서 코드를 변환합니다. 파싱은 코드를 읽어서 AST(추상 구문 트리)로 변환하고, 변환된 AST를 정해진 규칙에 따라 변환하고(이 과정에서 ES6 문법이 ES5로 변환됨), 변환된 AST를 다시 소스코드로 출력합니다.

웹 팩을 가장 잘 설명하는 공홈

웹팩 공홈에 가보면 아래와 같은 그림으로 웹 팩을 설명합니다. 그야말로 웹 팩을 가장 잘 설명하는 그림입니다.

 

웹 팩은 모듈 번들러입니다. 쉽게 말하면 여러 개의 자바스크립트 모듈(자바스크립트의 기능을 여러 개로 분리하여 작성한 코드)을 하나의 파일로 묶어주는 역할을 합니다. 이때, 실제 코드에서 ‘사용하는 것만’ 자동으로 추려서 해주기 때문에 빌드 속도, 성능에 많은 영향을 줍니다

Vite

웹 팩이 1세대라면 Vite는 2세대 번들러 도구입니다. 웹팩보다 더 빠른 속도를 장점으로 내세우고 있으며, 리액트와 궁합도 좋아서 최근에 가장 많이 사용하는 번들러 도구입니다.

리액트는 바벨과 (vite)을 함께 사용합니다.

리액트는 하나의 프로젝트를 개발할 때 여러 개의 에셋 파일, JSX, ES6 문법 등을 사용합니다. 웹 팩을 사용해서 모듈 번들링을 잡아주고, ES6로 작성된 코드를 바벨로 변환해주면, 어떤 환경에서든 문제 없이 동작하는 일관된 코드를 작성할 수 있습니다.

---

확장자?

리액트는 자체적으로 .js, .jsx, .tsx의 확장자를 사용합니다. 각각의 확장자는 어떤 차이가 있을까요?

컴포넌트 파일의 확장자 형식

리액트에서 사용할 수 있는 자바스크립트 파일 형식은 크게 3가지, 좁게 보면 2가지로 압축할 수 있습니다.

.js

가장 일반적인 자바스크립트 파일 형식입니다. 하지만 리액트에서는 바벨(Babel)과 같은 트랜스파일러의 역할로 인해서 js 파일에서도 리액트 문법인 JSX(Javascript XML)을 사용할 수 있습니다. 보통 create-react-app 패키지로 생성한 리액트 프로젝트는 js 파일을 기본으로 사용합니다.

리액트에서 바벨과 같은 역할을 하는 도구가 바로 ‘react-scripts’ 패키지입니다. 해당 패키지는 Create React App(CRA)에서 사용할 수 있는 스크립트 모음으로, 프로젝트를 설정하고 관리하는 데 필요한 웹팩, 바벨과 같은 스크립트가 포함되어 있습니다.

{
  ...
  "dependencies": {
    ...
    **"react-scripts": "5.0.1",**
    ...
  }
  ...
}

jsx

JSX(Javascript XML)은 자바스크립트로 HTML 마크업을 편하게 작성하기 위해서 페이스북 팀이 개발한 새로운 언어 형식입니다. 리액트는 기본으로 어떤 방식으로 생성하던지 JSX 문법을 사용합니다. 그래서 확장자를 .js 대신에 .jsx로 사용합니다.

vite 프로젝트에서는 @vitejs/plugin-react(-swc)가 리액트에서 웹 팩과 바벨의 역할을 하는 패키지입니다.

{
  ...
  "devDependencies": {
    ...
    **"@vitejs/plugin-react": "4.2.1",**
    ...
  }
  ...
}

tsx

TSX(typescript XML)은 .jsx의 타입스크립트 버전을 의미하는 확장자입니다.

어떤걸 사용하지?

.js(.ts)나 jsx(tsx)는 확장자의 의미에서 큰 차이가 없습니다. 하지만 JSX 문법이 순수한 자바스크립트 문법은 아니기 때문에 확장자가 .js(.ts)에 끝나는 파일에 작성하는 것에 대한 논란은 있습니다. vite에서는 공식적으로 jsx(tsx) 형식의 파일을 권장하기 때문에 되도록 jsx(tsx)로 해주는 게 좋겠습니다.

 

[스나이퍼 팩토리 2기 과정]

본 학습 자료 및 코드는 수코딩님의 자료를 이용하였습니다. [수코딩(https://www.sucoding.kr)] 출처