hibiscus

프론트엔드 개발자 면접 질문 모음

hibscus — Tue, 1 Mar 2022 12:44:01 +0900

프론트엔드 개발자로 지원한 뒤 여러군데에서 면접을 보면서 받았던 질문을 정리해보았다.
특히 여러 번 받았거나 자주 나온 질문은 Bold와 //로 표시해놓았다.

알고있는 것이라 말하는 것의 격차가 커서 처음에는 질문 받았을 때 머리가 하얘지기도 했다.

계속 면접을 경험하다보니 단련되어서 대답봇처럼 대답을 수월하게 할수 있게 되었다. 또한, 면접을 통해서 다양한 개념과 기능, 문제해결방법에 대해서도 알수 있어서 좋았다.

이력서 기반

자기소개
최근 관심있는 기술은?
왜 비전공자인데 개발자가 되었는지?(직무전환 동기) ///
압박이 있었던 경험?
사수가 어떤 분이였으면 좋겠는지?
좋은 코드란?
새로운 기술을 어떻게 배우는지? //
회사내에 있으면 좋겠는 문화는?
의견을 직접적으로 말하는지, 간접적으로 말하는지
본인의 엣지 포인트는 무엇인지
관심있는 활동
가장 친한 커뮤니티
가장 많이 쓰는 앱 / 인상깊었던 기능
회사선택 기준 //
업무강도가 쎈데 어떻게 생각하는지?
동기부여를 어떻게 받는지?
5년뒤 혹은 앞으로의 목표 //

기술문제

자바스크립트

callback, promise 차이
async/ aswait 설명 및 사용하는 방법
클로져
호이스팅
바닐라 스크립트를 사용해서 프로젝트를 해본 적은 있는지?
바닐라 스트립트가 아닌 spa를 쓰는 이유?
- 1) 개발 생산성 2) 성능(virtual Dom)
CSR 과 SSR에 대해 설명 및 비교 //
Next.js 사용해보았는지?
쿠키, 세션, 로컬스토리지 //
CORS가 무엇이고 어떻게 해결했는지?
- 1) 백엔드에 헤더 추가 요청 2) 프록시 서버사용
프록시는 어떤 거 썼는지?
시큐어 코딩/ 보안해본적 있는지?
restful API에 대해 설명 //
사람들이 restful API를 사용하는 이유?
- 장점: 가독성이 좋고 목적이 뚜렷, 단점: 표준화된 기준이 없음
자바스크립트(스크립트언어)와 타입스크립트(컴파일 언어)의 차이
- 스크립트는 코드를 한줄씩 실행, 컴파일 언어: 번역과 실행이 따로 번역을 다 마친 뒤 실행 / 속도측면: 실행속도는 컴파일이 승

기능

무한스크롤 이전 페이지 스크롤 위치 기억하게 짜는 방법
- 페이지 위치와 스크롤 숫자를 저장해놓은 다음 불러와서 사용 but 이전데이터가 새로 가져왔을시 동일 데이터라는 보장이 있나?
캐시된 데이터 업데이트 하는 방법?
장바구니 수량 100번 요청시 효율적인 업데이트 방법?
- debounce: 함수가 여러번 호출시 일정시간 지나고 마지막 함수만 호출되도록 / throttle: 함수가 지정된 시간동안 최대한번 호출

react

redux에 대해 설명해주세요
왜 요새 redux를 안사용하는지? redux의 단점?
클래스형과 함수형의 차이
redux-persist 어떤 스토리지로 구현했는지

기타

grapQL에 대해 설명
ERD 풀 네임/ ERD가 무엇인지?
관계형 DB/ 비관계형 DB의 예

프로젝트

