여러가지 언어, 프레임워크 등을 사용하면서 느낀 점은 꼭 필요하지만 자주 사용하지 않아서 까먹는 명령어들이 많다는 것이다. 물론 검색하면 다 나오지만 그냥 개인적으로 정리해두면 좋을 것들을 작성해 보았습니다. 사용방법이 간단한 것들은 여기에 바로 작성하고, 조금 긴 것들은 따로 정리해 놓을 예정입니다.
vue cli 설치
npm i -g @vue/cli
용도 or 사용방법
vue 프레임워크를 사용하기 위해서 가장 우선적으로 해야하는 것이 cli 설치입다.
cli란 command-line-interface의 약자로 텍스트로 명령, 출력을 하는 사용자 인터페이스(UI)의 일종이기 때문에, vue cli를 설치하면 터미널에서 텍스트로 Vue.js 애플리케이션을 생성, 개발환경 설정, 배포 등을 할 수 있습니다.
참고. cli 기능
1. 새로운 Vue 애플리케이션 생성
2. 개발 환경 설정
3. 애플리케이션 배포
4. 테스트
5. 빌드
6. 로깅
7. 모니터링
프로젝트 생성
vue create <프로젝트명>
용도 or 사용방법
말 그대로 내가 원하는 프로젝트명으로 프로젝트를 생성하는 명령어인데 생성 과정중에 터미널에
이러한 화면이 나올 수 있습니다. 이것은 본인이 vue3 혹은 vue2 중 어떤 버전으로 프로젝트를 생성할지 정하는 과정으로 제가 작성하는 내용은 특별한 경우가 아닌 이상 vue3라는 점 참고 부탁드립니다.
axios 라이브러리
npm install axios
yarn add axios
용도 or 사용방법
Axios를 간단하게 설명하면 브라우저와 node.js에서 동일한 코드베이스로 실행가능한 promis 기반의 http 비동기 통신 라이브러리입니다. 즉, 통신하려고 사용하는 라이브러리라는 거죠.
axios를 사용하려면 위의 명령어를 통해 axios를 설치한 후, 사용할 컴포넌트 script 구간에서 아래와 같이 import를 해주면 됩니다.
mitt라이브러리
npm install mitt
yarn add mitt
용도 or 사용방법
일반적으로 부모의 컴포넌트 변수의 값을 자식요소에서 수정하고 싶을 때, 직접적으로 변경하지 못하므로 custom event를 사용하여 자식에서 부모 컴포넌트로 값 바꾸라고 요청하여 변경합니다.
근데 만약 자식의 자식의 자식, 혹은 형제 컴포넌트 같이 먼 거리의 컴포넌트이면 데이터를 보내기 굉장히 불편해집니다. 이러한 불편함을 해결해줄 수 있는 것이 mitt라이브러리입니다.(물론 store에 넣어서 사용하는 방법도 있지만 항상 store를 사용하는 것도 아니고 어차피 뒤에 사용법 설명할 거라서 store는 고려하지 않는다.)
가정 : prop를 받은 자식의 자식 컴포넌트에서 값 변경 요청하는 case
우선 라이브러리 설치를 한 후, main.js에
이와 같이 설정해 준다.
이후 값 변경 요청을 할 자식의 자식 컴포넌트에서 아래와 같이 this.emitter.emit("이벤트명", 데이터) 형식으로 요청합니다.
요청하면 부모 컴포넌트에서 받아야하는데 이 때는 mounted 구간에 this.emitter.on("이벤트명", 콜백함수)와 같이 작성해줍니다.
참고. vue2에서 EventBus를 생성해서 모든 컴포넌트에서 이벤트를 보내고 받을 수 있게 만들었었으나 vue3에서 삭제되었다고 한다. 이유는 찾아볼 예정이고 업데이트 전에 아시는 분 댓글 좀...
vuex4사용
npm install vuex@next --save
yarn add vuex@next --save
용도 or 사용방법
공식 문서를 참고하면 vuex는 용도는 아래와 같다.
Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램 (opens new window)과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다.
(출처. https://v3.vuex.vuejs.org/kr/)
사용방법은 vuex를 설치했으면 main.js에 아래와 같이 설정합니다.
이후 store.js를 만들어 아래와 같이 작성해줍니다.(꼭 store.js로 해줄 필요 없고 만드는 위치도 꼭 src 바로 하위로 만들 필요는 없다.)
제가 실제로 위 설정을하고 작성한 코드는 아래와 같습니다.
제 store state(상태)에 likes라는 상태를 만들어 놨는데 이 변수를 사용하려면 아래와 같이 $store.state.상태명라고 사용하면 됩니다.
하지만 이 상태값을 가져오고 나서 하면 안 되는 것이 있는데 상태값을 스토어를 통하지 않고 내가 직접적으로 바꾸는 것입니다. 이 뜻은 아래 예시와 같이 컴포넌트 내에서 함수를 만들어서 값을 변경하거나 html태그 속성을 통해 직접적으로 값을 바꾸면 안된다는 의미이다.
이 이유는 프로젝트가 커지고 상태값을 여러 곳에서 사용할 경우 해당 상태값이 어디에서 바뀌었는지 찾기 매우 어렵기 때문입니다.
그럼 자연스레 "어떻게 바꿔?"라는 의문이 들텐데 이럴 때 mutations를 사용하면 됩니다. 제가 만들어 놓은 store를 참고하면 like라는 mutation을 만들어 놨는데 이를 사용하려면 아래와 같이 $store.commit('mutation명')을 하면 됩니다.
혹은 따로 값을 전달하고 싶은 경우, $store.commit('mutation명', 원하는 값) 형식으로 작성하면 된다.
지금까지 내가 생각하기에 기본적으로 알아야하는 기본적인 vue cli 그리고 관련 설정 및 사용법을 작성해 보았습니다. 추가적으로 알게되는 사실이 있으면 업데이트 예정이며 틀린 정보가 있으면 댓글로 알려주시면 감사하겠습니다.
