1주차 미션 제출 (신혜리) by rachel490 · Pull Request #1 · rachel490/frontend-mission

rachel490 · 2022-01-09T12:35:52Z

1주차 미션 제출 (신혜리)

접근 방법

TDD를 사용해보는 것이 처음이라 테스트 코드를 먼저 작성한 후에 코드 로직을 작성하지 못했습니다. 시간이 조금 오래 걸릴 것 같아서 구현을 먼저한 뒤 후에 테스트 코드를 작성하였는데 TDD의 개념에는 엇나가는 접근법이라서 아쉬웠습니다.
vue3의 경우 기존의 devtool을 쓸 수가 없어서 beta 버전의 devtool을 썼습니다.
git commit 메세지에 타입을 정확히 명시하고 누구나 알아볼 수 있도록 명확한 단어를 쓰려고 노력했으나 쉽지 않았던 것 같습니다.
no-alert에 대해서 커스텀 모달창을 구현할 것인지 eslint에 rule을 추가할 것인지 고민이 많았으나 alert창을 사용하셨다는 점에서 no-alert을 off로 설정하는 rule을 추가하였습니다.

특이사항

no-alert가 airbnb eslint에 들어가서 alert창이 안먹혔는데 rule에서 no-alert를 off로 설정하는 것을 의도하셨던 것인지 아니면 custom modal창을 구현하라는 의도셨는지 궁금합니다!
테스트 코드를 짜는 것이 어려웠는데 동적으로 생성되는 데이터의 경우 어떤식으로 테스트 코드를 작성해야하는지 정확히 모르겠습니다.

제출 후 확인

본인의 구현 결과를 dev 브랜치에 구현하고, dev 브랜치에서 submission 브랜치로 PR을 보내주세요.
Pull Request 생성 후 Reivewer에 @externship-master 와 @lkaybob 을 추가해주세요.

no-multiple-template-root 규칙에 따라서 template안의 코드를 하나의 root element로 감싸줌.

input에 입력한 문자열이 아래에 출력될 수 있도록 하였으며 제출버튼을 눌렀을 때 문자열을 왼쪽으로 한칸씩 이동시킴.

알림버튼을 클릭했을 때 현재 input의 value와 알림버튼을 클릭한 누적횟수를 alert창에 보여줌.

no-alert rule을 끔으로써 alert창을 활성화시킴.

입력한 input값이 밑에 잘 출력되는지 확인하는 테스트 코드와 제출 버튼을 클릭했을때 문자가 잘 회전되는지 확인한는 테스트 코드 작성

hogyun3709 · 2022-01-10T03:43:49Z

+<template>
+  <div>
+    <input type="text" v-model="inputValue" />
+    <button data-test="submit-btn" type="button" @click="rotate">제출</button>


test case 작성을위한 data-test 태그 지정이군요. 덕분에 추후 테스트 코드 작성에 참고할 수 있을것 같습니다. 감사합니다

hogyun3709 · 2022-01-10T03:45:09Z

