JavaScript
- Promise의 기능과 필요한 이유에 대해서 설명해주세요.
- Promise는 자바스크립트에서 비동기 처리를 하기 위한 객체이다. 비동기 작업을 수행하면서 결과를 바로 반환하지 않고, resolve와 reject 함수를 호출하여 작업 결과를 전달한다. 이를 통해 비동기 작업의 성공 여부를 확인할 수 있으며, 프로미스 체이닝을 통해 콜백 지옥을 해결할 수 있다.
- 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
- 순수함수는 동일한 인자가 주어지면 항상 동일한 값을 반환하며, 외부의 상태를 변경하지 않는 함수이다. 즉, 불변성을 가지며 사이드 이펙트가 없는 함수이다. 이런 특징 덕분에 함수의 결과를 예측하기 쉽고, 코드의 신뢰성과 안정성을 높일 수 있다. 불변성을 지키지 않으면, 함수를 통해 외부 변수의 값이나 상태를 변경하게 되고, 이렇게 되면 사이드 이펙트가 발생해서 예기치 못한 결과가 발생할 수 있다.
React
- React의 state와 props에 대해서 설명해주세요.
- state는 컴포넌트 내에서 변경 가능한 데이터를 저장하는 객체이다. state 값이 변경되면 컴포넌트가 리렌더링된다. state는 컴포넌트 내에서 변경 가능하기 때문에 setState 함수를 사용하여 업데이트할 수 있다.
- props는 컴포넌트가 받는 읽기 전용 데이터를 말하며, 부모 컴포넌트로부터 전달받는다. props는 읽기 전용이므로 직접 업데이트할 수 없고, 상위 컴포넌트에서 업데이트 되어 자식 컴포넌트로 전달될 수 있다.
- React 컴포넌트의 key 속성에 대해서 설명해주세요.
- key는 컴포넌트를 렌더링할 때 사용되는 고유한 식별자이다. key를 통해 업데이트된 부분을 찾아내어 렌더링 성능을 최적화할 수 있다. key는 보통 데이터의 id 값을 사용하여 기존의 컴포넌트를 재사용할 수 있게 된다. 만약 key 값으로 배열의 인덱스를 사용하게 될 경우, 데이터가 추가되거나 삭제될 때 인덱스 값이 변경되면 key값도 변경되어 예기치 않은 결과가 발생할 수 있고, 업데이트될 때마다 새로운 컴포넌트를 생성하게 되어 렌더링 성능이 저하된다.
- useEffect의 dependency array에 대해서 설명해주세요.
- dependency array는 useEffect가 실행되는 조건을 지정하는 배열이다. dependency array에 지정한 값이 변경되면 useEffect가 실행된다. dependency array를 지정하지 않으면 모든 렌더링이 될 때마다 useEffect가 실행되어 성능이 저하되고, 빈 배열로 지정했을 경우에는 컴포넌트가 처음 화면에 나타났을 때에만 실행된다.
HTTP/네트워크
- CSR과 SSR의 차이점에 대해서 설명해주세요.
- CSR는 클라이언트 측에서 JavaScript를 이용하여 페이지를 렌더링하는 방식이고, SSR은 서버 측에서 페이지를 렌더링하고 완성된 페이지를 클라이언트로 전송하는 방식이다. CSR은 초기 로딩 시간이 길지만 UX가 향상되고, SSR은 초기 로딩 시간이 짧지만 서버 부하가 크다. 또한 CSR은 하나의 html파일을 사용하기 때문에 SEO(검색 엔진 최적화)에 SSR에 비해 불리하다.
- GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
- GET은 서버로부터 정보를 받아올 때 사용되며, 주로 URL에 파라미터를 추가하여 요청을 보낸다. GET 메서드는 요청을 보낼 때 URL에 데이터가 노출되므로 보안상 취약할 수 있으며, 데이터 전송량에 제한이 있다. 반면에 POST는 클라이언트에서 서버로 데이터를 전송하는 메서드로, HTTP 요청 바디에 데이터를 담아서 전송한다. GET 메서드와 달리 데이터가 URL에 노출되지 않아 보안성이 더 뛰어나며, 데이터 전송량의 제한이 없다. POST 메서드는 주로 서버에 데이터를 추가하거나 일부 수정할 경우에 사용한다.
웹서버 기초
- HTTP 메세지 구조에 대해 설명해주세요.
- HTTP 메세지는 클라이언트와 서버간에 주고받는 데이터의 블록이다. HTTP 메세지는 요청 메세지와 응답 메세지 두 종류가 있으며, 모두 스타트라인, 헤더, 바디로 구성된다. 스타트라인은 요청의 경우 HTTP 메서드, 요청 URL 등이 담겨있고, 응답의 경우 상태코드, 상태 메세지 등이 담겨있다. 헤더에는 데이터의 형식이나 브라우저 정보 등 부가적인 정보를 담고있다. 바디는 전송되는 실제 데이터를 담고 있다.
- Same-Origin Policy와 CORS에 대해서 설명해주세요.
- SOP는 웹 보안 정책 중 하나로, 다른 출처의 문서와 상호작용하지 못하도록 브라우저가 제한하는 보안 메커니즘이다. 즉, 같은 출처에서만 자원을 공유할 수 있다. 여기서 출처는 프로토콜, 호스트, 포트가 모두 같은 것을 말한다. CORS는 SOP를 우회하기 위한 방법 중 하나이다. CORS를 사용하면 다른 출처의 리소스를 요청하거나 공유할 수 있다. 이를 위해 서버는 응답 헤더에 Access-Control-Allow-Origin 등의 특별한 헤더를 포함하여 클라이언트 측에서 보낸 요청이 허용되는 출처를 명시한다. CORS를 통해 보안 상의 문제 없이 서로 다른 출처 간의 데이터를 공유 가능하게 한다.
코린이