프론트엔드 기술 면접 질문&답변

안녕하세요 흥미진진입니다 ヾ(•ω•`)

제가 기술 면접을 준비하면서 공부했던 질문과 그에 맞는 답변을 보여드릴게요!

(비록 기술 면접은 보지 않게 됐지만)

 

브라우저의 동작 과정

1. 주소를 입력하면 서버에 요청이 전송됨

2. 페이지에 존재하는 자원들이 보내짐

3. 렌더링 엔진이 html과 css를 파싱함

4. 이 2개를 연결시켜 렌더 트리를 만듦

5. 화면에 배치를 시작

6. 빠른 브라우저 화면 표시를 위해 일부분 먼저 진행하고 화면에 표시함

 

 

함수형 프로그래밍

순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여

변수의 상태 변경을 피하려는 프로그래밍 패러다임

 

 

순수 함수

같은 입력이 주어지면 같은 출력을 반환하고 프로그램의 안정성을 높이는 함수

 

 

AJAX

- 자바스크립트를 이용하여 비동기적으로 서버와 브라우저가 데이터를 교환하는 통신 방식

- 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있음

 

즉, 갱신이 필요한 부분만 로드하여 갱신하면 되므로 빠르고 부드러운 화면 효과를 볼 수 있음

 

 

Promise

- 비동기 처리에 성공하면 resolve 메소드를 호출해서 비동기 처리 결과를 후속처리 메소드로 전달

- 비동기 처리에 실패하면 reject 메소드를 호출해서 에러 메시지를 후속처리 메소드로 전달

 

 

async, await

- Promise를 더욱 쉽게 사용할 수 있는 ES8 문법

- 에러 처리를 잡기 위해 try-catch문을 사용해야함

- 동기적인 코드 흐름으로 개발 가능

 

 

undefined와 null

undefined : 선언만 되어 있고 값은 없음

null : 변수에 null을 할당하여 값이 없다는 것을 나타냄

 

 

실행 컨텍스트

- 자바스크립트의 코드가 실행되고 변수 객체, 스코프 체인, this 정보들을 담고 있는 곳

- 전역 컨텍스트 하나 생성 후에 함수 호출할 때마다 함수 컨텍스트가 생성

- 함수 실행이 끝나면 해당 컨텍스트는 사라짐 / 페이지가 종료되면 전역 컨텍스트가 사라짐

 

 

호이스팅

변수를 선언하고 초기화했을 때 선언 부분이 최상단으로 끌어올려지는 현상

ex)

console.log(a);
var a=1;
===========> undefined

 

클로저 (Closure)

자신이 생성될 때의 환경을 기억하는 함수, 주로 정보를 은닉할 때 사용

 

 

프로토타입

- 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거함

- __proto__ 접근자 프로퍼티 : 자신의 프로토타입 내부 슬롯에 접근할 수 있음

 

 

 

this의 바인딩

1. 기본 바인딩 :　전역 객체(Window)가 context 객체

2. 암시적 바인딩 : 어떤 객체를 통해 함수가 호출되면 그 객체가 this의 context 객체가 됨

3. 명시적 바인딩 : 함수 객체는 call, apply, bind 메소드를 갖고 있는데, 첫 번째 인자로 넘겨주는 것이 this context가 됨

4. new 바인딩 : new로 객체를 생성

 

 

var, let, const

var는 함수 레벨 스코프 / let, const는 블록 레벨 스코프

const는 값의 재할당이 불가능

 

 

post, get

post : 서버로 데이터를 보내는 것 / 브라우저 기록에 안 남음 / 데이터 길이에 제한 없음

get : 리소스에서 데이터를 요청하는 것 / 브라우저 기록에 남음 / 데이터 길이에 제한 있음

 

 

post, put

put : 동일한 자원을 여러 번put 하면 변화가 생기지 않음

post는 insert 개념 / put은 update 개념

 

 

Rest API

Rest 아키텍처의 제약 조건을 준수하는 프로그래밍 인터페이스

Rest는 Representational State Transfer의 줄임말 / HTTP의 하위 집합을 사용하는 아키텍처의 한 종류

 

 

inline, block, inline-block

inline : 줄 바꿈 없이 필요한 만큼만 너비를 차지해서 다른 요소들과 나란히 배치됨

block : 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 차지함

inline-block : inline처럼 줄바꿈없이 나란히 배치되지만 inline에서 불가능하던 너비와 높이 지정이 가능하고 margin과 padding값을 줄 수 있음

 

 

props, state

props : 데이터가 변할 수 없음

state : 컴포넌트 내부에서 선언되기 때문에 데이터가 변할 수 있음

 

 

자바 스크립트, 타입 스크립트

자바 스크립트 : 동적 타입 / 런타임 속도 빠름

타입 스크립트 : 정적 타입 / 컴파일 시 시간이 좀 걸리더라도 안정성 보장

 

 

Git 충돌 발생 시

1. git checkout으로 main브랜치로 이동하고

2. git pull로 원격 저장소의 최신 변경 사항들을 로컬 저장소로 불러옵니다.

3. git checkout으로 충돌이 발생한 브랜치로 이동하고

4. 로컬 저장소와 merge 해줍니다.

5. 충돌이 발생한 부분을 수정하고

6. add, commit, push, pull request를 하면 됩니다.