1편에 이어 오늘은 컴포지션 api를 어떻게 사용하는지 알아보겠다 부디 1편에서 vue2와 vue3의 차이를 잘 이해했기를 바란다 (이번편도 마찬가지로 공식 문서와 여러 블로그를 참고했다) setup 전편에서 설명했듯 뷰3에서는 데이터와 메서드 등을 setup훅 안에 작성한다 그래서 나는 뷰3 프로젝트를 할 때도 스크립트 안에 setup 안에 변수, 함수등을 작성했다. 뭐 대충 이런식으로??? 근데 이 글을 쓰려고 공식문서를 살피다가 숫자 세기: {{ count }} 이런 식으로 작성이 돼있는 거다 차이를 알겠나???? 따로 setup(){} 여기 안에 코드를 작성하는 게 아니라 " {{ count }} 변수의 값을 변경할 때 변수.value를 사용하여 변경해야 하며 template 부분에서 사용할때는 ..

오늘은 뷰를 쓰면서 무조건 써야하는 뷰 라우터에 대해 알아보겠다! 아 참고로 뷰3 기준으로 최대한 작성 할거다 Routing 네트워크에서 경로를 선택하는 프로세스 웹 서비스에서의 라우팅 유저가 방문한 URL에 대해 적절한 결과를 응답하는 것 Server가 모든 라우팅을 통제 URL로 요청이 들어오면 응답으로 완성된 HTML 제공 결론적으로, Routing(URL)에 대한 결정권을 서버가 가짐 Why routing? 그럼 동작에 따라 URL이 반드시 바뀌어야 하나? => 그렇지는 않다! 단 유저의 사용성 관점에서는 필 Routing이 없다면 유저가 URL을 통한 페이지의 변화를 감지할 수 없음 페이지가 무엇을 렌더링 중인지에 대한 상태를 알 수 없음 새로고침 시 처음 페이지로 돌아감 링크를 공유할 시 처음..

보통 이제 프론트엔드 공부를 하다보면 초반에 emit props등을 통해서 컴포넌트간에 데이터 전달을 배운다 뭐 자식컴포넌트에서 부모컴포넌트로는 어떻게 보내고 반대로는 어떻게 보내고 어쩌고~~ 근데 컴포넌트 중첩이 너무 깊어지면 데이터 전달도 쉽지않고 유지보수에도 어려움이 생길 수 있다. 그래서 오늘은 뷰에서 가장 많이 사용하는?(사실 나는 뷰엑스밖에 안써봄 ㅋㅋㅋ) 상태관리 라이브러리인 vuex에 대해 알아보자 vue2 문법으로 작성하려 했으나 요즘은 vue3많이 쓰니까 vue3 기준으로 작성해 보겠따 그리고 나는 vue3에서 vuex 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable, module, compos..

자주 쓰이는 디렉티브를 정리해보겠다! 자세한거는 https://v3-docs.vuejs-korea.org/api/built-in-directives.html 👈 요기를 참고하길 바란다. 아 그리고 예제가 뷰2 문법으로 작성되있는데 data나 method부분을 setup()으로만 옮기면 뷰3 문법이니까 디렉티브 사용하는거는 똑같다고 보면 될 것 같다 Directive 기본 구성 v-접두사가 있는 특수 속성에는 값을 할당 할 수 있음 값에는 JS 표현식을 작성 할 수 있음 directive의 역할은 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 것 v-text Template Interpolation과 함께 가장 기본적인 바인딩 방법 {{}} 와 동일한 역할 (정확히 동일한 역할인 것은 아님) {{ ..

먼저 시작하기 앞서 vue 를 설치하려면 node 부터 설치해야하는데 node 설치하는 방법은 정말 간단히 구글링만 해도 나오니까 일단 노드부터 설치하고 오길 바란다. Vue CLI Vue 개발을 위한 표준 도구 프로젝트이 구성을 도와주는 역할 확장 플러그인, GUI, Babel등 다양한 tool 제공 Vue CLI Quick Start 설치 $ npm install -g @vue/cli 프로젝트 생성 $ vue create vue-cli Vue 버전 선택 프로젝트 실행 $ npm run serve Vue CLI 프로젝트 구조 node_modules node.js 환경의 여러 의존성 모듈 python의 venv와 비슷한 역할을함 => 따라서 .gitignore에 넣어주어야 하며, Vue 프로젝트를 생성하..