Week3 개발일지

2020-11-30

문서작업 (API 명세)

기존 API 명세에 하기 항목 추가(name, type, description) (insanehong멘토님 피드백 반영)

Request Description
Response Description

cannot find module 'eslint-plugin-vue' 에러 해결

.vscode/setting.json에

"eslint.workingDirectories": [
    ['./client','./server']
  ]

를 추가해주면 해결된다.

root/
  client/
    .eslintrc.js
  server/
    .eslintrc.js

현재 폴더구조가 위와같고 working directory가 root라서 발생한 에러 같다.

['./client','./server'] 옵션을 주면 working directory가 client내에서는 client로 server 내에서는 server로 바뀌어서 각각에 맞는 lint가 적용된다.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Delete `␍` eslint (prettier/prettier) 해결방법

CRLF 관련 문제.

eslint rules에 다음 문구를 추가해주면 된다.

    rules: {
        'prettier/prettier': [
            'error',
            {
                endOfLine: 'auto',
            },
        ],
    },

https://noogoonaa.tistory.com/62

vue-cli eslint-loader 관련 문제

lintOnSave:false
  // chainWebpack: (config) => {
  //   config.module.rule('eslint').use('eslint-loader').tap((options) => {
  //     options.fix = true;
  //     return options;
  //   })
  // }

Sequelize inner / left outer Join

include: {
      model: models.section,
      include: {
        model: models.task,
        where: { isDone: false, parentId: null },
        include: ['priority', 'labels', 'alarm', 'tasks'],
        required: false,
      },
},

include 객체에 where 절이 포함돼있을 경우 required:true 가 기본값으로 설정된다(inner join)

required: true 옵션으로 left outer join

Vue 기본 틀잡기 페어프로그래밍

store를 모듈로 분리 *
api 모듈화
Axios 모듈화(customized)
router params는 this.$router.params.id로 가지고 오면 된다.
computed
- computed의 내부 로직의 값이 변경될 때만 재실행시켜준다.
- 메모이제이션 느낌
- 추후 스터디 필요

토니

수업 때 vue js 언급했는데 자랑을 못했다. 오늘 공부했으니 담엔 자랑해야지.
페어프로그래밍으로 vue js 틀을 잡았다. 내일부터 빠른개발 !

찐

밤에 잠을 제대로 못자서 집중력이 많이 흐트러졌다.
그래도 팀 활동하면서 페어프로그래밍, 이슈 작성, vue 셋팅 등 많은 걸 했다.
vuetify를 조금 더 공부해서 빠르게 개발하고싶다 !!!
리팩토링이랑 남은 API 는 언제하지..??

카일

커밋을 미리미리 하자! ( ㅋㅋ )
페어프로그래밍 하며 혼자 짜면 놓쳤을 부분들을 많이 배운 것 같다

2020-12-01

### BackEnd Refactoring - 이미 contoller에 많은 기능이 구현된 후, 리팩토링을 진행하는데 조금 버거웠다.. 리팩토링을 진행하면서 테스트 코드의 중요성을 다시 느꼈다. - 잘 작성된 test code인 경우, 테스트를 돌리면서 어떤 부분을 수정해줘야하는지 쉽게 발견할 수 있었다. - test code도 리팩토링이 필요했기 때문에, test code 리팩토링 -> controller에서 비즈니스 로직을 service로 분기 -> controller에서 하위 역할을 따로 분기하는 과정으로 리팩토링을 진행했다. - 순차적으로 리팩토링을 진행하면서, 중간중간 오타나 잘못된 로직을 test code덕에 쉽게 발견할 수 있었다.

검색 컴포넌트

Vuetify의 장점을 느꼈다. 스프린트 때 처럼 바닐라 스크립트로 하나하나 만드는 것도 구조를 이해하고, 로직을 내가 이해하기 쉽게 구성하는 것도 좋지만, 도구를 쓰니까 생산성이 매우 높아졌다.
- v-autocomplete를 사용하면서, vue의 computed를 통해 API에서 받아온 값을 캐싱해서 여러 번 호출하지 않도록 할 수 있다는 것을 배웠다. 또한, watch가 데이터(HalgoraeDO의 검색 입력값) 변화를 감지하고, 비동기 조작을 요구할 때 쓰인다는 것을 알 수 있었다.
- 스프린트 때는, 학습 이후 구현 순서였는데 구현과 동시에 학습하니까 나름 신선하고 재밌다.
API를 많이 만들다보니까, 어떤 로직으로 어떻게 만들어야하는지 몸에 익숙해지는 것 같아서 좋았다 !!

찐

알찬 하루였다 !! 어제 컨디션이 좋지 않아서 팀원들에게 많이 미안했는데, 오늘 많은 작업을 해서 다행이다 ㅎㅎㅎ
그리고 vue에 대해 이해도가 조금 향상된 것 같다.
내일도 남은 백엔드 리팩토링 작업이랑 클라이언트 컴포넌트 작업 열심히 합시다!!!
우리 팀원들 항상 너무 고맙고 마지막까지 열심히 해봅시다!!!