Momentum 클론코딩 회고

Html, Css, Js 공부하는데에 있어 서비스를 하나 만들어보는게 가장 효율적일 듯 하여 노마드코더의 바닐라JS로 크롬 앱 만들기를 수강했습니다.

서비스 자체가 간단하고 css를 제외한 Html과 Js만 다루기 때문에 강의 자체는 빨리 들을 수 있었지만, 클론코딩 이후 전체구조를 크게 2번 정도 바꾸느라 완성까지 총 3주의 시간이 걸렸습니다.

---

🚀 결과물

🔗Demo Link

---

🧑🏻‍💻 클론코딩 이후 추가 개선 사항

1. 의존성 처리

• ES6 export/import 사용
  클론코딩 결과물에선 다음과 같이 Index.html에서 각각의 .js 파일을 <script>로 불러왔습니다.

    <script src="js/greeting.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/wallpaper.js"></script>
    <script src="js/todo.js"></script>
  

  이러한 방식은 .js파일(혹은 모듈) 사이 공유하는데 제약이 없다는 단점이 있습니다. <script>로 로드된 모듈은 모두 window 객체의 속성이기 때문에 서로 다른 파일에 위치하면서도 모든 객체를 공유할 수 있습니다.
  각각의 모듈에서 선언한 객체가 전역환경에서 중복될 수 있는 위험을 방지하고자 ES6에서 지원하는 import/export 문법을 적용해 전체 구조를 바꾸었습니다.

  ⬇️

  
  <script>태그에 type=”module” 어트리뷰트를 추가함으로서 브라우저가 이 파일을 모듈로 인식하게끔 했습니다.
  그리고 주가 되는 .js 하나만 불러왔습니다.

    <script type="module" src="js/main.js"></script>
  

  main.js에선 필요한 모듈을 import해서 사용했습니다.

    import { todoInit,hideTodo } from './todo.js';
    import { paintClock,hideClock } from "./clock.js";
    import { paintGreeting,hideGreeting } from "./greeting.js";
    import { handleQuotes } from "./quotes.js";
  

  
  

• 디자인패턴(즉시실행함수) 사용
  예를들어 username과 같이 하나만 선언되어야하며 쉽게 접근/수정이 되선 안되는 변수는 전역에 선언하기보다 즉시실행함수를 통해 관리하고자 했습니다.

    let username;
    username=loginInput.value; //loginInput은 html input태그
  

  ⬇️

    const username=(function username(name){
    let username="";
    return {
        setName:function(name) {
            username=name;
            localStorage.setItem(CONSTANT.USERNAME_KEY,name);
        },
        getName:function(){
            return username;
        },
        isLogin:function(){
            if(username=="") {
                return false;
            }
            else{
                return true;
            }
        },
        syncName:function(){
            const get=localStorage.getItem(CONSTANT.USERNAME_KEY);
            if(get!=null){
                username=get;
            }
        }
        }
    })();
  

2. Redirect Server 사용

자세한 내용은 이 링크를 참고해주세요.
클론코딩 결과물에선 날씨 API 사용을 위해 {API Key}를 내부 변수에 두고 날씨 API에 Direct로 fetch를 수행했습니다. 이 경우 {API Key}가 사용자에게 노출됩니다.
이것을 방지하고자 Netlify Function에 간단한 Redirect server를 두고 {위도},{경도} 값만 가지고 날씨를 가지고 올 수 있게끔 했습니다.

Redirect Server의 모식도는 다음과 같습니다.

3. WebPack의 사용

웹 개발 작업 자동화와 빠른 로딩 속도를 기대하며 webpack을 사용했습니다.
작은 몸집(9개의 js모듈(1개의 Lib)과 1개의 css파일)이라 웹팩의 사용으로 체감할 만큼 로딩이 빨라질까? 라고 생각했지만 실제로 초기 로딩이 빨라짐을 체감했습니다.

---

💡 배운점

• Html,css,Js 각각의 문법과 이들이 어떻게 유기적으로 작동하는지
• javaScript 동기/비동기 함수 사용 이유
• jQuery 없이 DOM API를 사용
• 웹 개발 환경 세팅
• API 사용

📚 Reference

[javascript] require vs import (CommonJs와 ES6)