[Frontend] 프론트엔드 주니어 개발자 면접 질문 (기술/인성)

 

 

 

 

• Junior Frontend Developer로 면접을 보면서 자주나왔던 질문들을 정리한 내용입니다.
• 빈도 상(빨강) / 중(노랑) / 하(초록)으로 구분하였습니다.
• 큰 틀을 정리하는 차원에서 기본적인 내용만 기록했습니다.
• 자세한 사항은 추가 검색으로 정리하시길 바랍니다.

 

 

 

 

HTML 

 

 

html?

HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)
우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.

- 마크업 언어(markup 言語, markup language)

   태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어입니다.

- 마크다운 언어는 마크업 언어의 일종으로 우리가 흔히 사용하는 .md 확장자의 파일입니다. (Readme.md)

 

 

 

 

 

---

 

 

 

 

 

 

JavaScript

 

 

 

자바스크립트?

- 자바스크립트는 객체기반의 스크립트 언어입니다.

- html로 웹내용을 작성하고 css로 디자인하며, 자바스크립트로 동적이게 만듭니다.

- 싱글스레드 언어입니다.

   (스레드 : cpu의 기본단위이며, 프로세스 내에서 프로그램 명령을 실행하는 기본단위이자 흐름이라고 할 수 있다.)

   싱글스레드 :   하나의 프로세스에서 하나의 스레드를 실행한다. 여러개의 cpu를 활용하지 못한다.

 

 

 

 

https://manon-kim.tistory.com/entry/JS-JavaScript-%EA%B0%9C%EB%85%90-%EB%8F%99%EC%9E%91%EB%B0%A9%EC%8B%9D-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84

[JS] JavaScript 개념 / 동작방식 (자바스크립트 엔진)

 

 

 

 

 

ES6에 추가된 문법

const, let

arrow function

template literals(탬플릿 리터럴) - 백틱사용하여 문자열 내에서 변수사용가능합니다.

구조분해할당

import export 

promise

spread 연산자

 

 

 

 

 

동기와 비동기

동기 : 요청을 보낸 후 기다렸다가 해당 응답을 받아야 다음 동작을 실행
비동기 : 요청을 보낸 후 응답에 관계 없이 순차적으로 다음 코드를 먼저 실행하는 것입니다.

 

 

 

 

 

callback함수

es6 이전에 비동기 상황에서 순차적으로 코드를 실행하기 위해서 callback을 사용했다.

콜백함수는 간단하게 함수안에 들어가는 함수라고 할 수 있다.

 

콜백함수는 일명 callback 지옥이라고 하는데 호출의 중첩이 일어나서
코드가 깊어지고, 파일의 갯수가 늘어날수록 코드의 가독성이 떨어지고

모든 콜백함수에서 각각 에러 핸들링을 해줘야하는 단점이 있습니다.
이 콜백함수의 단점을 보완한 것이 promise입니다.

 

 

 

Promise

promise객체를 생성하여 비동기 작업이 완료된 후 성공,실패 결과값을 받아 이후처리를 쉽게 컨트롤 할 수 있습니다.

인자로 들어온 함수는 resolve 비동기처리 성공과 reject 비동기처리 실패 2개의 함수를 인자로 받아서

성공시 then 메소드. reject시 catch의 메소드 를 실행합니다.
promise chaining으로 깔끔한 코드 작성가능하며
하나의 catch만으로 상위에 체이닝되어있는 어떤 함수에서 에러가 나더라도 에러핸들링가능합니다.

new Promise()로 생성하고 종료될때까지 3가지 상태 
 pending : 비동기 처리 미완료 - ful,rej이전
 fulfilled: 비동기 처리 성공 resolve호출
 rejected : 비동기 처리 실패, 오류 - reject 호출
 

 

 

 

 

async/await

• ES8 추가로 도입되었고, 함수앞에 async를 선언하면 promise object가 저절로 생성된다.
  async를 선언한 함수안에서 await 사용할 수 있다.
  await 함수의 작업 끝나고 결과값 반환 할 때 까지 대기하게 되며 결과값이 리턴된다면 다음작업으로 넘어간다.
• await는 실패하면 에러가 나고 코드가 멈추기때문에 이 때 try~catch를 사용한다.

 

 

 

 

