자바스크립트 부트캠프

1교시

webpack 학습은 webpack 주소 가서 자가학습해야함쓰
react-scripts eject 하면 webpack 설정 다시 할 수 있음.
eject실행하면 scripts 폴더 생기고 package.json 설정이 바뀜

creat react app

config 폴더 안

webpack.config.js
config 폴더 > webpack을 어떻게 번역할꺼야~ 하는 베타용/운영용 이렇게 컴파일하는걸 설정해주는거 (multi 설정)

scripts 폴더 안

build.js 는 node.js의 자바스크립트이고.. 브라우저 자바스크립트랑은 다름

리액트

라우터돔을 이용해서 화면전환 해보고, 네트워크API로 상태를 다뤄보기

react.strictMode 로 감싸져있으나 안감싸져있으나 작동하는데는 상관없음
strictMode컴퍼넌트로 감싸주면 개발할때 좋지않은 코드구성방식 알려줌
여러가지 가이드를 받는다..
언젠가 지원하지않는 API들과 컴퍼넌트들을 자동으로 detect해줌

api를 써볼건데.. 데이터들을 제공해주는 서버서비스들이 있음 json generator’

라우팅: 웹브라우저의 경로(주소줄)를 탐색해서 필요한 컴퍼넌트를 보여주는 행위
사용자는 화면이 바뀐것처럼 느껴진다.. react-router-dom
리액트 기본패키지라 볼 수 있음

1. BrowserRouter (주소가 바뀌는걸 detect해서 특정컴퍼넌트 a라는 주소형태는 a컴퍼넌트를.. 등등)
   

   전체를 감싸고 있어야함 ```javascript

2. `Route` 어떤 주소가 들어오면 그 주소 실행해 웹 파라미터 슬래시 뒤에 모양따라 Route감싼 부분을 보여줌. 
  ```javascript
  <BrowserRouter>
    <Route path="/posts">
      <Posts />
    </Route>
  </BrowserRouter>

1. Switch Route들을 감싸는걸로 권장하고 있음.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

a링크로 누르면 깜빡 (화면전환/화면깜빡임 없이)..
a링크를 Link태그로 바꿔넣어줘야함.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

2교시

비동기로 json api 불러오기 때문에 어디서 완벽히 불러오는지 모름.
console.log(‘start’, Date.now()); 찍으면 찍고,
api 갖고 올때 console.log(‘end’, Date.now()); 찍으면 약 61ms 차이가 남.

그려진 상태에서 데이터가 왔으니깐 다시 그려야함.

다시 그려줘야하기 때문에 상태관리를 해줘야함. useState로…
const [postList, updatePostList] = React.useState([]); 빈배열로 리액트훅 만들어주기

원시적인 방법 1. map [{…id, title}] => title

postList.map(post => {post.title})

• 주의해야할점: jsx 태그 나올땐 하나만 return. 값만 return. 문자열 X

1. 함수형 컴포넌트 이용 ```javascript // 함수의 시그니처 사인 (콜사인) 속성을 props를 받는구나. 라는 시그니쳐가 있고, 함수를 접어놓으면 어떤 속성을 받는지 모름 function PostList (props){ return props.data.map((post) => (
2. {post.title}

)) }

function PostList (props){ const {data} = props; // 구조분해할당

return data.map((post) => ( <li> {post.title} </li> )) }

// 아 ~ 데이터 속성을 바로 받는구나. 하고 표현력이 좋아짐. // 자바스크립트 자체는 데이터타입을 명시하는게 없기 때문에 표현력이 높아짐 function PostList ({ data }){ return data.map((post) => ( <li> {post.title} </li> )) } ```

posts/1 로 포스팅 상세보기 이동할때

URL Parameters

키워드를 주면 키워드름의 변수명으로 값이 들어옴
path=”/:id” 이렇게!
콜론뒤에 id는 그냥 단순한 이름 짓는거뿐임

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

3교시

presentational component 컴퍼넌트를 그냥 단순히 보여주기만 하는 컴퍼넌트
post : container component 프리젠테이셔널 컴퍼넌트에게 데이터를 공급, 비즈니스로직을 갖고있는 컴퍼넌트 -> container component
데이터 공급하고 가공하고 조립하는 . 프리젠테이셔널 컴퍼넌트들을 갖고 있는.

외부와 연관성이 많은 컴퍼넌트는 종속성이 걸리고, 재활용성이 떨어짐
container component 의 종속성을 없애고 재활용을 어떻게 할 수 있을까? -> 최상위에 데이터를 한군데 모아서 상태관리를 진행한다.
플럭스 아키텍쳐.. -> redux 상태관리 라이브러리

리덕스는 리액트에서만 쓰게 만든건 아님
vanila js에서도 사용가능
react에 최적화된 react-redux 사용해서 쓰면됌

사용하는 방법은 너무 간단해서 심오함이 있고 추상화의 개념이 있음…
이해하는데 상당한 시간이 걸림…

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

createStore안에 인자로 reducer function 전달해서 구조부터 먼저 생성한다.
store.getState(); 하면 state 상태 호출됌

reducer함수가 무슨 일을 할껀데 어떻게 알려주냐? (store.dispatch(전달할action)) 객체 action을 전달시킨다.
그 객체는 항상 type이라는 속성을 가지고 있고 무슨일하는지 문자열로 인지할 수 잇게 명시함.

dispatch 호출하면 간접적으로 reducer가 호출됀다.
dispatch 할때마다 이 ReactApp(store.getState()) 을 다시 그리게하기위한 구조 -> subscribe 구독함수 호출. 함수를 인자로 받고 … 언제 호출되냐면 reducer가 return할때마다(상태가 바뀔때마다)

store.subscribe(() => { ReactApp(store.getState()); // 최초는 호출이 안됌 })

이부분 정말 난해하고 어렵구나.. ^^ 공부가 필요할 듯 하다.