React 시작하기 - 첫번째 리액트 앱 만들기

React 시작하기 - 첫번째 리액트 앱 만들기

 

React App(Application) 이란?

React로 만들어진 대부분의 웹 서비스들이 매우 다양한 상호작용을 제공하고, 간단한 웹 서버를 구현하기 때문에 React App(Application)이라고 불린다.

 

React App 만들기

React는 Javascript 라이브러리 중 하나이기 때문에 npm 사이트에 접속하여 아래와 같은 순서로 설치할 수 있다.

 

하지만... 위 순서로 설치한다면 많은 설정값들이 존재하기 때문에 입문자에게는 어려울 수 있다.

 

그래서 우리는 아래와 같이 Vite라는 도구를 활용하여 React App을 만들어 볼 것이다.

 

Vite를 통한 리액트 설치 명령어

npm create vite@latest

 

위 명령어를 입력했다면...

 

아래와 같이 프로젝트 이름, 프레임워크 선택, 버전 선택 등... 항목을 선택할 수 있도록 도와준다.

// 프로젝트 이름
project name
-> project01

// 프레임워크 선택
select a framework
-> React

// 버전 선택
select a variant
-> Javascript

 

Vite를 통해서 리액트를 설치했다면 각각의 폴더, 파일들을 살펴볼 것이다.

 

package.json 파일에서는 프로젝트 정보... scripts, dependencies, devDependencies를 확인할 수 있다.

{
  // 프로젝트 정보...
  "name": "project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  // 라이브러리 정보...
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  // 개발용 라이브러리 정보... (서버에 올리지는 않는다.)
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.9.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "vite": "^5.4.1"
  }
}

 

그런데 package.json 폴더를 보면 라이브러리 정보는 존재하지만 프로젝트 폴더 안에 node_modules & package-lock.json 폴더가 없는 것을 확인할 수 있다.

 

그래서 우리는 vite를 통해서 React를 설치했다면 아래와 같은 명령어를 입력해 설정된 라이브러리를 설치해 줄 것이다. (node_modules & package-lock.json 폴더가 생성되었을 것이다.) 

npm install

 

다음으로는... public & src 폴더를 살펴볼 것인데

 

public 폴더는 이미지, 폰트 등 ... 정적인 파일들을 보관하는 폴더라면, src 폴더는 jsx, css 같은 코드 파일을 보관하는 폴더라고 생각하면 될 것 같다.

 

그렇다고 src 폴더에는 이미지, 폰트 등 ... 보관할 수 없는 것은 아닌데... src 폴더 내에 assets 폴더에서는 직접 접근해서 사용하고자 하는 이미지, 폰트 등을 관리하기도 한다.

 

마지막으로... index.html 파일을 살펴볼 것인데...

 

index.html는 일단 화면을 보여주는 기본 틀이라고 생각하고 다음 포스트에서 자세하게 알아보도록 하자. 

 

React App 실행하기

package.json 파일에서 본 script 중 dev를 통해서 vite를 실행시킬 수 있으며, 아래 코드를 입력할 경우 접속 가능한 포트 번호를 보여준다.

npm run dev (브라우저 주소창 -> http://localhost:5173/)

 

참고로...

 

npm run dev 입력 후 h 버튼을 입력하면 help 가이드가 나온다.

 

r -> 서버 재 실행

u -> 서버 url 확인

o -> 브라우저 열기

c -> 콘솔 클리어

q -> 닫기

 

강의 링크

https://www.udemy.com/course/react-next-master/