2020-01-14 React강좌 첫 수업 - 리액트를 위한 JS, 환경설정, 기초

이웅제 강사님( Mark Lee ) 

프로토파이 회사에서 일하고 계심.

Microsoft MVP로 활동.

TypeScript Korea User Group Organizer

Electron Korea User Group Organizer

Youtube : Marktube 운영중

 

 

 

리액트를 위한 JS 정리

 

var는 문제아

 - 함수 레벨 스코프만 지원

 - 중복 선언 가능

 - 생략도 가능

 - 호이스팅 

-> let은 해결사 : 블록 레벨 스코프 중복선언이나 호이스팅할때 에러발생해서 알려준다.

SyntaxError - 문법적으로 오류, ReferenceError 참조 에러 

 

let은 변경 가능 ( 값 자체와 참조값이 변경가능) 

const는 불가능

Primitive(원시값) vs Reference(객체)

 

참고: 

https://overreacted.io/on-let-vs-const/

On let vs const

 

 

템플릿 String

`` (백틱) 사용 

console.log(`안녕하세요 제이름은 ${name} 입니다.`);

 

arrow function

자신의 this를 만들지 않는다.

생성자로 사용할 수 없다. ( 자신의 this를 생성할 수 없다.)

항상 익명 함수 ( 함수의 이름이 없음 IIFE같은것)

리턴만 있으면, {} 생략 가능

인자가 하나면, () 생략 가능

 

function Foo() {
  this.name = 'a'

  setTimeout(function () {
    console.log(this.name);   // undefined
  }, 1000);

  setTimeout(() => {
    console.log(this.name);  // a를 가르킴
  }, 1000);
}


const foo = new FOO();

const a = () => {
  return '리턴';
};

console.log(a());

const b = () => '리턴';

console.log(b());

const c = props => `리턴 ${props}`;

console.log(c('프롭스'));

 

 

함수.bind(디스)

함수의 this로 인자로 넣은 '디스' 를 사용하는 함수를 만들어 리턴

 

Desturcturing assign

구조분해 할당

 

const foo = {
  a: '에이',
  b: '비이'
};

const { a, b } = foo;
console.log(a, b);

const bar = ['씨이', '디이'];

const [c, d] = bar;

 

 

Spread문법

 

callback

함수를 인자로 넘기는 행위 , 비동기처리를 위해 이 과정을 했음.

 

Promist 객체

Promise 객체를 마들고, 로직 처리 후 성공과 실패를 알려준다.

thien과 catch 를 통해 메인 로직에 전달한다.

 

요 개념이 있어야 async, await로 넘어가기 직전 들르는 곳

 

 

async - await

기본적으로 promist사용

then과 catch를 통해 메인 로직에 전달한다.

async키워드가 붙은 함수 안에서만 await 사용가능

 

Generator 객체

function*으로 만들어진 함수를 호출하면 반환되는 객체이다.

function* 에서 yield를 호출하여, 다시 제어권을 넘겨준다.

제너레이터 객체에 next()함수를 호출하면, 다음 yield 지점까지 간다.

 

 

 

CRA

create react app

 

왜 npx가 필요했을까

 

프로젝트 로컬에 설치된 패키지의 실행 커맨드를 사용하려면, 

• package,json의 npm script에명령어를 추가하여 사용해야 했다.
• npx로 바로 실행 가능

 

전역으로 실행하고 싶은 패키지가 있을 경우,

• npm i -g 를 이용해 전역에 꼭 설치해서 사용해야 가능했다.
• npx로 최신버전의 패키지를 받아 바로 실행 가능

 

eject  : 바벨 웹팩 css loader 등등이 튀어나옴

 

 

npm install serve -g
serve -s build

serve라는 패키지를 전역으로 설치

serve명령어를 -s옵션으로 build폴더를 지정하여 실행

 -s 옵션(s는 single page application의 약자)은 어떤 라우팅으로 요청해도 index.html을 응답하도록 한다.

 

 

 

webpack

 

번들러 - 묶어서 주는 애 

 

js

jsx --> babel-loader

css -> css-loader

img -> file-loader

 

 Webpack :파일 확장자에 맞는 loader에게 위임

결국 웹펙은 모듈 번들러로써 최종 배포용 파일이 나옴.

 

** 우리가 git에 소스코드를 올리고 다른데서 소스코드를 받아서 똑같이 사용하기 전에

npm i를 친다. 근데 여기서 문제! 

이전과 버전정보가 다른 것이 생길 수가 있기 때문에 완벽하게 환경이 동일할 수 없다.

그래서 yarn이 나왔과 yarn에는 yarn.lock 에서 그 처리를 할 수 있었다.

npm에서 yarn을보고 package-lock.json을 만들었다.

 

 

 

ESLint

코딩 스타일 가이드를 따르지 않거나 문제가 있는 코드나 안티 패턴을 찾기 위해 사용하는 Javascript linter

올바른 코딩 습관을 위해 사용할 수 있는 툴

보통 vscode에서 extension에서 지원

 

Prettier 

예시 ) 쌍따옴표 , 홑따옴표 바꾸기 

보통 vscode에서 extension에서 지원

 

Husky

git hooks made easy

 - commit하기전에 뭘해라 push하기전에 뭘해라

 

lint-staged

Run linters on git staged files

 

 

 

React concept

Shadow DOM : 자기만의 스코프를 가지는 DOM 

Virtual DOM : DOM을 직접 다루지 않겠다.

 

** SVELTE(스벨트) : react와 반대되는 라이브러리 (virtual DOM 사용하지않음)

 

 

CSR (client side rendering)

server sending response to browser -> browser downloads JS

  -> browser executes React -> page now Viewable and Interacable

마지막 단계전까지 화면에 보여지지가 않고 로딩중

 

SSR (server side rendering)

CSR과 다르게 미리 보여짐

Server sending ready to be rendered HTML Response to browser

-> Browser Renders the page. Now Viewable and browser downloads JS

-> Browser executes React -> page  now Interactable

 

SSR이 항상 필요한게 아니고, 사용자들의 요청에 의해서 SSR이 필요한 상황이면 한다.

 

 

React DOM

만들어진 리액트 컴포넌트를 실제 DOM에 연결할때 ReactDOM을 이용

 

 

 

JSX

 

JSX문법으로 작성된 코드는 순수한 JavaScript 로 컴파일하여 사용한다. ( 누가? babel이)

왜JSX쓰나?

가독성이 좋아서, babel과 같은 컴파일 과정에서 문법적 오류를 미리 인지 가능

 

 

 

Props State

 

Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터

State는 컴포넌트 내부에서 변경할 수 있는 데이터

둘 다 변경이 발생하면, render가 발생 할 수 있다.

 

this.setState가 나온 이유 : 모든 할당문에 렌더링을 하게하면 이라기보단 setState라는 명시적인 것을 활용해서 이럴떄만 렌더링 해 라고 편하게 하기위해