프론트엔드 개발

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

- remote 브랜치 삭제하는 방법 * 아래 명령어를 사용하면 local에 있는 branch가 아닌 remote에 있는 branch가 삭제된다는것을 잘 알고 사용해야 한다. git push origin --delete [branchName] [선택] remote에 있는 branch를 삭제하고 나서 local에도 있다면 삭제한다. - local 브랜치 삭제하는 방법 git branch -d [branchName] 강제로 제거해야한다면 git branch -D [branchName] 출처: https://www.lesstif.com/gitbook/git-delete-remote-branch-20776547.html https://backlog.com/git-tutorial/kr/stepup/stepup1_..

아래와 같이 enter를 눌렀을 경우 함수가 2번 호출되는 문제가 있었는데 해결한 경험을 공유하겠습니다 간단하게 keyup => keypress로만 수정하면 됩니다 수정이 완료되었다면 네트워크 탭에서 맞게 호출하고 있는지 확인해보세요

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

맥os를 이용하여 zsh에서 code. 를 쳤을때 다음과 같은 오류 발견 zsh: command not found: code 해결방법 VSC에서 command + shift + p를 누르면 code 명령 설치를 눌러준다. 1. 정상 설치되었을때 2. 에러가 나면 permission denied unlink '/usr/local/bin/code' 다음 명령어를 입력 cd /usr/local/bin sudo rm -rf code 추가 에러 발생 터미널에서 path 잘못입력해서 어떤 명령어든 찾을 수 없다는 에러 발생 1. 터미널에 아래 명령어 입력 export PATH=%PATH:/bin:/usr/local/bin:/usr/bin 2. 다시 vi ~/.zshrc 에서 수정 3. source ~/.zshrc ..

먼저 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 생성을 비활성화할 ..