[생활코딩 React 강의] #1 ~ #6 : React에 대하여

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다.

www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

---

1강. 수업 소개

- React란? : Facebook에서 만든 UI 라이브러리

- 특징

• 홈페이지에서 특정 영역을 HTML로 코딩할 때, 사용자 정의 태그를 사용하여 main HTML 페이지에서 간단하게 사  용자 정의 태그를 적어주면 됨 (= 가독성)
• 사용자 정의 태그는 재사용할 수 있음. 다른 HTML 페이지에서도 사용할 수 있음 (= 재사용성이 높다)
• 특정 사용자 정의 태그에서 오류가 생기면, 그 사용자 정의 태그에 관련된 내용만 고치면 됨 (= 유지보수가 편리함)

≫  이 때, React에서 사용자 정의 태그를 Component라고 부른다.

 

---

2. 공부 전략

- 생활코딩(이고잉님)의 강의에서는 코딩하는 법 → 실행하는 법 → Deploy (소비자에게 제공하는 것)을 토대로 가르치고, 그 뒤에 자세한 내용을 배우는 것으로 한다.

 

---

 

3. 개발환경의 종류

- 공식문서에 익숙해지는 것이 중요함 (reactjs.org/)

- reactjs.org/docs/getting-started.html 페이지에 관련한 정보를 나열함

Getting Started – React

• Online Playgrounds : 온라인 사이트로 react를 체험해볼 수 있음 (CodePen, CodeSandbox 등을 클릭하여 확인할 수 있음)

 

 

• Add React to a Website : 부분적으로 React를 넣고 싶을 때 사용함 (초급 사용자에겐 상당히 까다로운 방법)

 

 

• Create a New React App : ToolChain, React로 앱을 개발할 때 목표가 무엇이냐에 따라 목표를 달성하기 위해 필요한 개발환경, 도구들을 잘 모아서 한 번에 제공해주는 편리한 도구들

---

4. npm을 이용해서 create react app 설치

- nodejs.org/en/ 에서 node.js 설치 (LTS는 안정화된 버전이라는 의미)

(필자는 window os 사용 중이므로 window 설치 내용만 작성함)

 

- '윈도우 + R' 를 눌러서 실행창을 띄우고 cmd 입력하여 cmd창 띄우기 (cmd : command의 약자, 명령어를 통해서 컴퓨터를 제어하는 프로그램)

- npm을 잘 설치했는 지 알기 위해 'npm -v' 명령어 입력, 숫자가 잘 나오면 잘 설치한 상태

- npm에 대한 수업을 참고하여 npm 다루는 기본적인 방법 : opentutorials.org/module/4044

npm

- 공식적인 방법으로 npx를 이용하지만 이 강의에서는 npm을 이용하여 바로 create-react-app을 설치함

- npm에게 install을 시켜야 함 → 'npm install'

- 이 컴퓨터 어디에서든지 실행할 수 있게 함 → 'npm install -g'

 

npm install -g create-react-app

(만약 권한이 없다고 뜰 시, 'sudo npm uninstall create-react-app', 'sudo npm install create-react-app')

- 잘 설치되었는 지 확인하려면 'create-react-app -V' 입력하기

 

---

5. creare react app을 이용해서 개발환경 구축
- 이용할 폴더의 이름을 'react-app'으로 만들기 (주의 : react로 만들면 create-react-app이 거절함, 특수 문자라서)

- cmd창 → 'cd 폴더 경로' → create-react-app . 입력
cd (change directory) (폴더 끌어다가 놓으면 알아서 경로)

** 대문자를 포함하여 폴더의 이름을 지으면 안 됩니다.

: Cannot create a project named "폴더 이름" because of npm naming restrictions:

name can no longer contain capital letters

폴더의 이름에 대문자를 포함할 경우

---

6. 샘플 웹앱 실행
- 이 강의에서는 Visual Studio Code(Microsoft에서 만든 무료 프로그램)를 사용함

- vscode는 code.visualstudio.com/download에서 알맞게 다운로드하면 됨

Download Visual Studio Code - Mac, Linux, Windows

- View - Appearance - Toggle Panel - Terminal 설정하면 커맨드라인이 뜬다.
- npm run start을 입력함

npm run start를 vscode의 터미널에 입력한 후

-> 개발 중인 앱을 확인하는 주소 (둘 중 하나로 들어가면 됨)
- 주소 중 하나로 들어가면 아래와 같은 페이지가 뜸

- create-react-app이 가장 최소한의 app을 미리 구현해서 우리에게 보여주는 것임 (react 기술을 이용해서 만든 웹앱이 됨)
- 실행을 끄고 싶을 때는 Ctrl+C를 입력하면(터미널에) 종료되고 리로드해도 연결이 안 됨