지난주에 3차과제 피드백을 받았습니다.
제 우여곡절을 적은글은 여기에서 볼수있습니다.
모듈화
제 과제를 리뷰해준 동료분들도 너무나도 좋은것을 지적해 주셨었고 멘토님도 많은 리팩토링 방안을 제시해주셨습니다.
그러나 저를 밤늦게까지 잠들지 못하게 한 리뷰가 하나 있었는데....
바로 "모듈화" 였습니다.
이 질문을 하게 된 계기는, 다른 동료분들의 과제물들을 읽어보다가 다들 프로젝트의 구조(main.js의 역할)가 천차만별이었기 때문입니다.
1번부류는
저와 같이 main.js에서 대부분의 파일을 불러오고 export로 다른 모듈화 js들로 쏘아주는 방법이었고
2번부류는
main.js에도 적당히, 또 대부분의 불러오기는 각 JS에서 수행하는 방법,
3번부류는
하나의 파일(store.js)을 불러오기용으로 생성해놓고 해당파일에서 다 쏴주는 방식
정도가 있었습니다.
그래서 이중에서 어떠한 방법을 쓰는것이 가장 좋을지 멘토님한테 질문을 드렸었고 답변을 정리하자면
- main.js는 index.html에서 최초로 호출하는 entry파일임
- 따라서 초기설정을 위한 동작 또는 다른 파일들을 import하는 역할로만 사용
- DOM과 같이 불러와야하는 모든것들은 관리하는 파일을 만들거나, 필요한 내부 파일에서 각각 호출하는것을 추천
따라서 제가 한 1번부류가 가장 적합하지가 않은 방법이었던 것 같습니다...
그런데 여기서 궁금증이 생겼습니다.
의문
만약 3번부류와 같이, store.js와 같은 파일에 모든 DOM을 불러오고, 그것을 export하여 각 파일들에서 import받아 사용을 한다면, 그 파일은 main.js와의 의존성이 전혀 없는것이 아닌가?????
즉, js의 진입점은 main.js이므로, 만약 모든 로직이 특정 feature.js와 store.js 사이에서만 이루어진다면 main.js는 feature.js의 존재를 모르는것이 되지 않나? 가 의문이었습니다.
제가 기존에 코딩했던 스타일은 다음과 같습니다.
main.js <======> feature.js
두 파일 사이에서 DOM변수든, 함수든 서로 넘겨주는 작업을 하면서 의존성이 생겨 feature.js를 읽을수 있었지만,
main.js |벽| feature.js <======> store.js
이렇게 되버린다면 프로그램은 feature.js의 존재자체도 모르지 않나 싶었습니다.
순간 새벽에 너무나도 궁금해서 멘토님한테 질문도 드리고 동료 수강생분들께도 이러한 생각을 해본적없냐 물어봤었고 이때 제 개인적으로 정리하게 된것이
- main.js에서 특정 파일을 읽어야 해당 파일이 동작한다(특정 파일을 import 해야한다.)
- 프로그램은 import된 해당 파일로 이동하여 그 파일을 끝까지! 읽는다.(이것이 궁금했던 것은, 예를들어 import해서 찾고있는 변수나 함수를 10번째 줄에서 찾으면, 밑에있는 나머지 코드들은 안읽는지가 궁금했습니다. 실험결과 끝까지 읽는것으로 확인했습니다.)
- 따라서
store.js와 별개로,main.js가 참조하는 파일이면 해당 파일에서는 DOM과 같이 엘리먼트들을 직접 호출할수있음(2번부류).
위 세가지 입니다.
여전히 의존성에 대한 것의 답변은 되지 못했으나...
다음날 멘토님의 답변을 받았습니다.
결론은 feature.js를 다른 파일에서 의존하지 않는경우가 올바른 설계라면 생기지 않는다고 합니다.
그러면 뭐가 올바른 설계지?... 싶어서 혼자서 많은 고민을 해봤고
답변을 바탕삼아 제 나름의 방법론을 세워봤습니다.
- 초기에 동작해야 하는 함수
- 저는 사실 각 파일별로 초기 구동이 필요한 경우가 대부분이었습니다. 따라서 이러한 몇가지 초기 구동 기능들은
main.js에 빼놓고, 그에 필요한 함수만feature.js에서 import받습니다. 그렇다면 프로그램은feature.js에 무리없이 진입하게 될것입니다.
- 나머지 feature 로직들
- 1번에 의해서 의존성은 생겼기 때문에 여기서는 어떠한 방법을 선택하든 상관이 없습니다. 3번부류와 같이
store.js에 모든 DOM을 선언하고, import받아올수 있겠지만, 더 좋은 방법은 그냥 각feature.js에서(진입한것이 확실하므로) DOM들도 선언해주면 되는것입니다.
이렇게 두가지 방법을 지킨다면, main.js는 자기의 역할도 다할것이고, 모듈화도 더욱더 효율적이고 가독성을 높일수있을것 같습니다.
지난주 새벽에 모듈화 때문에 참 가슴이 답답했는데 나름의 방법을 결정한것 같아 다행입니다 😀
