프로그래머스 과제에 대해

본 과제는 프로그래머스 2021년 Dev-Matching: 웹 프론트엔드 개발자 (상반기) 과제입니다. 과제 링크 과제 공식해설 링크 ↑ 위 페이지에서 과제를 풀어보고 공식 해설로 공부하였습니다.

한번 풀어보기만 하는 것으로는 배우는 것이 적다고 생각하여 글로 정리하여 깊게 남겨보고자 합니다. github 코드

코드를 완성한 후 과정에 맞게 수정하는 것이라 오류가 있을 수 있습니다. 댓글로 오류를 알려주시거나 새로운 지식을 공유해주신다면 감사하겠습니다.

Untitled

이어서 할일

export, import 사용하여 모듈화하기
로딩 중 처리하기
캐싱 구현하기
Breadcrumb 클릭하여 이전 path 로 돌아가기

모듈화

모듈화란?

하나의 스크립트에 모든 코드를 작성하면 코드를 유지보수하기 힘들어지기 때문에 코드를 작은 단위로 나누어 관리하는 것을 말한다.

import, export

ES6의 import, export를 사용하면 index.html 에서 모듈의존순서에 맞게 script 전부를 불러올 필요없이 index.js 만 불러오고 필요한 컴포넌트는 index.js에서 import 해서 불러올 수 있다.

<!--index.html-->
<html>
  <head>
    <title>고양이 사진첩!</title>
    <link rel="stylesheet" href="./src/styles/style.css" />
  </head>
  <body>
    <h1>고양이 사진첩</h1>
    <main class="App">
    </main>
    <script src="src/index.js" type="module"></script> <!-- type = "module" -->
  </body>
</html>

//index.js
import App from "./App.js";
new App(document.querySelector(".App"));