https://manon-kim.tistory.com/entry/JS-%EC%B0%B8%EA%B3%A0-stack-Queue?category=1037367 

[JS] 비동기 / Promise / async.await

---

 

 

 

 

var / let / const

var는 변수네임 중복선언 가능하며, 전역함수 외부에서 생성한 변수는 모두 전역변수가 됩니다.

또한 변수 호이스팅 현상이 일어나서 변수를 선언하기 이전에 참조가 가능합니다.

이러한 var의 특징은 여러 문제를 발생시켜서

 

es6에서 let과 const로 이러한 문제를 해결하였습니다.

let은 변수 중복 선언이 불가능하지만, 재할당은 가능하고,

const는 중복 선언과 재할당 모두 불가능합니다.

또한, let과 const 둘다 블록 레벨 스코프를 가집니다. (코드 블록 내부에서 선연한 변수는 지역변수이다)

 

 

https://manon-kim.tistory.com/entry/JavaScript-ES6

[JS] JavaScript ES6 - var / let / const

 

 

 

 

 

 

scope

우리가 변수 혹은 함수를 선언하게될 때 하당 변수 또는 함수가 유효한 범위를 의미합니다.

스코프는 전역, 함수, 블록 스코프 세가지가 있습니다.

전역은 모든 범위에서 아용가능하며, 함수는 함수안에서, 블록은 특정 블록 내부에서만 사용가능합니다.

 

 

 

 

Hoisting

호이스팅은 아직 선언되지않은 함수나 변수를 끌어올려서 사용하는 자바스크립트의 동작방식을 이야기합니다.

 

 

 

 

 

화살표함수와 일반함수의 차이?

- 자바스크립트에서 모든 함수는 함수내부에 this라는 객체가 추가됩니다. 

일반함수는 함수를 호출할때 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다.

화살표함수는 함수는 정적으로 결정되는데 언제나 함수가 정의된 외부의 this를 가르킵니다.

- 화살표 함수에서는 arguments가 전달되지 않습니다.

- 일반함수는 생성자 함수로 사용할 수 없으나,

   화살표함수는 (prototype 프로퍼티를 가지고 있지않아서) 생성자 함수로 사용가능합니다.

 

 

 

 

this

this는 자신이 속한 객체나 자신이 생성한 인스턴스를 가리키는 자기 참조변수입니다.

(인스턴스 : 생성자함수constructor를 사용하여 생성된 객체)

this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있습니다.

하지만 this는 객체의  메서드 내부 또는 생성자 함수 내부에서만 의미가 있습니다.

this를 전역에서 사용한 경우 항상 window를 참조합니다.

 

 

https://manon-kim.tistory.com/entry/JS-this?category=1037367 

[JS] this

 

 

 

 

바인딩?

식별자와 값을 연결하는 과정을 말합니다.

this의 바인딩은 this와 this가 가리킬 객체를 연결하는 것입니다.

 

 

 

 

map / forEach

둘다 배열의 요소를 반복하는 함수이며,

둘의 차이점은 forEach는 각각의 요소에 대해 callback을 실행하고 값을 반환하지않지만,

map은 callback함수를 인자로받아 새로운 배열을 생성합니다.

 

 

 

 

 

 

Axios

axios는 브라우저, node.js를 위한 promise API를 활용하는 http 비동기 통신 라이브러리입니다.

(백이랑 프론트 통신 쉽게하기위한것)

fetch와 다르게 따로 설치를 해야하지만 여러 장점이 있다.

요청응답을 json형태로 자동변경, 요청을 취소할 수 있고 타임아웃을 걸거나, http 요청을 가로챌수 있는 등)

 

 

 

 

 

 

---

 

 

 

 

 

React

 

 

 

React란?

UI를 구축하기위한 자바스크립트 라이브러리입니다.

프레임워크가 아니고 라이브러리라 다른 프레임워크에 간편하게 붙여서 사용가능합니다.

SPA이며 component를 기반으로하여 모듈형으로 ui를 구성합니다.
컴포넌트 기반이라 생산성과 유지보수가 용이하며, virtual DOM으로 인해 앱의 효율성과 속도가 빠릅니다.

 

 

 

 

 

