● 오늘 공부한 것
기술면접
- Promise의 기능과 필요한 이유에 대해서 설명해 주세요.
프로미스란 비동기 메서드에서 마치 동기 메서드처럼 값을 반환하고 싶을 때 사용하는 비동기 함수입니다. 만약에 ajax요청과 같은 서버에 요청을 보내거나 데이터를 가져와 변수에 저장하고 싶은데, 동기적으로 불러와 저장한다면 변수는 undefined가 될 것입니다. 왜냐하면 서버에서 데이터를 불러오는 시간이 있기 때문입니다. 따라서 프로미스를 조금 더 쉽게 말하면 미래에 어떤 값을 반환하겠다는 것을 약속하는 비동기 함수입니다.
만약 프로미스를 통해 ajax 요청과 같은 비동기 작업을 처리하고 싶다고 했을 때, 정상적으로 이뤄진다면 resolve함수가 호출되고 , 문제가 생긴다면 reject함수가 호출됩니다. 이후 then, catch와 같은 후속메서드를 통해 resolve, reject된 값을 전달받고 원하는 추가 처리를 할 수 있습니다.
또한 프로미스는 마이크로태스크큐에 저장되어 콜스택이 비어있다면 이벤트 루프가 마이크로태스크큐에있는 프로미스들을 콜스택에 옮겨 실행합니다. 프로미스는 setTimeInterval, setTimeout과같은 비동기 함수보다 우선순위가 높기 때문에 콜스택이 비게되면 마이크로태스크큐에 있는 비동기 함수들이 실행되고 이후 태스크큐에이 있는 비동기 함수들이 실행됩니다.
- 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요.
순수함수란, 항상 동일한 입력을 하면 동일한 출력을 하는 함수를 말합니다. 쉽게이야기하면 항상 예측할 수 있는 결과값을 가진 함수를 이야기합니다. 사용자에게 값을 받고 이 값을 1을 더해주는 만들어주는 함수를 만든다면, 우리는 늘 이 값이 항상 사용자가 입력한 값보다 1크다고 예측 할 수 있습니다. 하지만 사용자에게 값을 받고, Math.random이라는 메서드를 써서 사용자의 값을 더하는 함수를 만든다면, 우리는 함수가 어떤 값을 반환할지 예측할 수 없습니다.
또한 순수함수는 사이드 이펙트를 만들지 않습니다. 사이드 이펙트란 의도치 않은 결과를 이야기합니다. 만약 어떤 함수를 통해 원하는 값만 반환하고 싶은데, 함수를 실행하면 함수내에서 외부변수를 참조하고 외부변수를 변화를 시킨다면 이는 의도한 바가 아니게 됩니다. 따라서 순수함수는 의도치 않은 결과를 만들지 않고, 항상 예측가능한 값만 반환하기 때문에 상태를 변환시키지 않는 불변성을 보장합니다.
React
- React의 state와 props에 대해서 설명해 주세요.
리액트에서 props는 잘 변하지않는 값을 이야기하고, state는 자주 변할 수 있는 값입니다. 리액트에서 값은 단방향으로 흐르기 때문에, 데이터같은 큰 변수들은 부모 컴포넌트에 저장하고, 이를 자식 컴포넌트에게 물려주어 사용하는게 일반적입니다. 큰 데이터가 아니라, 연산에 필요한 간단한 값들은 state로 선언하여 자식컴포넌트 내에서 사용합니다. 하지만 가끔 props 값을 자식컴포넌트에서 변경시켜야한다면, 부모 컴포넌트에 있는 setter함수를 자식컴포넌트에게 props로 물려주어 사용합니다. 이를 state 끌어올리기 라고 합니다.
- React 컴포넌트의 key 속성에 대해서 설명해 주세요.
리액트에서 key는 렌더링 할 때 요소의 제거나 변경을 감지할 때 사용됩니다. 따라서 key값을 주게 되면 리액트가 빠르게 변경을 찾아내어 효율적인 렌더링을 할 수 있게 됩니다. 하지만 key는 항상 유일한 값으로 두어야합니다. 예를들어 어떠한 상품의 정보가 담겨있는 12개의 배열을 만들고 map을 통해서 key값이 모두 같은 컴포넌트를 리턴하게 했다고 가정해보겠습니다. 제가 만약에 setter함수로 배열의 첫번째요소를 변경하게된다면, 리액트는 모든 요소를 같다고 보고있기 때문에 첫번째 컴포넌트 이외에 모든 컴포넌트를 렌더링하게 됩니다. 따라서 이는 비효율적이기 때문에 key값을 항상 고유한 값으로 지정해야합니다.
- useEffect의 dependency array에 대해서 설명해 주세요.
useEffect는 의존성 배열에 지정된 값이 변경됨에 따라 useEffect가 실행됩니다. useEffect는 클래스형 컴포넌트의 라이플사이클 메서드를 모방할 수 있는데요, state가 변경될 때마다 실행하고 싶다면, 의존성배열에 state를 적어주면 됩니다. 이는 클래스형 컴포넌트의 componentDidUpdate 메서드와 같습니다. 또한 컴포넌트가 마운트 되었을 때만 useEffect를 실행하고 싶다면 의존성 배열에 빈배열을 두면 됩니다. 이는 클래스형 컴포넌트의 componenetDidMount와 같습니다. 또한 컴포넌트가 언마운트될 때 실행시키고 싶다면 useEffect의 클린업함수를 적고 의존성 배열에 빈배열을 두면 됩니다. 이는 클래스형 컴포넌트의 componentWillUnmount와 같습니다. 또한 의존성배열에 아무것도 적지 않는다면 렌더링 될 때마다 useEffect가 실행됩니다. 이는 렌더링될 때마다 실행되기 때문에 권장치 않는 방법이라고 합니다.
HTTP/네트워크
- CSR과 SSR의 차이점에 대해서 설명해 주세요.
CSR과 SSR의 가장 큰 차이점은 '렌더링의 주체'인데요, SSR같은 경우 클라이언트가 다른 페이지로 이동할 때 서버에 요청을 하게 됩니다. 서버는 렌더링할 준비를 마친 상태로 클라이언트에게 응답을 보내주게 됩니다. 하지만 CSR같은 경우, 웹 애플리케이션에 접속하게 되면 서버에게 HTML, CSS, JS 파일을 가져오고 클라이언트 쪽에서 렌더링을 하게 됩니다. SSR, CSR은 각각 장단점이 있는데요, SSR같은 경우 장점으로는 검색엔진 최적화에 좋고 초기 로딩속도가 빨라 클라이언트에 빠르게 콘텐츠를 보여줄 수 있습니다. 하지만 서버쪽에 부담이 높아지게 되고, 동적인 콘텐츠를 보여주는데 한계가 있습니다. CSR같은 경우는 소비자에게 좋은 UX경험을 제공할 수 있고, 서버의 부담을 줄일 수 있습니다. 하지만 초기 로딩 속도가 길고 대부분 코드가 자바스크립트 파일에 담겨있기 때문에 검색엔진 최적화에 좋지 않습니다.
- GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요.
GET메서드와 POST는 멱등성에서 차이점을 보입니다. GET메서드 같은 경우 매번 GET요청을 할 때마다 항상 같은 결과의 데이터를 받을 수 있기 때문에 멱등성이 보장됩니다. 하지만 POST같은 경우 요청할 때마다 새로운 데이터를 만들기 때문에 멱등성이 보장된다고 할 수 없습니다. 이외에도 GET, PUT, DELETE 메서드는 멱등성이 보장되지만 POST, PATCH 메서드는 멱등성이 보장되지 않습니다.
웹서버 기초
- HTTP 메세지 구조에 대해 설명해 주세요.
HTTP 메시지는 request, response 2가지로 나눌 수 있습니다. request같은 경우 startline, header, body로 나눌 수 있는데요, startline에는 메서드, HTTP 버전을 적고 header에는 host, content-type, connection 등의 내용을 기입할 수 있습니다. body에는 POST같은 메서드를 사용하는 경우, 데이터를 보내야하기때문에 body에 데이터를 실어 request할 수 있습니다. response는 statusline, hedaer, body로 나뉩니다. statusline에는 상태코드, HTTP 버전이 담기고 header에는 server, connection, content-type, cors가 담기게 됩니다. body에는 응답에 대한 결과를 담아 보낼 수 있습니다.
- Same-Origin Policy와 CORS에 대해서 설명해 주세요.
SOP는 동일 출처 정책으로 출처가 같아야 리소스 공유가 가능한 것입니다. 반대로 CORS는 교차 출처 정책으로 출처가 다르더라도 리소스 공유가 가능해집니다. 예를들어 SOP는 페이스북에서 프로토콜, 도메인, port가 같다면 같은 페이스북 내에서 소스 요청을 할 수 있지만 페이스북에서 인스타그램에게 리소스 요청은 할 수 없습니다. 브라우저는 SOP를 디폴트로 두고 있기 때문에, CORS 정책을 보장받기 위해서는 서버쪽에서 CORS 설정을 해주어야합니다. 이는 3가지 시나리오로 이루어질 수 있습니다. 바로 프리플라이트, 단순 요청, 인증된 요청입니다.(이후 플라이트, 단순요청, 인증된 요청 설명..블라블라..)
● 내가 놓치고 있던 것
- 콜백헬
- 프로미스를 쓰는 가장 큰 이유가 콜백헬이었음을 .. 잊고 있었다.. 그 지옥을 직접 경험해보앗는데..!! 왜잊은것이야111!!!
- 리액트에서 useMemo는 함수가 반환하는 값을 기억하고, useCallback은 함수를 기억한다.
● 수업이외의 공부
- ㄹㅣ액트.. 제로초 강의 듣기..
- 웹팩 이눔 공부 하는거 ..
- 알고리즘 3개 풀기
