개인코딩개발공장

# 변수 선언과 할당시 메모리 동작 구조. 1 단순히 코드상 1이라는 숫자를 하나 적었다. 그렇다면 메모리에는 어떻게 저장될까? 이 숫자 1이저장된 메모리공간에 메모리주소한개가 부여된다. 그렇다면 아래코드는 어떻게 저장이될까? let number_1 = 1; 1이라는 숫자를 number_1이라는 변수에 할당을 했다. 변수를 사용하면 위 코드에서 number_1이 즉 변수이름 식별자가 되고, 이 식별자는 메모리주소 하나를 가르킨다. 그렇다면 위의 코드를 실행하면 이렇게 구조가 잡힌다고 생각할 것이다. number_1이라는 식별자는 메모리 주소를 가르키고 이 메모리주소가 찾아가는 메모리에는 숫자 1이 저장되어있다. 하지만 이 구조는 틀렸다 자바스크립트는 변수선언시 이렇게 동작을 한다. // let numbe..

# 시작하면서 2진법에대해서 되돌아보자. 중학생때 배웠던 2진법을 기억하고 있을것이다. 즉 0,1로 숫자를 표현하는 방법인데 예를들어 0은 10진법 수로 0이다. 1은 10진법수로 1, 10은 10진법 수로 2이다. 이런식으로 0과 1로 숫자를 표현할 수 있는것이다. 컴퓨터에선 메모리 주소 기본단위에 0이나 1을 저장할 수 있는데, 이 기본단위를 '비트'라고 한다. 이렇게 데이터 단위는 기본 Btye로 시작해서 2의 배수대로 커지는 시스템이다. 그럼 1바이트는 0이나 1을 저장할 수 있는 공간이 8개이니, 2^8 = 256 가지의 데이터를 저장할 수 있게된다. # 자바스크립트의 메모리 구조 위 그림처럼 메모리 하나는 1바이트(8비트)의 크기를 가지고 있고 각 셀마다 메모리 주소가 지정되어있다. 컴퓨터는 ..

# 문제점 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에도 봤지만 아주 댓글이 산더미같이 쌓였다.. 얘네들도 안되서 그랬겠지..

이미지파일을 디렉토리별로 분류해서 관리한다. 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 커밋아이디 협업할때 쓰면 ㅈ됨 다른사람꺼 다 지워짐. 오늘배운건 딱히.. 걍 브랜치 옮기고 망한 브랜치 삭제해버리면될듯..