React의 특징

- react는 mvc 프레임워크는 아니고 View만 신경쓰는 라이브러리입니다. 
- 리액트는 단방향 데이터 흐름으로 데이터 변경에  관한 DOM객체만 변경해주는 체계입니다.
    데이터가 변경되면 양방향 데이터 바인딩처럼 모델 변경 > 뷰변경이 아니라 특정함수를 실행시킴으로써 DOM객체를 갱신합니다.

- virtual DOM

- props / state

- JSX

    : javascript extension. 즉, js를 확장한 문법으로 react에서 html을 표현할 때 사용합니다.

     외관상 html같은데, 빌드시 babel에 의해 js로 변환됩니다.

     ( 규칙 : 속성명은 camelcase, 반드시 하나의 태그로 감싸져 있어야하며,

        중괄호{} 넣어서 자바스크립트 표현식 활용가능, self-closing tag가능  등 )    

 

 

 

 

component

독립적인 단위의 소프트웨어 모듈로써 소프트웨어를 독립적인 하나의 부품으로 만드는 방법입니다.

리엑트는 기능이나 UI단위로 컴포넌트를 만들어, 이 compo를 조립해서 화면을 구성하므로,

재사용성이 높으며, 코드의 유지보수, 관리가 용이하다는 장점이 있습니다.

 

 

 

 

props / state

props는 부모컴포넌트에서 자식컴포넌트로 데이터를 전달하는 것을 말하며 props는 읽기전용입니다.

state 컴포넌트 내부의 동적 데이터를 의미하며 컴포넌트 안에서 데이터를 변경할 수 있습니다.

 

 

 

 

 

useEffect

react component가 렌더링 될 때마다 특정작업 (side effect)을 실행할 수 있도록 하는 react hook 입니다.

(side effect는 컴포넌트가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 의미합니다)

useEffect를 사용하여서 함수형 컴포넌트에서도 class형 component에서 사용했던 life cycle을 사용할 수 있습니다.

 

 

 

 

 

React lifeCycle

componentDidMount : 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행합니다. (useEffect 빈배열시)

componentDidUpdate : 컴포넌트가 리렌더링 될 때. 즉, render()가 업데이트 될 때마다 실행됩니다.

componentWillUnMount : 컴포넌트를 DOM에서 제거할 때 실행합니다. ( useEffect에서 cleanup함수 -return)

 

component의 생명주기이다. 생성되고, 관련된 state가 변경되면 재렌더링 즉, 업데이터가 일어날 수 있고,

제거될 때 특정한 이벤트들이 발생한다.

 

 

 

 

 

 

Re-rendering

react에서 re-rendering이 되는 경우는

1. props나 state가 변경이 되었을 때

2. 부모 컴포넌트가 렌더링이 될 때. 

3. forceUpdate를 실행하였을 때

 

 

 

 

 

 

CRA란?

[Create React App]
리액트는 라이브러리이기때문에 UI 기능만 제공하고 개발자가 직접 구축해야하는 것들이 많습니다.
때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있으므로,
이러한 문제를 해결하기 위해 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함된것이 CRA입니다.

CRA를 이용하면 개발 환경 세팅을 해주기 때문에

기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 된다.

 

 

 

 

 

SPA란?

[Single Page Application]

SPA는 하나의 페이지에 웹에 필요한 모든 정적 리소스를 처음에 한번에 다운로드합니다.

(기존의 웹은 페이지 이동시마다 서버에서 html 파일을 받아서 새로고침하여 브라우저에 반영을 시켰는데)

페이지 이동시 변경되는 부분만 server에서 json으로 받아서 업데이트하므로 새로고침이 발생하지않습니다.

 

페이지의 필요부분만 업데이트하기때문에 트래픽이 적고 이동속도가 빠릅니다.

모듈화나 컴포넌트화를 통해 유지보수가 쉽고 개발속도도 빠르게된다.

단점은 리소스를 초기에 다 다운받기 때문에 초기 구동속도가 느리며,

seo측면에서 불리하다. ( webpack의 code splitting이나 lazy loading, SSR로 개선)

 

 

 

 

 

 

CSR과 SSR