프로젝트에 대해 설명
- 기획 배경 보다는 스펙에 대한 것들을 만들고 어떤것을 내가 했고 어떤 것을 해결했는지에 대해 구체적으로 설명하면 좋을 것 같다.
- 핵심 기능에 대해서 설명해주기, 거래
프로젝트의 핵심 기능?
프로젝트에서 맡았던 역할?
프레젠테이셔널/ 컨테이널과 atomic 디자인 패턴 차이
다음 프로젝트에서는 어떤 걸 사용할지?
팀을 어떻게 짰는지?
온라인으로 어떻게 진행했는지
온라인으로 진행하면서 커뮤니케이션 오?해?
의사결정은 어떤 식으로 이루어졌는지?
코드리뷰 왜 도입했는지?
협업을 하면서 어려웠던 점?//
협업과정중 대립이 있었던 적?
QA는 어떻게 진행했는지?
QA 하면서 발견한 어려움은 무엇이었는지
atomic 패턴에 대해 어떻게 생각하는지 //
기여도에 대한 설명

chocolatey로 프로그램 쉽게 설치하는 법

hibscus — Sat, 4 Sep 2021 19:57:52 +0900

chocolatey란?

윈도우 패키지 매니저라고 생각하면 쉽다. chocolatey 를 통해 다양한 프로그램을 쉽게 다운 받을 수 있다.

크롬을 다운받기 위해 혹은 어도비 리더를 다운 받기 위해 귀찮게 사이트에 갈 필요없이 chocolatey로 해결가능하다.

여기서는 chocolatey를 통해 Windows Terminal을 설치할 것이다.

1) chocolatey 설치

chocolatey 설치 안내 페이지에서 커맨드 코드를 복사한다.

편의를 위해 설치 페이지에서 커맨드를 복사해서 아래에 붙여놓았다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

https://chocolatey.org/install 에 들어가면 캡쳐된 이미지 화면을 볼 수 있다.

관리자 권한으로 열어주고 Windows Powershell에 아래 명령어를 쳐서 chcolatey를 설치한다.

잘 깔렸다면 닫았다가 다시 관리자 실행으로 열어서 choco를 입력해 확인한다.

2) Window Terminal 설치하기

보다시피 Windows Powershell은 별로 안 예쁘다.

그래서 custom이 가능한 Windows Terminal을 사용하기 위해 chocolatey를 이용해서 Window Terminal을 설치해보자.

어떤 패키지를 이용해 설치할 수 있는 지가 궁금하면 https://community.chocolatey.org/packages 에서 확인할 수 있다.

위의 사이트에서 windows terminal을 쳐서 확인한다.

choco install microsoft-windows-terminal 명령어를 입력

그리고 Windows Powershell을 관리자 모드로 열어서 명령어를 통해 설치한다. 혹시 오류가 난다면 1) 관리자 모드로 열었는지 혹은 2) 이미 깔려있는 건 아닌지 를 먼저 체크해본다.

성공적으로 설치되었단 메세지를 확인한 뒤, Windows Terminal이 설치 되어 있음을 확인

이렇게 함으로써 간단하게 원하는 프로그램을 chocolatey로 설치해봤다.

[Git] git clone 시 warning

hibscus — Thu, 2 Sep 2021 12:09:01 +0900

git clone 시 파일들을 전부 다운하지 못하는 오류가 발생했다.

파일을 확인해보면 다운받지 못한 파일은 git 상에서 삭제된 상태로 나타나 있었다.

Clone succeeded, but checkout failed.

you can inspect what was checked out with 'git status'

and retry with 'git restore --source=HEAD :/'

자세히 메세지를 뜯어보니 이라는"Filename too long" 이라는 메세지가 있었다. 이는 파일 경로 길이가 260자로 제한되어 생긴 문제로 해결하기위해서는 아래의 명령어를 통해 git의 core.longpaths 설정을 true로 지정하면 된다.

git config --system core.longpaths true

[React] state와 ref의 차이

hibscus — Thu, 2 Sep 2021 00:05:04 +0900

state와 ref에 대한 차이는 당근마켓 면접 시 들었던 질문이다.

state 와 props 의 차이는 기초 개념이자 프론트엔드 면접질문 중 자주 나오기에 쉽게 대답할 수 있는데

state와 ref에 대한 차이는 한번도 고민해보지 않아 당황스러웠다.

일단은 각각에 대해서 정리하면

State : "컴포넌트 내에서 관리되는 데이터 객체"

