# 지수 라인 면접

## 스터디 하고 있나?
스터디는 저는 안하고 같은 팀했던 친구 한명이랑 카페 만나서 공부중

같은 팀 계신 분 중에 면접 보실 분도 있는 거 같아여

아~ 아~ 네네 맞아요 (인정)

다름 부캠퍼들이랑 연락하나?

ㅇㅇ

면접 보신 분 있나?

내가 처음

모든 인원이 커뮤니티가 되는게 아니구나 알겠다.

## ❓ 프로젝트 관련 질문 시작

### 프로젝트 최근에 한 것도 좋고 기술 위주 질문하기 좋게 내가 한 것 위주로 자기소개 하기

코코드 프로젝트
코드샌드박스를 클론한 프로젝트
코드가 실시간으로 빌드되는게 궁금해서 시작
주요한 목표 : 클라이언트 사이드 빌드 기능 구현
지수가 한 것
- CI/CD 프로세스 구축
- 파일 시스템 트리 구조 UI 구현
- 클라이언트 사이드 빌드 팀원 한명과 짝코딩
- IndexedDB를 이용한 브라우저 캐싱 기능 구현

### 만든 서비스의 구성 그리기

기능위주로
크게 서비스를 일단 3개로
추가적으로 라이브서버를 넣었으나 완벽하게 구현은 못했었음
-> 원래 하려고 했던 어떤 기능이냐?
-> 설명 설명 / 완벽하게 기능 구현X / 동기화 문제
-> 구성하기에 편한 방식으로 그려주고 나중에 설명할 때 부가 설명 가능

APIServer / 코코드 클라이언트 앱 제공 서비스 / 코코넛은 클라이언트 사이드 빌드 기능을 제공하는 웹 앱

프로젝트 페이지 그리면서 설명
- iframe에 코코넛
- 프로젝트 정보를 가져와서 빌드만 해주는 것
- 코코넛의 링크만 가지고 다른 브라우저에서 접속하면 배포된 것 처럼 느낄 수 있도록

크게 3서비스로 분류를 나누었고 추가적으로 라이브서버 존재

외부 라이브러리를 사용할 수 있게 디펜던시서버 구성
- 설치한 적이 있으면 캐싱된 해당 모듈 전송
- 서버의 로컬에서 모듈을 설치하고 트랜스파일링 한 뒤 전송

### 실제 물리적인 서버들인지?
### 각각 서버가 어떻게 구현되어 있느지?
- api 서버는 node.js로 구성
- 클라이언트 서버는 엔진엑스로 한번 감싸놓음

### 앞단에 nginx 서버를 두어야겠다고 생각한 이유는?(16분 46초)
- 절었다.
- 하나의 요청에 따라 해당하는 응답을 보내주기 위해 사용했다.

> 면접관: 결국 유저는 첫번째 nginx 서버를 통해서 어느 서버에 요청을 해야 할지 알게 되고 실제 서버에 전송하는 거군요?
> 나: 네 맞습니다.

https://jcdgods.tistory.com/322

### 물리적으로 나눈 이유는 무엇인지?
- 각각의 서버를 서로 연관이 안되게 할 수 있다고 생각했고
- 코드를 작성할 때 서로 충돌도 안날 것 같다고 생각

### 그러면 기능이 추가되면 서버가 하나씩 계속 추가가 되는 것인가?
- 존재하는 서버에 섞일 수 없다면 하나 생겨야 한다

### 제일 효율적이라고 생각하나?
- 다른 방법도 있을 것으로 생각하나
- 우리가 할 수 있는 방법 중에서 이 방법이 가장 효율적일 것으로 생각했다

### 물리적으로 서버로 나눠야 하는 타당한 이유는 무엇이 있을까?
- 하나의 서버안에서 모든 것이 실행되면
- 해당하는 서버가 특수한 이유로 인해 장애가 발생할 수 있기 때문에 나우어야 한다,
- 나눠진 경우 어느 서버에서 에러가 났는지 빨리 알 수 있다.

### 한 서버에서 논리적으로 분리되어 있으면 트러블 슈팅이 어려울까?
- 경우에 따라서 다를 것으로 생각된다.
- 한 서버에서 여러개의 서버가 돌아가고 있을 때
- 하나의 장애로 인해 다른 곳에 영향을 끼칠 수 있을 것으로
- 생각하는데 자세하게는 모르겠다.

### 코드샌드박스를 참고해서 만들었다고 했는데 참고한 내용과 직접 고민한 내용을 나눠서 설명하면? (20:58)
- 직접 해보면서 느꼈다.

