🎈 프로그래머스 데브코스 8주차

8주차는 너무 바빴다.. 그래서 회고도 밀렸...😅
이번주는 npm 설치, webpack 설정 등 다양한 세팅부터 시작하여 vue router, vuex, netlify로 배포까지 vue의 심화학습을 진행했다.
8주차 과제로는 영화 api를 가져와 화면에 보여주는 과제를 진행하였다.

Week8 - Day 1.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 어떻게 전달하는지에 대해 학습하였고 커스텀 이벤트를 통해 단방향이 아닌 양방향 바인딩도 할 수 있다는 것을 알게 되었다.

NPM, SFC 프로젝트 구성, parcel, webpack, 컴포넌트 등록, props 속성, Non-props 속성, 컴포넌트 커스텀 이벤트

Week8 - Day 2.

2일차에서는 다양한 vue 기능들과 전역 상태 관리를 할 수 있는 vuex에 대해 학습했다. vuex에서 staet, getters, mutations, actions의 역할에 대해 알았고 각 컴포넌트에서는 computed를 통해 store에 있는 데이터를 가져와 사용할 수 있다는 것을 알게 되었다. computed말고 다른 옵션들에서도 불러와 사용이 가능하다

<slot></slot>, 동적 컴포넌트, Teleport, Vuex

Week8 - Day 3.

3일차에는 vue router에 대해 학습하였다. babel과 webpack을 통해 router를 설정하는 법도 알게되었다. 처음으로 webpack을 직접 수정하였는데, webpack에 포함된 내용이 방대하여 무엇이 필요한지 확실히 알고 사용하는 것이 좋겠다.

vue router, babel 구성, webpack template 정리

Week8 - Day 4.

이전에 했던 노션 클론을 vue로 한번 더 복습하는 시간을 가졌다. js만으로 구현하던 notion을 vue를 통해 구현하니 훨씬 깔끔하고 쉽게 구현할 수 있었던 것 같다.

vue - notion clone

Week8 - Day 5.

마지막 날에는 vue를 netlify를 통해 배포하는 법을 학습하였다. 배포를 할 때, api의 주소가 노출될 수 있는데 이러한 경우 serverless function을 통해 api 주소를 숨길 수 있었다. 또한 환경 변수 설정을 통해 api key도 숨겨 보안에 좀 더 신경써야겠다고 느꼈다.

Netlify, serverless function

회고

너무 많은 정보를 학습하려고 하니 시간에 쫓기듯 공부한 것 같다. 다음주 복습 기간을 통해 다시 한번 정리를 해야겠다고 생각했다. 8주차 과제에서는 vuex를 통해 데이터를 관리하는데, 데이터 가공을 vuex에서 처리한 후 컴포넌트로 넘겨서 데이터를 보여줄지, 아니면 컴포넌트로 모든 데이터를 가져온 후 원하는 데이터만 가공하는 것이 좋을지에 대해 많이 고민해보는 시간이었다. 추후에 react에서도 전역 상태 관리를 할 때, 어떻게 상태를 관리할지 미리 고민해보는 시간을 가지게 되었다.