생활코딩 React(리액트) 01~06 개발환경 세팅

 

 

 

 

 

1.수업소개

 

 

 

리액트는 facebook.com에서 ui를 더 잘 만들기 위해서 페이스북에서 만든 자바스크립트 ui라이브러리다.

 

리액트를 한마디로 정의하기는 쉽지만 그 정의를 이해하는 것은 굉장히 어려운 일이다.

 

 

 

웹사이트는 매우빠른 속도로 복잡해진다.

정보가 조금만 증가해도 그 정보를 표현하는 html 태그는 기하급수적으로 복잡해진다.

 

페이스북 페이지에서 개발자도구를 열어 Element탭에서

sidebar에 해당하는 부분의 태그들을 복사해서 가져온 후 sidebar.html에 붙여넣기 해보자.

 

겨우 하나의 sidebar를 만들기 위해서 매우 복잡한 구성이 필요하다. 

 

그런데 만약

 

페이스북에서  sidebar부분을 차지하는 무수히 많은  element(tag)를 우리가 정의한 사용자 정의 태그(sidebar태그를 만들어서) 안에 넣은 후 sidebar태그를 만든 html 파일을 다른 파일(index.html)로 로딩한 다음에 <sidebar></siderbar> 이렇게 간단하게

우리가 정의한 사용자 태그의 이름을 적어주면 

 

이 태그가 실질적으로 웹브라우저에게 전달되고 표현될때 siderbar의 복잡한 코드로 바뀔 수 잇다면 얼마나 좋을까?

 

이렇게 사용자 정의 태그를 만들어 주는 여러가지 기술이 있는데 리액트 역시도 그런 기술 중의 하나이다.

 

리액트에서는 이렇게 사용자가 정의해서 태그를 만드는 것을 사용자정의 태그라고 하지 않고 컴포넌트라고 부른다.

 

1.가독성이 오른다

 

2.재사용성

 

3.유지보수

 

 

 

 

2.공부전략

 

 

처음 중간 끝으로

 

가장 본질 적인 것 3개를 꼽았다.

 

 

첫번째(coding)

 

우리가 개발환경을 세팅하고 어디에 코드를 바꿔야 되는가를 살펴보는 것

 

 

 

두번째(run)

 

그 다음에 그렇게 작성한 것을 실행해서 결과를 보는 것

 

 

 

세번째(deploy)

 

첫번째 두번째를 반복하다가 

모든 작업이 끝난 다음에 최종적으로 소비자에게 전달하는 하는 것.

(서비스 바닥에서는 이걸 디플로이라고 한다.)

 

 

 

 

3.개발환경의 종류

 

 

Create react app이라고 하는 프로그램을 컴퓨터에 깔 것이다.

 

그러기 위해선 npm이라고 하는 프로그램이 필요하다.

 

npm은 Node js라고 하는 기술을 이용해서 만들어진 여러 앱들을 우리가 명령어 환경에서 아주 손쉽게 설치할 수 있도록 도와주는

도구이다.

 

말하자면 Node js계의 앱스토어,구글플레이같은 역할을 하는 소프트웨어이다.

 

 

 

 

 

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

 

 

 

npm과 npx의 차이

 

npm은 프로그램을 설치하는 프로그램

 

npx는 create react app이라는 프로그램을 임시로 설치해서 딱 한 번만 실행시키고 지우는 녀석이다.

 

좋은 점은 컴퓨터 공간을 낭비하지 않는다.

또 하나는 설치해 실행할 때 마다 다운로드를 새로 받기 때문에 항상 최신상태라는 것이다.

 

공식 문서가 npx를 권장하는 이유는 최신버전의 앱을 사용하도록 유도하기 위해서이다.

 

npx로 파일을 만들면 최신 버전의 파일이 만들어진다.

그 후로 그 파일을 npm start로 실행 할 수 있다. 

 

++

만약 내가 오늘 npx로 jaesang파일을 만들고 3년이 지났다.

jaesang파일이 3년 후의 최신버젼이라고 생각하면 안된다.

왜냐하면 jaesang파일은 3년전에 만든거니까 3년 후의 최신버젼이 아니다.

 

그래도 필요하면 최신버젼으로 업그레이드는 가능하다.