[기술면접 학습법2]

📝  기술면접 질문 목록

•  (JavaScript) Promise의 기능과 필요한 이유에 대해서 설명해 주세요.
•  (React)  React의 state와 props에 대해서 설명해 주세요.
•  (HTTP / 네트워크) CSR과 SSR의 차이점에 대해서 설명해 주세요.
•  (웹서버) Same-Origin Policy와 CORS에 대해서 설명해 주세요.

 

 

🔒 (JavaScript) Promise의 기능과 필요한 이유에 대해서 설명해 주세요.

🔑 Promise는 자바스크립트에서 네트워크요청, 파일 로딩, 데이터베이스 조회 등과 같은 비동기 작업을 효과적으로 다루기 위한 기능입니다. 이를 통해 비동기 작업의 성공과 실패를 보다 직관적으로 나타내며, 작업의 순서와 관계를 명확하게 표현할 수 있습니다.

 

🔑 Promise의 필요성 (요약)

1. 비동기 작업의 처리를 보다 직관적이고 가독성있게 만들어 줍니다.
2. Promise 체이닝을 통해 콜백 지옥을 해결해줄 수 있습니다.
3. then과 catch 메서드를 통해 성공에 대한 작업, 에러처리를 간편하게 만들어 줍니다.

 

👀 (꼬리질문) Promise 외에도 자바스크립트에서 비동기 작업을 다루는 방법이 있을까요?

💬 네, 자바스크립트에는 Promise 외에도 콜백과 async/await를 사용하여 비동기 작업을 다룰 수 있습니다. 콜백은 비동기 작업이 완료되었을 때 호출되는 함수를 등록하는 방식으로 비동기 작업을 다룹니다. async/await는 Promise를 기반으로 한 문법으로, 코드를 동기적으로 작성하는 것처럼 보이게 해줍니다.

 

👀 (꼬리질문) Promise  체이닝이 무엇인가요?

💬 Promise  체이닝은 비동기 작업을 연속적으로 처리하기 위해 사용되는 기법입니다. then 메서드를 통해 체인을 만들어 각 단계에서 작업결과를 처리하고 다음 작업으로 넘길 수 있습니다. 에러처리는 catch메서드를 통해 다루며, 이렇게 함으로써 코드를 간결하게 유지하면서 직관적으로 비동기 작업을 다룰 수 있습니다.

 

 

🔒 (React)  React의 state와 props에 대해서 설명해 주세요.

🔑 React에서 state는 컴포넌트 내에서 관리되는 데이터 입니다. state는 컴포넌트가 내부적으로 유지하며, 해당 데이터의 상태가 바뀔때마다 컴포넌트가 다시 렌더링 됩니다. 반면, props는 부모 컴포넌트로부터 전달받은 읽기 전용 데이터 입니다. 

 

👀 (꼬리질문) state와 props의 차이점은 무엇인가요?

💬 데이터의 변경 가능성에서 주요한 차이가 있습니다. state는 컴포넌트 내부에서 관리되는 변경가능한 데이터이며, props를 부모 컴포넌트로 부터 전달되는 읽기 전용 데이터 입니다.

 

👀 (꼬리질문) 왜 props는 읽기 전용인가요?

💬 컴포넌트간의 데이터 흐름을 일관성 있고 예측가능하게 만들기 위해 읽기 전용으로 설계되었습니다. 이를 통해 React에서의 데이터 흐름은 하향식이라는것을 알 수 있습니다.

 

👀 (꼬리질문) 만약 자식 컴포넌트에서 props를 변경해야 한다면 어떻게 해야 하나요?

💬  변경하고 싶은 값을 컴포넌트 내부의 state로 복사하여 관리해야 합니다. props를 컴포넌트의 state로 설정하고, setState메서드를 사용하여 state를 수정 할 수 있습니다. 이렇게 함으로써 자식 컴포넌트 내부에서는 데이터를 변경하고, 부모 컴포넌트에는 영향을 주지 않으면서 독립적인 동작을 수행할 수 있습니다.

 

🔒 (HTTP / 네트워크) CSR과 SSR의 차이점에 대해서 설명해 주세요.

🔑 CSR는 클라이언트 사이드에서 자바스크립트를 사용하여 동적으로 데이터를 렌더링하는 방식이고, SSR은 서버에서 완전한 HTML을 생성하여 클라이언트에게 전달하는 방식입니다. CSR은 초기 렌더링 속도가 느린 반면, 그 후론 필요한 데이터만 렌더링하면 되기 때문에 SSR방식에 비해 서버 부하가 덜하다는 장점이 있습니다. 하지만 html에 데이터가 없다보니, 검색 봇이 해당 페이지는 빈페이지로 착각하여 SEO(검색엔진 최적화)에 취약할 수 있다는 단점이 있습니다.

 

👀 (꼬리질문) SEO가 뭔가요?

💬SEO(Search Engine Optimization)는 웹사이트나 웹 페이지를 검색 엔진 결과 페이지에서 상위에 노출시키기 위한 최적화 작업입니다.

 

👀 (꼬리질문) CSR이 SEO에 취약한 이유는 무엇인가요?

💬 검색 엔진은 주로 HTML을 기반으로 페이지를 조회하는데, CSR은 초기에 빈 HTML을 로드하고, 자바스크립트를 사용하여 데이터를 가져와서 동적으로 컨텐츠를 생성합니다. 이로인해 검색엔진이 실제 페이지 내용을 파악하기 어렵기 때문입니다.