내가 보려고 만든 개발 공부 일지

ES6 방식으로 스크립트 시작 / 독립된 컴포넌트 만들기 본문

그 외 잡다구리

ES6 방식으로 스크립트 시작 / 독립된 컴포넌트 만들기

kwangsunny 2021. 7. 2. 01:08

모듈 방식이 아닌 일반적인 레거시 코드들을 보면 

html 시작페이지 에서 페이지가 로드되고 처음 시작하는 함수를 지정할때

<body onload="init()">  이런식으로 onload 이벤트를 걸어서쓰고

선언된 script 태그 순서에맞게(링크되있는 스크립트들은 차례대로 로딩된다) 로직을 작성한다.

 

그런데 ES6 에서 import / export 를 사용할 수 있게 되면서 스크립트를 모듈로써 불러와 변수에 담아서

쓸수 있게되었다. 모듈방식 script는 type="module" 속성으로 불러와서 사용할 수 있다.

 

그럼 이제 onload 에서 시작하는방식 말고 위의 모듈 방식으로 시작을 하려면

먼저 시작 js 를 만들자 --> index.js 그리고 index.js 안에서 사용할 모듈들을 import 하고

가장 처음 시작할 함수를 호출한다.

Ex) 아래는 프로그래머스 고양이 사진첩 구현을 예제로 한 코드이다.

// index.html
<html>
  <head>
    <title>고양이 사진첩!</title>
    <link rel="stylesheet" href="./src/styles/style.css">
    <script src="./src/App.js" type="module"></script>   --->  이렇게 type 을 module로 주면 모듈문법 사용한 스크립트 호출가능
    <script src="./src/index.js" type="module"></script>
  </head>
  <body>

  </body>

...
// index.js
import App from './App.js';

App();
// App.js
const App = ()=>{
    getNodes();
};

const getNodes = (p="")=>{
    const param = {
        url : `https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev/${p}`
    }
    UT.request(param, (res)=>{
        drawElement('header', header, depth);
        drawElement('content', content, res);
    });
}

const drawElement = (type, parent, data)=>{
    switch(type){
        case 'header':
            CP.header(parent, data);
            break;
        case 'content':
            CP.content(parent, data);
            break;
	}

}
export default App;

위와 같은 방식으로 만들어줄 컴포넌트도 따로 JS 파일로 만들어놓고

Import 시켜서 호출하는 방식으로 만들면 컴포넌트를 재사용할 수 있게 된다.

Ex) 아래처럼 컴포넌트는 별개의 JS로 구성한다.

//Header.js
Function header(pnode, list)=>{
  CP.removeAll(pnode);
  const html = list.map(d=> `<div>${d}</div>`).join('');
  pnode.innerHTML = html;
},
export default header;

'그 외 잡다구리' 카테고리의 다른 글

넘블 챌린지 - Front-End  (0) 2021.11.29
localtunnel - 로컬 외부 공개  (0) 2021.10.23
웹팩 기본 세팅  (0) 2021.10.04
React - 간편하게 아이콘 사용하기  (0) 2021.07.12
이벤트 함수에서 target vs currentTarget  (0) 2021.07.03
'그 외 잡다구리' Related Articles more
Comments