WTC 2 : 두 번의 시도

어떻게 구현할까?

시작할 때 불필요한 부분을 display속성을 이용해서 none처리해서 보이지 않게 하는 것이 맞을까.
아니면 #app을 이용해서 innerHTML을 사용해서 필요할 때마다 추가하는 것이 맞을까. 고민을 하게 된다..

일단 구현하자

생각하기만 했더니 무의미하게 시간이 지났다.
구현해보고 이게 아닌 것 같으면 다른 방향으로 구현을 해보면서 직접 경험해보는 수 밖에 없는 것 같다.

TRY1

생각한 두 가지 방법 중 필요할 때마다 innerHTML로 추가하는 방법부터 구현해봤다.
두 가지 방법을 다 겪어 보기 위해서는 빠른 시간안에 구현해야 되니 구조화는 신경쓰지 않고 일단 기능 구현에 집중했다.
그런데.. 문제에서 주어진 반드시 지켜야 할 부분을 빼먹었다.
나름 문서를 읽고 자세히 정리했다고 생각했는데 그것이 아니였던 것.. 지정된 선택자를 사용해야 했다.
문제에서 요구하는 것은 선택자를 동적으로 추가하는 것 같았다.
그런데 내가 현재 구현한 방법은 그때 그때 필요한 마크업을 추가하는 방법이었기 때문에 이 방법이 옳바른 방법인지 알기 어려웠다.
음.. 솔직히 말하면 이게 아닌 것 같았다.
결국 원점으로 돌아가서 다른 방법으로 구현해보는 수 밖에 없다. 그리고 둘 중 더 맞는 방법이 무엇인지 겪어봐야 한다.

일단 시도했던 방법은 아래사진과 같다.

TRY2

이번에는 처음부터 모듈화를 하면서 한개 파일에서 선택자를 지정해주면서 시작했다. 이게 더 맞는 방법은 맞는 것 같다.

하지만, 아직 어떻게 폴더별로 나눠야할지 정확히 감이 오지 않아서 일단은 내가 생각한데로 짜보기로 했다. MVC패턴이나 FLUX패턴 같은 것을 공부해서 적용해봐야겠다.

실수했던 기록. 반복하지 말자.

• ES6모듈을 사용했을 때 import해올 때 from에 반드시 확장자명을 붙여줘야 한다... 붙이지 않아서 40분 가량 오류를 찾기 위해 헤맸다.. Webpack을 이용했을 때는 확장자를 붙이지 않아도 되지만 ES6모듈일 때는 반드시 붙여야 한다고 한다.

앞으로 분발해야 할 것

• DOM을 선택하고 붙이고 하는 과정이 아직 어색하다. JavaScript를 하면서 가장 많이 사용해야하고 익숙해져야 하는 기술인 만큼 좀 더 자유자재로 다룰 수 있도록 연습해보고 자주 사용하는 것들은 외울 수 있도록 해야겠다.

• 구조를 좀 더 의미있고 명확하게 잘 나누는 연습

• 의미있는 이름 짓는 방법

가장 많이 배운 것

• 이번 과제에서 가장 많이 배운 것은 다름 아닌 Named Export, Default Export의 사용 방법이다. 두 가지 방법 다 장단점을 알기 위해서 이 방법으로도 해보고 저 방법으로도 해보면서 시행착오를 겪었다. 두 가지의 장단점이 있었다. Default Export는 명확하게 한 개만 내보낸다는 것을 알려줘서 좋았고 Named Export는 내보낸 것 중 꼭 필요한 부분인 이것만 가져다가 썼구나를 알 수 있어서 좋았다. 단, 한가지로 통일하는 것이 가독성이 좋은 것일까는 의문점이 남는다.