220623강의 필기

React

1.npm vs yarn

만들어지는 프로젝트에 대한 파일에따라 다름

package.json <- dependency

package-lock.json

yarn.lock

리액트는 주로 yarn 사용.

pwa?

manifest.json : Android 필수적인 정보

robots.txt : 검색같은 기능에서 ~는 읽지 말고 ~이런걸 읽어 하고 기기에 명령을 내려주도록 하는.

vue vs react 구조

__.vue	__.js
HTML<template>	JSX(HTML + JS)
Script	JSX(HTML + JS)
CSS(scss)	외부 scss

react는 js 파일과 css파일이 구분되어있지만 반드시 이름은 같아야함.

jsx는 html과 js 문법이 섞여있는게 가능한.(js코드는 {}안에 넣어서 표현.)

FLUX vs Redux vs Vuex

MVVM : 데이터 양방향 (HTML <-> Vue)

vue 부모에서 자식에게 props를 통해 데이터 전달.

자식도 부모에게 변경된 정보들을 통해 데이터 요청.

부모와 자식의 데이터 전달이 1대 1로만 매칭이 되면 관계도가 복잡해진다.

자식의 변경된 정보들을 store에 저장하여 부모가 값을 전달하고 싶을 때에도 store에 저장하여

get을 통하여 store에 접근해 해당 데이터만 가져오는 방식. -> Flux

Virtual DOM

각 언어의 장점을 가져온 vue.

React(버츄얼 돔의 기능) -> vue <- Angluar(양방향 데이터 바인딩의 장점)

버추얼 돔 : 속도가 빠르다

브라우저의 역할 : url의 정보들을 받아 뿌려주는 역할. 과정 순서 :

1. DOM을 생성한다.

DOM과 HTML 차이

html요소 하나하나마다 태그로 구분. DOM은 개발자도구에서 돔 셀렉터를 찾아보면 태그들을 그룹지어서도 구분한다 그것이 DOM.

dom tree를 받아 랜더링을 통해 화면에 뿌려줌,.ㅁ

2.랜더링

virtual dom : 화면 전화간의 성능을 높인.

이전 페이지와 현재페이지를 비교하여 바뀐 부분만 캐치하여 tree를 다시 그림. (기존 DOM은 화면 전환할 때마다 Tree를 다시 그림.)

그리하여 속조가 빠름

주의!

app.js의

function App(){

​ return(

​ 안의 내용에서 마지막 태그는 항상 한개로 묶어야 함.

​ 여기서 class=”“로 태그의 클래스를 지정해 줄때엔, className=”“으로.

​ )

}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

참고하면 좋을 자료:

1. JihyeonNam-0327/react-contact-list