코드스테이츠-부트캠프 [Section 2 기술면접 ]

김희목·2024년 3월 11일

코드스테이츠

목록 보기

26/56

1. Promise의 기능과 필요한 이유에 대해서 설명해 주세요.

프로미스는 비동기 작업을 처리하기위해 자바스크립트에서 사용하는 문법입니다. 여기서 비동기 작업이란 다른 코드들과 실행 순서를 공유하지 않는 작업을 의미합니다. 이런 비동기 작업에 순서를 부여하고 싶을 때가 있을 수 있는데, 이 때에 promise를 사용합니다. 다른 해결 방법으로 콜백 함수를 사용 할 수도 있는데, 콜백함수보다 프로미스가 코드가 .then() .catch() 등 PromiseAPI를 사용할 수 있어서 코드의 양을 줄이고 가독성을 증가시킬 수 있어 필요합니다.

2. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요.

순수함수는 오직 함수의 입력만이 함수의 결과에 영향을 주고, 입력으로 전달된 값을 수정하지 않는 함수입니다. 순수함수는 전달된 값이 아닌 새로운 값을 만들어 반환 하므로 불변성이 있고, 함수 내의 구현이 함수 외부에 영향을 미치지 않기 때문에 사이드 이펙트가 없습니다.

1. React의 state와 props에 대해서 설명해 주세요.

state는 리엑트의 컴포넌트 내에서 사용하는 데이터를 저장해 놓은 것입니다. state 변경 함수를 사용하면 state를 변경할 수 있는데, 이때 state가 들어있는 컴포넌트는 렌더링이 다시 됩니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 넘기는 데이터인데, 자식 컴포넌트에서 이를 변경할 수 없고, 오직 읽는 것 만이 가능 합니다.
state는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다. useState훅을 사용하여 state를 만들고, setState를 사용하여 값을 변경합니다. props는 부모 컴포넌트에서 자식컴포넌트로 넘겨주는 것들을 의미하고, props로 넘겨준 값들은 불변하며, readOnly 속성을 가지고 있습니다.

2. React 컴포넌트의 key 속성에 대해서 설명해 주세요.

리엑트 컴포넌트의 key속성은 엘리먼트의 고유 식별자로 사용되는 속성입니다. 리스트나 맵처럼 어떤것이 나열되어 있는 경우, 이것이 정렬되거나, 다른 요소가 들어가거나, 삭제될 수 있는데, 이의 경우에 key가 있으면 Dom을 올바르게 업데이트 하게 해주고, 코드를 확인 할때에 어떤 부분에서 변경이 일어났는지 알려주기도 합니다. key속성은 무조건 사용해야 하는 것은 아니지만, 사용하지 않으면 콘솔에 경고문구를 표시합니다.

3. useEffect의 dependency array에 대해서 설명해 주세요.

useEffect의 dependency array는 useEffect에서 두번째 매개변수로 전달 받는 배열입니다. 이 배열의 값이 변경되면 useEffect의 첫 번째 매개변수로 전달 된 함수가 실행이 됩니다. 배열을 빈 배열로 넘겨주게 되면 변할 배열의 값이 없으므로 컴포넌트가 처음 생성 (마운트와 언마운트) 이 될 때에만 실행이 되고, 배열을 넘겨주지 않으면 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 함수가 실행 됩니다.
useEffect란, 컴포넌트 내에서 사이드 이펙트를 실행할 수 있게 하는 훅입니다. useEffect는 첫 번째 인자로 콜백함수를 받고, 두 번째 인자로 배열을 받는데, 이 배열을 dependency array 라고 합니다.

페이지 렌더링하는 위치의 차이가 있습니다.
CSR은 클라이언트에서 페이지를 렌더링 하는 것으로 상호작용을 모두 클라이이언트에서 처리하기 때문에 상호작용 면에서는 빠르지만, 초기에 모든 파일을 서버로 부터 받아와야 하기 때문에 초기 로딩 속도가 느립니다. SSR은 서버에서 페이지를 렌더링 하는 것으로, 서버에서 html을 완전히 구현해서 보내주는 것이므로 초기 렌더링 속도가 빠르고, html에 콘텐츠가 포함되어 있어 검색엔진 최적화에도 용이합니다.

둘 다 HTTP프로토콜에서 사용되는 요청 메서드 인데 GET요청은 서버로 부터 데이터를 요청하는 역할을 하며 데이터를 검색하거나 조회 하는데 사용되고. POST는 서버에 데이터를 추가 할 때 사용 됩니다.

1. HTTP 메시지 구조에 대해 설명해 주세요.

HTTP 메시지는 클라이언트와 서버 사이에서 데이터가 교환되는 방식으로, 클라이언트가 start line으로 http메서드를 정하고, 어떤 서버에 요청할것인지 등을 정하고, 헤더를 구성한뒤, 본문에 서버에 보낼 데이터를 작성해서 보내주면, 서버에서 상태를 결정하고, 마찬가지로 헤더를 구성한뒤, 본문에 클라이언트로 보낼 데이터를 작성한뒤 보냅니다.

2. Same-Origin Policy와 CORS에 대해서 설명해 주세요.

Same-Origin Policy 는 동일출처 정책으로, 같은 출처의 리소스만 공유 가능하다는 것인데, 여기서 같은 출처란, 프로토콜, 호스트, 포트가 같아야 하는 것을 의미 합니다. Same-Origin Policy는 다른 출처로 리소스가 공유되지 않아 보안성이 매우 높습니다. CORS는 다른 출처의 리소스를 받아와야 할때에 사용하는 것인데, http헤더를 이용해 제한적으로 리소스 공유를 하기때문에 SOP만큼 보안성이 높지는 않지만 안전하다고 할 수 있다. (Cors를 허용할때 어떤 설정을 해야하는가?)