배씨의 개발일지

오늘 알게 된 것 (Import, Export) 본문

TIL

오늘 알게 된 것 (Import, Export)

용찬 2023. 5. 31. 20:54

원하던 것

1. 파일을 기능별로 작성하기

2. 코드를 최대한 간결하게 만들어보기

 

막힌 점

Index.js를 만들고 검색 기능을 구현 중 HTML로 넘겨주는 걸 구현하지 않음.

그래서 검색 결과를 확인 할 수 없음.

 

 

시도한 것

// 검색으로 입력한 값 가져오기
const searchFunc = (objId) => {
  searchId = searchInput.value;
  return objId.indexOf(searchId) !== -1;
};

// button.addEventListener("click", Filter);

function Filter() {
  const value = document.getElementById("value").value.toUpperCase();
  const item = document.getElementsByClassName("one_quarter");
  const name = "";

  for (i = 0; i < item.length; i++) {
    name = item[i].getElementsByClassName("name");
    if (name[0].innerHTML.toUpperCase().indexOf(value) > -1) {
      item[i].getElementsByClassName.display = "inline-block";
    } else {
      item[i].getElementsByClassName.display = "none";
    }
  }
}

이렇게 검색 기능을 만들어 보았지만 HTML로 넘어오지 않았고

결국 다른 파일에 있는 Function(HTML에 붙여주는 것)을 가져오고 싶었다.

 

그래서 어떻게 가져올 수 있나 알아보던 중 Export, Import에 대해서 알게 되었다.

 

 

 

 

 

알게 된 것 (Export, Import)

각기 다른 파일에서 선언된 변수, 함수, 클래스를 Export, Import를 통해서 가져올 수 있다.

Export, Import는 Javascript의 ES6에서 나왔다.

 

 

예시)

 

api.js

// hello라는 변수 선언
const hello = {
    my: "My, name..",
    name : "배찬용",
    age : "29",
    comment : "Hello, everyone"
  };
// export를 통해 'hello' 변수를 내보내기
  export { hello };

index.js

//api.js에서 Export된 'hello' 변수를 가져오기
import { hello } from "./api.js";

//hello에 저장된 값 출력
console.log(hello);

위 예시와 같이 api.js에서 hello라는 변수를 내보내고 index.js에서 가져온 후 console.log를 통해서 출력

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
<!-- 밑 부분 중요 type="module" 없을 시 작동하지 않음 -->
  <script src="index.js" type="module">
</script>
</html>

index.html 파일에서 보는 바와 같이 index.js만 연결 api.js는 연결 X

 

 

 

위 사진과 같이 api.js에서만 선언 된 변수 hello가 index.js의 console.log를 통해 출력

 

*주의사항* HTML의 <script> 안에 type="module" 을 넣어주어야 함

 

 

 

이를 통해서 알게된 점

 

  • Javascript도 Java나 다른 언어들과 같이 Import가 가능하는 것
  • Import를 통해서 다른 코드에서 변수를 불러옴으로써 코드를 더욱 간결하게 짤 수 있는 것.
  • 변수 데이터의 추가, 삭제가 있을 경우 Export 해온 파일에서만 변경해주면 다른 파일에서 변경 필요 X
  • ↳원래는 모든 파일에 있는 값에 변경을 해줘야했지만 불러오기 때문에 불러온 코드만 변경해 주면 모두 다 변경
  • 변수, 함수, 클래스 모두 다 Import 가능
  • 기존에 만들어놓은 기능들을 재사용 할 때 변경 할 코드들이 줄어듦

 

 

코어 자바 스크립트 - 모듈 내보내고 가져오기

https://ko.javascript.info/import-export

 

모듈 내보내고 가져오기

 

ko.javascript.info

 

'TIL' 카테고리의 다른 글

3 tier architecture  (0) 2023.07.24
VScode로 mongoDB연결  (0) 2023.06.13
TIL 4일 차  (0) 2023.05.19
TIL 3일 차  (0) 2023.05.19
TIL 2일 차  (0) 2023.05.18
'TIL' Related Articles more
Comments