오늘 면접을 보았는데요 , 제가 면접을 보고 대답을 잘 하지못했던부분 ,
그리고 면접을 보았던 회사가 vue.js를 사용하는 회사여서 바로 vue.js 로 무엇인가를 빌드해보며 배워야겠다는 생각이들어서 , vue에대해 공부를 하겠습니다 .
그 전에 뷰에대해서 공부를했었는데 , 다시 처음부터 하도록 하겠습니다 .
Vue -CLI
- awesome tool for generating and building Vue apps
- Features include Babel , TypeScript , ESLint , PostCSS & more
- Includes dev server with hor reload
- Includes Vue UI tool to manage your app in a graphical interface
VueX for State management
- Used for manage application level state ( similar to Redux , Flux , etc )
- Serves as a central store for all components
- Uses actions to update global state and send down to components
- Used in larger applications
file structure
in package.json as i know i can check the dependencies that i installed and how can i build , or run server through key called scripts , i can run server with npm run serve
in public folder , there is a file called index.html
vue is a single page application framework , basically loads one file which is index.html file.
이 html파일에는 app이라는 id를가진 div가 있는데 뷰애플리케이션의 플레이스홀더라고 합니다 .
src 파일에 있는 main.js 에 가보면 newVue라는 생성자와 함께 mount를 #app 을 해주는것을 알수있는데 , index html과 뷰 애플리케이션을 바인딩 해주는 js파일인것같습니다 .
App.vue 컴포넌트를 보았습니다 .
template칸에는 html을 , script에는 자바스크립트를 , style 에는 css를 코딩할수있는 칸들이 마련되어있습니다 .
app 컴포넌트의 style에는 글로벌 css를 코딩할수있습니다 .
React와 마찬가지로 template 칸에는 오직 하나의 html element요소로 감쌀수 있습니다 , 무슨뜻인가하면
template 안에서 랩핑을 어떤 한 요소로 하고 그 안에서 다른 마크업을 진행할 수 있다는 뜻 입니다 .
styled 에서 scope 라는 속성이 있는데 , scope를 주게되면 이 컴포넌트에서만 작동하는 css 를 코딩할수 있습니다 .