프론트엔드 개발

이슈 발생swiper영역 안에 버튼을 누르고 alert혹은 confirm창이 뜨고나서 버튼을 스와이프하면 스와이프가 되지않는 이슈 발생, pc모드에서는 잘되지만 모바일 디버깅시 발생 해결swiper 옵션 중 touchStartForcePreventDefault: true 속성 추가하여 브라우저의 기본 동작을 차단한다.touchstart이벤트에 대해 기본동작을 막아 Swiper의 동작이 강제적으로 우선 처리 되게 한다.  기존 접근 방법버튼을 눌러 alert가 나오면 이벤트 버블링을 하여 스와이퍼 동작이 차단된것 같아 vue 에서 @click.stop을 했는데도 소용이 없었다.이 방식은 잘못 접근하였는데 @click.stop은 클릭 이벤트의 전파를 막는 역할만 수행하며, Swiper와 관련된 터치 이벤트에..

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를 설치..