Ref : "DOM에 이름을 다는 것으로, DOM에 직접 접근하고 싶을 때 사용"

질문에서 의도했던 대답은

State

리렌더링이 필요한, 즉 변경시 렌더링이 되어야 하는 값을 다룰 때이고,

Ref

리렌더링을 발생시키지 않아도 되는 값을 다룰 때

REST API

hibscus — Fri, 27 Aug 2021 23:59:14 +0900

API Server

: 프로그래밍을 통한 요청에 응답(우리는 json)하는 서버를 제공

ex. Youtube Data AP API, TMDB API

REST(Representational State Transfer)

웹 설계 상의 장점을 최대한 활용 할 수 있는 아키텍처 방법론

네트워크 아키텍쳐 원리의 모음

자원(데이터)을 정의
자원에 대한 주소를 지정하는 방법

REST 원리를 따르는 시스템 혹은 API - RESTful API

즉, 자원과 주소를 지정하는 방법

REST 구성

자원 URI
행위 HTTP Method
표현 Representaion

URI

통합 자원 식별자
자원을 나타내는 유일한 주소
하위 개념 - URL, URN

URL

Uniform Resource Locator - 통합 자원 위치

네트워크 상에 자원이 어디에 있는지 알려주기 위한 약속

웹주소 혹은 링크라고 부름

URN

통합 자원 이름

유일한 이름

자원의 이름이 변하지 않는 한 이리저리 옮겨도 문제없이 동작

URL과 URN 상호보완적

URI 구조

path - 자원 경로

path 까지는 URL / path까지+ 나머지는 URI에 속함

일반적으로 URI과 URN으로 나누지만, URN을 사용하는 비중이 매우 적기에 일반적으로 URI를 URL로 통칭하기도 함.

URI 설계 주의사항

밑줄 아닌 하이픈 을 사용
소문자 사용
파일 확장자는 포함 X

HTTP

html 문서와 같은 자원들을 가져올 수 있도록 해주는 프로토콜(규칙, 약속)

클라이언트 - 서버

요청 : 클라이언트에 의해 전송되는 메세지

응답 : 서버에서 응답으로 전송되는 메세지

비연결지향 : 서버는 응답 후 접속을 끊음
무상태 : 접속이 끊어지면 상태 저장 X,

ex. 그래서 쿠키와 세션 사용(로그인 상태 유지하기 위해)

HTTP Method

자원에 대한 행위

자원에 수행하길 원하는 행동 ex. GET, POST

행위를 규저하기 때문에 실제 그 행위 자체가 보장되지 않음

HTTP Method 종류

GET : 자원 표시 요청, 오직 데이터 받기만함
POST: 서버로 데이터를 전송, 서버에 변경사항을 만듬
PUT : 요청한 주소의 자원을 수정
DELETE : 지정한 자원을 삭제

표현 REPRESENTAION

JSON

JavaScript Object Notation

가벼운 데이터 교환 포맷

자바스크립트 객체 문법을 따르지만, 완전히 동일하지 않음 차이점 존재

구조화된 데이터를 표현하기 위한 문자기반의 데이터 포맷

JSON 특징

사람이 읽고 쓰기 쉽고, 기계가 파싱(해석&분석)하고 만들어 내기 쉬움

자료구조로 쉽게 변환할 수 있는 KEY- VALUE 형태

자바스크립 뿐만 아니라 JSON 다양한 프로그래밍 환경에서도 가능

REST 핵심 규칙

URI 는 정보의 자원을 표현해야 한다
자원에 대한 행위는 HTTP Method 로 표현한다

Redux 정리

hibscus — Fri, 27 Aug 2021 00:28:01 +0900

Redux란?

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 자바스크립트 상태 관리 라이브러리이다.
Redux는 React 뿐만 아니라, Angular,vanilla javascript, Vue 등 다른 프레임워크/라이브러리도 함께 쓰일 수 있다. 보통은 react랑 많이 사용된다.

Redux 사용해야 되는 이유?

