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
'강의 > 스파르타코딩클럽' 카테고리의 다른 글
[리액트 입문주차] 1-12~13 State (0) | 2023.06.24 |
---|---|
[리액트 입문주차] 1-5 React Component ~ 1-11 Props 추출 (0) | 2023.06.24 |
[웹개발 종합반] 5주차 정리 및 마무리 (0) | 2023.05.22 |
[웹개발 종합반] 4주차 정리 (0) | 2023.05.22 |
[웹개발 종합반] 3주차 정리 (1) | 2023.05.21 |