분류 전체보기 669

바닐라 js에서 생성자의 역할

전체적 바닐라 js의 구성 그림 바닐라 js를 통한 코드 작성은 index.html의 요소를 main.js 라는 애가 controller로 우선 하나씩 생성자 하나씩으로 자기의 하위 생성자를 자신의 하위 속성으로 만들면서 거기에 각 태그와 연결지어넣고 그 연결지을 때마다 메소드를 구현하는 것. 그리고 controller를 통해서 서버나 db와 잇기도 한다. DOM 요소와의 연결: index.html에 정의된 DOM 요소들을 자바스크립트 파일(예: main.js)에서 선택하여 사용합니다. 이를 위해 document.querySelector와 같은 DOM API를 사용하여 HTML 문서의 요소들을 자바스크립트 객체로 가져옵니다. 이 과정을 통해 웹 페이지의 구조(HTML)와 행동(JS)을 연결지어 줍니다. ..

자식 클래스 안에서 부모 클래스의 메소드 호출은 자식 클래스의 메소드 안에서

super 키워드를 사용하여 부모 클래스의 메소드를 호출하려면, 반드시 자식 클래스의 메소드 내에서 이를 수행해야 합니다. 자바스크립트에서 super 키워드는 오직 두 곳에서만 사용될 수 있습니다: 생성자 내부에서, 부모 클래스의 생성자를 호출하기 위해. 메소드 내부에서, 부모 클래스의 메소드를 호출하기 위해. 자바스크립트에서 클래스의 메소드를 정의할 때, 해당 메소드 내부에서만 super를 사용할 수 있습니다. 호출이 어떤 메소드의 내부나 생성자 내부에서 이루어지지 않고, 클래스의 메소드 정의 영역에서 직접적으로 이루어지려고 하고 있습니다 자바스크립트에서는 이러한 방식으로 부모 클래스의 메소드를 직접 호출할 수 없습니다. 따라서 super.show(); 호출은 유효한 문법이 아니며, 이로 인해 코드가 ..

View와 Controller의 관계

왜 View의 reset 내용을 Controller로 보내는가? MVC 패턴에서 View는 단순히 사용자 인터페이스를 표현하고 사용자의 입력을 감지하는 역할을 합니다. 사용자의 액션에 대한 실제 로직 처리는 Controller가 담당합니다. 이렇게 함으로써, View와 비즈니스 로직을 분리하여 View를 다양한 환경에서 재사용할 수 있게 하고, 애플리케이션 로직을 한 곳에 모아 관리하기 쉽게 합니다. Controller는 사용자의 입력과 상호작용을 받아들여서, 그에 따라 필요한 데이터 처리나 서버 통신 등의 작업을 담당합니다. MVC 패턴에서 Controller는 Model과 View 사이의 중재자 역할을 하며, 두 구성 요소 사이의 데이터 흐름을 관리합니다. 예시를 통한 서로의 연결의 필요성 및 과정 ..

질문5 프로토타입(Prototype) 기반 상속은 무엇인가요?

질문의도: 자바스크립트의 객체지향 프로그래밍 및 상속 메커니즘에 대한 이해도를 묻습니다.프로토타입이 무엇인가는 아래 내용을 참조.https://elecch.tistory.com/652 react 질문 모음내 답안 1. 가상돔을 통해서 좀 더 빠른 렌더링이 가능하지만 dom은 모든 노드, 태그들을 한번씩 렌더링 다 해줘야 함 dom 요소는 html객체로 prototype타입이 정해져 있지만 가상돔을 사용하는 react 요elecch.tistory.com면접 대답자바스크립트의 모든 객체는 `prototype`이라는 속성을 통해 다른 객체를 참조할 수 있습니다. 객체에서 필요한 메서드나 속성이 없을 경우, 자바스크립트는 프로토타입 체인을 통해 이를 찾습니다. 이 과정을 통해 객체는 프로토타입 체인 어디에 정의..

📋CS/기초질문 2024.04.04

클래스 컴포넌트 super란?

