1. 리액트(React)란?
페이스북(Facebook)에서 개발한 오픈 자바스크립트 라이브러리.
2. 리액트(React)를 사용하는 이유
1. Single Page Application을 만들 때 사용한다.
- 하나의 페이지에서 모바일 앱처럼 부드럽게 동작하는 HTML 페이지를 만들고 싶을 때 React 라이브러리를 사용한다.
2. HTML 재사용이 편리하다.
- 큰 프로젝트에서 html 관리, 재사용이 편리해진다.
3. 비슷한 문법으로 앱 개발이 가능하다. (React Native)
사실 React는 HTML, CSS, JavaScript를 이용한 웹 개발을 편리하게 해 주는 도구이다.
HTML, CSS, JavaScript를 알고 있어야 한다.
3. 리액트(React) 설치/개발 환경 세팅
1. Nods.js(https://nodejs.org/)에서 최신 버전 Node.js 설치한다.
최신 버전을 설치해도 되지만 오류가 있을 수 있기 때문에 안정적인 LTS 버전을 권장한다.
2. Visual Studio Code (https://code.visualstudio.com/)에서 컴퓨터 사양에 맞는 버전 설치한다.
4. 프로젝트 생성
1. 원하는 위치에 프로젝트를 생성하기 위한 새로운 폴더를 생성한다.
가급적이면 폴더명은 영어로 작성, 특수문자는 언더바와 하이픈만 사용하는 것이 좋다.
폴더명 때문에 에러나는 것을 방지할 수 있다.
2. Visual Studio Code에서 새로 생성한 폴더 열기
- [파일] - [폴더 열기]
3. Visual Studio Code에서 새로운 터미널 열기
- [터미널] - [새 터미널]
4. 터미널에 리액트 프로젝트 명령어 (npx create-react-app 프로젝트명) 작성 후 enter
프로젝트명은 영어로 기입, 띄어쓰기 대신 언더바와 하이픈을 사용한다. 그 외 특수문자는 사용하지 않는다.
프로젝트가 성공적으로 생성되었다면 입력했던 프로젝트명으로 폴더가 생성되고 그 안에 여러 폴더와 파일이 함께 생성된 것을 확인할 수 있다.
5. 프로젝트가 정상적으로 설치되었는지 확인하기
5-1. 터미널에서 프로젝트 폴더로 경로 이동(cd 프로젝트명)
반드시 경로를 확인하여 처음 생성했던 폴더가 아니라 npx create-react-app 명령문 작성시 입력한 프로젝트명 폴더로 이동해야 한다.
5-2. 터미널에서 localhost 서버 시작 명령문(npm start)을 입력 후 enter
조금 기다리면 아래와 같이 성공했다는 안내 문구가 뜨면 localhost 경로로 브라우저가 자동 오픈되는 것을 확인할 수 있다.
브라우저가 자동으로 오픈되지 않는다면
브라우저를 열고 위의 주소를 입력해 주면 된다.
6. 개발은 App.js에서
src 폴더 안에 있는 App.js가 메인 페이지이므로 개발은 여기에서 하면 된다.
[node_modules] : 프로젝트 구동에 필요한 모든 라이브러리 코드 보관함
[public] : static 파일 보관함
ㄴ index.html : 메인 페이지
[src] : 소스 코드 보관함
ㄴ App.js : 메인 페이지에 들어갈 HTML 짜는 곳
[package.json] : 프로젝트 정보, 프로젝트 구동에 필요한 라이브러리 등을 기입해 두는 파일
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