+export default {
+  data() {
+    return {
+      inputValue: 'Ably',


default 값을 넣어주셨네요. 테스트케이스 작성을 위함인지 궁금합니다.

저도 이 부분이 궁금합니다!

default 값을 넣어주셨네요. 테스트케이스 작성을 위함인지 궁금합니다.
저도 이 부분이 궁금합니다!

ㅎㅎ제가 호균님 코드리뷰에도 적었는데 제가 동적으로 input에 있는 value값을 가져오는지 이해를 못했거든요.. setValue나 async/await 쓰는 방법을 몰랐어서 그냥 기본값으로 넣었습니다. 다음 테스트 코드에서 더 발전된 모습으로 찾아뵐게요 ㅠㅠ

hogyun3709 · 2022-01-10T03:46:49Z

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-alert': 'off',


eslint rule에 예외 처리를 해주셨네요. 저는 inline에서 구현했는데 eslint파일에서 구현하는 방법이 더 좋다고 느껴집니다.

Subinhyun · 2022-01-10T06:32:33Z

+      const str = [...this.inputValue];
+      str.push(str[0]);
+      str.shift();
+      this.inputValue = str.join('');


이런 방법도 있네요 ! 다양한 방법 알아갑니다 : )

xialGuri · 2022-01-10T08:18:28Z

+<template>
+  <div>
+    <input type="text" v-model="inputValue" />
+    <button data-test="submit-btn" type="button" @click="rotate">제출</button>


data-test 태그 지정을 통해서 테스트 케이스 작성을 하신 점이 좋은것 같습니다!

xialGuri · 2022-01-10T08:21:44Z

+  },
+  methods: {
+    rotate() {
+      const str = [...this.inputValue];


이 코드를 통해 배열을 통한 문자 회전의 새로운 방법 알아갑니다!

문자열을 spread로 활용하는 방법도 있었네요! 배열을 복사하는데에만 사용했었는데, spread 개념에 대해 학습하는 시간이 되었습니다.

daaeaad · 2022-01-10T07:17:51Z

+  },
+  methods: {
+    rotate() {
+      const str = [...this.inputValue];


이렇게 하면 split 메서드를 사용하지 않아도 문자열을 배열화 시킬 수 있었네요, 모르고 있었던 건데 배워갑니다 :) 👍

lkaybob

요구사항을 충실히 반영해주셨고, 추가자료에서 가이드해드린 참고자료를 통해 TDD를 습득하신 것으로 예상됩니다. 다른 분들이 코멘트 남겨주신 것이 있어 테스트 코드 관련 라인 코멘트 몇 개와 질문에 대한 답변 드립니다.

no-alert가 airbnb eslint에 들어가서 alert창이 안먹혔는데 rule에서 no-alert를 off로 설정하는 것을 의도하셨던 것인지 아니면 custom modal창을 구현하라는 의도셨는지 궁금합니다!

의도는 린터의 경고/에러들을 모두 해결하는 과정 중에서 rule을 임의적으로 변경하지 않고 일부 합의된 요구사항에만 변경 적용하는 것을 의도했습니다. 그렇기 때문에 (eslintrc.js 파일에서 global하게 disable하지 않고) inline에서 한 줄 단위 disable하는 것을 의도했지만 modal을 직접 구현하는 것도 좋은 해결 방법이라고 생각합니다.

테스트 코드를 짜는 것이 어려웠는데 동적으로 생성되는 데이터의 경우 어떤식으로 테스트 코드를 작성해야하는지 정확히 모르겠습니다.

Vue Test Util의 공식문서에서 투두리스트에 대한 테스트 코드 작성하는 방법을 확인하시면 이해가 되실 듯 합니다.

https://next.vue-test-utils.vuejs.org/guide/essentials/a-crash-course.html#adding-a-new-todo

lkaybob · 2022-01-10T15:10:01Z

+    expect(value.text()).toBe("Ably");
+  });
+
+  it('rotates string when 제출 button is clicked', async ()=> {


input 입력에 대한 TC가 없어서 좀 아쉽습니다.

다른 TC들은 그래도 잘 작성해주셨습니다.

lkaybob · 2022-01-10T15:10:25Z

+
+describe('Mission Component', () => {
+  it('dislays input value', () => {
+    const wrapper = mount(Mission);


Arrange, Act, Assert가 드러나도록 newline들을 넣어주세요

https://next.vue-test-utils.vuejs.org/guide/essentials/a-crash-course.html#arrange-act-assert

rachel490 added 7 commits January 8, 2022 18:30

Fix: root element 추가

d536d71

no-multiple-template-root 규칙에 따라서 template안의 코드를 하나의 root element로 감싸줌.

Feat: input과 제출버튼 추가

5b79533

input에 입력한 문자열이 아래에 출력될 수 있도록 하였으며 제출버튼을 눌렀을 때 문자열을 왼쪽으로 한칸씩 이동시킴.

Feat: 알림버튼 추가

7dab2c7

알림버튼을 클릭했을 때 현재 input의 value와 알림버튼을 클릭한 누적횟수를 alert창에 보여줌.

Style: (Eslint) turn off no-alert rule

9bb0eff

no-alert rule을 끔으로써 alert창을 활성화시킴.

Refactor: change function & data names

68f22c7

delete unused file

56e3981

Test: add test codes for Mission component

78e8a5d

입력한 input값이 밑에 잘 출력되는지 확인하는 테스트 코드와 제출 버튼을 클릭했을때 문자가 잘 회전되는지 확인한는 테스트 코드 작성

rachel490 changed the title ~~Develop~~ 1주차 미션 제출 (신혜리) Jan 9, 2022

hogyun3709 reviewed Jan 10, 2022

View reviewed changes

Subinhyun reviewed Jan 10, 2022

View reviewed changes

xialGuri reviewed Jan 10, 2022

View reviewed changes

daaeaad reviewed Jan 10, 2022

View reviewed changes

lkaybob reviewed Jan 10, 2022

View reviewed changes

Conversation

rachel490 commented Jan 9, 2022

1주차 미션 제출 (신혜리)

접근 방법

특이사항

제출 후 확인

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hogyun3709 Jan 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lkaybob left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

hogyun3709 Jan 10, 2022 •

edited

Loading