Today 요약
- 면접 질문 대비
- 과제
1. What I Learned?
1.1 면접 질문 대비하기
use strict은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.
use strict는 자바스크립트 코드 내에서 엄격 모드로 실행하도록 지시하는 명령입니다. 엄격 모드는 자바스크립트의 기능을 좀 더 엄격하게 동작하도록 하며, 일부 에러를 발생시키거나 무시했던 기존의 동작을 수정합니다. 엄격 모드를 사용하려면 스크립트의 최상위나 함수의 시작 부분에 'use strict';를 선언해야 합니다. 따라서 엄격 모드는 보다 안전하고 효율적인 JavaScript 코드를 작성하고자 할 때 매우 유용합니다. 하지만 기존 코드와의 호환성을 고려해야 하며, 새로운 프로젝트에서는 기본적으로 엄격 모드를 사용하는 것이 좋습니다.
이렇듯 장점에는 에러 감지 및 예외 상황을 발생시키고 보안을 강화할 수 있다는 점이 있고 단점으로는 일부 기존 코드와의 호환성 문제와 규칙이 엄격하기 때문에 일부 개발자에게는 불필요한 복잡성을 초래할 수 있습니다.
async, await 사용 방법을 설명해주세요.
async와 await는 JavaScript에서 비동기 작업을 처리하는 데 사용되는 키워드로, 코드를 더 읽기 쉽고 유지보수하기 쉽게 만들어줍니다. async는 비동기 함수를 선언하고, await는 비동기 작업이 완료될 때까지 기다리는데 사용됩니다. 사용 방법은 function 키워드 앞에 async 키워드를 추가하거나 화살표 함수일 때는 매개 변수 앞에 async 키워드를 추가합니다. 비동기 작업이 완료될 때까지 기다릴 코드에 await 키워드를 사용합니다.
주의해야 할 점은 await는 반드시 async 함수 내에서만 사용할 수 있다는 것입니다.
호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
호스트 객체(Host Objects)와 네이티브 객체(Native Objects)는 JavaScript 환경에서 사용되는 두 가지 주요 객체 유형입니다.
네이티브 객체는 Array, Object, String과 같은 JavaScript 언어 스펙에 정의된 기본 객체이며, 호스트 객체는 브라우저 환경이나 노드 환경처럼특정 실행 환경에서 제공되는 객체입니다. 호스트 객체는 해당 환경의 API와 함께 사용되며, 네이티브 객체와 달리 환경에 따라 다를 수 있습니다.
깊은 복사와 얕은 복사에 대해 설명해주세요.
깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)는 객체나 배열을 복사할 때 사용되는 두 가지 다른 복사 방법입니다. 이 두 가지 방법의 주요 차이점은 복사된 객체 내부의 중첩 객체에 대한 처리 방식입니다.
얕은 복사는 원본 객체의 최상위 요소를 복사합니다. 중첩 객체는 참조만 복사되기 때문에 원본 객체와 복사본 객체가 같은 중첩 객체를 공유합니다.
반면에 깊은 복사는 중첩 객체를 재귀적으로 복사하여 새 객체를 만듭니다. 이렇게 하면 원본 객체와 복사본 객체가 완전히 독립적이 됩니다. 이는 원본 객체의 불변성을 보장하고 중첩 객체의 일부분을 수정하고 싶을 때 깊은 복사를 사용합니다.
1.2 과제
JWT는 어떤 약어의 줄임말이며, 주로 어떤 목적으로 사용되는지
JWT란 JSON Web Token의 약자로, 인증된 사용자에게 인가된 권한을 부여해주기 위해서 활용합니다. 회원가입이 성공하고, 로그인 했을 때 인증된 사용자에게 JWT를 발급해줌으로써 권한이 필요한 요청을 보냈을 때 토큰을 통해 인증된 사용자인지를 구별할 수 있습니다.
JWT는 헤더, 페이로드, 서명의 세 파트로 나눠져 있습니다.
헤더에는 어떠한 알고리즘으로 암호화 할 것인지, 어떠한 토큰을 사용할 것 인지에 대한 정보가 들어있고, 페이로드에는 전달하려는 정보가 들어있습니다. 서명은 헤더와 페이로드를 합친 후 비밀키로 암호화 시켜 토큰을 변조하기 어렵게 만들어줍니다.
기존의 일반 인증 기반은 서버에서 사용자들의 인증 정보를 기억하고 있어야 했지만, 클레임 인증 기반인 JWT는 클라이언트에서 토큰에 담겨 있는 인증 정보를가지고 있다가 요청과 함께 넘겨주면 되기 때문에 편리합니다.
하지만 클라이언트에서 관리하기 때문에 토큰 자체가 탈취되어서 페이로드가 디코딩되거나 하면 보안 문제가 발생할 수 있습니다.
따라서 토큰의 만료시간을 설정하고 다시 로그인할 때 Refresh 토큰을 발급하거나 JWE로 암호화하는 등의 방법도 고려해야 합니다.
JWT를 이용한 회원 가입과 로그인 과정에 대해 설명해주세요.
- 사용자는 id, password 등의 필수 정보를 입력해 회원가입을 완료합니다.
- 회원가입이 완료된 id와 password를 입력하여 로그인을 요청을 보냅니다.
- 서버는 회원 DB에 있는 사용자인지 확인을 합니다.
- 회원 DB에 등록되어 있는 사용자라면 JWT 토큰에 사용자의 고유한 ID값을 부여해서 기타 정보와 함께 Payload에 넣고 토큰의 유효기간을 설정합니다.
- 서버는 비밀키를 이용해 JWT를 발급하고 클라이언트에게 전달합니다.
- 사용자는 JWT를 쿠키, 로컬스토리지, 세션스토리지 중 하나에 저장합니다.
- 이후 저장된 토큰을 이용해 인증이 필요한 요청이 있다면 헤더의 Authorization 속성에 토큰을 실어 보냅니다.
- 서버는 비밀키를 이용해 해당 토큰을 복호화한 후, 클라이언트에서 JWT 인증 정보가 조작되지 않았는지와 유효기간을 확인합니다.
- 검증이 완료되면 Payload를 디코딩해서 사용자 데이터를 전달합니다.
Access Token과 Refresh Token의 차이점은 무엇인지 설명해주세요.
Access Token은 짧은 유효 기간을 가지며 API 접근 및 권한 부여에 사용되고, Refresh Token은 Access Token의 갱신을 위해 사용되며 보다 오래 유지됩니다.
로그인 과정에서 리프레쉬 토큰을 활용하는 경우
- 로그인 및 인증: 사용자가 로그인하면 서버에서 엑세스 토큰과 리프레시 토큰을 발급합니다.
- 클라이언트 저장: 엑세스 토큰은 클라이언트(예: 브라우저)에 안전한 곳에 저장됩니다. 주로 브라우저의 쿠키 또는 로컬 스토리지에 저장됩니다.
- 서버 저장: 리프레시 토큰은 서버 측에 안전하게 저장됩니다. 이 토큰은 클라이언트에서 직접 액세스하지 않으며, 보안된 서버 환경에 저장됩니다.
- 엑세스 토큰 사용: 클라이언트는 엑세스 토큰을 사용하여 인증이 필요한 요청을 서버에 보냅니다. 서버는 엑세스 토큰의 유효성을 확인하고, 사용자를 인증하며 요청을 처리합니다.
- 엑세스 토큰 만료: 엑세스 토큰은 일정 기간 후에 만료됩니다. 만료되면 클라이언트는 새로운 엑세스 토큰이 필요합니다.
- 리프레시 토큰 사용: 엑세스 토큰이 만료되면 클라이언트는 리프레시 토큰을 사용하여 서버에 새로운 엑세스 토큰을 요청합니다.
- 서버 검증 및 엑세스 토큰 재발급: 서버는 리프레시 토큰의 유효성을 확인하고, 사용자를 인증한 후 새로운 엑세스 토큰을 발급합니다. 이 새로운 엑세스 토큰은 클라이언트에 반환됩니다.
- 클라이언트 저장 및 사용: 새로 발급받은 엑세스 토큰은 클라이언트에 저장되고, 클라이언트는 다시 이 토큰을 사용하여 서버에 요청을 보냅니다.
둘의 차이점을 정리하자면,
- Access Token
- Access Token은 주로 사용자의 인증 및 권한 부여를 위해 발급됩니다.
- 짧은 유효 기간을 가집니다.
- 클라이언트는 Access Token을 사용하여 API의 엔드포인트에 접근하고, 서버는 이 토큰을 검증하여 사용자의 인증 및 권한을 확인합니다.
- 유효 기간 동안 클라이언트는 동일한 Access Token을 사용할 수 있습니다.
- Refresh Token
- Refresh Token은 Access Token의 갱신을 위한 특별한 토큰입니다.
- 긴 유효 기간을 가집니다.
- 클라이언트는 Access Token의 유효 기간이 만료되었을 때 Refresh Token을 사용하여 새로운 Access Token을 얻습니다.
- Refresh Token을 사용하면 사용자가 다시 로그인하지 않아도 Access Token을 갱신할 수 있으므로 사용자 경험을 향상시킬 수 있습니다.
로컬 스토리지와 세션 스토리지의 차이가 무엇인지 설명
로컬 스토리지:
- 영구적 저장: 로컬 스토리지에 저장된 데이터는 사용자가 수동으로 지우거나 브라우저 설정을 변경하지 않는 한 영구적으로 보관됩니다.
- 도메인 별로 공유: 로컬 스토리지는 동일한 도메인 내의 모든 페이지에서 접근할 수 있습니다.
- 용량: 일반적으로 5MB~10MB의 용량을 가집니다.
- 장점: 데이터가 영구적으로 저장되므로, 사용자의 로그인 정보나 설정 등을 장기간 보관하기에 적합합니다.
- 단점: 용량이 제한적이며, 브라우저를 종료하거나 다른 디바이스에서는 접근할 수 없습니다. 또한 서버와 동기화되지 않아 데이터의 일관성을 보장하기 어렵습니다.
세션 스토리지:
- 임시 저장: 세션 스토리지에 저장된 데이터는 브라우저 세션이 유지되는 동안만 유지됩니다. 브라우저를 닫으면 데이터가 삭제됩니다.
- 도메인 별로 공유: 세션 스토리지도 로컬 스토리지와 같이 동일한 도메인 내의 모든 페이지에서 접근할 수 있습니다.
- 용량: 일반적으로 5MB~10MB의 용량을 가집니다.
- 장점: 데이터가 브라우저 세션 동안만 보존되므로, 임시 데이터나 일회성 정보를 저장하기에 적합합니다. 브라우저를 종료하면 데이터가 자동으로 삭제되므로 보안에 유리합니다.
- 단점: 데이터가 브라우저 세션 동안만 유지되기 때문에 장기적인 정보 저장에는 적합하지 않습니다. 브라우저를 종료하거나 탭을 닫으면 데이터가 손실됩니다.
정리:
- 로컬 스토리지와 세션 스토리지는 용량이 비슷합니다.
- 두 저장소 모두 클라이언트 측에서 사용되며, 서버와의 통신 없이 데이터를 읽고 쓸 수 있습니다.
- 데이터는 동일한 도메인 내의 모든 페이지에서 공유됩니다.
- 데이터 보안에 대한 고려가 필요하며, 민감한 정보는 저장하지 않는 것이 좋습니다.
- 데이터의 유효성 검증 및 무결성은 클라이언트 측에서 이루어지며, 신뢰성 있는 데이터 저장소로 사용되기 어렵습니다.
