개인코딩개발공장

css에 v-bind가 갑자기 안됐다. 그 이유는 시발.. css에 v-bind로 바인딩 해놓은 부분을 '한 부분만이라도' 주석처리하면 전체 css v-bind가 막혀버린다 처음알았다 ㅡㅡ

# 먼저 vue에서 key이벤트는 아래 블로그를 참조하면 된다. https://ux.stories.pe.kr/119 Vue.js의 이벤트 사용 방법 정리 Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다. HTML에는 나 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript를 통해서 기본 이벤트와 어우러지게 사용 ux.stories.pe.kr # 문제는 키 이벤트가 input 태그에서만 실행된다는 점! 키이벤트 정리는 저 위에 블로그를 보면 되고.. 암튼 left키를 누르거나 .right 키를 누르면 연결된 이벤트가 실행된다는 점인데 조건이 인풋태그가 활성화 될때만 이라는점.. # 해결방법? 자스에서 dom으로 만지면 된다. mounted() { docum..

# 문제점 carousel로 배너를 만들었는데, 다음버튼을 눌러야 그 후부터 auto slie가 되더라. 난 이 배너가 일정시간 간격으로 자동으로 사진이 넘어가면서 보이길 바란다. # 예상해결방법 화면이 렌더링된 후, 자동으로 다음버튼을 한번 클릭하게 하면 그 후로는 자동으로 carousel이 넘어갈것같다. # 방법 첫번째로 DOM요소를 js에서 컨트롤하기 위해서 가져와야한다. 여기서 버튼의 ref를 banner_next로 바꾸고 이 DOM을 methos에서 가져올것이다. methods: { click_next: function () { this.$refs.banner_next.click(); }, }, 순서대로 this.$refs.아까정한 ref이름. click() 이 메서드는 아까 정해놨던 넥스트버튼..

내가 만든 웹사이트를 vue로 배포를 했지만, 이것저것 파일을 수정해서 재배포를 할 일이 많을것이다. 여기서 생기는 문제가 클라이언트 브라우저에서 최초 파일을 받아서 저장을 해놓는다면 수정후 배포시에도 최초파일을 사용자브라우저에서 캐시로 저장해놓기때문에 수정사항이 반영이 안될경우가 있다. 매우매우 짜증이 나는 일이다. 그래서 난 여러 방법을 생각해봤는데, 예를들어 라우터 변경시, 매번 서버에 요청을 보내서 버전확인을 한다음 만약 버전이 틀리면 리다이렉트 시키는 방법 등을 생각했었다. 뭐 이것도 가능하긴한데, 서버가 부담이될것같았다(잘모름) 암튼 방법은 이렇다. const { defineConfig } = require("@vue/cli-service"); module.exports = defineConf..

nodejs라면 path모듈로 쉽게 해결을 하겠지만 vue는 js기반으로 돌아가서 경로처리를 어떻게 해야할지 궁금할것이다. 배포를 고려하여 상대경로로 적어야하지만 이렇다면 컴포넌트마다 경로를 다르게해줘야할거다.. 때문에 이를 포스팅한다. # public / vue.config.js const path = require("path"); module.exports = { chainWebpack: (config) => { config.resolve.alias.set("@", path.resolve(__dirname, "public/")); }, 나는 퍼블릭폴더경로를 단순화하고싶다. vue.config.js에서 설정할수있는데 위 코드의 의미는 public폴더를 @로 단순화한다는 것이다. # 컴포넌트에서 불러오기..

이번 방법은 꽤 애를 먹었었다.. 그래서 기억에 남기고자 포스팅을 한다. # 목적 특정 폴더안에 있는 이미지파일들 이름들(스트링형식)을 어레이에 담은 후, 이 파일들 목록을 상대경로로 가공, 가공한 경로들을 템플릿에서 src에 담아, 이미지 반복문으로 보여지게하는것. #예시 이렇게 img폴더안에 1.jpg 2.jpg 3.jpg가 있다. 만약 여기서 4.jpg를 담으면 템플릿에서는 사진 네개를 띄워주는거다. 반대로 3.jpg를 삭제하면 사진 두개를 띄워주게 될거다. # 시작하면서 사실 단순해 보이는 로직이다. 하지만 정말~~~ 애를먹었다. 이유는 모르겠다.. 걍 안됐다.. 구글링해서 비슷한 문제를 겪은 외국인들 stack overflow에도 봤지만 아주 댓글이 산더미같이 쌓였다.. 얘네들도 안되서 그랬겠지..

vue에서 환경변수를 설정해서 사용하려고 한다. open api사용하려는데 키 관리하려고 했다.. 사용법은 간단하다. # .env파일을 만든다. 나는 secret 값을 넣어봤따. VUE_APP_secret = 1234 # app.vue에서 스크립트부분에서 console.log(process.env.VUE_APP_secret) //1234 으로 부르면 값이 제대로 가져와진다. dotenv 모듈을 설치할 필요도 없고 아주 간단하다. 다만 중요한점은 위에서도 secret이라는 변수를 쓰기위해 VUE_APP_을 꼭 앞에 붙여줘야한다는거다. 안붙여주면 못가져온다. 사용자편의를 위해서 이렇게 만들었다고 함. ++ 참고로 .env를 수정했을때 nodemon 켜놨다고 app.vue만 저장하면 리셋되지 않는다. npm ..

상세페이지 상세페이지내용임 close hello App.vue axios test 부트스트랩 테스트 sassTest_blue modal1 이렇게 모달창을 맨위에 올려두고 router로 연결된 컴포넌트에 hello Main from router 모달1 오픈 export default { props: { modal: Object, }, setup(props) { console.log(props.modal.modal1); }, }; 이렇게 emit으로 데이터 보내줌 App.vue에서 openModal1이라는 데이터를 받으면 모달창을 열게해주는거임.

#문제 메서드로 함수내에서 프롭스로 받아온 데이터 쓰는건 가능한데 난 setup()함수내에서 쓰고 싶었다. 근데 this로 불르든 뭐든 다 안되더라.. 그래서 props를 먼저 받아오고 setup함수에 파라미터로 넣어주니 작동이 됐음. hello from test {{testData}} export default { props : { testData : Object, }, setup(props){ console.log(props.testData.data) return { } }, } 이게 코드임 프롭스 키값을 setup보다 먼저 선언해주고 setup 파라미터안에 props 로 넣고 스코프안에서 props. ~~로 데이터 끄집어내서 쓸수 있음. 공식문서 Setup | Vue.js (vuejs.org) Se..

문제점 설명 : gogo1 이렇게 만드는건 이미 배웠고 정상적으로 작동된다. 하지만 내가 원하는 기능은 메서드 안에서 라우터를 조정하는것이다.. 조건에따라 다른 라우터를 연결하는 버튼을 만들고 싶어서였다. gogo2 여긴 템플릿 const test = ()=>{ router.push({ name: 'test' }) } 이건 메서드.. this.$router.push~ self 머시기 다 써봤는데 안되더라. 구글링 졸라게 해보니 답이나온다. 먼저 import { useRouter, useRoute } from 'vue-router' 이렇게 라우터를 임포트해주고 const router = useRouter(); const route = useRoute(); 이렇게 변수지정을 해준다. 그다음 메서드에서 con..