이름에서 알 수 있듯이 Vue 라우터가 제공하는 탐색 가드는 주로 리디렉션이나 취소로부터 탐색을 보호하는데 사용됩니다. 경로 탐색 프로세스에 연결하는 방법에는 전역, 경로별 또는 component 내 등 여러가지가 있습니다. Global Before Guard 'router.beforeEach'를 사용하여 가드하기 전에 전역에 등록할 수 있습니다. const router = createRouter({...}); router.beforeEach((to, from) => { //탐색을 취소하려면 명시적으로 false를 반환합니다. return false }) Navigation이 트리거될 때마다 작성 순서대로 가드를 호출하기 전에 전역으로 이동합니다. 가드는 비동기식으로 해결될 수 있으며 모든 후크가 해결되..

api를 조회해 뷰에 표시해줄 때 mounted에서 처리하는 것이 좋을까 created에서 처리하는 것이 좋을까? 각 Vue component 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 mount하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 LifeCycle Hooks라는 기능도 실행하여 사용자가 특정 단계에서 자신의 코드를 추가할 수 있도록 합니다. Lifecycle Hooks 등록 예를 들어, mouted hook는 component가 초기 렌더링을 완료하고 DOM 노드를 만든 후 코드를 실행하는데 사용할 수 있습니다. export default { mounted() { console.log(..

참고: https://v2.vuejs.org/v2/style-guide/?redirect=true#Rule-Categories 우선순위 높음(에러 예방) 컴포넌트 이름은 두단어 이상으로 정의한다. 예시: todo → todo-item, Todo → TodoItem props를 정의할 때는 최대한 디테일하게 적어준다. v-for과 key는 세트로 써주어야한다. v-if와 v-for을 같이 사용할 수는 없다. 컴포넌트의 style태그에 scoped를 넣어주어야 한다. 외부에서 접근하지 않는 내장 함수일 경우 $를 접두사로 붙여야한다. 우선순위 중간(개선된 코드) 컴포넌트의 파일이름은 ParscalCase를 가장 잘 사용하기는 하지만 대소문자를 구분하지 않는 파일 시스템에서 문제를 일이킬 수 있어 kebab-..

아래의 블로그에 적힌대로 진행합니다. https://minhanpark.github.io/today-i-learned/vue-i18n/ vue로 다국어 적용(국제화) 하기 vue-i18n 플러그인을 적용해 다국어 적용을 해보자. minhanpark.github.io 이후에 아래의 prcess.env.VUE_APP_I18N_LOCALE 처럼 저장된 환경변수를 가져오는 것이 아니라, 브라우저에 설정된 언어를 읽어서 언어설정에 맞게 변경해주도록 하겠습니다. 브라우저 언어를 읽어옵니다. // 브라우저의 언어설정을 읽어온다. const lang = (navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLangua..

컴포넌트의 코드를 재사용하기 위한 고급기술이다. imoprt produce from 'immer'; // produce는 두 가지 파라미터를 받는다. // 첫 번째 파라미터는 수정하고 싶은 상태이다. // 두번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수이다. // 두번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, // produce 함수가 불변성 유지를 대신해 주면서 새로운상태를 생성해 준다. const nextState = produce(originalState, draft => { draft.somewhere.deep.inside = 5; })

cracking vue.js사이트를 보며 진행했습니다. https://joshua1988.github.io/vue-camp/testing/overview.html Overview | Cracking Vue.js 테스트 코드가 필요한 이유 개발자에게 테스트 코드가 필요한 이유는 아래 2가지에 소모되는 시간을 줄이기 위해서입니다. 애플리케이션이 커지면 커질수록 위 시나리오를 점검하는데 많은 시 joshua1988.github.io 1. 라이브러리 설치 npm install --save-dev jest 2. 테스트 파일 생성 app.vue와 같은 폴더 내에 app.test.js라는 파일을 생성했다. 3. 테스트 파일 경로 설정 // jest.config.js module.exports = { testMatch..

9개월째 회사에서 Vue을 사용하고 있다. 내가 Vue의 사상을 잘 따르고 있는지 Vue에서 지향하는 방식을 잘 따라가고 있는지 의문이 든다. 이 시점에 다시한번 Vue를 돌아보고 굳히기가 필요하다고 생각한다. vuejs.org를 잘근잘근 씹어먹어보자. 첫 페이지에 Vue를 프로그레시브(점진적인) 프레임워크라고 홍보를 하고 있다. Vue는 점진적으로 채택할 수 있도록 설계되어 다른 라이브러리나 기존 프로젝트와의 통합이 쉽다. 선언적 렌더링: 보간, 디렉티브