면접 대비 CS 정리

다른 분 다른 회사 CS 질문 위주 정리. 면접 보신 분에겐 리스펙..

1. GET vs POST

• GET
  클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드
  GET을 통한 요청은 URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링 (query string) 이라고 부름
  캐시 가능, 히스토리가 남음, 북마크 가능, 길이제한, 정보 보안 취약, 데이터 요청할 떄 주로 사용
  멱등(연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질)

• POST
  클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용 되는 메서드
  GET과 특징이 다 정반대
  멱등이 아님

번외 : PUT / PATCH?

• PUT : 리소스의 “모든 것”을 변경한다.
• PATCH : 리소스의 “일부”를 변경한다.

2. CORS 에러란?

• 다른 출처 간에 리소스를 공유할 수 있도록 되게 하려고 합법적으로 리소스 공유 하는 방법
• 브라우저가 요청 시 헤더에 Origin 이라는 필드에 요청을 보내는 출처를 함께 담아 보냄. 이후 서버가 이 요청에 응답을 할 때 응답 해더 Access-Control-Allow-Origin 이라는 값에 "이 리소스를 접근하는 것이 허용 된 출처"임을 내려주고 이후 응답 받은 브라우저는 자신이 보낸 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교한 후 유효한지 결정
• 요청 받는 백엔드에서 CORS 프레임워크 상에서 지정, 만일 서버에서 지정하기 어려운 상황이라면 프론트엔드에서 프록시 서버를 활용하여 제어하는 방법도 있다.

3. 호이스팅?

• 호이스팅은 코드를 실행하기 전 변수/함수 선언을 해당 스코프 최상단에 물리적으로 끌어올리는 현상이 아니라 자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실행 컨텍스트(코드가 실행되기 위해 필요한 환경 객체) 환경 레코드에 기록해놓는 현상을 말합니다. 코드 실행 전에 이미 변수/함수 선언이 레코드에 저장되어 있어 오류 없이 동작하는 것입니다. 다만 변수 호이스팅의 경우 let과 const는 TDZ에 걸려 오류가 발생하는 것이고 함수 호이스팅의 경우 변수형으로 선언할 경우 에러가 나지만 함수로 선언할 경우 에러가 나지 않고 실행되는 것입니다.

4. var / let / const

• let과 const는 블록 레벨 스코프, 즉 코드 블록을 지역스코프로 인정하며 let은 변수 중복 선언이 불가능하지만 재할당은 가능합니다. const는 선언과 초기화가 동시에 진행되어야하며 재할당 또한 불가능합니다. 반면 var는 변수 중복 선언이 가능하며 예기치 못한 값을 반환할 수 있습니다. 또한 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 됩니다. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환합니다.

5. TDZ

• let, const, 혹은 변수 선언식 함수에서 블록 레벨 스코프를 지역 스코프로 인정할 경우 실행컨텍스트 내에서 변수는 발견하였지만 선언이 불가능해진 일시적 사각지대를 의미합니다.

6. 스코프 vs 클로저

• 스코프 : 프로그래밍언어에서 유효범위는 어느 범위까지 참조하는 지를 뜻합니다. 예를 들어 변수, 함수에서의 블록, 함수 레벨 스코프를 예시로 들 수 있습니다.
• 클로저 : 함수가 선언된 환경의 (렉시컬) 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기술을 말합니다.

7. 이벤트 버블링 vs 이벤트 캡쳐링

• 이벤트 버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는 것을 말합니다. 이를 중단하려면 event.stopPropagation()를 사용하면 됩니다. 캡처링은 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려가는 것을 말합니다.

8. 프리벤트 디폴트 vs 스탑프로포메이션

• e.preventDefault는 고유 동작을 중단시키고(보내기, 새로고침 등), e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.(div 중첩 등)

9. 리액트에서의 랜더링 조건

• 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미하며 State에 변경이 있을 때, 새로운 Props가 들어올 떄, 부모 컴포넌트가 랜더링 될 때 랜더링 된다.

10. 생명주기

• 리액트 컴포넌트는 생성, 업데이트, 제거의 생명주기를 갖습니다. 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이납니다. 처음 컴포넌트를 불러와서 생성될 때, 데이터가 바뀌거나 부모 컴포넌트가 렌더링 할 떄 , 페이지를 이동하거나 사용자의 행동으로 인해 컴포넌트가 화면에서 사라질 때, 이를 리엑트에서는 마운트, 업데이트, 언마운트라고 부릅니다.

11. useEffect

• 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 하는 훅으로 컴포넌트가 마운트 됐을 떄, 언마운트 됐을 때, 업데이트 됐을 때 처리 할 수 있습니다.

12. contextAPI

• 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트 끼리 쉽게 값을 공유할 수 있게 해줍니다. 주로 프로젝트에서 전역 관리에서 사용되며 새로운 Context를 만들 때는 createContext 함수를 사용합니다.

13. 리액트의 불변성

• React에서 상태의 불변성이 중요한 이유는 React에서는 직접 값을 변경하는 것이 불가능하고 이를 감지하지 못하기 때문에 리렌더링이 되는 조건에 부합하지 않게 된다. 따라서 상태의 불변성을 지켜줘야 한다.

14. 웹팩 및 바벨이란?

• 웹팩은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다.
• 트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것이다. 이를 해주는 것이 트랜스파일러이다. 대표적인 예가 바벨이다.