[프론트엔드] 면접준비 개념편

 

✅ useEffect의 실행 순서에 대해 설명해주세요

의존성 배열이 없을 경우
1. 컴포넌트 렌더링이 끝나면 useEffect 실행
2. state가 변경
3. 컴포넌트가 리렌더링
4. 다시 useEffect 실행
5. 1-5번 과정이 계속 순환

의존성 배열에 value 있을 경우
1. 컴포넌트 렌더링이 끝나면 useEffect 실행
2. value의 state가 바뀔 때 마다 useEffect 실행

의존성 배열에 value 없을 경우
처음으로 컴포넌트가 렌더링이 끝나면 useEffect 실행

---

 

✅ 처음으로 컴포넌트가 렌더링이 끝나면 useEffect 실행

var
함수 레벨 스코프
재할당 가능
중복선언 가능

let
블록 레벨 스코프
재할당 가능
중복선언 불가능

const
블록 레벨 스코프
재할당 불가능
중복선언 불가능

---

 

✅ Async/Await와 Promise의 차이

에러 핸들링
Promise를 활용할 시에는 .catch()문을 통해 에러 핸들링이 가능하지만, async/await은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용

코드 가독성
Promise의 .then() 지옥의 가능성
코드가 길어질수록, async/await를 활용한 코드가 가독성이 좋음
async/await은 비동기 코드가 동기 코드처럼 읽히게 해줌
코드 흐름을 이해 하기 쉬움

*Promise
자바스크립트에서 비동기 처리에 사용되는 객체
내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해해도 좋음

Promise 3가지 상태
비동기 처리가 완료 되지 않았다면 Pending(대기)
완료 되었다면 Fulfilled(이행)
실패하거나 오류가 발생하였다면 Rejected(실패)

*Async/Await
가장 최근의 나온 비동기 처리 문법으로 기존의 callback이나 Promise의
단점을 해소하고자 만들어짐
callback이나 Promise의 경우에 단점은 꼬리에 꼬리를 무는 코드가
나올 수도 있다는 부분이다. 흔히들 콜백 지옥, then()지옥이라고 부름

await를 통해 Promise 반환 값을 받아 올 수 있음

---

 

✅ 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은?

데이터가 많을 수록 데이터를 불러오는 속도가 느려질 수 밖에 없기 때문에 렌더링의 속도와 필요없는 데이터들도 보여줄지 말지 고려해야함

---

 

✅ CloudFront를 사용해 본 적이 있나요? 사용해봤다면, CloudFront로 배포한 이유를 설명해주세요.

아니오

HTTP → HTTPS
손쉬운 설정으로 http 로의 접속을 https로 리디렉션 시켜줄 수 있음

CDN을 통한 더 빠른 페이지 응답속도
S3으로만 배포하는 경우, 선택한 리전 내에서만 생성이 되기 때문에 해당
리전에서 멀어질수록 접속 속도가 느려짐.
하지만 CloudFront를 이용하면 전 세계에 분포된 엣지 로케이션이라고 하는 데이터 센터의 엣지 서버를 사용해 콘텐츠를 캐싱하고, 사용자가 위치한 곳에서 가장 가까운 엣지 로케이션에서 콘텐츠를 제공받을 수 있도록 해주는 역할을 함

---