[리액트 입문주차] 1-1 오리엔테이션 ~ 1-4 CRA

1-1 오리엔테이션

1. React란 무엇인가

- UI를 빌딩하기 위한 자바스크립트 라이브러리 

- SPA 기반의 프론트엔드 프레임워크 중 하나

- 컴포넌트 단위의 독립적인 블록을 이용한 방법 

- AngularJS, VueJS 보다 월등한 인기

2. SPA(Single Page Application)

- 한 개의 페이지로 이루어진 애플리케이션, M(Multi)PA과는 상반된 개념

- 애플리케이션과 비슷한 UX를 제공해줌

- 기존 문제의 문제점 : 페이지가 갱신될 때마다 리렌더링 발생

- 특징과 장점

> 딱 한 페이지로 구성된 웹 앱

> 서버에 1회 리소스 요청

> 그 이후에는 데이터만 받아와서 기존 페이지를 수정해주는 방식

 

- 단점 : SEO에는 약함

SEO(Search Engine Optimization)란? 

> 검색엔진이 html 내용을 찾을 수 없음

> 보완을 위해 next.js 많이 쓰임

3. 왜 React?

- SPA 프레임워크의 종류

> ReactJS: 페이스북이 만들고 유지보수, 많은 커뮤니티와 자료

> VueJS: 쉬움, 성장중, market Share 낮음

> AngularJS: 안정적이지만 배우기 어려움, 무거움

 

- 왜 리액트인가?

> NPM trends 점유율 1위 

> RN과의 상생

> 커뮤니티, 채용공고 多

4. 컴포넌트란?

- 컴포넌트 = 벽돌

- SPA: 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임 X

1-2 리액트에서 자주 쓰이는 자바스크립트 필수문법(1) , (2)

1. 복사 주의 

- 얕은 복사

- 객체를 바로 변수에 넣어서 복사해주면, 복사본을 변경할 때 원본도 변경됨

- 주소값을 복사하는것이기 때문에, 같은 메모리 공간을 바라보게 됨

- JSON.parse(JSON.stringify(obj1));

- 문자 형태로 풀었다가 다시 JSON으로 만들어줌 -> 새로운 메모리에 생성

2. 전개 연산자

let [name, ...rest] = ["wonjang", 21, "Gyeongi"]

=> name = "wonjang", rest = [21, "Gyeongi"]

let [name, ...rest] = ["wonjang", 21, "Gyeongi"]
=> name = "wonjang", rest = [21, "Gyeongi"]

let names = ["Steve", "John"];
let students = ["Tom", ...names]
=> students = ["Tom", "Steve", "John"]

 

1-3 개발환경 세팅

1. Node와 npm

- NPM(Node Package Manager)

> 무수히 많은 서드파티 패키지들이 모여있는 집합소

2. Yarn

- yarn도 npm 패키지, npm으로 설치한 후 yarn을 통해 다른 패키지를 다운받음 

- yarn 으로 패키지 설치 : yarn add [패키지 이름]

3. npm과 yarn

- 공통점

> 자바스크립트 런타임 환경인 노드의 패키지 관리자

> 많은 개발자들이 만들어둔 패키지/프로그램을 설치하고 삭제할 수 있도록 도와주는 관리자

> ex) 앱스토어, 구글스토어

 

- 차이점

> npm은 node.js 설치 시 자동 생성

> npm은 커뮤니티 그 자체

> yarn은 npm과 호환성이 좋고, 속도나 안정성이 더 좋음

4. 명령어

* npm과 yarn의 차이점 

- dev 패키지 설치 명령어에서 --save는 npm만 사용

- --save 명령어로 package.json 파일에 의존 패키지 목록 저장

- yarn은 --save명령어 사용하지 않아도 내장되어있음

* package.json 파일 : 프로젝트의 dependencis(의존) 목록 

5. 자바스크립트 런타임 환경의 종류

- 런타임이란? 프로그래밍 언어가 구동되는 환경

- 브라우저, node

- 즉 자바스트립트 파일을 실행할 수 있는 방법 => 브라우저, node 사용하는 것

1-4 CRA(Create React App)

1. CRA란?

- React 프로젝트 개발 필수요소를 자동으로 구성하는 방법

- 보일러플레이트

 

2. CRA로 프로젝트 생성하기

1. node, npm 설치 확인

2. npm install -g yarn 명령어로 yarn 설치

* 이 때 -g 는 global을 뜻하는데, 이는 설치된 컴퓨터 어디서든 사용 가능하다는 뜻

3. yarn create react-app [프로젝트 이름] 프로젝트 생성

 

3. 생성한 프로젝트 실행 

1. cd [프로젝트 이름] 하여 프로젝트 폴더로 이동

2. yarn start

 

4. 프로젝트 구조

- public 폴더 내부에 index.html 파일이 존재

- src 폴더 내부에 index.js, App.js 존재

- 우리가 사용할 파일은 App.js