개인코딩개발공장

# 변수 선언과 할당시 메모리 동작 구조. 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 이..

렌더링 : HTML, CSS, Jave Script로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는것. 서버사이드렌더링 : 서버에서 데이터를 HTML로 변환해서 브라우저에 전달하는 과정 SSR (server side rendering) Node js : 자바스크립트 런타임 환경 비동기 I/O(입출력) 단일스레드 이벤트루프 기반 동작 SPA에 적합(single page Application) *CPU사용량이 높은 어플리케이션에는 권장하지 않음. ECMA Script 이크마스크립트 : ECMA-262, 자바스크립트의 표준사양 클라이언트 사이드 Web API # 자바스크립트는 개발자가 별도의 컴파일작업을 수행하지 않는 인터프리터언어. 컴파일러 언어 : - 코드가 실행되기전단계(컴파일) 타임에 소스코드 ..

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 ..

먼저 cross-env모듈을 설치해주자. 따로 모듈을 서버코드에서 가져올 필요는 없다. npm i cross-env 서버 실행 모듈을 대게는 배포모드일때 pm2를 사용하며, 개발모드일때는 nodemon모듈을 사용한다. 이를 적용하려면 package.json을 수정해주어야 한다. "scripts": { "start": "cross-env NODE_ENV=production PORT=3000 pm2 start app.js", "dev": "cross-env NODE_ENV=development nodemon app.js", "test": "echo \"Error: no test specified\" && exit 1" }, # start : npm start를 커맨드에 쳤을때 설정값이다. 위코드를 해석하자면..