[mission001] todolist crud

[eastjun-dev]

🔗 미션 링크

1

🏴 미션 진행 내역

• [x] todo list에 todoItem을 키보드로 입력하여 추가
• [x] todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가)
• [x] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
• [x] todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
• [x] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
• [x] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

💬 소감

첫번째 미션을 복습위주로 구성하였기 때문에 지난 미션 진행하면서 피드백 받았던 부분들을 최대한 적용하려고 했습니다. 유효성 검사에 대한 부분을 아직 채우지 못한 게 있어서 해당 부분을 업데이트 할 예정입니다.

[eastjun-dev]

@YongHoonJJo

👨‍💻답변

모듈화가 너무 많은 게 아닌가하는 질문을 주셨는데요. 우리가 만들게 되는 어플리케이션들은 고정된 상태로 계속 정지한게 아니고 살아움직이는게 매우 중요하다고 생각합니다. 살아 움직인다는건 변화하는 요구사항과 환경에 따라 유연하게 반응하고, 확장할 수 있어야 한다고 생각하는데요. 최대한 가장 작은 단위로 컴포넌트화 할 수 있는 부분을 최대한 나눠야만, 컴포넌트별 역할이 명확해지고, 협업해야하는 사람과 role을 분명하게 정할 수 있으며, 같은 컴포넌트들로도 여러가지 조합으로 재사용하며 다양하게 활용할 수 있는 방법이 많아진다고 생각합니다. 대규모 서비스로 갈수록 그런 경향이 많아질텐데요. 작은 어플리케이션을 만들때부터 그러한 연습이 필요하다고 생각해요~! 그래서 MSA 아키텍처에 대해 많은 사람들이 공감하는 것이 아닐까 생각합니다 프론트엔드와 관련해서 링크와 같은 글을 같이 봐주시는 것도 좋을 것 같아요!

🙋‍♂️질문

저도 @YongHoonJJo 님께 드리고 싶은 질문은 컴포넌트를 최소화해서 얻을 수 있는 장점은 무엇일까요~?

[YongHoonJJo]

@EastjunDev

답변주신 내용에 대해서는 대부분 공감합니다..!! 다만 모듈화가 많다고 느꼈던 코드 중 하나는 TodoInput.js 에서 11 라인이었습니다. 다른 분들 생각은 어떨지 모르겠지만, 개인적으로는 '굳이..?' 라는 생각이 들어서, 하지만, 제가 경험이 부족하기도 하다보니 조심스레 의견을 남겨보았습니다!!

제가 의의를 제기한 것은 컴포넌트화 관련 문제가 아니어서... 컴포넌트화 관련 내용은 동준님 의견에 동의 합니다.

그리고 궁금한 것이 있습니다. 뒤에서 MSA 에 대해서 예시를 들어주셨는데, "분리"의 관점에서 예시를 들어주신건가요?? MSA 는 서버측 관련 아키텍처로 하나의 애플리케이션에 모든 기능을 구현하는 대신, 기능별로 서버를 작게 분리하자는 것이 모토로 알고 있습니다. FE 쪽에서 어떻게 연관지어 생각해야할지 모르겠습니다.

마지막으로, 컴포넌트를 최소화해서 얻을 수 있는 장점은 무엇일까요~? 라고 질문해주셨는데요.. 질문의 의도를 모르겠습니다ㅜ 단순 질문이신지, 아니면 제가 주장하는 내용이 "컴포넌트는 최소화해야한다" 라고 전제하시고 하신 질문이신지요ㅜㅜ

[eastjun-dev]

@YongHoonJJo 용훈님의 피드백을 제가 잘못 이해해서 발생한 미스커뮤니케이션인것 같습니다.

단순한 기능임에도 너무 모듈화를 많이 해놓은건 아닌가 싶은 느낌을 받았습니다. 다른 분들의 생각이 궁금합니다.

우선 해당 부분을 module화라고 표현해주셔서 제가 오해하였습니다. 저는 module을 import하거나 export할 객체 대상으로 생각했습니다. javascript module MDN 문서에 보시면,

네이티브 자바스크립트 모듈은 import와 export 문(statement)에 의존적이다.

라고 표현되어있습니다.

그렇다보니 자연스럽게 컴포넌트화를 많이 하려고 한 점을 이야기하신줄 알았어요 ㅠㅠ

하지만 위에 다시 코멘트를 남겨주신 부분에 정확히 line number를 남겨주신걸 보고 질문의 의도를 이해했습니다.

    $todoInput.addEventListener('keydown', (event) => this.addTodoItem(event))

    this.addTodoItem = (event) => {
        const $newTodoTarget = event.target
        if (this.isValid(event, $newTodoTarget.value)) {
          this.onAdd($newTodoTarget, $newTodoTarget.value)
        }
      }

      this.onAdd = ($newTodoTarget, newTodoContents) => {
        onAdd(newTodoContents)
        $newTodoTarget.value = ''
      }

이 부분 때문에 의견을 남겨주셨는데요.

이건 제가 메서드명을 적절히 작명하지 못해서 생긴 이슈인 것 같아요. this.onAdd에서 onAdd를 또 추가로 해주니 제가 생각해도 굳이...? 라는 생각이 드는데요. 제가 저걸 구분해준 이유는 한 메서드에서 최대한 한 기능만 하도록 해주려고 해서인데요. 저 코드에는 추가하지 않았지만 나중에 validation이나, ajax 코드가 추가될 걸 생각해서 분리만 해놨었는데 현재의 요구사항에서는 분명 오해의 소지가 있는 것 같아요. 그래서 아래의 코드와 같이 변경하였습니다.

    $todoInput.addEventListener('keydown', (event) => this.addTodoItem(event))

      this.addTodoItem = (event) => {
        const $newTodoTarget = event.target
        if (this.isValid(event, $newTodoTarget.value)) {
          onAdd($newTodoTarget.value)
          $newTodoTarget.value = ''
        }
      }

그리고 MSA를 말씀드린건 분리의 관점에서 말씀드린게 맞습니다. 용훈님의 코드를 리뷰할 때 app.js 한 파일에 작성하셨던게 생각나서, 최근에 읽었던 글인 MSA관련 글이 생각나서 작성했었는데 말씀 주신걸 보니 제가 너무 오해하기 쉽게 비약해서 표현한 것 같습니다. 해당 부분은 넘어가주셔도 될 것 같습니다.

꼼꼼히 살펴보시고 의견 남겨주신 부분 너무 감사드립니다~! 질문의 의도가 정확히 파악 안된점은 다시 여쭤보고 답변을 상세히 달았어야 하는데, 그렇지 못한 점이 속상하네요 😭 덕분에 한가지 더 배워갑니다! 배려심있게 답변 달아주셔서 감사해요!

[StellaKim1230]

@eastjun 동준님 덕분에 keyCode deprecated 외 여러가지 많이 얻고 갑니다.^^ 요번 PR aprrove 진행할게요^^ 👍