시행착오

createElement로 하나씩 만드는 방식

DOM 요소를 만들고 textContent나 innerHTML로 하나씩 넣어보는 식으로 해봤다. 결론부터 말하면 가독성이 너무 좋지 않다. 두 페이지나 이렇게 구현했기 때문에 시간은 오래걸렸지만 이 방법이 좋지 않다는 것은 확실히 알았다.

상품 관리 페이지

🕵️ 개선 전

🌟 개선 후

---

회고

리팩토링하면서 깨닫게 된 점

• 예를 들어서 render역할을 하는 파일이라고 하면 함수명들 앞에 render가 동일하게 들어가는게 가독성에 더 좋지 않다고 생각해서 다 빼고 작성했었다. 하지만 오히려 다 작성하고나니 읽기가 더 불편했다. 무슨 일을 하는지 정확히 알기가 어려워서 다시 해당 함수 코드를 읽어봐야 했다.
  결국, 마지막에 다시 render를 다 붙여줬고 각 render함수가 명확히 할 일을 명시해주기 위해 좀 더 넓은 범위를 render할 때는 wrap을 붙여줬다. 그랬더니 좀 읽기 길어서 시간은 걸리지만 함수명만 봐도 역할을 확실히 알 수 있게 됬다.

• 이번에는 여태 과제했던 것과 다르게 화살표 함수방식이 아니고 일반 함수 방식으로 작성해봤다. 역시 화살표 함수가 가독성이 더 좋은 것 같다. 하지만 default export 할 때 몇 가지 제한 사항이 있다.

• documentFragment를 이용해서 리플로우 리페인트를 최소화할 수 있었다. 성능적인 부분에 신경 쓰는 방법을 배웠다.

• 파일명도 가독성 좋게 짜는 것이 중요하다는 것을 배웠다. A라는 파일에서 작업하다가 B라는 파일을 찾아야 할 때 파일명에서 명확하게 이해하기 어렵다면 한참을 생각해야 했다. 물론 지금도 완벽하게 가독성있게 짜지는 못하지만 이런 생각을 기본적으로 가지고 있고 한번 더 생각하는 습관이 발전하도록 만들 것이다.

• 모듈화를 하면서 확장자를 .mjs 사용했다. 구글에서 권장하는 모듈화 사용방법이라고 한다. script태그에 type="module" 붙여주면 사용할 수 있고 별다른 설정을 하지 않아도 strict mode가 적용되고 파일 마다 모듈 스코프가 적용된다고 한다.

이번 과제를 하면서 헷갈렸던 점

• 3주차 과제에서 자판기 보유 동전부분을 구현할 때 자판기 보유 금액만큼의 동전이 무작위로 생성된다.
  이 부분을 그대로 이해하고 랜덤으로 금액에 맞게 동전개수가 올라가도록 했는데 다 구현하고 제출 직전에 테스트를 돌려보니 테스트 통과를 못하는 것이였다! 그래서 test파일을 보고 흐름을 하나씩 따라가봤다. 그랬더니 마지막에 비싼 동전 개수부터 450원 잔돈을 입력했을 때 100원 x 4개 / 50원 x 1개가 나와야 통과처리가 되는 것이였다.
  그래서 제출 직전에 다시 수정하고 올리느라 쫓기면서 제출했다.. 아직도 문제의 저 부분은 의문이다. 만약 우테코에 합격한다면 저 부분을 다시한번 물어보고 싶다.

  진작에 테스트를 돌려봤더라면 물어볼 시간도 있었을 것이고 해결할 시간도 있었을 것이다.
  예상하지 못한 상황에 미리 대비하는 습관을 기르자.

우아한 테크코스 3주차 과제 회고

개발자에 대해 다시 생각해볼 수 있는 계기가 된 3주

개발에 대해서 이론적으로만 배우고 프로젝트를 할 때는 일부분만 맡아서 진행하다보니 내가 뭘 하고 있는지 모르겠고 개발에 재미가 없었다. 그런데 3주 동안 과제를 진행하면서 압축되있는 다양한 예제들을 경험해보니 생각하는 재미를 느낄 수 있었다.

앞으로 무엇을 공부해야할지 방향성을 알게 된 3주

• 2주차부터 클래스를 처음으로 사용하면서 '어떤 이유로 클래스를 사용해야 하는지', '클래스는 어떻게 사용하는 것인지'에 대해 공부할 수 있었다. 아직도 어설프고 너무나도 부족한 클래스 구조지만 다른 사람들이 한 과제를 보면서 당분간 공부하는 시간을 가져야겠다. (우아한 테크코스 과제를 진행하시는 분 대다수 너무 고수다!)

• 함수가 최소한의 기능만 하도록 코드를 짜야하는데 그런 생각을 하기가 쉽지 않았다. 함수를 잘게 쪼개는 연습을 해야겠다.

• 자바스크립트 고차함수를 적극적으로 활용하지 못한 점이 너무 아쉬웠다. 어떤 함수를 사용해야 하는지 잘 생각이 나지 않았다. 공부했었던 Deep Dive책을 다시 쭉 보고 싶다는 생각이 들었다. 한번 더 보면 좀 더 유연하게 고차함수들을 사용할 수 있을 것 같다.

• 3주 동안 모듈화에 대해 공부하면서 named export와 default export를 이것저것 사용해보는 경험을 했다. 모듈화에 대해 막연하게 두려움이 있었는데 그 벽이 많이 허물어져서 기쁘다.

• 네이밍 짓는 연습이 필요하다. 네이밍을 짓고나서 항상 찝찝함이 느껴졌다. 아마 다른 사람들이 작명한 것을 많이 보지 못해서 그런 것 같다. 이 부분도 이번 3주차 과제를 진행했던 다른 사람들것을 보면서 배워야겠다.

매주 너무 좋았던 공통 피드백!

우아한 테크코스 과제를 하기 전에 이전 기수에서 과제를 진행했었던 사람들의 후기를 읽고 피드백을 한번 쭉 읽고 시작했었다. 그래도 막상 시작하니까 신경을 쓰기 쉽지 않았다. 우아한 테크코스에서 받았던 공통 피드백은 잘 정리해놓고 앞으로 '내가 기본기는 잘 지키고 있나?' 싶을 때 한번씩 또 봐야겠다!