기술면접 질문 모음

티케이·2022년 6월 21일

취업준비

목록 보기
1/1
post-thumbnail

기술 면접을 위해 구글링을 통한 다양한 질문들을 모아놨다.
하루에 3번씩 매일 읽어야지...

알아야될게뭐이리많니...

PS. 원작자에 대한 정보는 게시글 최하단에 작성해놓겠습니다. 많은 선배들이 좋은 게시글들을 올려주셔서 오늘도 꼬맹이 개발자는 많은것을 배우고 갑니다. 감사합니다.

CS

브라우저 주소창에 www.google.com 을 입력하면 어떤일이 일어날까요?

DNS 에 google.com 을 요청하고,
해석 된 IP 주소를 HTTP 방식으로 서버에 요청하고,
해당 서버에서 코드를 응답해주면서 브라우저에 표시된다

디테일

DNS에 대해 설명해주세요

Domain Name System Servers
URL 들의 이름과 IP 주소를 저장하고 있는 DB로 웹사이트를 위한 주소록

디테일

GET 과 POST의 차이는 무엇인가요?

GET - 어떤 값이나 내용, 상태를 바꾸지 않은 경우에 서버에서 어떤 데이터를 가져와서 보여줄 때 사용.

클라이언트에서 서버로 리소스로부터 정보를 요청하기 위해 사용되는 method. 데이터를 읽거나(Read), 검색(Retrieve) 할때 사용

POST - 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용

리소스를 생성/업데이트 하기 위해 서버에 데이터를 보내는데 사용

REST API에 대해 설명해주세요

Representational State Transfer

두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용되는 인터페이스

HTTP URI를 통해 자원을 명시하고, HTTP Method(Post, Get, Put, Delete) 를 통해 자원에 대한 CRUD Operation 을 적용하는 것

객체 지향 프로그래밍이란?

컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법

장점

  • 코드 재사용이 용이
  • 유지보수가 쉬움
  • 대형 프로젝트에 적합

단점

  • 처리 속도가 상대적으로 느림
  • 객체가 많으면 용량이 커질 수 있음
  • 설계시 많은 시간과 노력이 필요

자료구조 stack 과 queue에 대해 설명해주세요

stack

쌓는 개념. 데이터를 차곡차곡 쌓아 올린 형태의 자료 구조.

  • 정해진 방향으로만 쌓을 수 있다
  • 새로 삽입되는 자료는 top 이 가리키는 가장 맨위에 쌓임
  • 자료를 삭제할 때도 top 을 통해 삭제 가능
  • 후입선출 / LIFO(Last In Fisrt Out)
    • 웹 브라우저 방문기록(뒤로가기)
    • 실행 취소(undo)
    • 후위 표기법 계산
    • 역순 문자열 만들기

Queue

큐의 한쪽 끝에는 삽입 작업, 다른 한쪽 끝에서는 삭제 작업이 나뉘어 이루어진다.

  • 삭제 연산 수행은 프론트
  • 삽입 연산은 리어에서
  • 선입선출 / FIFO(First In First Out)
    • 은행업무
    • 대기열 순서와 같은 우선순위의 작업 예약 등
    • 서비스 센터의 대기시간
    • 프로세스 관리

프로세스와 스레드에 대해 설명해주세요

프로세스 Process

  • 프로그램이 실행중인 상태를 칭함

스레드 Thread

  • 프로세스의 실행 가능한 가장 작은 단위

FrontEnd

브라우저 렌더링 과정 설명

  1. HTML, CSS, JavaScript, Image, Font, File 등 렌더링에 필요한 소스 요청, 서버로부터 응답 받는다

  2. 브라우저의 렌더링엔진은 서버로부터 응답 받은 Html, Css 를 파싱(parsing / 해석) 하여 DOM, CSSOM 을 생성하고 이들을 결합하여 Render tree 를 생성한다.

  3. 브라우저의 JavaScript 엔진은 서버로부터 응답된 JavaScript는 파싱(parsing / 해석)하여 AST 를 생성하고 바이트코드로 변환하여 실행
    이떄 JavaScript 는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다.
    변경된 DOM과 SOOM은 다시 Render tree 로 결합

  4. Render tree 를 기반으로 HTML 요소의 레이어앗울 계산하고 브라우저 화면에 페인팅

브라우저는 어떻게 동작하나요?

1. DOM 트리 구축을 위한 HTML 파싱

브라우저는 서버로부터 HTML 문서를 모두 전달 받고, 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing / 해석)하여 DOM 트리 구축. 외부 CSS 파일과 스타일 요도도 파싱

2. 렌더 트리 구축

DOM(Document Object Model) 트리와 스타일 정보를 합쳐 Render tree 를 만든다

