면접을 보고 왔다....하하하하하하하
역시 실제 면접을 가니까 아는 것도 대답 잘 못하겠고 그냥 백지 상태가 되버리는...
이번엔 면접 질문에 대해 답이 마음에 안 들거나 아예 모르는 질문들만 기록을 하려 합니다.
사실 떨어서 질문도 잘 기억이 나질 않지만....마음을 다 잡고...
1. useLayoutEffect가 무엇인가요?
useLayoutEffect는 useEffect와 달리 브라우저가 화면을 그리기 전에 동기적으로 실행되는 훅입니다.
이 시점에 DOM을 측정하거나 조작하면 리플로우나 리페인트가 발생할 수 있어 성능에 영향을 줄 수 있기 때문에, 꼭 필요한 경우에만 사용하는 것이 권장됩니다.
예를 들어, 헤더의 UI가 유저 이름의 길이에 따라 배치가 달라지는 경우, useLayoutEffect를 사용해 화면 그리기 전에 이름의 width를 측정하고 그 값을 기반으로 레이아웃을 조정하면, 렌더 후 깜빡이거나 위치가 튀는 문제 없이 자연스러운 화면을 구현할 수 있습니다.
이처럼 useLayoutEffect는 정확한 DOM 측정이나 깜빡임 방지처럼 렌더 타이밍이 중요한 작업에 효과적이며, 일반적인 비동기 작업이나 API 호출처럼 화면 표시 이후 처리해도 되는 작업은 useEffect로 처리하는 것이 더 적합합니다.
이런 hook이 있다는 건 알았지만 사용해본 적이 없어서 대답을 못했다...하하하하
최종 프로젝트에서도 이름 길이 때문에 ui가 튀는 문제가 있었는데 그 때 useLayoutEffect로 리팩토링하며 다시 정리할 예정이다.
2. cors 에러가 무엇인가요?
CORS(Cross-Origin Resource Sharing)는 웹 브라우저가 보안 상 다른 출처(도메인, 프로토콜, 포트가 다름)의 서버에 요청을 보낼 때, 서버가 허용하지 않으면 발생하는 보안 정책 오류입니다.
즉, 브라우저가 다른 출처에 요청을 보내려 할 때, 서버가 이를 허용하지 않으면 브라우저가 요청을 차단하고 CORS 에러를 발생시킵니다.
서버에서 적절한 Access-Control-Allow-Origin 헤더를 설정해 주어야 문제를 해결할 수 있습니다.
3. polyfill이 무엇인가요?
Polyfill은 최신 웹 표준 API나 기능이 구형 브라우저에서 지원되지 않을 때, 이를 흉내 내거나 구현해주는 코드입니다.
즉, 새로운 기능을 아직 지원하지 않는 환경에서도 동일한 기능을 사용할 수 있도록 도와주는 '호환성 코드'라고 볼 수 있습니다.
4. http 통신에서 options는 무슨 역할을 하나요?
OPTIONS 메서드는 HTTP 프로토콜의 요청 방식 중 하나로, 클라이언트가 서버에 특정 리소스에 대해 어떤 HTTP 메서드(GET, POST 등)와 헤더를 허용하는지 미리 확인하는 데 사용됩니다.
특히 CORS 요청 시, 브라우저가 '프리플라이트(preflight)' 요청으로 OPTIONS 메서드를 보내 서버가 실제 요청을 허용하는지 검사하는 역할을 합니다.
면접을 통해 cs 지식이 많이 부족하다는 것을 깨달았다....
임재원 취업하는 그 날까지 화이팅~
