DOCTYPE은 무엇을 하나요?DOCTYPE은 document type의 약어입니다. DOCTYPE은 항상 DTD (Document Type Definition)와 관련됩니다.DTD는 특정 문서가 어떻게 구성되어야 하는지 정의합니다(예시: button은 span을 포함할 수 있지만, div는 그럴 수 없다.), 반면, DOCTYPE은 문서가 대략 존중할만한 DTD를 선언합니다. (예시: 이 문서는 HTML DTD를 존중한다.)웹 페이지는 DOCTYPE 선언이 필요합니다. 유저 에이전트에게 문서가 존중하는 HTML 사양의 버전을 알리는데 사용됩니다. 유저 에이전트가 올바른 DOCTYPE을 인식하면, 문서를 읽는데에 DOCTYPE과 일치하는 no-quirks mode를 트리거합니다. 유저 에이전트가 올바른..
이벤트 위임에 대해 설명하세요.이벤트 위임은 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 리스너는 DOM의 event bubbling으로 인해 하위 요소에서 이벤트가 발생될 때마다 실행됩니다. 이 기술의 이점은 다음과 같습니다.각 하위 항목에 이벤트 핸들러를 연결하지 않고, 상위 요소에 하나의 단일 핸들러만 필요하기 때문에 메모리 사용 공간이 줄어듭니다.제거된 요소에서 핸들러를 해제하고 새 요소에 대해 이벤트를 바인딩할 필요가 없습니다.참고자료https://davidwalsh.name/event-delegatehttps://stackoverflow.com/questions/1687296/what-is-dom-event-delegationthis가 JavaScript에서..
https://github.com/yangshun/front-end-interview-handbook GitHub - yangshun/front-end-interview-handbook: ⚡️ Front End interview preparation materials for busy engineers ⚡️ Front End interview preparation materials for busy engineers - GitHub - yangshun/front-end-interview-handbook: ⚡️ Front End interview preparation materials for busy engineers github.com
Array와 LinkedList의 차이가 무엇인가요? (N사 전화면접) Array는 Random Access를 지원한다. 요소들을 인덱스를 통해 직접 접근할 수 있다. 따라서 특정 요소에 접근하는 시간복잡도는 O(1)이다. 반면 Linkedlist는 Sequential Access를 지원한다. 어떤 요소를 접근할 때 순차적으로 검색하며 찾아야 한다. 따라서 특정 요소에 접근할 때 시간복잡도는 O(N)이다. 저장방식도 배열에서 요소들은 인접한 메모리 위치에 연이어 저장된다. 반면 Linkedlist에서는 새로운 요소에 할당된 메모리 위치 주소가 linkedlist의 이전 요소에 저장된다. 배열에서 삽입과 삭제는 O(N)이 소요되지만, Linkedlist에서 삽입과 삭제는 O(1)이 소요된다. 배열에서 메모..
이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요. (D사 화상면접) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어 가는 특성을 의미한다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다. event delegation에 대해 설명하세요. (D사 화상면접) 특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 이벤트 핸들러를 더 적게 등록해 주기 때문에 메모리도 절약할 수 있다. this는 JavaScript에..
class와 id의 차이점을 설명해 주세요. id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점이다. 하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능하다. 우선순위는 id가 class보다 높다. float가 어떻게 동작하나요? float 속성은 현재 위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. 이 때 컨텐츠는 float 속성이 적용된 요소의 주변에 위치하게 된다. 클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하나요? float 속성의 영향에서 벗어나기 위해 사용하는 clear 속성은 float의 특성을 지워주는 역할을 한다. 총 4가지 값이 있..
브라우저의 렌더링 과정에 대해서 상세하게 설명해달라 브라우저 주소창에 www.naver.com 치면 -> 네이버 서버를 찾아간다. -> DNS(실제 서버가 어디에있는지 알고 있는 서버)가 연결해줄 곳을 찾음 -> (여기서 주소 앞에 https가 붙었다면 https방식으로 통신하겠다.) -> 서버의 기본설정이 대부분 index.html되어 있어 서버에서 이파일을 클라이언트로 보냄 -> 브라우저는 텍스트로 이루어진 index.html 파일을 파싱한다. -> 한줄한줄 읽으면서 DOM트리를 만들어나감. -> 중간에 link태그를 만나 css요청이 발생하면, 요청과 응답과정을 거치고 css를 파싱함 -> CSS파싱이 끝나면 중단된 html을 다시읽고 DOM트리를 완성 -> 완성된 DOM트리와 CSSOM트리를 합쳐..
웹 개발을 한다면 backend/frontend 구별 없이 HTML, CSS, JS는 기본적으로 알고 있어야 합니다. React 개발 시에 ES6+ 에서 추가된 기능들이 자주 사용되므로 개념 정도는 공부해 둘 필요가 있습니다. HTML5 https://developer.mozilla.org/ko/docs/Web/HTML/HTML5 https://poiemaweb.com/ https://htmlreference.io/ CSS3 https://developer.mozilla.org/ko/docs/Web/CSS https://learnlayout.com/ https://cssreference.io/ SASS/SCSS https://sass-lang.com/ Javascript / ECMAScript 2015 ..