우아한 테크 러닝 3기 세미나 내용 정리 part.5🙌🙌

Jung Hyun Kim·2020년 9월 17일

우아한 테크러닝 3기

목록 보기

5/5

우아한 테크러닝 3기 세미나 정리 🤓

webpack, 리덕스 알아보기

저번시간 Q&A

const logger = (store) => (next) => (action) => {
  console.log("logger: ",action.type);
  next(action);
};

const monitor = (store) => (next) => (action)=> {
//안 바뀌는 원본 dispatch가 store에 저장됨 
setTimeout(()=> {
  console.log("monitor:", action.type);
  next(action);},2000);
};
}

const store = createStore(reducer,[logger,monitor]);
//next 는 dispatch고 action 은 action인데 store의 경우 store 값을 꺼내올때도 있기때문에 사용한다 

store.subscribe(()=> {
console.log(store.getState())}
//이럴때 store 불러온거 사용함

비동기 코드를 동기코드로 만드는 것 , 실제 동기적인 작업과 비동기 적인 작업은 같은게 아니다!
제네레이터나 비동기 함수로 비동기를 동기 코드같이 보이게 할 뿐!( 데이타를 다루는 문제는 전혀 다른 문제)
문맥의 모양과 데이타를 다루는 관점에서 동기/비동기를 뒤섞어 이해하시면 안된다.
눈에 보이는대로 이해하자 어려우면 어려워도 받아들여보자!

웹팩이 뭘까? 어떻게 쓰는거일까? 📝

webpack과 plugin에 대한 이해

react를 처음시작할때 쉽게 설치해서 이용하는CRA(create-react-app) tool은 zero-configuration이라고 한다. 셋팅을 할 필요가 없기 때문! 웹팩은 설정이 되었다 안되었다 하다보니 버전 관리가 쉽지않다.

dependencies 를 통해 @babel은 트랜스파일링에 필요한 플러그인 설치가 필요하다.
기본적인 아키텍쳐나,webpack이 왜 좋은지 알아가보자 💁

webpack은 node.js에서 돌아가는 실행 파일이어서

const webpack = require("webpack")
// 이런 형태로 불러와야한다.

웹팩은 플랫폼이고 소프트웨어를 입주시키는 구조라고 생각하면 된다.

첫번째 중요한것은 loader

middleware에 해당하는 부분이 loader이다.
webpack이 처음에 소스파일을 빌드하는데 첫번째 자바스크립트 파일부터 시작해서 읽는 아이를
불러와서 Merge시키는 과정을 build한다고 하는데 이걸 entry에 기술해주면 진입점 파일임을 알게 한다

entry : {
main
}

// loader가 받아서return 하면 또 loader가 받아서 return 하고 그런 형태이다. 

module : 
//logger를 기술하는 부분 
{rules :[{test : /\.ts|js)x?$/},{},]

~~한 확장자를 가진 파일만 쓰겠다 하는 그런 기준이 있다.

plugin

dependencies 를 통해 @babel은 트랜스파일링에 필요한 플로그인을 설치할 수 있고 훨씬 더 많은 일, 의도된 기능을 만들어 줄 수 있다.

plugins : [new webpack.SourceMapDevToolPlugin({})]
//환경변수 파일 불러오는것, 콘솔지우는 플러그인 등, 내가 하고싶은 것들 만

로더는 컨버팅, 플러그인은 후처리

필요한 부분을 결한하거나, 압축하거나, 암호화 하거나 하는 것은 후처리 이므로 플러그인이고 그렇지 않은 것들은 컨버팅이라고 볼 수 있다.

로거 플러그인 종류는 매우매우매우 많다.

그래서 cra를 쓰지만, 실제 프로덕트에서 cra를 쓸수는 없으므로..😂😂😂😂 힘들지만..
각종 웹팩설정을 보면서 익히면서 적용하는게 제일 배우기 쉬운 길이다!

대표적인 로더들이 바벨이다
typescript 바벨안에 플러그인으로 통합되서 바벨이 자동으로 읽어준다.
바벨ㅇ안에 바벨용 플러그인이 또 있고 그런 형태이다.

컴파일과 트렌스파일러의 차이는 결과물의 차이이다

tsconfig.json 하나하나따져보면 hello world밖에 못만든다
적정수준으로 어떤건지만 알고 넘어가면 됨

나머지는 설정하면서 하나하나 알아가야함~

웹팩 공식문서에서 아주 기초적인것 만 보면서 셋팅만 가볍게 해보는걸 추천!
webpack doc

React and TS Boilerplate

redux를 react에서 사용하기 위해 "react-redux"를 사용한다 .


import {Provider} from "react-redux"

render(
<Provider store={store}>
  <App />
  </Provider>,
  rootElement
);

type StoreState = {
 
}
const initialState : StoreState = {
monitoring : false,
success :0
failture: 0}

//이렇게 초기값을 셋팅한다

액션 객체 와 데이터가 넘어가는 타입이외에 다른속성의 데이터를 넘겨주는걸 action 객체라고 하고 그 액션 객체를 넘겨주는걸 dispatch 함수라고 하고 reducer를 호출하는 세 단계가 필요한데
지금 우리가 하려는건 typescript이면, 어떤 규격의 데이터를 넘겨주는데 액션마다 규격이 다르니까
수백개의 타입을 다 만들어놓고 불러다 쓰면 너무 힘들기 때문에

typesafe action 을 쓰면 편리하다 (현재 프로젝트에서 쓰고있지는 않지만 참고해서 적용가능하면 좋을것같아..ㅠㅠ 타입에러는 싫어요 ‼️‼️)

import {createAction } from "typesafe-actions";

export const startMonitoring = createAction("@command/monitoring/start",
//상수를 넘긴다. 문자열을 넘기고 있고 타입
resolve=> {return () => resolve();}
//두번째 인자는 함수이다. 함수에게 줄 데이터를 
// 상수만드는게 생략되고 액션을 한번에 할 수 있게 만들어 준다

redux toolkit 을 쓰거나 typesafe-actions 쓰면 간단하게 사용할 수 있다.

middleware saga 써보기

import rootSaga from './saga"

function* () {
yield fork(monitoringWorkflow)
  //rootsaga 형태 , 제너레이터 함수이고, 
}

제너레이터 만들기

function* rootSaga () {
yield {id: "@init"};
yield {id: "@inc"};
yield {id: "@put"}
}


const root = rootSaga();

console.log(root.next());
console.log(root.next());
console.log(root.next());
console.log(root.next());

object {value : Object, done : false} //가 호출된다.
//value: { id : "@init"}
//done 은 실행할게 남았는지 아닌지 아려주고 

//*의 위치는 변수 앞이나 함수 뒤에 붙여 도 된다

helper 함수는 fork, all, take, race, delay, put 이 있다

action creator처럼 객체를 만드는 돕느 helper 함수이다;

function * monitoringWorkflow() {

while(true) {
yield take(gettype(Actions.startMonitoring)}}
  
  let loop = true;
  
  while(loop) {
  yield all([
    put({type : getType(Actions.fetchSucess)})
        put({type : getType(Actions.fetchFailure)})
// yield를 하면 밖으로 나갔다가 다음 yield를 진행하는데 동시에 여러개의 함수를 dispatch하고 싶을 때, 

  const {stoped} = yield race ( {
    waiting : delay(200),
    //promise object
    stopped: take(getType(Actions.stopMonitoring))})//둘 중에 먼저 되면 넘어와 달라는 뜻 
  
  
  if(stopped) {
  loop = false;
  }

해당 작업들이 원하는대로 수행하는지를 알아보려면 네트워크 탭의 waterfall을 확인하면 네트워크 플로우 잘 확인할 수 있다. 하나라도 튀는게 있는지 확인하면 보는것이 쉽다!

Jung Hyun Kim

코린이 프론트엔드 개발자💻💛🤙🏼

이전 포스트

우아한 테크 러닝 3기 세미나 내용 정리 part.5🙌🙌