본문 바로가기

전체 글62

[JS] 함수와 메서드의 차이에 대해서 설명해보세요. 함수와 메서드 함수와 메서드의 차이점은 호출 방식에 따라 다르다. 함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말한다. let obj = { show1: function() { console.log('show1() 메서드 호출'); } } function show2() { console.log('show2() 함수 호출'); } obj.show1();// 메서드 show2();// 함수 위 예제에서 show1() 함수는 객체 obj의 프로퍼티이며, obj 객체를 통해 호출했으므로 메서드이다. 반면에 show2() 함수는 객체를 생성하지 않고 직접 호출했으므로 함수이다. 함수를 호출하는 전역 객체 위 예제에서 show2() 함수는 객체 없이 호출되는 것처.. 2023. 5. 5.
[JS] 실행 컨텍스트에 대해서 설명해보세요. 실행 컨텍스트란? context === 문맥 자바스크립트의 코드의 앞뒤 내용을 이해하기 위한 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. '전역 컨텍스트': { 변수객체: { arguments: null, variable: ['name', 'wow', 'say'], }, scopeChain: ['전역 변수객체'], this: window, } 소스코드 평가와 실행 모든 소스코드는 실행에(런타임) 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다. 자바스크립트 엔진은 평가와 실행을 나누어 처리하고 평과 과정에서는 실행 컨텍스트를 생성. 변수 함수등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 렉시컬 스코프에 저장한다. var x; x = 10; 런.. 2023. 5. 5.
[JS] 자바스크립트의 비동기에 대해서 설명해주세요. 싱글스레드인 자바스크립트의 비동기가 가능한 이유 사람은 혼자서 앞과 뒤를 동시에 볼 수 없고, 공부를 하면서 잠을 자는 등의 업무를 동시에 진행할 수 없다. 자바스크립트 역시 싱글 스레드로 한 번에 하나의 코드만 실행시킬 수 있다. 따라서 애니메이션이 지속됨과 동시에 상품 상세페이지로 이동하기 위한 클릭 등의 작업이 불가하다. 하지만 이 글을 읽는 사람 모두가 알듯이, 브라우저에서 이와 같은 업무가 가능하다. 왜 그럴까? 용어: 스레드(Thread) 스레드는 어떠한 프로그램이 실행되는 작업을 말한다. 싱글 스레드는 한 번에 하나의 작업만 수행할 수 있으며, 멀티 스레드는 한 번에 여러 개의 작업을 수행할 수 있다. 이는 '이벤트 루프(Event Loop)' 덕분이다. 이벤트 루프 브라우저 환경을 그린 것.. 2023. 5. 4.
[프로젝트] 두더지게임(Whack-a-mole) 기획안 기능 9개의 두더지 구멍이 처음 화면에 나옴 게임을 시작하는 "시작" 버튼이 있음 시작되면 1초 후부터 두더지가 구멍에서 랜덤하게 나옴 두더지가 나타난 곳을 클릭할 경우, 두더지를 잡은 것으로 간주 두더지가 나타난 구멍을 사용자가 3초 내에 클릭하지 않을 경우, 두더지를 잡지 못한 것으로 간주 사용자가 두더지를 잡거나 제한 시간(3초)가 초과되었을 경우, 1초 후 랜덤으로 두더지가 나와야 함 다음 번에 두더지가 등장하는 구멍은 이전의 구멍과 다른 구멍 사용자가 두더지를 잡을 수 있는 기회는 10번으로 제한 10번의 시도가 끝난 후→**(잡은 두더지 숫자 /10) X 100** 으로 계산하여 사용자의 점수를 화면에 표기 점수가 표기된 후, 사용자에게는 "재시작" 버튼 나타나게 함 "재시작" 버튼을 누를 경.. 2023. 5. 4.
[JS] 이벤트 버블링, 캡쳐링에 대해 설명해주세요. 1. 이벤트 전파 DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파되는데 이것을 이벤트 전파라고 한다. 캡처링단계 → 타깃단계 → 버블링단계 순서로 전파된다. 2. 이벤트 전파가 있는 이유 그럼 왜 이렇게 복잡하게 이벤트가 구성되어져 있을까? 이에 대해서 대표적으로 다음 두가지 이유 정도 뽑을 수 있을 것이다. - 논리적인 이유 자식 요소가 부모 요소 영역 안에 위치하고 있기 때문에 자식 요소만을 클릭하였다 하더라도 부모 요소도 클릭한 셈이 되기 때문이다. 만일 위의 그림에서 타겟인 button 영역을 클릭해도 div영역 안에 있기 때문에 논리적으로 div 영역의 이벤트도 같이 발생하는 것이 옳을 것이다. - 성능적인 이유 이벤트 등록 코드를 줄일 수 있다. 3. .. 2023. 5. 3.
[JS] 호이스팅에 대해서 설명해보세요. 변수 호이스팅(Variable Hoisting) 다른 C-family 언어와는 차별되는 자바스크립트의 특징으로 모든 선언문은 호이스팅(Hoisting)되기 때문이다. 호이스팅이란 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다. 즉, 자바스크립트는 모든 선언문(var, let, const, function, function*, class)이 선언되기 이전에 참조 가능하다. 변수가 어떻게 생성되며 호이스팅은 어떻게 이루어지는지 좀더 자세히 살펴보자. 변수는 3단계에 걸쳐 생성된다. 자세한 내용은 Execution Context을 참조하기 바란다. **선언 단계(Declaration phase)**변수 객체(Variable Object.. 2023. 5. 3.
[JS]참조형 데이터에 대해서 설명해보세요. 참조형 데이터 object type을 객체 타입 또는 참조 타입이라 한다. 참조 타입이란 객체의 모든 연산이 실제값이 아닌 참조값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable), 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다. 따라서 객체 타입은 동적으로 변화할 수 있으므로 어느 정도의 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다. 이에 반해 원시 타입은 값(value)으로 전달된다. 즉, 복사되어 전달된다. 이를 pass-by-value라 한다. // Pass-by-reference var foo = { val:.. 2023. 5. 3.
[JS] 얕은 복사와 깊은 복사에 대해서 설명해보세요. 데이터 타입 원시타입 : 변수에 주소 할당, 값을 재할당 하는 것은 메모리에서 데이터를 바꾸는 것이 아니라 메모리 주소를 바꿈 그래서 원시타입 데이터는 불변성을 가짐 객체타입 : 프로퍼티 키와 프로퍼티 값이 각각 메모리 주소로 메모리에 저장되어 있고 그 메모리 주소로 가면 프로퍼티 키에 대한 메모리 주소가 또 있음 그래서 중간 주소를 변경하면 값이 변경됨 그래서 참조형 데이터라 불리고 변경이 가능함 객체타입에서 복사 얕은 복사 바로 아래 단계 값만 복사 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다는 의미 즉, 사본을 바꾸면 원본도 바뀜 깊은 복사 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법 깊은 복사를 수행하는 함수 let copyObjectDeep = f.. 2023. 5. 2.

티스토리툴바