하루 하나씩 작성하는 TIL #58
1. Optimistic Update란?
🔹 의도: UX에도 신경 써서 개발하고 있는지 확인하기 위한 질문
🔹 팁: 자신의 프로젝트에 적용한 경험도 자세히 얘기해주면 좋습니다. 업데이트 과정을 상세히 순서대로 말씀해주셔도 좋습니다.
🔹 모범 답안:
Optimistic Update는 이름에서 유추할 수 있다시피 서버에 요청이 잘 갔겠지~ 하고 긍정적으로 생각하여 업데이트 하는 방식입니다.
보통은 서버에 업데이트 요청을 보내고, 클라이언트는 서버의 응답을 받아 새로운 정보를 화면에 렌더링합니다.
하지만 이 방법은 유저가 변경 결과를 보는 데에 시간이 걸린다는 단점이 있습니다.
이럴 때 사용자 경험을 개선하기 위해 서버 응답이 오기 전에 미리 응답 상태를 예측하여 화면에 적용하는 방법이 바로 Optimistic Update입니다.
시간이 걸린다는 단점을 해결하기 위해 고려된 방법인 만큼 네트워크가 느린 환경에서 유용하다는 장점이 있으나, 서버와의 데이터가 다를 수 있다는 단점이 있으므로 이를 해결하기 위해 서버와 클라이언트 간에 상태가 같은지 최종 확인 과정을 거쳐야만 합니다.
예를 들어, 서버에 side effect를 발생시키는 요청에 대해 요청을 보내는 것과 동시에 결과를 예측하고, 예측한 결과를 UI에 반영하는 것을 Optimistic Updates라고 합니다. 참고하면 좋을 링크
🔹 한 줄 요약 : 사용자의 동작에 대한 응답을 기다리지 않고 미리 UI를 업데이트하는 것 (ex) 좋아요 버튼, 장바구니에 담기 버튼 등)
2. 인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점을 자세히 설명. 각 방식의 장단점과 실제 프로젝트 활용 경험이 있다면 공유.
🔹 의도: 인증/인가에서 세션 및 JWT에 대해 이해하고 있는지 확인하는 질문
🔹 팁: 세션 스토리지와 헷갈리지 마세요!
🔹 모범 답안:
네 세션 방식과 JWT (Json Web Token) 방식 모두 인증/인가를 처리하는 데에 사용되는 대표적인 기술입니다만 때와 장소에 따라 장단점과 차이점이 있습니다. 우선 세션 방식에 대해 말씀드리겠습니다.
세션 방식은 유저가 로그인하면 서버는 이 유저 정보를 세션에 저장하고, 발급된 세션 ID를 쿠키를 통해 클라이언트 브라우저에 전달합니다.
이후 유저 인증이 필요할 때마다 클라이언트에서는 쿠키에 담긴 세션 ID를 함께 전송하고, 서버는 이 세션 ID를 받아 유저가 누구인지 확인해 인증을 허가합니다.
다음으로 JWT는 Json Web Token의 약자로, 유저가 로그인하면 서버는 유저 데이터, 만료 시간 등을 포함하는 토큰을 생성해 클라이언트에 전달합니다.
이때 토큰에는 민감한 정보를 포함해서는 안 됩니다. 클라이언트는 받아온 토큰을 로컬 스토리지나 쿠키에 저장하고, 유저 인증이 필요한 요청에 해당 토큰을 포함하여 서버로 전송합니다. 서버는 받아온 토큰을 검증하고, 만료되지 않은 토큰이라면 인증을 진행합니다.
여기서 큰 차이점은 서버 부하를 예시로 들 수 있습니다.
세션의 경우에는 서버에서 세션 정보를 저장하고 있기 때문에 서버 부하가 증가할 수 있는 단점이 있습니다. 그에 비해 JWT는 stateless이기 때문에 서버에 유저 세션 정보를 저장하지 않아 부하가 적습니다. 다만 JWT는 토큰의 서명 키가 노출되지 않게 관리해야 한다는 특징을 가지고 있습니다.
저는 이전에 했던 프로젝트에서 이러한 회원 가입 및 로그인을 구현할 일이 있었습니다. 그때 JWT를 이용했었고, 역할 기반으로 접근 권한을 주기 위해 토큰 내용에 유저의 역할을 넣어주었습니다. 또한 보안 강화를 위해 httpOnly 옵션을 준 쿠키를 사용해 토큰을 저장하였습니다.
🔹 한 줄 요약 : 세션은 서버가 id를 쿠키를 통해 클라이언트에게 전달하고 이를 통해 유저가 누구인지 확인해 인증을 허가. jwt는 서버가 유저 데이터 & 만료시간을 포함하는 토큰을 생성해 클라이언트에 전달.
🔹 세션은 서버 부하가 증가할 수 있음. jwt는 부하가 적지만 서명 키가 노출되지 않게 관리해야함.
3. 쿠키, 세션, 웹스토리지의 차이.
🔹 의도: 클라이언트와 서버 사이의 상태 관리를 어떻게 하는지, 브라우저 API에 대한 이해도가 있는지 확인하는 질문.
🔹 팁: 각 기술마다 사용 예시를 들어도 좋습니다.
🔹 모범 답안:
말씀해주신 쿠키, 세션, 웹 스토리지는 모두 웹에서 데이터를 저장하는 기술입니다. 각각 순서대로 특징을 설명드리겠습니다.
쿠키는 클라이언트와 서버 간의 데이터를 저장하여 HTTP 통신에 사용합니다.
httpOnly 옵션을 통해 보안을 향상시킬 수 있는 특징을 가지고 있습니다. 그래서 주로 로그인 인증처리에 쓰이기도 하고, 우리가 최근 본 상품이나 관심 있는 주제를 저장해서 추천 서비스에 데이터를 제공하기도 합니다.
어떤 웹 사이트에 처음 방문하게 되면 쿠키 정책을 묻지 않습니까? 다 데이터를 수집해서 맞춤 광고를 보여주려는 의도입니다.
세션은 서버에서 사용자 정보를 유지하는 방법입니다. 세션이 유지되는 동안 유저의 로그인 상태도 유지됩니다.
웹 스토리지는 크게 로컬 스토리지, 세션 스토리지가 많이 쓰입니다.
많은 데이터를 저장할 수 있고 서버로 전송되지 않는다는 장점이 있으나 자바스크립트 코드를 통해 탈취될 위험이 있으므로 민감한 정보를 저장하는 것은 피하는 것이 좋습니다.
둘의 차이점도 설명하자면, 로컬 스토리지는 브라우저를 닫아도 데이터가 유지되는 반면, 세션 스토리지는 이름처럼 세션 동안만 데이터가 유지되기에 브라우저를 닫으면 데이터는 사라집니다.
저 같은 경우에는 다크 모드의 여부를 판단하기 위해 로컬 스토리지를 사용하기도 했습니다.
🔹 한 줄 요약 : 쿠키는 주로 로그인 인증처리에 쓰이며 서버 간의 데이터를 저장하여 http 통신에 사용
🔹세션은 서버에 사용자 정보를 유지
🔹웹 스토리지는 많은 정보 저장 가능 & 서버로 전송 x 라는 장점이 있지만 js코드를 통해 탈취될 위험이 있음. 로컬 스토리지는 브라우저를 닫아도 데이터 유지. 세션은 x
4. 브라우저의 렌더링 과정.
🔹 의도: 단순히 자바스크립트, 리액트 등의 코딩 기술이 아니라 전반적인 프론트엔드 지식을 가지고 있는지 확인하는 질문.
🔹 팁: 순서에 관련한 질문이기에 제스처 등 비언어적 표현으로 보조하는 것도 좋습니다.
- 모범 답안:
브라우저의 렌더링 과정은 크게 HTML 파싱 - CSS 파싱 - DOM 트리와 CSSOM 트리 결합 - 레이아웃 계산 - 페인팅 단계로 이루어집니다.
HTML을 파싱해 DOM 트리를 만들고, 비슷하게 CSS를 파싱해 CSSOM 트리를 만듭니다. 이후에 두 트리를 결합하고 페이지에 렌더링 하기 위해 필요한 공간을 계산합니다.
마지막으로 레이아웃에 따라 화면에 요소를 페인팅합니다.
🔹 한 줄 요약 : HTML 파싱 - CSS 파싱 - DOM 트리와 CSSOM 트리 결합 - 레이아웃 계산 - 페인팅
5. 쿼리 스트링은 주로 어디에 사용하셨나요?
🔹 의도: 쿼리 스트링의 개념과 작동 방식에 대해 이해하고 있는지 확인하는 질문
🔹 팁: 활용 사례나 예시를 제시하세요.
🔹 모범 답안:
네 저는 쿼리 스트링을 주로 검색 기능을 구현할 때 자주 사용했습니다. 검색 결과에 대한 내용은 따로 페이지 주소 라우트에 따른 서버 사이드 렌더링이 필요하지 않기도 하고, 기존 페이지를 유지하면서도 화면이 바뀌었음을 알려주기 위해서 사용했습니다.
이렇게 검색 기능에 쿼리 스트링을 이용하면 URL이 바뀜에 따라 브라우저의 히스토리 스택에 쌓여서 뒤로 가기나 앞으로 가기에 수월할 뿐더러 다른 사람에게 검색 결과를 공유할 때 쿼리 스트링이 들어간 URL을 공유하면 되기에 해당 URL로 접근할 경우 원하는 결과를 얻을 수 있다는 장점이 있습니다.
🔹 한 줄 요약 : 검색 기능 구현 시 사용. 기존 페이지를 유지하면서도 화면이 바뀌었음을 알리기 위해 사용.
6. 브라우저에 URL을 입력하면 일어나는 일에 대해 순서대로 설명.
🔹 의도: 기본적인 브라우저 작동 방식에 대해 이해하고 있는지 확인하는 질문
🔹 팁: 순서대로 나누어 단계별로 설명하세요.
🔹 모범 답안:
우리가 브라우저에 URL을 입력하면 일어나는 일을 단계별로 설명드리겠습니다.
네이버의 주소 naver.com을 주소창에 쳤다고 가정해보겠습니다. 그러면 브라우저는 URL에서 프로토콜, 도메인 이름, 경로 등을 분석하게 됩니다.
이후 브라우저는 도메인 이름을 IP 주소로 변환하고자 DNS, 즉 도메인 네임 서버에 요청을 보냅니다. 그럼 도메인 네임 서버는 도메인에 해당하는 IP주소를 응답으로 보내줍니다.
뭐 192.0.0.1 이런 복잡한 IP 주소가 나오게 됩니다. 그리고 브라우저는 TCP 네트워크 연결을 구축하여 해당 IP 주소를 가진 웹 서버에 접근하여 데이터를 요청합니다.
그러면 웹서버는 HTTP 응답을 브라우저에 보내고, 브라우저는 받아온 HTML CSS JS 코드를 화면에 렌더링하게 됩니다.
🔹 한 줄 요약 : url에서 프로토콜, 도메인 이름, 경로등을 분석 -> 도메인 이름을 도메인 네임 서버에 보냄 -> ip주소를 받음 -> ip주소를 가진 웹 서버에 접근하여 데이터를 요청 -> 응답을 화면에 렌더링
7. 정규 표현식을 사용해본 경험?
🔹 의도: 정규 표현식에 대한 개념을 알고 있는지 파악하는 질문
🔹 팁: 사용 예시가 있으면 좋습니다. 정규 표현식을 그대로 사용하는 건 힘들기 때문에 사용한 도구도 말하면 좋습니다.
🔹 모범 답안:
네 저는 주로 유저의 인풋 데이터를 검증할 때 정규 표현식을 사용하곤 했습니다.
예를 들어 휴대폰 번호를 검증해야 할 때, 010-1234-5678 의 포맷이 맞는지 확인하기 위해 폼에서 제출하는 타이밍에 정규 표현식을 사용해 검증하곤 했습니다.
정규 표현식 자체가 외워서 만들기는 좀 어려워서 regexr.com 같은 정규 표현식 테스트 도구를 사용해 만드는 편입니다.
🔹 한 줄 요약 : 인풋 데이터를 검증할 때 사용. 정규 표현식을 사용해 검증.
