2022-04-14 면접 질문들의 답변 정리

이 카테고리에서는 면접에서 질문 받았던 것들을 정리하여 나름의 답들을 찾아 올려보는 시간을 가지려고 합니다.

자바스크립트는 컴파일언어?

자바스크립트는 interpreter 언어입니다. 개발자도구 콘솔에서 스크립트를 작성해 실행하는데 컴파일이 필요하지 않기 때문입니다. 하지만, 결론부터 이야기하면 자바스크립트도 컴파일 과정을 거칩니다. 다만 자바스크립트 엔진 내부에서 실행 도중 컴파일이 필요한 경우에 내부에서 컴파일 합니다.

컴파일러(compiler)

• 전체 파일을 스캔하여 한꺼번에 번역한다.
• 초기 스캔시간이 오래 걸리지만, 한번 실행 파일이 만들어지고 나면 빠르다.
• 기계어 번역과정에서 더 많은 메모리를 사용한다.
• 전체 코드를 스캔하는 과정에서 모든 오류를 한꺼번에 출력해주기 때문에 실행 전에 오류를 알 수 있다.
• 대표적인 언어로 C, C++, JAVA 등이 있다.

인터프리터(interpreter)

• 프로그램 실행시 한 번에 한 문장씩 번역한다.
• 한번에 한문장씩 번역후 실행 시키기 때문에 실행 시간이 느리다.
• 컴파일러와 같은 오브젝트 코드 생성과정이 없기 때문에 메모리 효율이 좋다.
• 프로그램을 실행시키고 나서 오류를 발견하면 바로 실행을 중지 시킨다. 실행 후에 오류를 알 수 있다.
• 대표적인 언어로 Python, Ruby, Javascript 등이 있다.

JWT를 사용하셨는데 왜 사용 하셨나요?

JWT는 유저를 인증하고 식별하기 위한 토큰 기반의 인증 방식입니다. 

서버(세션) 기반 인증은 서버의 세션을 사용해 사용자 인증을 하는 방법으로 서버측(서버 램 or 데이터베이스)에서 사용자의 인증정보를 관리하는 것을 의미한다. 그러다 보니, 클라이언트로부터 요청을 받으면 클라이언트의 상태를 계속에서 유지해놓고 사용한다.
(Stateful) 이는 사용자가 증가함에 따라 성능의 문제를 일으킬 수 있으며 확장성이 어렵다는 단점을 지닌다.

이러한 단점을 극복하기 위해서 토큰 기반 인증 시스템이 나타났고 인증받은 사용자에게 토큰을 발급하고, 로그인이 필요한 작업일 경우 헤더에 토큰을 함께 보내 인증받은 사용자인지 확인합니다.

JWT를 왜 쿠키에 저장을 하였는지

쿠키에 저장을 하게 되면 클라이언트에서 접근하기가 쉽고 그로 인해 서버에 주는 부담이 덜어지게 됩니다. 또한 cookie에 저장을 하게 되면 xss공격으로 부터 localstorage보다 안전하다는 장점있습니다.

단점

CSRF 공격에 취약하다.

채팅 시스템을 왜 socket으로 구현 하셨는지 socket의 장점은 무엇인지

api로 채팅을 보내게 될 경우 사용자는 일일이 새로고침을 해야 다른 사용자의 채팅을 볼 수 있게 됩니다. 이는 매우 안좋은 UX를 사용자에게 전달 해주는 것이라고 생각을 합니다. 그렇기 때문에 양방향 소통이 가능한 socket을 사용하는 것이 사용자에게 있어 더 좋은 UX를 전달해줄 수 있다는 장점이 있습니다.

b2c 서비스에 next.js를 사용하는 이유

쇼핑몰의 각 상품에 대한 정보는 잘 바뀌지 않는 데이터라고 가정합니다.이럴 때, 우리는 각 상품에 관한 페이지들을 미리 Pre-rendering 하여 페이지를 만들어둡니다. 이렇게 되면 클라이언트가 상품 페이지를 요청할 때, 서버는 단지 파일을 내려주기만 하면 될 뿐입니다! - SSR

그렇지만, 만약 해당 페이지에 존재하는 핵심 데이터가 수시로 바뀌는 데이터라면? 여기에 SEO까지 함께 가져가야 한다면? SSR 방식을 택하는 게 효율적일 겁니다. - SSR

왜 next.js가 SEO에 유리할까요?

Next.js는 서버에서 웹페이지를 미리 렌더함으로써, 웹페이지의 크롤링을 용이하게 만들어 SEO에 보다 적합하다.

그렇다면 CSR은 왜 SEO에 유리하지 않을까?

웹 페이지의 렌더링을 브라우저 측에서 하는데 이때 html, js, css 확장자의 파일을 차례로 가져왔을 때 html의 상태 텅 비어있는 상태입니다. 이러한 특성 때문에 웹 크롤러에서 CSR로 구성된 페이지를 접속하면 우리 페이지들이 검색 노출이 잘 안되게 되는 것입니다.

express js의 역할

기본적으로 Node.js를 이용하여 웹 서버를 구축할 때에는 기본적으로 node.js의 HTTP 모듈을 이용합니다. 하지만 이를 이용하면 모든 웹 서버의 기능을 구현하기에는 시간과 노력이 많이 듭니다. 따라서 Express라는 웹 프레임워크를 사용하여 보다 편리하게 사용자가 서버를 구축할 수 있게 해주는 프레임워크 입니다.

사용자가 url을 치고 들어올 때 html과 css, javascript를 누가 던져주는지

지금 생각해보면 브라우저의 렌더링 과정이 어떤지를 의미한게 아닐까 하는 생각이 들었다.

1. 주소창에 입력된 주소를 통해 서버를 찾아간다.
2. 이후 DNS가 연결해줄 곳을 찾는다.(실제 서버)
3. 서버에서 HTML 파일을 클라이언트로 보낸다.
4. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식)
5. 중간에 css를 로드하는 link혹은 style 태그를 만나면 DOM 생성을 중지한다.
6. CSS를 파싱하고 CSSOM을 생성한다.
7. 이렇게 만들어진 DOM와 CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌더 트리로 결합된다.
8. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다.
9. 이후 JS엔진을 실행하고 JS코드를 파싱한다.