[0406 과외] React와 create-react-app

다음 시간까지 해올 것

1. 아래 보충 자료 읽기
2. 서비스 와이어프레임 PPT로 그리기

 

오늘 배운 것

1. (정적인) 웹 페이지 ➡ (동적인) 웹 어플리케이션
2. Javascipt 언어
3. React Tutorial
4. create-react-app

 

정리

Tutorial 중 rendering 되지 않았던 부분

// 튜토리얼에 나온 코드
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

// 렌더링되지 않는 코드
ReactDOM.render(
  <h1>Hello, world!</h1>
  <h2>Start, React!</h2>,
  document.getElementById('root')
);

// 해결한 코드
ReactDOM.render(
  <div>
    <h1>Hello, world!</h1>
    <h2>Start, React!</h2>
  </div>,
  document.getElementById('root')
);

• render()의 첫번째 변수로써 HTML 태그 요소를 넣게 되는데, <h1></h1>와 <h2></h2>를 연달아 있을 때 렌더링 오류가 난다. 이 원인을 생각해보면, HTML 태그도 하나의 객체처럼 인식이 될텐데, 두 객체가 연달아 있었기 때문이다.

• 마치 C++에서 cout << A << B << endl;로 써야하는데, cout << AB <<endl과 같이 실수한 것처럼 말이다.

 

React App 설치 과정

1. Node.js 사이트에서 v12.16.2 설치

• npx를 사용하기 위해서

• 그리고 npx로 create-react-app 패키지 를 1회성 설치하여

• 결론적으로 create-react-app으로 React App을 생성하기 위해

• 그렇다면,

  • npx: 패키지를 설치하지 않고, npm 패키지를 1회성으로 즉석 실행해볼 수 있는 도구
  • npm: 자바스크립트 패키지 관리 모듈

• 패키지가 뭔데?

  • 라이브러리와 같이 누군가 잘 만들어놓아서 공유해놓은 것.
  • 너가 천재야? 어떻게 모든 기능을 다 자기가 일일히 구현해? 그건 불가능.
  • 즉, 모든 것을 직접 프로그래밍하는 것이 아니라 잘 다운받아서 잘 써먹기만 하면 되는 것.

 

2. cmd 실행 그리고 원하는 경로에 React App 설치

npx create-react-app IconSpeak

 

3. 설치된 경로로 이동하여 한번 실행

cd IconSpeak

npm start

 

수업 보충 자료

• 사용자 이름에 한글 및 공백으로 인한 환경 변수 오류
  • 참고