Scrum_W2

20-11-23 스크럼

J169 임기봉

• 주말동안 휴식 & 공부
• redux 공부 및 개념정리 => wiki 기술공유

J188 정지찬

• 잠을 푹 잤습니다.
• redux, mongoDB, koa 공부
• 금융결제원 api 잠깐 고민해보았지만.. 무리라고 판단

---

20-11-24 스크럼

• J018 권예지
  • koa 조금 공부 (필요한 거 찾기)
  • 백로그 틀 만들기
• J169 임기봉
  • error-handling 에 대한 공부
  • redux-toolkit 공부
• J188 정지찬
  • redux 인강듣기
  • koa + mongoose 설정 책 보기
  • koa에서 middleware 사용법 확인

---

20-11-25 스크럼

• J018 권예지
  • Redux 공부
  • Redux 사용한 프로젝트 구조 확인 (components, modules 폴더는 이해 완료)
    • 아직 컨테이너 관련해선 공부 못했어요
  • 오늘 toolkit을 쓰면 어제 공부한 거에서 얼마나 편해지나를 확인해볼 예정입니다.
• J169 임기봉
  • redux-toolkit 공부 및 정리.
  • toolkit 만세
  • toolkit 찬양
• J188 정지찬
  • Redux 를 다시 봤지만 어렵네요
  • Redux middleware 는 더 어렵지만 그냥 쓰라는대로 쓰면 될 것같기도...
  • Redux-thunk를 많이 사용한다고 하지만, Redux-saga가 프로젝트와 더 맞을 것 같습니다

---

20-11-26 스크럼

J018 권예지

• 어제 지찬님이 마이쮸 준다고 하셨다! (zoom으로..😤 즐거웠다...🤪)
• Redux Toolkit 공부

J169 임기봉

• 꿀잠 :sleeping_accommodation:
• useSelector 공부

J188 정지찬

• Redux Toolkit 공부
• https://www.youtube.com/watch?v=9lCmbth63k0

✨ 오늘 할 일

0. PR에 대한 review 남기기

• 질문: {payload: test }의 의미는?
  • { 객체 프로퍼티: 목표 변수 }로 변경 가능함 확인

  let options = {
    title: "Menu",
    width: 100,
    height: 200
  };
  
  // { 객체 프로퍼티: 목표 변수 }
  let {width: w, height: h, title} = options;
  
  // width -> w
  // height -> h
  // title -> title
  
  alert(title);  // Menu
  alert(w);      // 100
  alert(h);      // 200

1. trouble-shooting
2. issue / project / milestone
3. [FE] React - 협업 개발 방법

• 원자 단위 : 스토리북
• 컴포넌트 단위: 각 페이지에서 일부 일부를 각자 맡음
• 페이지 단위: 가장 빠르게 구현 가능
  • but, 컴포넌트 재사용성을 위해서는 각자 하나를 개발하면 어떤 것을 개발했는지 바로바로 말해주고, 공유를 잘해야 함
  • 잘못하면 각 페이지 별로 각자 다른 느낌이 발생 할 수 있음

=> ✔ 2번과 3번을 섞어서 진행하기로 결정!!
=> 우선 header나 sidebar는 같이 만드는 것도 좋을 것 같네용 ㅎㅎ

4. 디자인 & 오늘 구현 목표!

• 우리 팀 색: #19ce60
  • 무슨 색인지 알고 싶다면 ㅎㅎ ↓
  • 
    
• Header
• Sidebar
• 수입/지출 시각화(그래프)
• 결제 방식별 지출

---

20-11-27 스크럼

J018 권예지

• webpack alias 설정 적용
• react-icons 모듈 설치
• sidebar 리팩토링
• 발표 준비

J169 임기봉

• 웹팩 공부
  • file loader vs url loader
    • https://jeonghwan-kim.github.io/js/2017/05/22/webpack-file-loader.html
    • url-loader은 이미지 파일을 base-64로 변환하여 이미지 파일을 번들 파일에 포함 시키는 기능을 가지고 있다.
    • 이미지 파일을 번들 파일에 포함 시킴으로써 파일 요청 횟수를 줄일 수 있다. 그러나 파일이 너무 크면 안하는게 좋다.
  • 나무 흔들기(tree shaking)
    • (번들 시) 불필요한 코드를 제거해 주는 기능
    • 기본적으로 제공 되어 있다

    //util.js
    export const func1 = () => {
      console.log('func1');
    }
    export const func2 = () => {
      console.log('func2')
    }
    //use.js
    import { func1 } from ./util.js
    func1();

    • 위 코드 번들시에 func2는 번들에 안들어가 있다.(treeshaking)
    • tree shaking 실패 하는 경우
      • 사용되는 모듈이 ESM이 아닌 경우
      • 사용하는 쪽에서 ESM이 아닌 다른 모듈 시스템을 사용하는 경우
      • 동적 임포트를 사용하는 경우
    • 외부 패키지 tree shaking

    //잘못된 예
    import { fill } from 'lodash'
    //잘 사용한 예
    import fill from 'lodash/fill'

  • 코드 분할
    • 번들을 작게 분할해서 사용.
    • 그때그때 필요한 코드가 들어가 있는 번들만 사용
    • 불필요한 코드까지 전송 되는것을 방지
    • 작게 분할하여 페이지 렌더링 최소화
  • ProvidePlugin
    • 설정한 모듈을 자동으로 등록 해준다.

    new webpack.ProvidePlugin({
        React: 'react'
    })

    • 위 코드를 사용시 React를 자동으로 등록 해줌으로써 매번 import React from 'react'를 쓸 필요거 없어진다.
• 웹팩 ProvidePlugin 적용
  • import react 전역으로 적용

J188 정지찬

• @media query 적용
• 이미지 처리를 위한 file-loader 추가
• modal overlay 구현
• 리뷰를 토대로 코드 수정