인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점을 자세히 설명해주세요. 각 방식의 장단점과 실제 프로젝트 활용 경험이 있다면 공유해주세요.
JWT의 경우 대표적으로 access_token을 클라이언트가 쿠키에 저장하고 해당 쿠키의 유무로만 로그인을 유지하고 서버에 별도로 저장하지 않습니다. 하지만 서명으로 보호되어 변조가 어렵더라도 서버에서 관리 하지 않아 탈취 된 토큰을 무효화 할 수 없어 위험 할 수 있습니다.
세션 방식의 경우에는 JWT처럼 쿠키에 저장 하여 쿠키의 유무로 로그인을 유지하되, 서버에 별도로 저장하여 세션 강제 만료, 세션 시간 조정 등 탈취 시 대응이 가능하다는 장점이 있습니다. 대신 서버에서 관리하기 때문에 부하가 증가하고 서버가 분산될수록 모든 서버가 세션을 공유해야 하는 등 복잡성이 증가하게 됩니다.
인턴에서 봐온 access_token , additional_token(네이버,구글 로그인 시 사용)을 말합니다.
쿠키, 세션, 웹스토리지의 차이를 설명해보세요.
쿠키는 클라이언트가 서버와 통신하기 위한 데이터가 저장되는 곳으로 쿠키의 세션 동안 유지됩니다.
세션은 쿠키에 저장되는 데이터는 맞지만 해당 쿠키를 서버에서 관리하여 세션을 유지합니다.
그리고 웹 스토리지는 세션 스토리지, 로컬 스토리지가 있는데 스토리지는 서버와 통신하는게 아닌 클라이언트가 사용하는 데이터가 저장됩니다. 세션 스토리지는 브라우저의 탭이 꺼지면 데이터가 사라지고 로컬 스토리지는 브라우저나 탭이 꺼지더라도 데이터가 유지되는 차이점이 있습니다.
Optimistic Update에 대해 설명해주세요.
Optimistic Update란 예를 들어 좋아요를 눌렀을 때 서버의 응답을 기다리지 않고 바로 좋아요가 적용된 화면을 클라이언트에게 보여주는걸 말합니다. 이 방법은 네트워크 문제로 반응이 느려질 수 있는 문제를 해결하여 사용자 경험을 향상시키기 위해 사용되지만 서버로부터 성공적으로 응답을 받았는지 확인이 필요합니다.
요청 실패 시 좋아요 상태를 롤백하거나 실패 시 별도의 처리를 하는 등의 확인 방법이 있습니다.
Tailwind CSS의 장점과 주요 개념을 설명해주세요.
Tailwind CSS는 className에 유틸리티 클래스를 직접 작성해 빠르고 직관적으로 스타일링할 수 있는 유틸리티 퍼스트 CSS 프레임워크입니다.
주요 장점으로는 CSS파일을 따로 작성할 필요가 없어서 직관적인 스타일링이 가능합니다.
클래스 형태로 스타일을 제공하므로 매번 새로운 규칙을 작성하지 않아도 되어 높은 생산성을 가집니다.
코드 실행 전에 변수 선언과 함수 선언을 스코프의 최상단으로 끌어올리는 것을 뜻합니다. 다른 언어에서는 선언 이후 참조가 가능했지만 자바스크립트에서는 선언 전에 호출이 가능합니다. 다만 var, let, const의 경우에는 선언만 호이스팅 될뿐 값은 호이스팅이 되지 않는데 var의 경우에는 선언 전에 호출 시 에러가 아닌 undefined를 반환합니다. let과 const는 선언 전에 호출 시 에러를 반환한다는 점에서 차이가 있어서 함수는 괜찮지만 변수의 경우에는 선언에 주의를 해야합니다.
쓰로틀링과 디바운싱의 개념과 사용하는 이유 및 대표적인 사용처에 대해서 설명해주세요.
쓰로틀링은 함수를 일정 시간 간격마다 실행되도록 제한하는 기술입니다. 이를 사용해 과도한 호출을 줄여 성능을 최적하 할 수 있어 스크롤 이벤트에서 많이 사용됩니다.
디바운싱은 연속된 함수의 호출 발생 시 가장 마지막 함수외에 무시하고 실행하는 기술입니다. 이를 사용해 불필요한 처리를 줄이게 되고 검색어 자동 완성에서 많이 사용됩니다.
따라서 지속적인 이벤트에서 주기적으로 호출이 필요하다면 쓰로틀링, 마지막 호출만 중요하다면 디바운싱을 사용합니다.
저는 캔버스를 사용해 움직임을 구현하면서 사용자의 입력이 너무 빠른 경우 버벅이는 등 성능 저하가 발생했었습니다. 그래서 쓰로틀링을 이용하여 좌우 움직임에 매끈함을 추가하고 디바운싱을 사용하여 중복 점프를 방지한 점프 기능으로 보완하였습니다.
이벤트 버블링과 캡처링, 이벤트 위임에 대해 설명해주세요.
이벤트 버블링은 하위 요소에서 상위 요소로 이벤트가 전파 되는 것을 말하는데 모달창이 바깥 배경 클릭 시 닫히는 기능을 예로 들 수 있습니다.
이벤트 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파 되는 것인데 일반적으로는 잘 쓰이지 않고 개발자가 필요에 따라 명시적으로 활성화 하여 사용하는 기능입니다.
이벤트 위임은 부모 요소가 자식 요소들의 이벤트를 한 번에 처리하는 방식으로 리소스를 절약 할 수 있습니다. 대표적으로 다수의 체크 박스를 전체 선택 하는 기능이 있습니다.
자바스크립트에서 동기와 비동기의 차이에 대해 설명해주세요.
자바스크립트는 싱글 스레드 환경인데 여기서 동기는 작업을 순서대로 진행 하여 앞의 작업이 끝나야만 다음 작업을 진행합니다. 반면에 비동기는 네트워크 요청같은 얼마나 걸릴지 예측이 어려운 작업을 처리 할 때 완료를 기다리지 않고 다음 작업을 실행하여 리소스를 효율적으로 사용하는 차이가 있습니다.
JS가 싱글 스레드인 이유는 사용자 경험이 중요해서입니다. 싱글 스레드는 한 번에 하나의 작업만 처리하므로 복잡한 동시 실행 문제를 피하여 충돌 가능성을 낮출 수 있어 안정적이고 직관적으로 동작이 가능해서입니다.
클로저에 대해 설명해주세요.
클로저는 함수가 선언된 환경의 변수를 기억하여 호출 스택에서 빠져 나온 뒤에도 계속 참조 할 수 있는 개념입니다. 이를 통해 특정 함수나 행동에 의해 외부 변수를 계속 참조 할 수 있는데 이를 통해 데이터 은닉화, 캡슐화를 구현 할 수 있습니다. 하지만 남용하면 메모리 누수가 발생 할 수 있는 단점도 있습니다.
대표적인 예시로는 useState가 있습니다. 페이지가 리랜더링 되려면 상태의 변화를 감지하여 이루어지는데 여기서 useState는 클로저를 이용하여 이전 상태 값을 기억하고 업데이트합니다.
여러 비동기 함수를 동시에 병렬로 호출하기 위해서는 어떻게 해야 할까요?
여러 비동기 함수를 병렬로 호출하려면 Promise.all()을 사용할 수 있습니다. Promise.all()은 여러 비동기 작업을 동시에 실행하고, 모든 작업이 완료될 때까지 기다린 후, 각각의 결과를 배열로 반환합니다. 이 방식은 순차적으로 각 비동기 작업을 기다릴 필요가 없기 때문에 효율적입니다.
하지만 Promise.all()에는 주의할 점이 있습니다. 입력된 Promise 중 하나라도 실패(Reject)하면, 즉시 전체 작업이 중단되고 에러가 발생합니다. 또한, 비동기 작업의 실행 순서는 보장되지 않으므로 순서가 중요한 경우에는 별도의 처리가 필요합니다. -> async/await과 for문을 통하여 순서 제어합니다.
상태관리는 왜 할까요? 그리고 평소 상태관리는 어떻게 하시나요?
React의 상태 관리는 UI와 데이터의 독립성을 유지하고, 상태 변경에 따라 효율적으로 UI를 리렌더링하기 위해 필요합니다.
상태가 특정 컴포넌트에 한정 된다면 useState를 통해 단순하게 지역적으로 관리하지만 상태가 여러 컴포넌트들과 공유되며 복잡도가 올라갔을 때는 props drilling문제가 발생하니 ContextAPI나 Zustand를 사용하여 전역적으로 관리하였습니다.
