기술면접

기술면접

    [웹 프론트엔드 인터뷰] #4. useCallback과 useMemo는 언제 어떻게 사용하나요?

    오늘은 많은 분들이 사용은 하지만 헷갈리기 쉬운 useCallback과 useMemo에 대해서 이야기를 해볼까 합니다. 실제로 웹 프론트엔드 개발자 면접 질문에서 신입/경력 구분없이 단골로 나오는 인터뷰 주제 중 하나이기도 해요. 먼저 React 공식 문서에는 useCallback과 useMemo가 다음과 같이 설명이 나와 있어요. useCallback : Returns a memoized callback. 메모이제이션된 콜백을 반환한다. useMemo : Returns a memoized value. 메모이제이션된 값을 반환한다. 이 문장만 읽어서는 이해가 쉽지가 않습니다. 조금 더 살펴보도록 하겠습니다. useCallback과 useMemo 둘 다 공통적으로 가지고 있는 속성은 메모이제이션(Memoi..

    [웹 프론트엔드 인터뷰] #1. 자바스크립트 엔진은 어떻게 동작하나요?

    웹 프론트엔드 개발자라면 어떤 회사에서, 어떤 프로젝트를 맡아서 개발을 하든지 누구나 궁금해 할 수 있고 누구나 물어볼 만 한 질문들을 골라서 이에 대한 나의 나름대로 최선의 대답을 정리해 보는 포스팅을 연재해 보려고 한다.(반응이 좋으면 계속 연재해 볼 생각) 현업에 계신 많은 웹 프론트엔드 개발자들 그리고 새로운 꿈을 찾아 취업을 준비하는 학생 및 예비 개발자 분들에게 조금이나마 도움이 되기를 바라는 마음으로 글을 작성해 본다. 아직 2년차 웹 프론트엔드 개발자라 잘못된 지식을 알고 있거나, 깊이가 부족할 수 있는데 이러한 부분에 대해서는 날카로운 피드백을 해 주시면 정말 감사할 것 같다. JavaScript 엔진은 어떻게 동작하나요? 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인..

    DevOwen의 구직 이야기 Ch4. 기술 인터뷰

    코딩 테스트나 사전 과제 전형에 통과하고 나면, 그 다음으로 기술 인터뷰를 보게 된다. 나 같은 경우 온사이트 기술 인터뷰와 스크리닝 화상(또는 전화) 인터뷰 두 가지 형태로 보았던 것 같다. 요즘에는 코로나 바이러스 때문에 기술 인터뷰를 화상으로 보는 회사들도 있다. 스크리닝 인터뷰 스크리닝 인터뷰는 보통 온사이트 기술 인터뷰 보기 전에 지원자의 실력을 체크하는 용도로 30분~1시간 정도로 가볍게 진행한다. 뭔가 과제를 주는 경우보다는 이력서를 기반으로 질문을 하거나, 지원 분야에 관련된 기본적인 직무 지식을 물어본다. 나 같은 경우 웹 프론트엔드 분야로 지원을 했었는데, HTML, CSS, JS, 브라우저 및 웹 전반, FE 관련 라이브러리 등등에 대해서 물어보았던 것 같다. 간혹, 자료구조, 알고리..

    <FE면접질문> #6. 운영체제

    이번에도 CS Fundementals 중 하나인 운영체제 관련 질문들에 대해 정리해 보려고 한다. 운영체제 컴파일러와 인터프리터의 차이가 무엇인가요? (N사 전화면접) 컴파일러와 인터프리터 모두 고레벨 언어를 기계어로 변환하는 역할을 수행하지만 차이점은 컴파일러의 경우 전체 코드를 보고 명령어를 수집하고 재구성하는 반면, 인터프리터는 소스코드의 각 행을 연속적으로 분석하며 실행한다. 인터프리터는 고레벨 언어를 중간 레벨 언어로 한 번 변환하고 이를 각 행마다 실행하기 때문에 일반적으로 컴파일러가 인터프리터보다 실행 시간이 빠른 경우가 많다. java의 경우 .java 파일을 .class 파일로 자바 컴파일러가 컴파일을 하고, .class 파일을 기계어로 인터프리터가 변환하는 것이다. 프로세스와 스레드의 ..

    <FE면접질문> #5. 자료구조

    중견기업 이상에서 많이 물어보는 CS 기본기 인터뷰 질문 중 첫 번째로 자료구조에 대해서 정리해 보려고 한다. 자료구조 Array와 LinkedList의 차이가 무엇인가요? (N사 전화면접) Array는 Random Access를 지원한다. 요소들을 인덱스를 통해 직접 접근할 수 있다. 따라서 특정 요소에 접근하는 시간복잡도는 O(1)이다. 반면 Linkedlist는 Sequential Access를 지원한다. 어떤 요소를 접근할 때 순차적으로 검색하며 찾아야 한다. 따라서 특정 요소에 접근할 때 시간복잡도는 O(N)이다. 저장방식도 배열에서 요소들은 인접한 메모리 위치에 연이어 저장된다. 반면 Linkedlist에서는 새로운 요소에 할당된 메모리 위치 주소가 linkedlist의 이전 요소에 저장된다...

    <FE면접질문> #4. JavaScript (Part 2)

    지난 포스팅 #1. 웹 브라우저 & HTML #2. CSS #3. JavaScript (Part1) 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요. 클로저는 독립적인 변수를 가리키는 함수이다. 그리고 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저를 통해 은닉화를 할 수 있으며, 콜백 함수 등을 사용할 때 발생할 수 있는 에러를 해결하는데도 유용하다. function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); //myFunc변수에 displayName을 리턴함 //유효범위의 어휘적 환경을 유지 m..

    <FE면접질문> #3. JavaScript (Part 1)

    자바스크립트 관련 예상 질문은 양이 많아서 두 번에 나누어서 정리해 보려고 한다. JavaScript 이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요. (D사 화상면접) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어 가는 특성을 의미한다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다. event delegation에 대해 설명하세요. (D사 화상면접) 특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 ..

    <FE면접질문> #2. CSS

    이번 포스팅에서는 CSS 관련 예상 질문과 답변을 정리해 보고자 한다. CSS class와 id의 차이점을 설명해 주세요. id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점이다. 하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능하다. 우선순위는 id가 class보다 높다. float가 어떻게 동작하나요? float 속성은 현재 위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. 이 때 컨텐츠는 float 속성이 적용된 요소의 주변에 위치하게 된다. 클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하나요? float 속성의 영향에서 벗어나기 위해 사용하는 ..