React.js - 프론트엔드 개발

프론트엔드 개발 환경 설정

1. Node.js

React.js을 사용하려면 Node.js라는 자바스크립트 런타임 환경을 이용한다.

https://nodejs.org/en/ 에서 Node.js 설치 

Node.js

npm version 확인

CMD
> npm version
{
  npm: '8.11.0',
  node: '16.15.1',
   v8: '9.4.146.24-node.21',
   uv: '1.43.0',
   zlib: '1.2.11',
   brotli: '1.0.9',
   ares: '1.18.1',
   modules: '93',
   nghttp2: '1.47.0',
   napi: '8',
   llhttp: '6.0.4',
   openssl: '1.1.1o+quic',
   cldr: '40.0',
   icu: '70.1',
   tz: '2021a3',
   unicode: '14.0',
   ngtcp2: '0.1.0-DEV',
   nghttp3: '0.1.0-DEV'
}

 

++알아두면 좋다

Node.js을 처음 사용했다면 기본적으로 npm프로젝트를 초기화하는 방법을 알아두면 좋다

$ mkdir test-project

$ cd test-project

$ npm init
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (test-project) version: (1.0.0) description: test-project entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to C:\Users\ardent\test-project\package.json: { "name": "test-project", "version": "1.0.0", "description": "test-project", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) yes

node 프로젝트를 초기화하면 패기지 이름 등 기본적인 정보를 입력하고, 마지막에 package.json 이라는 파일을 만들어 준다.

 

2. 비주얼 스튜디오 코드(프론트엔드 어플리케이션 생성)

 

react-workspace 디렉터리 생성

$ mkdir react-todo-workspace

워크스페이스 디렉터리로 이동

$ cd react-todo-workspace

리액트 애플리케이션 생성

$ npx create-react-app react-app

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
.........
npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd react-app npm start Happy hacking!

리액트 애플리케이션 실행

$ cd react-app

$ npm start

You can now view react-app in the browser.
Local: http://localhost:3000
On Your Network: http://local.ip:3000
Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully

http:localhost:3000 경로를 들어가면 애플리케이션을 확인할 수 있다

 

비주얼 스튜디오 코드에서 개발 환경 설정

 

비주얼 스튜디오 상단 메뉴에서 파일 > 작업 영역에 폴더 추가 선택하여 이전에 만들어 놓은 react-todo-workspace

을 디렉터리를 연다. 그리고 저장하면 된다

react 애플리케이션을 설치하면 기본적으로 생성되는 파일들이 있다

 

package.json

필요한 라이브러리, 패키지 목록 등을 포함 한다

 

public 디렉터리

• index.html : 애플리케이션 실행 시 가장 먼저 리턴하는 HTML 파일이다.
• 서버가 필요한 리소스 파일(html/js/css)
• 리액트에서 html파일은 index.html 하나 밖에 없다
• 다른 페이지들은 React.js를 통해 생성되고 index.html에 있는 root 엘리먼트 아래에 동적으로 렌더링 된다

src 디렉터리

• 이 자바스크립트 코드가 리액트 컴포넌트를 root 아래에 추가
• App.js는 기본으로 생성된 리액트 컴포넌트