책과 함께] (1)리액트 시작하기

<참고한 책>

* 책의 모든 내용을 업로드할 수 없기 때문에 간단한 부분만 업로드한 후,

   직접 클론 코딩한 내용은 비공개로 업로드 하겠습니다.

 

오늘의 공부 목차

1. 리액트 시작하기 전.. 설치해야 할 프로그램
2. 왜 리액트를 공부해야 할까?
3. 무엇을 클론 코딩할 것인가???

4. 리액트로 시작하기(1)

 

 

 

---

1. 리액트 시작하기 전.. 설치해야 할 프로그램

node.js 설치하기

//명령 프롬포트 nodeJS 설치 확인

node -v

다운로드 | Node.js

설치 후, 버전 확인한 모습.

 

npm 설치 확인

npm -v

 

npx 설치하기

npm install npx -g

 

VSCode 설치하기

Visual Studio Code - Code Editing. Redefined

 

++) 추가.. '내가 궁금해서 찾아본 Visual Studio Code와 Visual Studio' 차이점

"Visual Studio Code" VS "Visual Studio"

 

 

---

2. 왜 리액트를 공부해야 할까?

왜 리액트인가?

1. 프론트엔드 프레임워크의 순위도 확인 시,

   선호도는  React > Vue.js > Angular

 

2. JavaScript로 작성되어 있다는 것.

   React라는 기술이 사라져도, JavaScript를 배우는 데 있어서 React는 도움이 된다.

 

 

 

 

---

3. 무엇을 클론 코딩할 것인가???

 

잠깐, 클론 코딩이란?

말 그대로 클론하는 코딩으로, 주로 웹 개발에서 쓰이는 용어이며 인스타그램, 카카오톡, 에어비앤비, 유튜브, 넷플릭스 등 우리가 자주 사용하는 서비스나 웹사이트를 밑바닥부터 만들어가는 강의를 의미한다. 이후 이야기하는 클론 코딩은 클론 코딩 강의를 의미한다.

출처: https://geonlee.tistory.com/171 [빠리의 택시 운전사]

 

 - 두근두근 완성시킬 사이트 미리보기

Movie App

 

 

---

4. 리액트로 시작하기(1)

 

(1) create-react-app으로 시작하기

- react는 최근 기술이기 때문에 일부 브라우저는 이해가 불가능할 수 있다.

 때문에 웹팩과 바벨이라는 도구로 모든 브라우저에 적용 가능하도록 컴파일이 필요.

 ** 하지만 최근 create-react-app이 프로젝트 구조 및 설정 작업 등을 자동으로 진행해줌!!

 

**프로젝트 저장 위치 설정 후 아래 코드 실행하기

npx create-react-app "프로젝트 명칭"

 

(2) README.md 파일 수정 후,
package.josn file 수정하기

    ※ 책 참고하기.

 

 

(3) 앱 실행

npm start