프로젝트를 만드는 이유
이전에 Side Project로 만들어 놓고 안 쓰던 점심 뽑기 Web이 있는데,
(https://soominyim.github.io/today-lunch/)
배포 이후에 거의 수정을 안했었다.
묵혀두기는 좀 아쉬워서 Vuex에 익숙해질 겸 리팩토링하려고 한다.
이번에 리팩토링하면서 다른 요소들도 추가하여 완전한 Tools web app으로 구성할 것이다.
따로 디자인이나 구조를 정해놓고 하는 것이 아니라서, 천천히 추가하면서 만들 예정이다.
왜 미니로 지었냐고 물어보시진 않겠지만 그래도 설명하겠다.
미니는 우리 강아지 이름인데, 14살로 노견이다. 오래오래 살았으면 좋겠지만, 언젠가는 헤어져야 한다.
마음에 미니를 담아두기엔 내 마음이 너무 작은 것 같아 이렇게나마 미니를 남기고 싶어서 컨셉을 미니로 정했다.
우선 vue 프로젝트를 생성하고 간략하게 디렉토리 구조만 살펴보자.
프로젝트 생성
프로젝트이름은 그냥 생각나는 대로 지었다...
Vue 3.X 버전을 사용하겠다.
vue create mini-mate
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
Default로 프로젝트를 생성하고 나머지 필요한 것들은 따로 Add 하자.
"dependencies": {
"@mdi/font": "5.9.55",
"core-js": "^3.8.3",
"node-sass": "^9.0.0",
"roboto-fontface": "*",
"sass-loader": "^13.3.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuetify": "^3.0.0-beta.0",
"vuex": "^4.0.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-cli-plugin-vuetify": "~2.5.8",
"webpack-plugin-vuetify": "^2.0.0-alpha.0"
},
css는 scss를 사용해서 코드를 짤 예정이지만 대부분은 Vuetify로 할 것이다.,,
css를 하기 싫어서보단 Vuetify를 거의 사용해보질 않아서 익숙해지기 위해 사용하려고 한다.
scss를 사용하기 위해선 Dependency에 node-sass와 sass-loader를 필요로 한다.
Vuetify에서도 sass를 지원한 다곤 하는데 어느 부분에서 지원하는지는 잘 모르겠다.
그리고 필수템인 Router와 Vuex는 추후 코드리뷰할 때 자세히 살펴보자.
디렉토리 구조
Dependency는 대충 이렇게 구성하고 디렉토리 구조를 대충 잡아봤다.
위에서부터 차례대로 간략하게 설명하자면,
dist
dist 폴더에는 현재 프로젝트를 build 한 파일들이다. 추후 배포 시에 이 디렉토리가 필요로 한다.
기존 나의 프로젝트들은 Github에서 제공하는 pages로 배포를 하였지만 이 배포는 무료로 해주기 때문에,
Static 한 웹만 배포가 가능하다. 그래서 이번엔 Vercel이라는 곳에서 배포를 할 것이다.
도메인이 맘에 들진 않지만 Github pages와 마찬가지로 어렵지 않게 배포가 가능하다.
배포 방법은 Github Login 후에 Repositories를 연결해 주면 된다. 다음 글에서 배포방법을 자세히 알아보자.
node_modules, public
넘어가자..
src
App.vue는 Project의 최상위 component다.
index.html이라고 보면 된다.
main.js는
Vue 인스턴스를 생성하여 사용할 라이브러리들을 추가한 뒤에 #app에 Mount 해준다.
assets
Vue Project에 Default로 생성되는 폴더다.
직역은 자산인데, 사용되는 파일을 넣는다고 보면 될 것 같다.
components
Vue에서 가장 강력한 기능이라 자부하는 Component다.
기존 HTML 태그들을 캡슐화하여 여기저기서 사용할 수 있게 해 준다.
Component를 어떻게 구성하느냐에 따라 Project의 성능이나 가독성을 좌지우지한다.
Vue에서 가장 중요한 기능이니... 공부를 열심히 해야 한다..... 후
아 그리고 원래는 Project 생성 직후로 글을 포스팅하려 했지만 이미 좀 작업해 놓은 상태다.
처음부터 하기 귀찮아서 만들어진 내용으로 작성하겠다...🤪
Header와 Footer처럼 Page에 공통으로 들어가는 Component 들은 common 디렉토리에서 살아가게 해 주자.
css
css는 사실 사용도가 많이 적은 디렉토리라고 생각한다. (굳이?라는 생각도 함)
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
.vue 파일의 Default template이다.
style 태그의 scoped 옵션으로 각각의 component 마다 style을 적용할 수 있기 때문에
공통으로 적용해야 하는 reset이나 font들 외에는 따로 .css 파일을 구성하지 않아도 된다.
그래서 굳이?라는 생각을 하는 1인이다.... 그래도 만들어 놓겠다.
data
Tools에서 사용되는 내용들을 Data Model로 저장해 놓는 공간이다.
현재는 음식 랜덤 뽑기에서의 음식을 담당하는 친구들이 살고 있다.
추후 Random Select 를 설명할 때 잠깐 나올 것이다.
plugins
Plugins를 생성하고 연결해 주는 공간이다.
router
Vue에서 페이지간의 이동을 위한 라이브러리다.
페이지 이동 시에 URL을 변경하여 Component를 변경하여 갱신한다.
실제로 DOM이 동작하는 것이 아닌 Virtual DOM을 갱신하는 것이기 때문에 MPA 보다 훨씬 부드러운 페이지 이동이 된다.
SPA를 사용하는 중요한 이유 중 하나다.
store
Vuex를 사용할 때 필요한 디렉토리다.
우선 Vuex란 component 간의 Data 이동이 불편하고 복잡한 Vue의 성능을 올려주는 상태관리 라이브러리다.
Vue에서 component간의 Data이동은 Props , Event Bus를 사용해야 하는데 굉장히 귀찮고 복잡하다.
그래서 중앙관리소?처럼 store를 작성하여 그 안에서 data, method 등을 저장해서,
필요한 component에서 꺼내 쓸 수 있게 해주는 고마운 라이브러리다.
매우 중요하기 때문에 이 Project를 만드는 실질적인 이유도 Vuex에 대한 이해라고 할 수 있다.
views
위에 언급한 router에서 보일 페이지들이다.
피드백은 저에게 큰 도움이 됩니다 😛
'밥줄 > Vue.js' 카테고리의 다른 글
[Vue.js] Side Project Tools 만들기 (2) (0) | 2024.02.20 |
---|---|
[Vue.js]Web browser에서 Source maps 숨기기 (0) | 2024.01.31 |
[Vue.js]String Type 줄 바꿈 (0) | 2023.11.27 |
TypeScript intellisense is disabled on template 해결 (0) | 2022.08.31 |
[Vue.js]Life Cycle 간단요약 (0) | 2022.07.06 |