[TIL] 23/10/30 javascript : 팀과제

TIL

[팀과제 제출]

> 주말에 겪은 이상한 일 import / export

[문제]

영화 페이지(movie.js)를 만들다가 메인 페이지(index.js) 에서 곂치는 부분이 많아

함수 호출 해서 세줄만 쓰고싶은 거였다.

그래서 index.js의 쓰고싶은 함수를 export 해놓고 movie.js에서 import 해서 가져왔다.

<수정 전>

//index.js
export const makeCards = async (pageNum = 1, media = "movie", group = "top_rated") {
...
}

//movie.js
import { makeCards } from index.js

 

쓰고싶은 함수에 export를 적어주면 그 함수만 import 해서 가져올 수 있다고 생각했는데

마치 영화 페이지 html에 (movie.html) 

<script type="module" src= "index.js"> </script> 이렇게 한번 붙여준 것처럼 동작했다.

콘솔 에러메시지를 보니까 index.js 에서 window load 시 가져오는 온갖걸 가져오다가
html 구성이 달라서 에러나는 것을 볼 수 있었다. 나는 TV를 부르지 않았는데..? 이상하다 했다.

index.js 에서 공통 html 부분인 헤더의 버튼에 걸어준 클릭 리스너들도 다 동작했다.

import 해온 함수에만 접근 권한을 주는 것은 맞다. 다른 함수들은 movie에서 호출할수 없었다.

 

생각과 다르게 동작했을 때 너무 당황해서 뇌정지가 왔다. 아무것도 못하겠어서 튜터님께 질문했다.

심지어 공통 함수를 빼지않고 index에 두는 것이 이뻐보이지 않는 건 알고있었지만. -_-

밤 12시 늦은 시간에도 답변을 주셔서 감사했다.

 

[질문 & 답변]

[질문]

// movie.js 파일에서 
import { makeCards } from "./index.js";

이렇게 써주면
index의 makeCards 라는 함수에 접근만 할 수 있도록 이름을 가져 오는거라고 생각했는데요.
index.js에 있는 모든 함수의 실행문을 다 실행하는 것 같아요. (//실행문이란 호출부를 말한것이었다.)
원래 이렇게 동작하는게 맞나요 ?
예를 들어 index.js에서만 등록해준 핸들러들도 동작 해버립니다.@_@

// movie.html 에도 index.js를 추가하지는 않았습니다.
 <script src="./js/modal.js" type="module"></script>
 <script src="./js/search.js" type="module"></script>
 <script src="./js/movie.js" type="module"></script>

 

[답변]

안녕하세요 ㅇㅇ님 다행히 제가 아직 컴퓨터 앞에 있습니다

이렇게 import from 문을 쓰시면 index.js 에 있는 index.js에 있는 코드들을 브라우저를 다운받고나서 위에서부터 아래로 쭉한번 실행하게 됩니다. 그래야 환경레코드안에 makeCards 라는 함수도 생성이되고 movie.js에서 import도 가능하게 되겠죠?
index.js안에서 makeCards에 대한 함수 정의(또는 선언)만 있으면 함수안의 내용은 자바스크립트 엔진이 읽지 않아요(실행시키지 않아요)~
만약 index.js 안에서 element.addEventListner() 라고 하면 괄호열고 addEventListner 라는 메서드(함수)를 괄호열고 닫았죠? 이럼 당연히 실행이 됐고 메모리를 차지하고 있겠죠?

from 뒤에 있는 경로가 있으면 브라우저한테 다운받고 쭉 실행시켜! 라고 명령하는것과 같습니다

[질문]

그렇군요. index.js 가 사실은 메인화면이어서 하는일이 많은데,.  fetch를 두번이나 하고있어서..
거기서  사용하고 싶은함수가  있으면 따로 빼서 쓰는게 효율적인거겠네요 ??ㅠㅠ

 

[답변]

그렇죠 module로 export 하는 파일에서는 함수나 변수 정의문만 있고, 그것을 실행시키는 공간은 import 하는 곳에서만 하도록 정의 파일과 실행 파일을 구분해 주시는 것이 좋습니다~

[정리]

import를 써 주었을 때 그 파일을 한번 실행한다.

그때 내부에 함수호출부분이 있다면 다 실행이되고 메모리를 차지하고있다.

export 하는 파일에서는 함수나 변수의 정의문만 두는게 좋겠다. 

어쨌든 이게 맞는 동작이라는 거다.^.^ 안예쁜 코드구조를 짜려다 겪은 Lesson & Learn 이다.

 

[수정]

그래서 재사용하고 싶은 코드를 따로 빼내는 작업을 했다.

그랬더니 index.js 와 movie.js 에는 함수 호출부만 각각 세줄씩 남아서 깔끔해졌다.

코드를 처음 짤때부터 실행하는 파일과 함수 정의 부분들을 빼놓는 습관을 들이자~

 

<수정 후>

//makeCards.js
export const makeCards = async (pageNum = 1, media = "movie", group = "top_rated") {
 ...
}

//movie.js
import { makeCards } from index.js

makeCards(1, "movie", "popular");

//index.js
import { makeCards } from index.js
...
makeCards(1, "movie", "popular");
makeCards(1, "tv", "popular");

이 외에 다크모드 등 header html 에 적용하는 공통부분도 util.js 로 빼두었다.

사실은 아직 다크모드뿐..;

 

오늘 한일

1) 유틸 구조변경 푸시
2) 무비 푸시
3) 현재상영중 페이지 쿼리에 전달되는 날짜 틀림 푸시 (현재 '일'이 항상 같은 날짜)

 4) 검색어 없을 시 모달창 띄우기 푸시
(팀원 L님이 모달창 만들어 놓으신거 불러 적용)
5) 다크모드 안되는 부분 같이 봄 (Y님 수정)
6) 모달창이  css 밑으로 깔리는 문제 팀원 SOS

(z-index를 더 상위 div 에서 가져야 했음, Y님 수정)

 

할 일/부족한 점

디테일은 항상 아쉽지만 우리 조 진짜 많이했고, 열심히 한 것 같다~

1시까지 인걸 체크 못해서 늦게 냈다.아무도 확인 안한 점 반성.^^