24. 08. 01 TIL

기술면접

1. Optimistic Update에 대해 설명해주세요.

내 답변 :

네, optimistic update는 낙관적 업데이트로, 사용자 경험을 향상시킬 수 있는 개념입니다.

서버 응답이 오기 전에 미리 응답 상태를 예측해 화면에 적용하는 방법입니다.

= 사용자의 동작에 대한 응답을 기다리지 않고 미리 ui를 업데이트하는 것입니다.

 

네트워크가 느린 환경에서는 유용하지만 서버와 데이터가 다를 수 있습니다.

= 서버와 클라이언트가 상태가 같은지 확인 과정을 거쳐야 합니다.

 

정리

네, optimistic update는 낙관적 업데이트로, 사용자 경험을 향상시킬 수 있는 개념입니다.

사용자의 동작에 대한 응답을 기다리지 않고 미리 ui를 업데이트하는 것입니다.

네트워크가 느린 환경에서는 유용하지만 서버와 데이터가 다를 수 있으므로 상태가 같은지 확인해야 합니다.

 

2. 인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점을 자세히 설명해주세요. 각 방식의 장단점과 실제 프로젝트 활용 경험이 있다면 공유해주세요.

내 답변 :

세션 방식은 유저 정보를 세션에 저장해서, 발급된 세션 id를 쿠키를 통해 클라이언트 브라우저에 전달합니다.

= 반대로는 클라이언트에서 쿠키에 담긴 세션 id를 전송하고, 서버는 이 세션 id를 받아 유저가 누구인지 확인해 인증을 허가합니다.

 

jwt는 json web token의 약자로, 유저가 로그인하면 서버에서 유저 데이터, 만료 시간 등을 포함하는 토큰을 생성해 클라이언트에 전달합니다.

이때 토큰에는 민감한 정보를 포함하면 안 됩니다.

 

세션 방식과 jwt 방식의 차이점은 

세션은 서버 부하가 증가할 수 있는 단점이 있다는 것,

하지만 jwt는 유저 세션 정보를 저장하지 않아 부하가 적다는 것이 있습니다.

다만, jwt는 토큰의 서명 키가 노출되지 않도록 관리해야 합니다.

 

정리

세션 방식은 유저 정보를 세션에 저장해서, 발급된 세션 id를 쿠키를 통해 클라이언트 브라우저에 전달합니다.

jwt는 json web token의 약자로, 유저가 로그인하면 서버에서 유저 데이터, 만료 시간 등을 포함하는 토큰을 생성해 클라이언트에 전달합니다.

이 두 방식의 차이점은 세션은 서버 부하가 증가할 수 있지만 jwt는 유저 세션 정보를 저장하지 않아 부하가 적다는 것이 있습니다. 다만, jwt는 토큰의 서명 키가 노출되지 않도록 관리해야 합니다.

 

3. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요.

쿠키, 세션, 웹스토리지는 모두 웹에 데이터를 저장하는 기술입니다.

 

쿠키는 클라이언트와 서버 간의 데이터를 저장해 http 통신에 사용합니다. 

httpOnly 옵션으로 보안을 향상시킬 수 있어 로그인 인증처리에 쓰이기도 하고,

추천 서비스에 데이터를 제공하기도 합니다.

 

세션은 서버에서 사용자 정보를 유지합니다.

세션이 유지되는 동안 유저의 로그인 상태도 유지됩니다.

 

웹 스토리지는 로컬, 세션 스토리지가 있는데

많은 데이터를 저장할 수 있고 서버로 전송되지 않는 장점이 있습니다.

다만, 탈취될 위험이 있으므로 민감한 정보는 저장하지 않는 것이 좋습니다.

 

정리

쿠키는 클라이언트와 서버 간의 데이터를 저장해 http 통신에 사용합니다. 

httpOnly 옵션으로 보안을 향상시킬 수 있어 로그인 인증처리에 쓰이기도 하고,

추천 서비스에 데이터를 제공하기도 합니다.

세션은 서버에서 사용자 정보를 유지합니다.

웹 스토리지는 로컬, 세션 스토리지가 있는데

많은 데이터를 저장할 수 있고 서버로 전송되지 않는 장점이 있습니다.

4. 브라우저의 렌더링 과정에 대해서 설명해주세요.

내 답변 :

렌더링 과정은 크게 html 파싱 -> css 파싱 - DOM 트리와 CSSOM 트리 결합하고 -> 레이아웃을 계산해 -> 페인팅하는 단계로 이루어집니다.

HTML을 파싱해서 DOM 트리를 만들고, CSS 파싱해서 CSSOM 트리를 만들고, 이 두 트리를 결합해 페이지에 렌더링 하기 위해 필요한 공간을 계산해 레이아웃에 따라 화면에 요소를 페인팅 합니다.

 

정리

HTML을 파싱해서 DOM 트리를 만들고, CSS 파싱해서 CSSOM 트리를 만들고, 이 두 트리를 결합해 페이지에 렌더링 하기 위해 필요한 공간을 계산해 레이아웃에 따라 화면에 요소를 페인팅 합니다.

5. 쿼리 스트링은 주로 어디에 사용하셨나요?

내 답변 :

쿼리 스트링은 URL의 일부로, 주로 웹 애플리케이션에서 데이터를 전달하기 위해 사용됩니다. 예를 들어, 웹 사이트의 검색 기능을 구현할 때 쿼리 스트링을 사용하면 검색어와 같은 데이터를 URL에 포함시켜 서버에 전달할 수 있습니다. 이렇게 하면 페이지를 새로고침하지 않고도 검색 결과를 동적으로 업데이트할 수 있으며, 사용자가 검색 결과를 다른 사람과 쉽게 공유할 수 있습니다. URL에 쿼리 스트링이 포함되면 브라우저의 히스토리에도 저장되므로, 사용자가 이전 검색 결과로 쉽게 돌아갈 수 있습니다. 

 

정리

검색 기능을 구현할 때 사용했습니다.

쿼리 스트링을 사용하면 검색어와 같은 데이터를 URL에 포함시켜 서버에 전달할수 있어

검색 결과를 동적으로 업데이트 할 수 있고, 다른 사람과 쉽게 공유할 수 있습니다.

또, URL에 쿼리 스트링이 포함되면 브라우저의 히스토리에 저장돼 이전 검색 결과로 쉽게 돌아갈 수 있습니다.