아래 사진이 리덕스를 설명할 때 가장 많이 사용되는 사진인데, 프로젝트가 커서 컴포넌트의 depth가 많아지게 되면 데이터 흐름이 점점 복잡해진다. 이때 redux가 데이터를 store 란 곳에 저장해놓고 필요할 때마다 얻어올 수 있기에 더욱 복잡한 데이터 흐름이 없어지게 되서 오른쪽과 같이 흐름이 간단해진다.

Redux 구성요소

Store

프로젝트당 1개만 등록한다. 모든 state와 reducer를 스토어에 모아서 관리한다.(데이터를 저장하는 곳)

Reducer

액션의 타입에 따라 state를 리턴해줌(데이터를 수정하는 곳)

Action

리덕스에서는 프로젝트에서 상태변화를 일으키는 것을 하나의 action 이라고 본다. action이 reducer에게 전달될 때 action type과 바뀐 데이터 값이 함께 전달됨.(어떻게 수정할지 알려주는 함수)

Dispatch

action을 발생시키는 일

Action 함수

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 공부하기"
  }
}

Reducer

function toDoReducer(state, action) {
  // 액션에 따른 상태 업데이트 로직
  return alteredState;
}

[백준 알고리즘] 17471. 게리맨더링

hibscus — Sun, 16 May 2021 14:28:57 +0900

문제 풀이 방법

1. 가능한 경우의 수(조합) 구하기 (재귀 + 백트래킹 사용)

2. 1의 정보를 바탕으로 그룹을 나누고

3. 나눈 그룹 각각 DFS로 방문할 수 있는지 체크, 방문하지 못하는 노드가 있을 경우 제외

처음에는 인접정보를 판단하면서 경우의 수를 구하기 위해, 그래프를 사용하며 방문표시를 했는데,

경우의 수에서 제외되는 경우가 있어 정답을 구할 수 없었다.

경우의 수는 역시 완전 탐색을 하는 게 확실하다...

아래 주소는 문제 풀면서 참고했던 반례들인데 유용했다!

https://www.acmicpc.net/board/view/54133 반례들

# DFS
def check_areas(check):
    for i in range(1, N+1):
        if check[i] == 0:
            start = i
            break

    stack = [start]
    while stack:
        u = stack.pop()
        if check[u]: continue
        check[u] = 1
        for v in G[u]:
            stack.append(v)
    for i in check[1:]:
        if i == 0:
            return False
    return True


# 두개의 구역 나누기
def make_two_areas(lst):
    area1_visited = lst[:]
    area2_visited = [int(not i) for i in area1_visited] # 다른 선거지역
    if not check_areas(area1_visited):
        return False
    if not check_areas(area2_visited):
        return False
    return True


# 조합 백트래킹
def divide_area(idx, population):
    global ans
    if population > total // 2 : return
    if idx == N+1:
        diff = abs(total - population * 2)
        if diff < ans and make_two_areas(visited):
            ans = diff
        return
    visited[idx] = 1
    divide_area(idx + 1, population+arr[idx])
    visited[idx] = 0
    divide_area(idx + 1, population)
    return


# 선거구 나누기
# 두 구역의 인구 최솟값 구하기,  안되는 경우 -1 출력
# 구역 나눌 때 꼭 인접해야 함.

N = int(input()) # 구역의 개수
arr = [0] + list(map(int, input().split())) # 구역의 인구
G = [[] for _ in range(N+1)]
visited = [0] * (N+1)
for i in range(1, N+1):
    adj_area = list(map(int, input().split()))
    for adj in adj_area[1:]:
        G[i].append(adj)
total = sum(arr)
ans = total

divide_area(1, 0)
if total == ans:
    print(-1)
else:
    print(ans)

[백준 알고리즘] 13549. 숨바꼭질 3

hibscus — Tue, 11 May 2021 22:29:26 +0900

처음에는 BFS로 풀려고 했으나 순간이동은 시간을 세지 않는 다는 점에서 최단 시간을 확정하기 어렵다는 생각이 들었다. 그래서 다익스트라로 접근했다.

from collections import deque

