Webpack+SCSS 를 활용한 Momentum clone 앱만들어보기

완성된 화면

앱설명 : 사용자는 이름을 입력하여 로그인하고, todolist를 localStorage에 저장하여 사용하고, 자신의 현재 위치의 날씨를 알수있는 웹앱

이 프로젝트를 통해 얻고자 했던 것

• 직접 작성한 webpack을 사용해보기
• vscode extention으로 쓰던 scss compile 을 webpack으로 처리해보기
• functional programming + pure function 사용 지향해보기

사용한 기술 스택

  "dependencies": {
    "css-loader": "^6.5.1",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1"
  }

node환경에서 webpack watch를 하며 작업했습니다

개발과정

1. webpack 작성 후 폴더구조 잡기
2. html 골격 잡기
3. scss 작성하기(반응형)
4. javascript 작성하기

개발과정

모듈화는 저멀리 숲으로..

처음에는 기능별로 js파일을 분리하려고 했습니다. 

구조는 보다시피 src폴더에 css,js를 모두 담아두고 webpack으로 main.js 하나로 번들링 하였습니다.

기능별로 모듈화를 해보려했는데, React의 component와 다르게, js 로직이 동작하는 html element들은 index.html 한 파일에 몰려있고, 로직만 별로도 구분하고자 했으나, 막상 하고자하니

 

다음과같이 element를 선택해야했고, 함수내에서 필요시마다 select하는거보다, 문서 최상위에서 한번씩만 select하고 가져다 쓰는 것이 중복을 줄일수있었고, 코드가 깔끔해져서 결국 Index.js에 모든 로직이 다들어가게 되었습니다.

 

init 함수 사용하기

코딩하다보면 async, await 을 사용할일이 종종있었습니다. 그런데 현제 context가 함수내가 아니면 필요한 부분을 함수로 다시 감싸서 적용해야할 때가 있었습니다. 그래서 혹시 init()이라는 함수에 모든 로직을 담아 실행하면 필요시에 init함수만 async를 적용해주면 굳이 따로 함수를 작성할 필요가 없을것 같아서 이 방식을 사용해보았습니다.

 

추가적으로 가독성도 좋아지는것같고, 나머지 모든 코드들도 함수화 해서 적용하다보니 가독성이 훨씬 좋아진것 같습니다.

Github Source

https://github.com/livemehere/momentum-clone

GitHub - livemehere/momentum-clone: momentum-clone

배포

https://livemehere.github.io/momentum-clone/

Komentum