📚 React App 생성하기
React로 만든 웹 서비스들은 보통 React App, React Application 이라고 불리움
React로 만든 웹 서비스들은 기능을 넘어서
사실상 애플리케이션에 가까울 정도로 매우 다양한 기능들을 제공하고 있기 때문에
마치 웹 브라우저 위에서 동작하는 애플리케이션 같아서
보통은 React App, React Application 이라고 부른다.
생성에는 총 3단계가 있다.
-
Node.js 패키지 생성
-
React 라이브러리 설치
-
기타 도구 설치 및 설정 (이 과정은 입문자에게 권장하기 어려운 과정이다.)
그러므로 강의에서는 차세대 프론트엔드 개발 툴 기본 설정이 적용된 React App 생성이
가능한 Vite를 이용하여 실습한다.
이 툴은 React 공식 문서에서도 권장하는 툴이다.
거의 대부분의 React 앱들이 이 Vite을 이용하여 만든다고 생각해도 무방할 만큼
이미 많은 사람들이 이용중이다.
강의폴더인 onbite-react 폴더에서 Vscode 터미널을 켜주고
명령어 npm create vite@latest을 실행해준다.
그러면 이렇게 프로젝트를 생성할지 물어본다. y를 입력해주면 된다.
그럼 이렇게 프로젝트 이름을 설정할 수 있는 명령이 뜬다.
default 이름은 vite-project로 되어있는데 지우고 원하는 이름으로 설정해주면 된다. 지우는 것이 아니라 바로 타이핑하면 된다.
이름을 설정하고 나면 어떤 프레임워크를 사용할지 물어본다.
이 때는 키보드 방향키를 이용해 선택할 수 있다.
그다음엔 어떤 버전의 리액트 앱을 만들 건지 물어본다.
강의 내에선 JavaScript만 다루기 때문에 JavaScript 단일 버전을 선택해준다.
이렇게 하면 프로젝트 생성까지 완료 된다.
생성된 폴더 내부를 보면 기본 설정까지 완료된
React 프로젝트 관련 파일들이 자동으로 생성된 것을 확인할 수 있다.
package.json 파일을 한번 훑어보면
프로젝트 내 사용할 script 와 의존 라이브러리 등 다양한 항목들을
살펴볼 수 있다 여기서 특히 의존라이브러리의 버전이 18.0.0 이하의 버전이라면
잘못 설치된 것이니 폴더를 날리고 새롭게 다시 설치해주어야한다.
맨 밑에 devDependencies 항목은
개발 시 필요한 테스트 도구 등 개발용 라이브러리들이 포함되어있다.
배포시 이 라입러리들은 포함되지 않는다.
여기서 이상한 점이 하나 있을 것이다.
바로 package-lock.json이나 node_modules 등이 안 보인다.
위 버전들을 기반으로 설치하게끔 터미널에 명령어를 입력해줘야한다.
터미널에 npm i 명령어를 입력해주면
약 258개의 많은 라이브러리들이 자동으로 설치가 되어진 것을 확인할 수 있다.
이 많은 라이브러리들을 일일이 조사하고 다 설정하고 설치하는 일을 하고싶은 사람은 없을 것이다.
이것을 자동화하기 위해서 Vite 같은 도구를 이용하여 리액트 앱을 생성하는 것이다.
자동으로 설치된 항목들을 한번 살펴보자
📚 프로젝트 내부 구조 살펴보기 .1 - public 폴더
public는 svg,png 파일 등 이미지 파일들을 보관하는 용도의 폴더이다.
이미지나 폰트같은 정적인 파일들을 보관하는 곳이라 생각하면 된다.
📚 프로젝트 내부 구조 살펴보기 .2 - src 폴더
src는 source의 약자로 React나 JavaScript 코드들을 보관하는 곳이다.
여기서 App.jsx 라는 특수한 확장자를 확인할 수 있다.
이 파일은 현재는 React 코드가 작성되는 공간이라고 생각해두면 된다.
📚 프로젝트 내부 구조 살펴보기 .3 - 기타 파일들
-
eslint.config.js : eslint라는 도구의 설정파일
쉽게 말하면 개발자들 사이에 코드 스타일을 통일할 때 쓰이는 도구 ,
추천하는 코드 스타일을 사용할 때 쓰는 도구라 생각하면 된다.
- gitignore : git 에 올릴 때 올리면 안 되는 파일 등을 설정하는 파일이다.
- index.html : 리액트의 기본 틀 역할을 하는 html 파일이다.
- vite.config.js : vite 도구의 옵션 설정 파일이다.
⚡️ React app 실행해보기
터미널 창에서 npm run dev 명령어를 입력해주면
현재 미완성 앱이므로 개발용으로써 실행하게 된다.
실행되어지면 접속할 수 있는 링크가 생성이 된다.
접속하게 되면 이렇게 리액트 앱 기본화면이 뜬다.
⚡️ React app - help 명령어
h를 누르게 되면 리액트 관련 도움말과 관련된 숏컷이 출력이 된다