def find_K():
    D = [0xfffffffffff] * 100001
    D[N] = 0
    Q = deque()
    Q.append((0, N))
    while Q:
        time, loc = Q.popleft()
        if D[K] <= time: continue
        for n_time, n_loc in [(time+1, loc+1), (time+1, loc-1), (time, loc*2)]:
            if 0 > n_loc or 100000 < n_loc: continue
            if D[n_loc] > n_time:
                D[n_loc] = n_time
                Q.append((n_time, n_loc))

    return D[K]


N, K = map(int, input().split()) # 수빈, 동생
# 순간이동은 0초 , +1, -1 은 1초
print(find_K())

[백준 알고리즘] 1504. 특정한 최단 경로

hibscus — Tue, 11 May 2021 22:24:26 +0900

✔ 주의할 점

가능한 경로 2개

1 -> v1 -> v2 -> N

1 -> v2 -> v1 -> N

다익스트라 함수를 만들어 놓고,

(1, v1), (v1, v2), (v2, N)

(1, v2), (v2, v1), (v1, N)

각 지점 사이의 최단 경로를 구한 뒤, 두가지의 경로 중 최단 거리를 구했다!

import sys

# 1번 부터 N까지의 최단거리 v1, v2 거쳐서
# 경로없을 때는 1
from heapq import heappop,heappush

INF = int(1e9)
def dijkstra(start, end):
    D = [INF] * (N+1)
    D[start] = 0
    Q = [(0, start)]
    while Q:
        d, u = heappop(Q)
        if D[u] < d: continue
        if u == end : return D[end]

        for v, w in G[u]:
            tmp = d + w
            if D[v] > tmp:
                D[v] = tmp
                heappush(Q, (D[v], v))

    return D[end]


N, E = map(int, sys.stdin.readline().split()) # 정점과 간선
G = [[] for _ in range(N+1)]
for _ in range(E):
    u, v, w = map(int, sys.stdin.readline().split())
    G[u].append((v, w))
    G[v].append((u, w))
v1, v2 = map(int, sys.stdin.readline().split())

ans = min(dijkstra(1, v1) + dijkstra(v1, v2) + dijkstra(v2, N), dijkstra(1, v2) + dijkstra(v2, v1) + dijkstra(v1, N))
if ans >= INF:
    ans = -1

print(ans)

[백준 알고리즘] 1283. 파티 _ 파이썬

hibscus — Tue, 11 May 2021 21:56:19 +0900

SWEA 1795 인수의 생일파티와 유사한 문제이다.

각자의 집 -> 파티하는 집 -> 각자의 집으로 가는 최단경로를 구해야 한다.

한 점에서 여러 점 갈 때는 다익스트라를 한 번 돌리면 되지만, 여러 점에서 한 점으로 갈 때는 각 시작점마다 다익스트라를 돌려야 한다.

불필요하게 다익스트라로 구하는 것을 방지하고자

아예 경로를 여러 점에서 한점으로 가는 것 -> 한 점에서 여러 점을 방문하도록 그래프를 추가했다.

그래서 가는 방향 경로 GO, 오는 방향 경로 COME을 나눠서 다익스트라르 2번 돌려 구했다.

from heapq import heappush, heappop
INF = 0xffffffffffffffffff

# 어떤 시작점에서 모든 정점까지의 최단거리
def dijkstra(start, graph):
    visited = [0] * (N+1)
    D = [INF] * (N+1)
    D[start] = 0
    Q = [(0, start)]
    while Q:
        d, u = heappop(Q)
        if visited[u]: continue
        visited[u] = 1

        for v, t in graph[u]:
            if not visited[v] and D[v] > d + t:
                D[v] = d + t
                heappush(Q, (D[v], v))
    return D[1:]


N, M, X = map(int, input().split())
# N명의 학생, M개의 도로, X 파티하는 장소
go = [[] for _ in range(N+1)]
come = [[] for _ in range(N+1)]

for i in range(M):
    s, e, t = map(int, input().split())
    # 가는 길, 오는 길 경로 그래프 나누기
    go[s].append((e, t))
    come[e].append((s, t))

print(max( a + b for a, b in zip(dijkstra(X, go), dijkstra(X, come))))