분류 전체보기 검색 결과
224 개의 검색 결과가 있습니다.
카테고리 없음

[JS] 호이스팅(Hoisting)

0. 호이스팅(Hoisting) 이란? Hoist는 사전적 의미로 '끌어올리다' 라는 뜻을 갖고 있다. 자바스크립트에서 호이스팅은 선언과 관련이 있는데 ‘변수 선언’과 ‘함수 선언’을 끌어 올린다. 호이스팅 : 변수 또는 함수를 선언하고 초기화했을 때 선언 부분이 최상단으로 끌어올려지는 현상 변수 호이스팅 : 변수의 정의가 그 범위에 따라 선언과 할당으로 분리 함수 호이스팅 : 함수 선언문 형태로 정의한 함수는 스크립트 맨 처음부터 실행된다는 개념 1. 변수 호이스팅 변수가 함수 내부에 작성 되었다면, 함수 내부의 최상위에서 선언된 것과 같다. 변수가 함수 외부에 작성이 되었다면, 전역 컨텍스트의 최상위에서 선언된 것과 같다. ※ 변수가 선언만 된 것이고 할당된 것이 아니라는 것이 핵심이다. let fu..

2021. 8. 9. 00:18
Frontend/Vue.js

[Vue] $nextTick() 사용방법

1. $nextTick() 이란? - Javascript는 비동기로 처리되는 특성을 갖고있다. - 떄문에 Data가 업데이트 되고 난 직후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생할수있다. - 이와같은 문제점을 해결해주는 것이 callback 함수 $nextTick이다. ex) 오류 예시 (1) list에 데이터를 넣는 과정 (2) v-bind:id를 통해 bindId(item) 메소드 호출, 이때 item은 list의 요소이다. (3) 호출된 bindId() 메소드 실행 (4) id가 “item-0”인 요소를 찾음 (5) backgroundColor을 red로 지정 → (1) 수행 후 (2)가 수행된다면 오류가 없지만 (1)의 완료 전 DOM(2)이 로드되어 문제발생 2. $next..

2021. 8. 7. 01:02
Dev Tools

[Git] untracked working tree files overwritten

merge, checkout 등... 여러 상황에서 다음과 같은 에러가 발생할 수 있다. remote: Counting objects: 6, done. remote: Total 6 (delta 5), reused 6 (delta 5), pack-reused 0 Unpacking objects: 100% (6/6), done. From https://github.com/xxxxx/xxx * branch master -> FETCH_HEAD Updating 531a1fe..445eb5f error: The following untracked working tree files would be overwritten by checkout 오류가 발생한 파일 위치 및 이름 Please move or remove t..

2021. 8. 6. 00:33
Infra

[Linux] 리눅스 tail 명령어 사용법

▶ tail 로그 파일의 마지막 부분을 지정된 라인 만큼 보여주는 명령어이다. (기본값은 마지막 10줄) (tail ↔ head 명렁어는 앞에서 부터 지정된 라인 만큼 보여주는 명령어이다.) (기본 사용법 ) tail [option] [파일명] tail [option] [file] tail -f logfile.out -f : output appended data as the file grows 파일의 마지막 10개 라인을 실시간으로 계속 출력 예) tail -f catalina.out -n : output the last N lines, instead of the last 10 원하는 라인 수 만큼 출력 tail -n 5 logfile.out (마지막 라인부터 5개의 라인을 출력) tail -n +20 ..

2021. 8. 4. 23:48
Frontend/JavaScript

[JS] 이벤트 버블링과 캡처링

자바스크립트에서 이벤트 전달 방식에는 버블링, 캡쳐, 위임 방식이 있습니다. 이벤트 버블링과 캡처링은 이벤트 전달, 차단과 관련해서 매우 중요한 개념입니다. 1. 이벤트 버블링 이벤트 버블링은 어떤 요소에 대한 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정을 의미합니다. var grandParent = document.querySelector('.grand-parent'); var parent = document.querySelector('.parent'); var son = document.querySelector('.son'); grandParent.addEventListener('click', function(e) { console.log('grand-parent')..

2021. 8. 4. 01:00
Frontend/Vue.js

[Vue] 부모-자식 컴포넌트간 데이터 전달

Vue를 이용한 개발에서는 부모-자식 컴포넌트간 데이터 전달을 잘 하는것이 매우매우매우 중요합니다. 대표적으로 부모-자식 컴포넌트간 데이터 교환 방법에는 Props 속성을 이용한 방법이 있지만, 이번 포스팅에서는 더 간단한 방법인 this.$parent와 this.$refs에 대해서 알아보도록 하겠습니다. ▶html mine it record VueJS ▶javascript Vue.component('mine-it', { data() { return { test : 'hi' } }, methods: { goParnet : function(){ this.$parent.goChild(); }, hiParent : function() { alert(this.test); } } }); new Vue({ el: ..

2021. 8. 2. 23:47