개인코딩개발공장

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

이미지파일을 디렉토리별로 분류해서 관리한다. js파일에서 특정디렉토리에 어떤 파일들이 있는지 동적으로 알고싶은데 node처럼 path모듈을 사용할수도 없고..해서 찾아봤더니 require.context가 있더라 const context = require.context("../assets/img", false, /\.png$/); for (const key of context.keys()) { console.log(key); } 참고로 assets/img폴더안에 있는 이미지들을 가져올거다. require.context메서드 파라미터는 각각 첫번째 : 찾을 경로 두번째 : 불린값인데 하위 폴더까지 다가져올거냐 마냐임. 세번째 : 원하는 파일명 정규식 결과를 보면 ./1.png ./2.png ./3.png 이..

스테이징 및 커밋한 기준이 원점임. # stash 기본명령어 git stash # 저장된것 확인하기 git stash list # 메모 같이 입력 git stash save '메모내용' # stash 코드 불러오기 git stash pop 가장 최근껏 가져옴. # stash 하나지우기 git stash drop 스테시넘버 # stash 다지우기 git stash clear

거의 코딩할때마다 쓰던건데 좀 몰랐던 부분을 알아보자. # push 시에 제한 깃헙에 공동작업자 등록이 되어있어야 push가능. 아닐경우엔 clone만가능(퍼블릭 레포지토리인 경우) # 3자가 push했을경우 난 push 못함. 원격저장소에 변동사항이 발생했을경우 못함. 이럴경우엔 어떻게 해야하느냐? git pull # git pull git pull origin main 폴더가 이미 깃헙에 연결된거라면 걍 git pull만 쳐도됨. 그럼 현재 깃헙에있는 자료들로 다시 다 가져와줌. ** 만약 중복? 된거라면 어떻게할까? 이렇게 충돌된다. 머지처럼 수정하고 하면된다. # 원격저장소 branch만들기 깃헙페이지에서 브랜치 만들수 있음. # 로컬에서 원격저장소 branch만들기 git branch 브랜치명 ..

# 최근커밋으로 되돌리기 git restore 파일명 # 커밋아이디 시점으로 되돌리기 git restore --source 커밋아이디 커밋아이디는 git log --oneline --all --graph 으로 볼수 있음. # 스테이징 취소하기 git restore --staged 파일명 스테이징은 git add 이거. 난 걍 대충 매번 썼는데 취소할수있다. # 커밋단위 복구하기 git revert 커밋아이디 커밋에서 일어난 작업들 다 취소해줌. 커밋아이디 여러개 쓸수도있음. # 특정 커밋시절로 다 돌아가기. 커밋추가되는거아니고 걍 아예 원초적으로 git reset --hard 커밋아이디 협업할때 쓰면 ㅈ됨 다른사람꺼 다 지워짐. 오늘배운건 딱히.. 걍 브랜치 옮기고 망한 브랜치 삭제해버리면될듯..

# git branch git branch 브랜치명 브랜치를 생성해보자. 난 sample_modify로 만들었음. 간단히 프로젝트 사본을 만들어버린거임. # 브랜치목록 보기 git branch -v # 브랜치 이동 git switch 브랜치명 git switch 브랜치명 # 커밋로그 git log --oneline --all --graph 순서대로 sample_modify 라는 브랜치가 생성됐고 sample branch modify 라는 커밋이됐음 그리고 메인브랜치로 이동해서 from main이란 커밋이 됐음. # merge 먼저 주 브랜치로 이동해야함. git merge 합칠브랜치이름 여기서 중요한게 충돌할수있음 난 sample_modify에서 커밋한거랑 main에서 커밋한거랑 같은파일에 같은줄을 수정..

# difftool git difftool 이거치고 Y누르면 이렇게 내가 커밋인지 스테이징인지 하고나서 코드가 변한부분을 비교해서 알려줌 **중요! 여기서 그냥 cntl+c누르고 나오면 커맨드에 타이핑하는게 안나오더라. vim에디터로 보는거라 vim에서 안나와져서 그런거같음..(확실하진않음) 따라서 :q!로 나오는게 바람직한것같다. # difftool 커밋아이디 먼저 커밋아이디를 알아야한다. git log --oneline --all 여기서 노란글씨가 커밋아이디임 다음으로 git log 커밋아이디 이걸치고 Y로 vim에디터 들어가면 이렇게 해당 커밋과 지금 코드 변한걸 비교해준다. 근데 난 vim에디터 존나 싫어하는데 다른게 좋은거 없을까? # git graph 익스텐션 이거 익스텐션으로 먼저 깔아주고 ..

# git add . git add . 폴더내 모든파일을 스테이징 처리함 # 여러개 파일 스테이징 하기 git add 1.txt 2.txt 이런식으로 두개.. # 폴더경로까지 처리 git add folder/file.txt 폴더내 개별파일 스테이징. # git status 파일을 수정하였을때 브랜치 main에서.. index.js가 수정되었다. 하지만 스테이징처리는 안되었다 뜻. 스테이징까지 한다면? (git add .) 이렇게 변한다. # 깃 커밋내역 보기 git log 이렇게 커밋내역이 나온다~