본문 바로가기

전체 글

[javascript & css] daum zipcode 우편번호 css 컨트롤하기 (iframe 안 css 수정하기)
다음 우편번호 API를 사용하는데 iframe마다 min-width: 300px 이 걸려있어 모바일에서 잘림현상이 발생하는데 iframe 안의 html과 css라서 수정이 안되었다. #document 해결 (소스는 구리지만..) contentWindow로 내부에 접근하여 거기서 다시 document.getElementById로 접근하여 css를 수정하였다. 테스트 하다보니 가끔 못찾는 경우가 있어 setTimeout을 걸어 처리하였다. const zipCodeIframe = document.getElementById("zipcodeWrap").childNodes[0].contentWindow.document.getElementById("daum_zipcode_view"); if (zipCodeIframe..
[VSCode & Eslint] vscode에 노란줄 쳐지면서 안없어질때
해결 1. ctrl + shift + P (안되면 상단메뉴에서 View > Command Palette 열기) 2. Open workspace setting 열기 3. Eslint 검색 4. eslint: enable 체크 해제
[Vue.config.js & SCSS] Vue2 / Vue3 에서 global scss 연결하기
1. 터미널에서 sass와 sass-loader 을 설치한다. npm i sass sass-loader --save 2. src 밑에 styles 폴더를 만들고 app.scss 파일을 만든다. 3. vue.config.js에서 css 부분을 추가해준다. module.exports = { lintOnSave: false, css: { loaderOptions: { scss: { additionalData: `@import "~@/styles/app.scss";`, //VUE CLI에서 @는 SRC 바라봄 } } }, } VUE CLI 에서 @는 src 폴더를 바라보게 되어있다. 현재 src폴더안에 styles 폴더가 있고, styles 폴더안에 app.scss가 있다. 나머지 scss는 app.scss에서..
[Npm & Vue.js] Error: Cannot find module 'vue-loader-v16/package.json'
상황 vue create하고 npm run serve를 했더니 아래와 같은 오류 발생. Error: Cannot find module 'vue-loader-v16/package.json' 해결 npm uninstall vue-loader-v16 npm i vue-loader-v16 차례대로 삭제했다가 다시 install하고 npm run serve 해보니 정상적으로 작동하였다.
[Git & Vue.js] vue create로 만든 폴더에 바로 git 연결하고 싶을때
vue create 폴더명 cd 폴더 git init git remote add origin 연결할 깃허브주소 git clone하면 폴더가 생성되고 그안에 vue create해도 폴더가 또 생성되어서 매번 옮기거나 폴더가 안에 하나 더 생겼었는데 위 방법으로 하면 폴더에 바로 git 연결이 가능하다. fatal: not a git repository (or any of the parent directories): .git 만약 위 오류가 뜬다면 git init을 다시 실행 후 해보거나 깃허브 주소를 확인하면 된다.
[Vue2 vs Vue3] 기본내용정리 3 (computed와 methods)
Vue3 카운트: {{ count }} 더블카운트 computed: {{ doubleCount }} 더블카운트 computed: {{ doubleCount }} 더블카운트 method: {{ doubleCountMethod(2) }} 더블카운트 method: {{ doubleCountMethod(2) }} 카운트 숫자 증가 computed methods methods Computed vs Methods Computed 1. computed는 ref, reactive 같이 변하는 값에만 사용이 가능하다. 2. 값을 저장하고 있기때문에 template에서 2번 사용한다고 해서 console이 2번 찍히지 않는다. Methods 1. 매개변수로 넘겨서 사용이 가능하다. 2. 위에서 부를때마다 함수가 실행되기 ..
[Vue2 vs Vue3] 기본내용정리2 (emit과 props)
1. 자식컴포넌트에서 부모컴포넌트로 이벤트를 전달할 수 있는 emit Vue3 context.emit() / emits emit은 자식에서 부모로 이벤트를 전달할때 매우 자주쓰이는데 vue2와 다른것은 Vue.$emit 이 아닌 context.emit()으로 전달한다는 것이다. 물론 context의 emit을 바로 사용하기 위에 { emit } 으로 받아와서 emit("이벤트이름", 전달할 데이터)로 사용해도 된다. 또 하나 다른점은 emits에 이벤트들을 정리해준다는 점이다. 1. setup의 인자값으로 context를 받는다. 2. context.emit("이벤트 이름", "전달할 데이터")를 여기에 넣는다. 3. emits에 정리해준다. ** 부모컴포넌트에서 받는 부분은 vue2와 동일 자식 컴포넌..
[Vue2 vs Vue3] 기본내용정리1 (Fragment / setup / ref,reactive)
Vue2 vs Vue3 1. Fragment vue3에서는 template 태그 안에 꼭 하나의 태그로 감싸지 않아도 된다. 2. setup() 이 안에서 변수, 함수 선언 ! 사용할 것은 return 시키기 this는 더이상 사용하지 않는다. 3. ref와 reactive 변하는 데이터는 그냥 선언하면 안되고 ref로 감싸서 선언하기 기본 자료형(숫자, 문자 등)이면 ref로 감싸고 객체나 배열이면 reactive로 감싸기 1. Fragment Vue3에서는 template 태그 안에 꼭 하나의 태그로 감싸지 않아도 된다 logo hello world logo hello world 2. setup() 이 안에서 변수, 함수 선언 ! 사용할 것은 return 시키기. this는 더이상 사용하지 않는다. ..
[프로그래머스 코딩테스트] 없는 숫자 더하기 (javascript)
문제 입출력 예 답 1번 var answer = 0; numbers.sort(); for (let i = 0; i cur + acc, 0);​
[프로그래머스] 로또의 최고 순위와 최저 순위
문제 입출력 예 답 (hash + filter) hash + filter가 포인트 ! 1. matchCount를 보면 내가 가지고있는 로또번호 배열에서 당첨번호와 맞는 숫자만 뽑아서 배열을 리턴받으면 그 개수가 최저로 맞출 수 있는 개수 2. zeroCount는 로또번호에서 0의 개수이니 뭐든 될 수 있는 숫자의 개수 3. 따라서 최고순위는 matchCount + zeroCount가 된다. 4. 그리고 나서 hash 형태로 만들어놓은 rankingObj 에서 맞춘개수가 6개면 1등, 5개면 2등,... 을 리턴하도록 하였다. function solution(lottos, win_nums) { const rankingObj = {6: 1, 5: 2, 4: 3, 3: 4, 2: 5, 1: 6, 0: 6}; ..

티스토리툴바