JavaScript
Promise의 기능과 필요한 이유에 대해서 설명해주세요.
기능 : 비동기 처리
필요성 : 콜백 지옥 해결, 비동기 작업의 순차적 처리, 오류 처리
- 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
불변성 : 데이터를 변형하지 않는 것
사이드 이펙트 : 함수 호출 외부에서 함수에 의해 발생하는 결과
즉 순수함수는 동일한 인자에 대해서 항상 같은 결과(불변성)를 반환하면서 부작용(side effect)이 없는 함수
React
- React의 state와 props에 대해서 설명해주세요.
상태(State): 컴포넌트가 내부적으로 가지고 있는 데이터. 컴포넌트의 상태가 변경되면, 해당 컴포넌트가 다시 렌더링된다. 상태는 setState(), useState() 메소드를 사용하여 변경 가능.
setState(), useState() 차이 : setState() 클래스형 컴포넌트, useState()는 함수형 컴포넌트에서 사용
속성(Props): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터. 자식 컴포넌트는 props를 읽기 전용으로 사용하여, 이를 가지고 렌더링한다. 부모 컴포넌트에서 전달되는 props는 자식 컴포넌트에서 변경할 수 없다.
변경하려면 Props가 아닌 State에 담아 변경함수를 props를 통해 자식 컴포넌트로 전달하면 된다.
- React 컴포넌트의 key 속성에 대해서 설명해주세요.
key는 고유값
리액트는 컴포넌트의 상태나 속성(prop)이 변할 때마다 render()함수를 호출하는데, 이 때 render()함수는 새로운 리액트 요소 트리를 반환하고 이를 기존의 요소 트리와 비교해 새로운 변경점에 대해서만 재렌더링을 수행한다.
이때, React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고, 고유성을 부여하기 위해 key를 지정해야 한다.
안해도 문제는 없지만
이런 오류나 나옴(오류가 났으니 문제인건가..)
- useEffect의 dependency array에 대해서 설명해주세요.
useEffect Hook의 두 번째 인자로 전달되는 배열은 "의존성 배열(dependency array)" 라고 불린다. 이 배열은 useEffect가 감시(watch)할(state 또는 props) 값을 명시한다. 배열에 명시된 값들 중 하나라도 변경되면 useEffect 콜백 함수가 실행된다.
의존성 배열이 없으면 랜더링 될때마다 useEffect가 실행된다. 빈 배열([])로 전달되면, useEffect 콜백 함수는 마운트될 때 한 번만 실행된다.
HTTP/네트워크
- CSR과 SSR의 차이점에 대해서 설명해주세요.
CSR:
Client Side Rendering의 약자
말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다.
클라이언트는 그것을 받아 렌더링을 시작한다.
SSR:
Server Side Rendering의 약자
말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
랜더링이 필요할 때마다 서버에서 랜더링 한 후 클라이언트로 보내준다.
- GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
GET: 서버에서 데이터를 가져오는 요청
POST: 서버에 데이터를 보내는 요청
GET 메서드는 데이터를 조회하는 용도로 사용하고, POST 메서드는 데이터를 생성하거나 수정하는 용도로 사용하는 것이 적절하다.
-멱등성? : 같은 요청에 항상 같은 응답이 오는 성질. GET은 멱등성을 지님
웹서버 기초
- HTTP 메세지 구조에 대해 설명해주세요.
라인, 헤더, 본문의 형태로 요청과 응답으로 분류 가능
요청 라인: HTTP 메서드, 요청 대상 URL, HTTP 버전 등이 포함되어 있다.
상태 라인: HTTP 버전, 상태 코드, 상태 메시지 등이 포함되어 있다.
요청 헤더: 클라이언트 정보, 요청 데이터 정보, 서버가 반환받을 데이터 형식 등의 정보.
응답 헤더: 서버 정보, 응답 데이터 정보, 클라이언트가 반환받을 데이터 형식 등의 정보.
요청 본문: POST, PUT, DELETE 등과 같이 요청에 데이터를 함께 전송할 때 해당 데이터가 포함.
응답 본문: 서버에서 반환하는 데이터가 포함.
- Same-Origin Policy와 CORS에 대해서 설명해주세요.
Same-Origin Policy(SOP) : 동일 출처 정책을 뜻함.
한 마디로 ‘같은 출처의 리소스만 공유가 가능하다’라는 정책.
프로토콜, 호스트, 포트의 조합으로, 이 중 하나라도 다르면 동일한 출처가 아님
CORS : 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제.