SPA는 하나의 html에 자바스크립트가 동적으로 생성하여 페이지를 구성하는데,

이 동적생성이 만들어지는곳이 client면 CSR, server라면 SSR입니다.

 

CSR (Client side rendering)은 브라우저 최초 요청에서 html, js, css순으로 로드되는데

최초로 불러온 html은 비어있게 되고, 그 후 빈 html파일에 js가 다운로드 완료되면 dom을 빈 html위에 그리기 시작합니다.

CSR장점은 최초 호출때에 html, css, js를 요청하고 그 이후에는 화면에서 변화가 일어나는 만큼의 데이터만 요청하게되어

웹서버 호출을 최소화 할 수 있다는 점입니다.

반면 단점은 최초 호출 시 html이 js가 들어오기전까지 비어있게되어 SEO측면에서 좋지않다는 점입니다.

 

SSR (Server side rendering)은 서버에서 첫 페이지의 렌더링을 처리해주며, html을 각 req가 일어날 때 생성합니다.

CSR의 단점인 첫 페이지 깡통상태를 극복할 수 있어서, SEO측면에서 유리합니다.

또한, CSR에 비해 페이지 구성속도는 늦지만, 전체적으로 보여지는 콘텐츠 구성완료 시점은 빨라서 UX측면에서 유리합니다.

 

 

 

 

 

 

virtual DOM ?

virtual DOM은 가상돔으로 이벤트가 발생할 때 마다 virtual DOM에 렌더링을 하고,

기존의 실제 real DOM과 전후상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM(real DOM)에 업데이트 하는 것입니다.

 

DOM전체를 매번 re-rendering했던 방식에비해 빠르며,

app의 규모가 클수록, 데이터의 변경이 많을수록 앱의 효율성과 속도가 개선됩니다.

 

 

 

 

 

 

 

 

 

https://manon-kim.tistory.com/entry/React-State?category=1045016 

[React] React 동작원리 ( + useMemo / useCallback )

https://manon-kim.tistory.com/entry/NextJS-Pre-rendering?category=1088969 

[Next.JS] Pre-rendering (CSR/SSR)

 

 

 

 

Redux

• Redux란?
• Redux의 장점?
• 어떤 상황에서 Redux를 쓰면 좋고 왜 그런지?
• Redux와 비슷한 다른 것들을 써보았는지?
  • 써보았다면 어떤것을 써보았고 redux와 다르게 어떤 장단점이 있었는지?

 

https://manon-kim.tistory.com/entry/React-Redux-1?category=1045016 

[Redux] Redux & Redux-toolkit

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

TypeScript

 

 

 

타입스크립트의 특징

1. 컴파일 언어, 정적 타입언어
   자바스크립트는 동적타입의 언어로 런타임에서 오류를 발견하고,

   타입스크립트는 정적타입의 컴파일 언어로 코드 작성단계에서 타입을  체크해 오류를 확일할 수 있고,

   미리 타입을 경정하기 때문에 실행속도가 빠릅니다.

2. 자바스크립트 superset

    자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다.

3. 객체지향 프로그래밍 지원

es6를 포함하여 class, instance, 상속 같은 객체지향 프로그래밍 패턴을 제공합니다.

 

 

 

 

 

타입스크립트 도입 장/단점?

코드 작성시 매번 타입을 결정해야해서 번거롭고 코드량이 증가하며 컴파일시간이 오래걸린다는 단점이 있습니다. 

장점은 자바스크립트와 100% 호환되며, 코드에 목적을 명시하고 목적에 맞지않는 타입의 변수나 함수들에서 

에러를 발생시켜 버그를 사전에 제거하고, 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다는 점입니다.

 

 

 

 

 

 

https://manon-kim.tistory.com/entry/TS-TypeScript-Basic?category=1064633 

[TS] TypeScript Basic

 

 

 

---

 

 

 

 

 

 

CS & 개발 기본용어

 

 

 

 

