여씨의 개발이야기

📢 이 버그 좀 보세요! 버그 다시 띄우기 귀찮아요.... 대략 상황을 정리하자면, 서버는 AWS 사용중, BE: Spring boot(REST API로 호출 예정), FE: Vue.js 3, web server: Nginx 사용중에 Vue에서 REST 방식으로 api를 호출할 예정이었다. 대충 다른 블로그 참고하면서 이런 저런 세팅하는데 CORS 오류도 나고요 404에러도 나고요... 도대체 어찌합니까..? 처음 local과 nginx 세팅은 아래와 같다. local에서 실행시 (vue.config.js 세팅. pathRewrite 아래와 같이 적어줘야 함.) const { defineConfig } = require("@vue/cli-service"); module.exports = defineCon..

코딩중 eslint 에러가 출력되었다. error Component name "Discount" should always be multi-word vue/multi-word-component-names 해당 에러는 어느 순간부터 뷰 업데이트가 된 이후 컴포넌트 이름이 2단어 이상으로 작명해야해서 발생하는 에러라고 한다. DiscountBanner.vue 이런 식으로 2단어 이상으로 작명하면 된다고 한다. 이게 싫다면 package.json 파일 열어서 "rules" 라는 항목에 "rules": { "vue/multi-word-component-names": "off" } 또는 vue.config.js 파일 열어서 "module.exports = defineConfig" 항목에 module.exports ..

코딩애플 강좌 듣는 도중 문제가 생겼다. 강좌 내용을 응용하여 반복문을 이용한 div 내에 img 태그를 삽입하려는데, 이 때 변수를 이용해 다양한 이미지를 삽입하고 싶었다. before 처음 시도. :src를 입력한 뒤에 데이터 바인딩을 이용해 반복문의 키값을 넣어주려 했다. 결과는 실패. GET http://localhost:8080/img/assets/room0.jpg 404 (Not Found)라는 에러가 뜨며 모두 엑박이 떴다. {{item}} 가격은? 허위매물신고 신고수 : {{report[i]}} after 이런저런 방법을 찾아본 결과, require를 이용하면 변수를 사용할 수 있다고 한다. 그래서 다음과 같이 작성해보았다. {{item}} 가격은? 허위매물신고 신고수 : {{report[..

해당 에러는 위와 같이 v-for를 사용했을 때 나는 에러이다. v-for를 사용할 경우에 키값도 같이 지정을 해줘야 한다. 그렇기때문에 아래와 같이 수정하였다 {{p}} 가격은?

Nodejs설치하면 npm을 쓸 수 있음 npm이란 각종 웹 개발 라이브러리 설치 도우미로 'Node Package Manager'의 줄임말이다. npm으로 @vue/cli 설치할 수 있음 @vue/cli란 vue 프로젝트를 자동으로 빨리 생성해주는 라이브러리이며 프로젝트 생성은 vue create 프로젝트명 으로 할 수 있다. 프로젝트 구조 node_modules: 프로젝트에 쓰는 라이브러리들 src: 소스코드가 다 담기는 곳 public: html파일, 기타파일 보관하는 곳 package.json: 라이브러리 버전, 프로젝트 설정 기록하는 파일

vetur html css supports vue3 Snippets

보통 우리는 같은 사이트 내에서 다른 페이지로 이동하고자 할 때는 아래와 같이 라우터를 이용해서 redirect하는 방식을 이용한다. this.$router.push("/about"); 하지만 우리가 알아보고자 하는 방법은 같은 사이트 내부가 아닌, 외부 URL을 redirect하는 것이다. 아래의 소스를 보겠다. 해당 소스는 vue앱에 /contact 경로가 있다고 가정할 때, 사용자가 /contact 페이지를 접속할 경우 외부 url인 https://www.google.com/contact/ 페이지를 접속하고자 한다. 가장 쉬운 방법으로는 /contact 와 연결된 소스에 window.location.href 속성을 사용하면 된다. Contact.js Contact Page 위의 소스에서, creat..