프론트엔드 개발

Setup 훅에서 Route와 Router에 접근하는 법 options API vue router를 App에 mount 시켜줘 mehods, computed등에서 this에 접근가능하여 this.$route 라던가 this.$router를 사용하여 접근하였음 - main.js import { createApp } from 'vue' import App from './App.vue' import router from "./router" createApp(App).use(router).mount('#app'); Composition API 사용 setup 훅 내부에서 'this' 접근할 수 없기 때문에 useRouter를 import 하여 사용해야 한다. import { useRouter, useRoute ..

vue - computed parameter 사용하는 방법 보통 methods에 함수를 정의해 parameter를 넘기고 있었지만, computed를 사용할때도 parameter를 넘길 수 있는지 궁금했다. 아래와 같이 사용할 수 있는데, 보통 아래와 같을때는 methods에 함수를 정의하는 방식으로 사용할 수 있겠지만 어떨 때 다음과 같은 방식을 사용하는지는 좀 알아봐야겠다. {{ item }} 출처: https://velog.io/@nekonitrate/Vue.js-computed-%EC%97%90-Parameter-%EB%A5%BC-%EB%84%98%EA%B8%B0%EB%8A%94-%EB%B0%A9%EB%B2%95

vue - input value값 변경 실시간 감지를 위해서 @input 사용 예시) onChange(event){ console.log(event.target.value) }

먼저 Nuxt 공식 홈페이지에 나와있는 영어를 번역하면서 Typescript의 컨셉에 대해 살펴보고 적용하는 방법에 대해서 알아보겠습니다. TypeScript Concepts Nuxt 3는 코딩할 때 정확한 type 정보에 접근할 수 있도록 유용한 shortcut을 제공합니다. Type-checking 기본적으로 Nuxt는 성능상의 이유로 nuxi dev 또는 nuxi build를 실행할 때 type을 확인하지 않습니다. nuxt.config 파일의 typescript.typeCheck 옵션을 사용하여 빌드 또는 개발 시 type 검사를 활성화하거나 nuxi를 수동으로 type을 검사할 수 있습니다. yarn nuxi typecheck 위의 커맨드를 입력하고 typescript 및 vue-tsc를 설치..

이전 시간에는 Nuxt3 이론을 배웠다면, 이번에는 공식 홈페이지를 보며 직접 Nuxt3를 만들어 보겠습니다. Prerequisites Node.js* (latest LTS version) Visual Studio Code Volar Extension, 공식문서에는 추천하는 링크를 다운받으라고 하였으나, 되지 않아서 두번째꺼를 다운받았어요 Take Over Mode (recommended) TypeScript Vue Plugin (Volar) * Node.js 가 설치되어있다면, node --version으로 v14 or v16인지 확인해주세요~! * Take Over Mode를 활성화했거나 TypeScript Vue 플러그인(Volar)을 설치한 경우 *.vue 파일에 대한 shim 생성을 비활성화할 ..

Nuxt js 공식 홈페이지에서 공부하면서 번역한 것 글을 정리해보겠습니다. Nuxt 3 버전인 점 참고해주세요. What is Nuxt? Nuxt의 목표는 뛰어난 개발자 경험을 염두에 두고 직관적이고 성능이 뛰어난 웹 개발을 만드는 것입니다. Why Nuxt? Nuxt가 무엇인지 이해하려면 최신 애플리케이션을 만드는 데 필요한 사항을 이해해야 합니다. reactivity 및 web components를 사용할 수 있는 JavaScript 프레임워크인 Vue.js를 선택했습니다. 개발 중 핫 모듈 교체를 지원하고 프로덕션용 코드를 번들로 제공하는 번들러인 webpack 5와 Vite를 모두 지원합니다. 레거시 브라우저를 지원하면서 최신 JavaScript 구문을 작성하는 변환기인 esbuild를 사용합니..

props에 class binding시 각자 다른 값이 들어가야 하거나 안들어가도 될때 Before Parent.vue 다음과 같은 Parent.vue에서 button을 하나의 컴포넌트로 만들때 서로 다른 class를 바인딩 시키는 법을 알아보겠습니다. A B C After Parent.vue Child.vue {{title}} addClass가 있던 없던 바인딩된 값이 class에 추가로 들어오는 것을 확인할 수 있습니다. 이외에도 상황에 따른 class binding을 추가하겠습니다~! 댓글에 자유롭게 자기가 사용하고 있는 binding 방법을 적어주시고 같이 소통해요!

Vue.js란? 웹 페이지 화면(UI)을 개발하기 위한 프런트엔드 프레임워크입니다. MVVM 패턴을 따르며, 애플리케이션 로직과 UI를 분리하기 위해 설계되었습니다. MVVM 패턴이란? Vue.js는 MVVM 패턴의 ViewModel 계층에 중점을 둡니다. 양방향 데이터 바인딩을 통해 View와 Model을 연결합니다. MVVM 패턴의 ViewModel 레이어에 해당하는 View 단 라이브러리 View가 특정 모델에 종속되지 않도록 모델(로직)을 분리한 패턴입니다. 간단히 View와 Movel, ViewModel을 분리하여 독립적인 개발을 할 수 있도록 하여, 테스트, 유지 보수, 재사용성을 높인 패턴입니다. 구성요소 뷰(View) : 보여지는 부분, UI를 다루는 역할을 하며, 비즈니스 로직이 아닌 ..