📖 기술면접 질문 LIST
1. Optimistic Update에 대해 설명해주세요.
- 의도: UX를 신경 써서 개발하고 있는지 확인하기 위한 질문
- 답안)
Optimistic Update는 이름에서 유추할 수 있다시피 서버에 요청이 잘 갔겠지? 하고 긍정적으로 생각하여 업데이트 하는 방식입니다. 보통은 서버에 업데이트 요청을 보내고, 클라이언트는 서버의 응답을 받아 새로운 정보를 화면에 렌더링 하지만 이 방법은 유저가 변경 결과를 보는 데에 시간이 걸린다는 단점이 있습니다. 이럴 때 사용자 경험을 개선하기 위해 서버 응답이 오기 전에 미리 응답 상태를 예측하여 화면에 적용하는 방법이 바로 Optimistic Update입니다. 시간이 걸린다는 단점을 해결하기 위해 고려된 방법인 만큼 네트워크가 느린 환경에서 유용하다는 장점이 있으나, 서버와의 데이터가 다를 수 있다는 단점이 있으므로 이를 해결하기 위해 서버와 클라이언트 간에 상태가 같은지 최종 확인 과정을 거쳐야 합니다.
2.인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점을 자세히 설명해주세요. 각 방식의 장단점과 실제 프로젝트 활용 경험이 있다면 공유해주세요
- 의도: 인증/인가에서 세션 및 JWT에 대해 이해하고 있는지 확인하는 질문
- 답안)
네, 세션 방식과 JWT 방식 모두 인증/인가를 처리하는 데에 사용되는 대표적인 기술입니다만, 때와 장소에 따라 장단점과 차이점이 있습니다. 우선 세션 방식에 대해 말씀드리겠습니다. 세션 방식은 유저가 로그인하면 서버는 이 유저 정보를 세션에 저장하고, 발급된 세션 ID를 쿠키를 통해 클라이언트 브라우저에 전달합니다. 이후 유저 인증이 필요할 때마다 클라이언트에서는 쿠키에 담긴 세션 ID를 함께 전송하고, 서버는 이 세션 ID를 받아 유저가 누구인지 확인해 인증을 허가합니다.
다음으로 JWT는 Json Web Token의 약자로, 유저가 로그인하면 유저 데이터, 만료 시간 등을 포함하는 토큰을 생성해 클라이언트에 전달합니다. 이때 토큰에는 민감한 정보를 포함해서는 안됩니다. 클라이언트는 받아온 토큰을 로컬 스토리지나 쿠키에 저장하고, 유저 인증이 필요한 요청에 해당 토큰을 포함하여 서버로 전송합니다. 서버는 받아온 토큰을 검증하고, 만료되지 않은 토큰이라면 인증을 진행합니다.
여기서 큰 차이점은 서버 부하를 예시로 들 수 있습니다. 세션의 경우에는 서버에서 세션 정보를 저장하고 있기 때문에 서버 부하가 증가할 수 있는 단점이 있습니다. 그에 비해 JWT는 stateless이기 때문에 서버에 유저 세션 정보를 저장하지 않기에 부하가 적습니다. 다만, JWT는 토큰의 서명 키가 노출되지 않게 관리해야 한다는 특징을 가지고 있습니다.
저는 이전에 했던 프로젝트에서 회원가입 및 로그인을 구현해본 적이 있습니다. 그때 JWT를 이용해서 역할 기반으로 접근 권한을 주기 위해 토큰 내용에 유저의 역할을 넣어줬습니다. 또한, 보안 강화를 위해 httpOnly 옵션을 준 쿠키를 사용해 토큰을 저장하였습니다.
3. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요
- 의도: 클라이언트와 서버 사이의 상태 관리를 어떻게 하는지, 브라우저 API에 대한 이해도가 있는지 확인하기 위함
- 답안)
말씀해주신 쿠키, 세션, 웹스토리지는 모두 웹에서 데이터를 저장하는 기술입니다. 각각 순서대로 특징을 설명드리겠습니다.
쿠키는 클라이언트와 서버 간의 데이터를 저장하여 HTTP 통신에 사용합니다. httpOnly 옵션을 통해 보안을 향상시킬 수 있는 특징을 가지고 있습니다. 그래서 주로 로그인 인증처리에 쓰이기도 하고, 우리가 최근 본 상품이나 관심있는 주제를 저장해서 추천 서비스에 데이터를 제공하기도 합니다. 어떤 웹사이트에 처음 방문하게 되면 쿠키 정책을 묻는 이유가, 다 데이터를 수집해서 맞춤 광고를 보여주려는 의도입니다.
다음으로 세션은, 서버에서 사용자 정보를 유지하는 방법입니다. 세션이 유지되는 동안 유저의 로그인 상태도 유지됩니다.
마지막으로 설명드릴 웹스토리지는 크게 로컬 스토리지, 세션 스토리지가 많이 쓰입니다. 많은 데이터를 저장할 수 있고 서버로 전송되지 않는다는 장점이 있으나 자바스크립트 코드를 통해 탈취될 위험이 있으므로 민감한 정보를 저장하는 것은 피하는 것이 좋습니다. 둘의 차이점도 설명해보겠습니다. 로컬 스토리지는 브라우저를 닫아도 데이터가 유지되는 반면, 세션 스토리지는 이름처럼 세션 동안만 데이터가 유지되기에 브라우저를 닫으면 데이터는 사라집니다. 저 같은 경우에는 다크 모드의 여부를 판단하기 위해 로컬 스토리지를 사용해보기도 했습니다.
4. 브라우저의 렌더링 과정에 대해서 설명해주세요
- 의도: 전반적인 프론트엔드 지식을 가지고 있는지 확인
- 답안)
브라우저의 렌더링 과정은 크게 HTML 파싱 - CSS 파싱 - DOM 트리와 CSSOM 트리 결합 - 레이아웃 계산 - 페인팅 단계로 이루어집니다. HTML을 파싱해 DOM 트리를 만들고, 비슷하게 CSS를 파싱해 CSSOM 트리를 만듭니다. 이후에 두 트리를 결합하고 페이지에 렌더링 하기 위해 필요한 공간을 계산합니다. 마지막으론 레이아웃에 따라 화면에 요소를 페인팅합니다.