super()는 자식 생성자 안에 쓰여서 부모 생성자를 자식 안에서 호출하여 그 안의 내용을 쓸 수 있도록 한다. 아래 예시를 보면 qs(querySelector)임의 지정함수를 통해 index.js에서 요소를 불러옴. SearchFromView.js를 보게되면 아래에 느닷없이 element.js가 나오게 되는데 모두 super를 통해서 부모 클래스 View 생성자를 호출해서 그 매개변수(element)로 qs로 호출한 태그요소()를 element 변수 안에 저장해서 생성자를 불러온 것. 마치 jsx의 app.jsx에서 컴포넌트들을 세트로 데려올 때 상속에 상속을... 데이터를 props훅으로 전달하는 것과 비슷한 과정으로 여겨진다. 요약하면, super 호출은 상속받은 클래스의 생성자를 실행하는 데 사..

react 질문 모음

내 답안 1. 가상돔을 통해서 좀 더 빠른 렌더링이 가능하지만 dom은 모든 노드, 태그들을 한번씩 렌더링 다 해줘야 함 dom 요소는 html객체로 prototype타입이 정해져 있지만 가상돔을 사용하는 react 요소는 prototype타입이 Object로 타입이 정해져 있다. ※ 프로토타입(prototype) 객체: 새로운 객체가 생성되기 위한 원형이 되는 객체 Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용 2. state는 바뀌는 동적 데이터를 관리해주고, props는 상속을 통해 다른 컴포넌트에 전달가능 3. useState를 사용하는 직접 변수 선언을 통해서 할 수도 있지만, 모든 데이터를 한번에 관리하고 업데이트 하기 위함 4. state 값이 변경되었을 때

📋CS/기초질문 2024.04.02

질문4 이벤트 버블링(Event Bubbling)과 캡처링(Capturing)를 설명하세요

질문의도: DOM 이벤트 처리 과정과 이벤트 전파 방식에 대한 지식을 확인합니다. 면접 답변 "DOM에서 이벤트 버블링은 이벤트가 발생한 요소부터 상위 요소로 전파되는 과정이고, 캡처링은 최상단부터 이벤트 대상까지 이벤트가 내려가는 과정입니다. 이 두 방식을 활용함으로써, 우리는 이벤트를 효율적으로 관리할 수 있습니다. 예를 들어, 여러 버튼의 클릭을 한 곳에서 처리할 수 있고(버블링), 불필요한 이벤트 전파를 막을 수도 있습니다(캡처링)." 아래 내용 요약 정리 "이벤트 버블링과 캡처링은 DOM 이벤트의 전파 방식을 설명하는 개념입니다. 캡처링은 이벤트가 문서의 최상단에서부터 이벤트 대상까지 전달되는 과정이며, 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정입니다. 이 두 메커니즘..

📋CS/기초질문 2024.04.01

질문3 프로미스(Promise)와 async/await의 차이점은 무엇인가요?

프로미스(Promise)와 async/await의 차이점은 무엇인가요? 비동기 작업 처리 방법과 해당 개념들의 차이점을 이해하고 있는지 확인합니다. 대답내용 비동기 작업 처리에는 Promise와 async/await 두 가지 주요 방법이 있습니다. Promise는 비동기 작업의 완료를 대표하는 객체 async 함수는 Promise를 반환하고, 이를 통해 비동기 작업을 쉽게 관리할 수 있습니다. await는 async 함수 내에서 Promise의 완료를 기다리는 데 사용됩니다. 비동기 작업 처리에는 Promise와 async/await 두 가지 주요 방법이 있습니다. Promise는 비동기 작업의 완료를 대표하는 객체로, .then과 .catch 메소드를 통해 성공 또는 실패 시의 후속 처리를 할 수 있습..

📋CS/기초질문 2024.03.30

질문2 var, let, const의 차이점은 무엇인가요?

초점: 다양한 변수 선언 방식과 스코프, 호이스팅에 대한 이해를 묻는 질문입니다. 대답: var는 함수 스코프를 가지며 호이스팅 시 변수 선언만 최상단으로 끌어올려집니다.선언 전에 undefined로 되어있어 접근이 가능합니다. 반면, let과 const는 블록 스코프를 가지고, 호이스팅되지만 '일시적 사각지대'에 빠져 선언 전에는 접근할 수 없습니다.  let은 변수 재할당이 가능하지만, const는 초기 할당 이후 변수의 재할당을 허용하지 않습니다. 그러나 const로 선언된 객체 내부의 속성 변경은 가능합니다. (※ 호이스팅은 함수와 변수를 코드 실행전에 메모리에 저장하는 것. )상세설명1.var은 함수 스코프이다. 함수에서의 var변수 선언은 외부에서의 사용을 제한할 수 있지만if문 같은 블록스코..

📋CS/기초질문 2024.03.29