Skip to content

회의록 4주차

Jump to bottom
Seongbin Kim (김성빈) edited this page Nov 26, 2018 · 5 revisions

프론트엔드팀 4주차 회의록 (2018-11-25)

작성: 프론트엔드팀 일꾼 - 김성빈(@Ethan), 임승균(@Kyun)

작성일: 2018-11-26 PM 3:00

  • @Kyun(임승균)님의 도움으로 📜 회의록이 온전해졌습니다. 감사합니다 😺

요약

  1. 🎉 Welcome 🎉 TO Group 🅱️

    [@Leo, @ANNE]

  2. 🚀 TODOLIST 🚀

    • A Group: 본인의 Test 공부 문서를 작성
    • B Group: Todolist로 CRUD 구현을 연습

본문

  1. [오프모임] 새로오신 분들의 소개를 정리했습니다.

    1. @Leo(이규태)님
      1. 소개
        1. 개발 인프라 업무 경험
        2. React는 개인 공부로 진행
      2. 얻고자 하는 것들
        1. 프론트엔드 프로젝트를 하게 돼서 React를 공부하려 참여함
    2. @ANNE(안세원)님
      1. 소개
        1. 현재 퍼블리셔 업무 경험
        2. 다시 개발 업무로 진행하려 공부 중
        3. 최종 목표는 풀스택
      2. 얻고자 하는 것들
        1. 풀스택 개발 능력

  2. [General] 토의 내용

    1. [스터디 방향에 관하여] 만나서 코드 리뷰를 할 수 있도록 과제가 코드가 생산되는 것이었으면 좋겠음. @Ethan
    2. [Redux-Thunk vs Saga]
      1. 개발 기간이 12/2부터 한 달인데 saga를 프로젝트에 적용할 수 있을까? (@Dylan님 의견 필요) @Ethan
      2. 개발은 B group 님들도 같이 합쳐서 thunk로 하고, saga는 따로 스터디하는 것이? @Ethan
      3. 개발 기간 내에 할 수 있는 걸 하는 것도 좋음 @Hosung
    3. [새로 오신 분들]
      1. 두 분이 유사한 기술 스택 보유: { jquery: "업무", es6: "조금", react: "none" } @Leo, @ANNE
      2. 이번 한 주 동안 개인적으로 React 공부하는 걸이 이번 주 todo!

  3. [A Group] 토의 내용

    1. JS에서의 mock의 작동 방식에 대해:

      • Q) Java는 Dependency Injection을 통해 mock한 객체를 수정할 수 있는데 JS에서는 어떻게?
      • A) import한 객체의 프로퍼티는 write가 가능해서, 수정해서 사용함!, _.filter = Jest.fn() 등으로 대입 연산하면, 이후 해당 dependency를 사용하는 쪽에서도 변경됨 (역시 js..!) 
        // myModule을 테스트하려고 함. dependency를 myModule이 의존하고 있어 mock을 하려고 함
import myModule from '../myModule';
import * as dependency from '../dependency'; // 의존 대상을 변경해야 하므로 얘도 import함

describe('myModule 테스트 스위트', () => {
  it('myModule은 dependency.doSomething 함수르 자신이 받은 입력값의 2배의 값으로 매개변수를 전달하며 호출한다', () => {
    // 의존 대상을 mock 함. 
    // 아래처럼 myModule에서 dependency.doSomething 접근하면 jest.fn()임!
    dependency.doSomething = jest.fn(); 

    myModule(2); // myModule을 호출

    expect(dependency.doSomething).toBeCalledWith(4); // mock 활용!
  });
});

    2. enzyme에 대해서 공유:

      • Thanks to @Rachel.lee
      • jest는 UI를 테스트하는 기능이 없어 Enzyme을 혼용
      • enzyme의 shallow 함수는 컴포넌트간의 UI 비교(이를 스냅샷 테스트라고 함)를 제공한다.
        • .toMatchSnapShot이라는 jest 메소드(expect(...)가 반환하는 객체가 지원)와 결합해서 쓰인다.
      • shallow().simulate로 이벤트를 흉내낼 수 있음. ex: click 이벤트 객체도 mock 가능! mockedEvent

  4. [B Group] 토의 내용

    1. 진행 내용 공유

      1. @Kyun
        • [Done] movie 앱에 리덕스와 Material UI 적용: Movie-Redux
        • [Todo] Redux-router 적용해서 SPA로 Detail page 구현 예정
        • [Todo] Redux-saga 고려
      2. @Hosung
        • [Done] Movie에 리덕스와 Material-UI 적용
        • [Todo] Redux 부분 코드 정리
      3. @포드
        • [Doing] 노마드 코드 강의 듣는 중
        • [Todo] 노마드 강의 클론 코딩

    2. Todo에 CRUD 연습을 위해 Todolist 구현을 추가

      1. 자료 추천 1 by @Kyun VELOPERT 기초 강의 – Todolist - 순수 React를 이용한 TodoList 구현 방식
      2. 자료 추천 2 by @Kyun VELOPERT Redux 강의 1 ~ 3 - 3편에서 TodoList는 아니지만 리덕스로 이용하는 사용해서 기초적인 CRUD를 작성하는 법에 대해 자세한 설명이 있음

  5. 다음 주 Todolist 결정

    1. A Group
      1. 본인의 Test 공부 문서를 작성 (2주차 과제를 이어서 진행)
    2. B Group
      1. 현재 구현한 영화 API를 활용한 웹사이트의 확장: 영화 상세 페이지 구현
      2. TodoList를 구현하면서 리액트에서의 CRUD 방식을 학습
Clone this wiki locally