React 4일차-create react app 기본

오늘은 새로운거다 실전과 관련된 것이다  기쁘다 ㅎㅎ

우선 바탕화면 빈곳에서 우클릭 code(으)로 열기 클릭

바탕화면 빈곳에서 우클릭

상단에 터미널 클릭해서 새 터미널 클릭

터미널을 열어주자

밑에 이창이 뜨면 성공

이제 내가 말하는것은 여기에다 입력하면된다

npx create-react-app 저장할폴더명   하고 엔터 

폴더명은 있는거하면 그안에 만들어지고 없는거 하면 폴더도 같이 만들어진다.

그러면 이렇게 된다

설치완료

이제 cd 설치한폴더명 하고 엔터

그다음 code . -r 하고 엔터

C:\Users\ko022\Desktop> 가 C:\Users\ko022\Desktop\설치한 폴더명> 이런식으로 바뀐다.

하면 이런식으로 창이 바뀔것이다. 그러면 위에처럼 새터미널 열어주자

여기서 새터미널 열어주자

이제 이거다 터미널에 치고 엔터하면 된다 하나씩 알아보자

npm start

개발자 모드 실행한다 특징은 내용이 바뀌면 새로고침안해도 바로 변경된다.

한번 터미널에 npm start 입력하고 엔터치고 기다리면 새로운 인터넷창이 새로켜진다 

터미널이 이렇게된다

아무내용없는 기본화면

이게 기본화면이다 즉 우리가 코드를 치며 여기에 바로 반영되서 화면이 바뀐다. 코드치고 제대로 적용됬나 확인하기 좋다.

npm run build(npx serve -s build)

사용자 모드 build폴더가 만들어지면서 내용이채워지고 사용자 모드가 실행 변경사항이 바로 적용되지 않음

우선 터미널에서 ctrl+c누르고 일괄 작업을 끝내시겠습니까 (Y/N)? 이게뜨면 y를 치고 엔터를 누르자

이제 터미널에 입력이 가능해질것이다

이렇게 된다

npm run build를 치고 엔터 눌러보자 

npm run build치면 제대로 작동이 안된다 build폴더는 만들어지는데 제대로 작동이 안된다 

npx serve -s build를 치고 엔터눌러 보자

이렇게 나온다

이제 localhost부분을 ctrl+좌클릭 으로 켜보자

겉모양은 위에 npm start랑 같다

겉모양은 같지만 이건 새로고침을 눌러야지 변경이 적용된다. 그리고 이건 개발자가쓰는게아닌 사용자에게 보이는 화면이라고 생각하면 편하다

그리고 build라는 폴더가생기고 안에 내용이 채워진다

이렇게 된다  이제 npm run build를 실행하는 두가지 옵션을 보자
   npm install serve -g

serve라는 패키지를 전역설치 

-g는 전역설치를 의미하고 

serve 는 패키지 이름이다.
  serve -s build

-s 옵션으로 build 폴더를 지정하여 실행
-s 옵션은 어떤 라우팅으로요청해도 없는경로일시 index.html을 응답

npm test

jest를 이용한 테스트를 시작함

또  ctrl+c누르고 기존에 실행했던거 종료시키자

npm test 치고 엔터

기본으로 저장된 테스트

이렇게 된다 저기 나와있는 단어를 누르면 테스트가 시작된다. 

기본적으로 저렇게 테스트가 저장되있다. 우리가 테스트를 직접 정의해서 테스트를 돌릴수있다. 

이건 다음에 알아보자

npm run eject

create-react-app이라는 기능에서 분리 

create-react-app이 지원해주는것에서 빠져나와서 내가 어떤것을 쓰기위해 하는것이다.

우선package.json을 클릭해서 열어주자

또  ctrl+c누르고 기존에 실행했던거 종료시키자 

그리고 npm run eject 입력하고 엔터

Are you sure you want to eject? This action is permanent.이런 질문나오면 y 누르시면 됩니다.

다되면 이런식으로 나올거다 그러고 켜놓은 package.json파일을 보자

이런식으로 많이 변했을것이다.

create react app 에서 빠져나오면서 기본적으로 지원해주던게 분해되면서 이렇게 해체된것이다.

create react app 에서 이렇게 많은것을 지원해주고 있었다.

오늘은 이까지 기본만 알아보겠다.