MVC 프레임워크?

 Model, View, Controller로 하나의 app을 구성할 때 그 구성요소를 세가지 역할로 구분한 패턴입니다.
 
 - model : 데이터 가공을 책임지는 컴포넌트를 말합니다.
 - view : 데이터 기반으로 사용자들이 볼수 있는 UI를 말합니다.
 - Controller : 데이터와 사용자인터페이스 요소들을 잇는 다리역할을 합니다. 
    즉, 사용자가 데이터를 클릭하고, 수정하는 것에 대한 "이벤트"들을 처리하는 부분을 뜻합니다.
 
 
 서로 분리되어 각자의 역할에 집중할 수 있게끔하여 개발을 하고 그렇게 애플리케이션을 만든다면, 
 유지보수성, 애플리케이션의 확장성, 그리고 유연성이 증가하고, 중복코딩이라는 문제점 또한 사라지게 되는 것입니다.
 MVC패턴은 결국 "어떻게 나눌 것인가"에 대한 해답 중 하나입니다. 
 어떤 특정한 역할들에 대해 역할분담을 할 때 가이드라인을 제시하는 방법 중 하나가 MVC패턴입니다.

 

 

 

 

 

library - Framework

라이브러리는 프로그램 기능 수행을 위해 활용가능한 도구들의 집합이며,
프레임워크는 뼈대나 기본구조가 구축되어있는 것입니다.

앱의 flow를 누가 가지고있느냐의 차이가 있습니다.

내가 만들어 놓은곳에 불러다가 가져다 쓰는것이 라이브러리고, 
기본틀로 삼아서 그위에 덧붙여 만드는게 프레임워크 입니다.

 

 

 

 

 

CRUD 

create, read, update, delete로 대부분의 소프트웨어가 가지는 기본적인 데이터 처리기능을 묶어서 말하는 것입니다.

 

 

 

 

 

HTTP / HTTPS

hyperText Transfer Protocol은 서버와 클라이언트간 데이터를 주고받기위한 프로토콜입니다.

https는 http에 데이터 암호화가 추가되어 보안의 기능이 생긴것입니다.

 

 

 

 

API

Application programming interface로 

응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스입니다.

( 응용프로그램에서 데이터를 주고받기위한 방법)

 

*interface
서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점 or 경계면
즉, 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템
(다른 두개의 객체가 어떻게 서로 소통할 것인가

 

 

 

 

 

 

Restful API

Representational State Transfer로 자원을 이름으로 구분하여 해당자원의 상태를 주고받는것을 의미합니다.

http URL을 통해 자원을 명시하고, http method(post,get,put, delete)를 통해 해당자원(url)에 대한

CRUD operation을 적용하는 것을 의미합니다.

 

 

 

 

 

 

CLI

Command Line Interface 명령줄 인터페이스

: 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식 (ex. mac의 터미널을 사용하는 것)

글자의 입력과 출력을 통해서 사용자와 컴포

 

 

 

GUI

Graphic User Interface

 

 

 

 

---

 

 

 

 

 

 

인성/일반

 

 

 

• 왜 개발자가 되려고 했는가?
• 왜 이직하였는가?
• 지난 회사에서는 어떤 일을 했었나?

 

• 본인의 장단점은?
• 회사에 꼰대가 있다면 어떻게 대처하는가?
• 팀원(상사)이 부당한 일(일을 떠민다던가)을 시킨다면 어떻게 대처할 것인가?
• 회사일과 개인적인 일이 겹친다면 어떻게 대처할 것인가?

 

• 부트캠프에서 무엇을 배웠나? 커리큘럼에 대해?
• 팀 프로젝트를 진행해보았는지? 프로젝트에 대해 설명
  
• git을 어느정도 활용할 줄 아는가?
• 프로젝트에서 주로 어떤역할?
• 프로젝트에서 의견충돌이 발생한다면 어떤식으로 해결?

 

• 어떤 방식으로 개발공부를 시작하고 진행해왔는가? 지금은 어떻게 하고있는가?
• 코드작성시 막히는 부분히 생기면 어떻게 해결하는가?
• 공식 문서는 보는지? 언제 보는지?

 

• 지원한 이유?
• 우리(면접보러 간 회사) 서비스를 이용해 보았는 지?
• 어떤점이 좋았는지? 아쉬웠는지?

 

 

 

• 역으로 면접관에게 질문할 것 5개정도 준비
• 회사 도메인 지식 충분히 검색, 이용해보고 가기