개인코딩개발공장

내가 만든 웹사이트를 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에도 봤지만 아주 댓글이 산더미같이 쌓였다.. 얘네들도 안되서 그랬겠지..