[React] VS Code 에서 react app 설치

📌 react app 설치하기 전 확인 사항

VS Code로 create-react-app을 설치하여 React의 기본 프로젝트 구조를 생성하는 방법을 정리해보려고 한다. 아래대로 진행하려면 node.js, npm이 설치가 되어있어야 한다.
(node.js 설치시 npm도 같이 설치된다.)

React 설치 시 Node.js가 필요한 이유
Node.js는 JavaScript 런타임 환경으로, 웹 브라우저 외부에서 JavaScript 코드를 실행할 수 있게 해준다.
리액트 앱은 웹 브라우저에서 실행되는 코드여서 Node.js와 직접적인 연관은 없지만, React를 설치하고 사용하기 위해 Node.js가 필요한 이유는 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요하다.

• 패키지 관리: Node.js는 npm(Node Package Manager)을 포함하고 있다. npm은 JavaScript 개발에 필요한 패키지(라이브러리나 도구 등)를 쉽게 설치하고 관리할 수 있는 도구이다. React와 같은 라이브러리도 npm을 통해 설치한다.
• 빌드 도구: 대부분의 현대적인 프론트엔드 개발 환경에서는 Babel, Webpack 등의 빌드 도구를 사용한다. 이런 도구들은 ES6+ 코드를 일반적인 JavaScript로 변환하거나, 여러 개의 파일을 하나로 합치는 등의 작업을 담당한다. 이런 도구들은 Node.js 환경에서 실행된다.
• 개발 서버: React 애플리케이션을 개발할 때 보통 "hot reloading" 기능을 가진 개발 서버를 사용한다. 이 서버는 코드 변경 사항을 실시간으로 반영하여, 새로고침 없이 결과를 확인할 수 있게 해준다. 이런 개발 서버도 Node.js에서 실행된다.
• 서버 사이드 렌더링(SSR): SSR은 초기 페이지 로딩 속도 향상, SEO 최적화 등의 목적으로 사용되며, React 애플리케이션에 SSR 기능을 추가하기 위해서는 서버 환경이 필요한데, 이 때 주로 Node.js가 사용된다.

따라서 결론적으로 말하면, React 자체와 직접적인 연관성은 없지만 Node.js 없이 현대의 React 프로젝트 구조와 워크플로우를 유지하는 것은 거의 불가능하다.

📌 VS Code 에서 react app 설치하기

1. VS Code에 새창을 열어 'react-tictactoe' 폴더를 새로 만들어준다. (폴더명은 'react-tictactoe'가 아니여도 된다.)
2. 새 터미널창 열기 (2가지 방법)

• 상단 메뉴의 Terminal -> New Terminal 클릭
• 하단의 라인에 마우스 커서를 놓고 위로 끌어올리기

3. Terminal에 npm init react-app ./ 입력하고 Enter 누른다.
   (react-app 뒤에 오는건 새로 만들어지는 폴더명이다. cd react-tictactoe를 통해서 현재 디렉토리를 변경해준 상태라 ./으로 작성해주었다.)
   

4. 설치가 완료되면 react-tictactoe 폴더 하위에 여러 폴더 및 파일들이 생성된다.
   

npx create-react-app 에서 npx는 노드 패키지 실행을 도와주는 도구이다.
그래서 create-react-app이란 npm 레지스트리에 있는 패키지를 react-tictactoe 폴더에서 실행해서 리엑트를 설치해준다.

간단하게 VS Code Terminal로 create-react-app 설치 완료~!!