3. 랜더트리 배치

Render tree 의 각 노드에 대해서 화면상에서 어디에 배치할 지 결정

4. 렌더 트리 그리기

UI 백엔드에서 Render tree 를 그리게 되고, 우리가 보는 화면 출력

Webpack, Babel, Polyfill 에 대한 설명

Webpack - 모듈 번들링, 필요한 다수의 JavaScript 파일을 하나의 JavaScript 파일로 만들어주는 것

Babel - JavaScript 컴파일러, 최신 JavaScript 문법을 모든 브라우저가 이해할 수 있는 문법으로 변환시켜주는 것

Polyfill - 브라우저가 지원하지 않는 JavaScript 코드를 지원 가능하도록 변환한 코드. 하위 브라우저가 지원하는 JavaScript 코드를 사용해 JavaScript 의 최신 기능을 똑같이 구현하는 방식

CSR 과 SSR의 차이는?

CSR - Client Side Rendering

클라이언트에서 먼저 렌더링이 이루워진다. 서버는 요청을 받으면 클라이언트에 HTML 과 JavaScript 를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다

SSR - Server Side Rendering

서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

SSR 의 단점 : 불필요한 부분까지 렌더링 된다
CSR 의 단점 : 초기 진입속도가 느리고 SEO에 취약하다

위 두가지 단점을 해결하기 위해 Next.js framework 가 생겼다

CORS는 무엇인지?

Cross-Origin Resource Sharing

교차 출럭 리소스 공유라는 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

쿠키와 세션에 대한 설명

웹 통신간 유지하려는 정보(ex: 로그인정보) 를 저장하기 위해 사용하는 것

쿠키 - 개인 PC에 저장 됨

웹 사이트 방문시, 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일
필요시 정보를 참조하거나 재사용할 수 있다

세션 - 접속중인 웹 서버에 저장됨

일정 시간동안 같은 사용자로부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 일정하게 유지시키는 기술

  • 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하는지?

  • 이벤트 루프와 테스크 큐에 대한 설명

  • bundle 의 사이즈를 줄이려면 어떻게 해야하는지?

  • TypeScript 를 사용하는 이유는?

  • 쿠키, 세션, 웹스토리지의 차이

  • 크로스 브라우징이란?

  • 웹 사이트 성능 최적화 방법

HTML, CSS

  • Flexbox 언제 사용하는지?

  • Cascading 이란?

  • CSS 애니메이션과 JS 애니메이션의 차이를 설명해주세요

  • position 속성을 나열해주세요

JavaScript

Promise 와 Callback 의 차이는?

둘 다 JavaScript 비동기 처리 를 위해서 사용되는 패턴이다.
callback - 함수의 처리 순서를 보장하기 위해서 함수를 중첩하게 사용되는 경우가 발생해 callback hell 이 발행하는 단점과 에러 처리가 힘들다는 단점이 있다.

promise - class 이며 상

  • Callback hell 의 해결 방법은?

  • async, await 사용 방법은?

  • Promise 를 사용한 비동기 통신과 async, await 를 사용한 비동기 통신의 차이는?

  • var, let, const 차이는?

  • 함수 선언형과 함수 표현식의 차이는?

  • 이벤트 버블링과 캡처링에 대한 설명

  • Closure 에 대한 설명

  • 렉시컬 환경에 대한 설명

  • 실행 컨텍스트에 대한 설명

  • 에 대한 설명

  • JS 에서 일어나는 데이터 형 변환에 대해 설명

  • JS 가 유동적인 언어인 이유는?

  • 프로토타입에 대한 설명

  • 깊은 복사와 얕은 복사의 설명

  • 불변성을 유지하는 방법은?

  • this 에 대한 설명

  • requestAnimationFrame 이란?

React

  • Virtual DOM 작동원리

  • Virtual DOM 이란?

  • React 를 사용하는 이유?

  • props 와 state 의 차이는?

  • 제어 컴포넌트와 비제어 컴포넌트의 차이는?

  • 클래스형 컴포넌트와 함수형 컴포넌트의 차이는?

  • 생명 주기 메소드 란?

  • React 에서 JSX 문법이 어떻게 사용되는지?

  • state 를 바꾸지 않고 useState 를 사용하는 이유는?

  • useMemo 와 useCallback 에 대한 설명

  • React 렌더링 성능 향상을 위해 어떻게 하는지?

  • Context API 에 대한 설명

Redux

  • Redux 를 사용하는 이유는?

  • Redux 의 장단점은?

  • Context API 와 Redux 의 차이는?

출처

xiubin 님 블로그 - 실제로 받은 프론트엔드 개발자 면접 질문 모음

profile
티케이
개발 컨닝 블로그

0개의 댓글