### 클라이언트 사이드 빌드에 관해서 질문한듯, 개절었다.(21:40 ~ 24:50)
- 파일로 저장안하고 데이터로 저장
- 파일 데이터를 가지고 런타임에서 바벨로 트랜스파일링
- 나온 결과를 우리만의 웹팩으로 번들링

### 클라이언트 사이드 빌드과정에서 보안적으로 위험한 부분은 없었을지?
- 그 과정에서 보안적으로 위험될 부분은 생각을 못했다.
- 프로젝트의 정보가 훼손되거나 하는 부분인데
- 트랜스파일링 하고 번들링 하는 부분이 브라우저 내에서만 이루어 지기 때문에 보안 문제는 없을 것으로 생각했다.

#### ⛱ 대답을 잘 할 수 있다면 하면 좋을 것 같은 말
SQL인젝션, XSS문제가 있을 수도 있을 것 같다.
보안에 위험이 되는 코드를 작성하고 저장을 누르면 이것이 DB에 저장되면 SQL인젝션 문제가 발생한다.
내 프로젝트에 악성 스크립트를 작성하고 다른 사람이 해당 프로젝트에 접속하면 XSS문제 발생

### 파일을 데이터 구조로 어떻게 나누었는지? (25:30)

## ❓ 이력서 관련 질문 시작

### 이력서에 RESTapi를 적어주셨는데 무엇인지 설명할 수 있는지?

### 어떤 API가 Restful하다는 것과 Restful하지 않은 것이라고 부를 수 있을 것이라고 생각하나?

### REST의 약어를 아는지?

### GraphQL과 뭐가 다른가?

### 그러면 RESTAPI는 GraphQL보다 안좋은 거고 다 바꿔야 겠네요?

### GraphQL이 새로나온 쿼리 랭귀지 라고 하면 REST도 머 언어인가? 새로나온 프로토콜인가?

### 백엔드에서는 그럼 GraphQL로 어떻게 구현해야 하는가?
- 절었다. 기억이 안났다.

## ❓ 자바스크립트 질문 시작
### 클로저에 대해서 설명 부탁

### 클로저는 어떤 어떤 것을 갖춘 함수이다 인가요?

### 결국 끝은 함수인거죠?
- 함수이기도 하고 환경이기도하다.

### 클로저를 선언한 곳이라고 하셨는데 클로저는 어떻게 선언하는지?

### 어떠한 자바스크립트 언어의 현상 때문에 이런게 생기는지 설명할 수 있는지?

### 클로저에서 상위 스코프에서 선언한 것이 남아 있다고 하셨는데 어떻게 남겨둘것과 없어질 것을 판단하는지?
- 가비지 컬렉터 이야기 했음

### 함수 선언식과 표현식의 차이와 장단점 그리고 특징을 설명할 수 있나
- 호이스팅, 변수 선언 / 초기화 / 할당 단계

## ❓ 웹 관련? 질문 시작
### 브라우저에서 html을 받았을 때 화면에 어떻게 그려지는 지 과정

### dom트리를 만들게 되는데 dom이 뭔데요

### dom이 어떤 것의 약자인지 아는지?

문서를 해석하고, 화면에 그려내고, 해제하고 할 때 발생하는 이벤트들

### 렌더링 과정 중간중간에 특정 이벤트가 발생하는데 어떤 것들이 있을까?
document event 관련 문서
https://developer.mozilla.org/ko/docs/Web/Events

### 사용자가 주소 표시줄에 주소를 치고 엔터를 쳤을 때 서버에 도착하기 전까지 일어나는 과정

여기 시리즈 한번 봐보기
https://d2.naver.com/helloworld/2922312
혁우님 추천 만화 - DNS에 대한 상세 설명 인 듯
https://howdns.works

## ❓ 문제 해결력 관련 질문
### 10만명의 친구 데이터를 관리하는 자료구조는 어떤 것이 좋을까?
### 그 정보가 정렬도 되어야 한다면?
- 나는 맵이라고 하였고
- b트리를 주로 쓴다고 말하심

### 맵으로 한다면 중복이 일어나는 경우에는 어떻게 할 것인가?

# 😡 회고(지수)
그 저 어 이런거를 너무 많이 섞는다.
듣기 싫다.
말을 너무 뜸들인다.
자세히 알지 못하는 경우에는 잘 정리가 되지 않은 상태로 이야기를 하기때문에 말을 하는 도중에 단어를 계속 정정하게 되고 이는 듣기 매우 불편하게 느껴진다.
한 문장을 또박또박 제대로 말하지 못했던 것 같음.