1. React
A JavaScript library for building user interfaces
공식 문서에 따르면 리액트는 UI를 빌딩할 수 있는 JS 라이브러리이다.
UI를 빌딩한다는 것은 사용자에게 보여지는 부분을 구축한다는 의미이다.
1.1 SPA Architecture
Single Page Application의 약자로 한 개의 페이지로 이루어진 애플리케이션
-
SPA의 특징과 장점
한 개의 페이지로 구성된 웹 앺으로, 서버에 1회 리소스를 요청한다.
프로젝트 내부에는 index.html 하나 뿐 나머지는 JS로 가져온다.
페이지가 갱신되는 상황이 없으므로 자연스러운 UX를 구현할 수 있다. -
SPA의 단점
SEO(Search Engine Organization)을 위해선 HTML 페이지 전체가 필요한데, SPA 페이지의 HTML 파일들은 검색엔진이 찾기 어렵게 짜여져 있다.
1.2 Component
컴포넌트는 벽돌처럼 쌓아 올리듯 개발하는 것
SPA 프레임워크는 컴포넌트 단위로 변경사항을 반영하기 때문에 전체 페이지가 리로딩되는 현상이 없다.
2. React에서 자주 사용되는 ES6 문법
2.1 변수와 상수
변수 : let, 상수 : const
if (1==1){
var a = 3;
console.log("a",a);
}
console.log("바깥 a",a);- var를 사용하지 않는 이유
중괄호 안에서 선언한 변수는 중괄호 안에서만 유효해야 한다. (block level scope)
그러나 var는 바깥에서도 유효하다.
2.2 Object
object는 항상 key-value pair 기억할 것!
value 값엔 어떤 타입이든 올 수 있다.
const age = 21;
const textObj={
name:'jinwoo',
age:age, // key value가 같은 모양이다? 생략 가능 age:age => age
company:'Team Sparta',
doSomething: function(){}
};2.3 얕은 복사
- 항상 조심해야하는 부분
객체를 복사할 때 원래 객체의 값이 바뀌는지 객체가 어떤 걸 가르키고 있는지 확인할 필요가 있다.
const obj1 = {
value1:10,
};
const obj2 = obj1;
obj2.value1 = 1;
const obj3 = JSON.parse(JSON.stringify(obj1));
obj3.value1 = 15;
// 새로운 객체를 만드는 것, 새로운 주소값을 갖게 된다.
console.log(obj1);
console.log(obj2);
console.log(obj3);obj1을 복사한 obj2의 값을 바꿀 때 obj1의 값도 바뀌게 된다.
이는 obj2는 obj1의 주소값을 복사했기 때문인데, 이를 해결하기 위해 JSON.parse를 사용해주자!
2.4 Spread Operator
...(전개 연산자)
let [name,...rest] = ["Jinwoo",27,'Seoul']
console.log(rest);
let names = ["Steve", "John"];
let students = ["Tom", ...names];
console.log(students);['Tom', 'Steve', 'John]
전개 연산자를 사용하면 배열의 구조를 깨고 나온다.
2.5 Arrow Function
function sum(x,y){
return x + y;
}
const sum2 = (x,y)=>{return x+y};return 문을 생략할 땐 중괄호를 빼줘야 한다는 것을 잊지 말자!
const sum2 = (x,y)=>x+y;
3. 개발환경 세팅
3.1 필수 프로그램
(1) 크롬 브라우저
(2) VScode
(3) git
(4) Node
(5) yarn
-
터미널에 yarn 설치
npm install -g yarn
-
설치 확인(버전 확인)
yarn -v
-
yarn으로 패키지 설치 방법
yarn add [설치할 패키지 이름]
npm과 yarn
모두 자바스크립트 런타임 환경인 Node의 패키지 관리자
전반적으로 yarn이 속도, 보안 면에서 우수하므로 yarn을 사용할 예정이다.
