💡JavaScript
✓ Promise의 기능과 필요한 이유에 대해서 설명해 주세요.
promise란?
➡️ 말 그대로 어떤 과정 이후 주어진 동작을 수행할 것 이라는 약속으로,
Promise는 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있습니다.
- 작업 결과 따라 성공 또는 실패를 리턴하며 결과 값을 전달 받을 수 있으며,
Promise객체를 통해 미리 함수를 등록해놓고 결과에 따라서
작업이 성공했을 경우resolve를 호출받고, 해당 값을 then메서드를 통해 전달받아 리턴합니다.
작업이 실패했을 경우에는reject가 호출받으면,해당 값을 catch 메서드를 통해 전달받아 리턴합니다.- Promise는 pending, fulfilled, rejected 이렇게 총 3가지 상태가 있습니다.
pending(대기) : 처리가 완료되지 않은 상태 (생성자를 통해 프로미스 객체를 만드는 순간을 의미)
fulfilled(이행) : 성공적으로 처리가 완료된 상태 ( resolve 함수를 실행하는 경우 )
rejected(거부) : 처리가 실패로 끝난 상태 ( reject 함수를 실행하는 경우 )
✓ 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요.
순수함수란?
: 입력값에 대해 항상 동일한 출력값을 반환하는 함수로, 외부상태에 영향을 끼치는
사이드 이펙트가 없는 함수를 의미합니다.
- 순수함수는 입력값만을 가지고 처리하기 때문에 입력값이 변경되지 않는 한 항상 같은 결과를 반환하므로 불변성을 유지합니다.
- 순수함수를 제작하기 위해서는 데이터의 불변성을 유지하는 것이 중요한데, 전달인자로 참조 자료형이 전달되는 경우 객체 자체를 바꾸는 사이드이펙트가 생길 수 있어 호출한 배열의 값을 변형하지 않는
mapfilterreduce메소드가 각광받게 되었습니다.- (꼬리) side effect : 함수 내부에서의 구현이 함수 외부에 영향을 끼치는 경우에 해당 함수는 Side Effect가 있다고 말한다.
💡 React
✓ React의 state와 props에 대해서 설명해 주세요.
state란?
: stste는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다.
- useState훅을 사용하여 state를 만들고, setState를 사용하여 값을 변경합니다.
prop란?
: props는 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 것들을 의미합니다.
- props로 넘겨준 값들은 불변하며, 읽기 전용 입니다. ( 성별, 이름 )
- 따라서 자식 컴포넌트에서의 직접적인 props 변경은 불가하며, 내려받은 setState나 함수를 이용하여 props를 바꾸도록 부모 컴포넌트에게 요청할 수 있습니다.
(꼬리)왜 변수가 아닌 state에 데이터를 저장하나?
- 변수로 저장해도 됩니다. 하지만 변수값이 바뀌었을 때 일반 변수는 리렌더링이 되지 못하지만, state에 저장된 데이터는 리렌더링이 되기 때문입니다.
리액트에서는 분리된 컴포넌트 별로 리렌더링을 하게하여 성능을 높일 수 있으므로, state를 주로 사용한다고 생각합니다.
✓ React 컴포넌트의 key 속성에 대해서 설명해 주세요.
React Component의 key 속성으로는?
: map 메소드 등을 사용하여 컴포넌트 배열을 렌더링 할 경우, 리액트에서는 각 컴포넌트마다 고유한 key값을 가질 것을 요구합니다. 렌더링 할 때 마다 각 원소에 어떤 변화가 일어났는지 효율적으로 감지할 수 있도록 하기 위함입니다.
key에는 어떤 값이 들어가나요?
: key는 반드시 변하지 않고, 예상 가능하며, 유일해야 합니다. 고유한 id 값이 없을 경우 인덱스 값을 넣어줄 수 있습니다.
Math.random()을 통해 생성하는 키 값은중복값을 가질 수 있고, 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있기 때문에 지양합니다.(꼬리)component에 대해 더 설명해주세요 ?
: 컴포넌트란 하나의 기능 구현을 위한 코드 묶음입니다. 각자 독립된 컴포넌트를 만들고 이러한 컴포넌트들을 여러개 만들고 조합해 어플리케이션을 만들 수 있습니다. 이러한 컴포넌트 기반의 개발은 가독성이 좋을 뿐 아니라 코드 유지 및 보수를 용이하게 합니다.
✓ useEffect의 dependency array에 대해서 설명해 주세요.
종속성 배열이란?
: useEffect의 두 번째 인자는 배열입니다. 이 배열은 조건을 담고 있습니다.
- 여기서 조건은
boolean형태의 표현식이 아닌 "어떤 값의 변경이 일어날 때" 를 의미합니다.- 해당 배열에는 어떤값의 목록이 들어가는데, 이 배열을 종속성 배열이라고 부릅니다. 각 종속성은 표현식이 아닌 어떤 값으로 할당됩니다.
- 배열 내의 해당 값의 값이 변할 때, 첫 번째 인자의 함수가 실행됩니다.
- 만약 배열 내 빈 배열이 들어가는 경우에는 컴포넌트가 처음 생성될 때만 effect 함수가 실행됩니다.
- 배열 내 아무것도 넣지 않은 경우에는 총 3가지 경우에 함수가 실행되는데
① 컴포넌트가 처음 생성되거나,
② props가 업데이트되거나,
③ 상태(state)가 업데이트될 때 effect 함수가 실행됩니다.(꼬리)useEffect란?
: 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook 입니다.
- useEffect의 첫 번째 인자는 함수입니다. 해당 함수 내에서 side effect를 실행하면 됩니다.
💡 HTTP/네트워크
✓ CSR과 SSR의 차이점에 대해서 설명해 주세요.
CSR과 SSR의 가장 큰 차이점?
: 먼저 서버사이드 렌더링(SSR) 이란 서버로부터 완전하게 만들어진 HTML파일을 받아와 "페이지 전체를 렌더링" 하는 방식이고,
클라이언트 사이드 렌더링(CSR) 이란 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링 하는 방식입니다.
- SSR과 CSR의 가장 큰 차이점은, 페이지가 렌더링 되는 위치입니다.
SSR은 서버에서 페이지를 렌더링하고, CSR은 클라이언드에서 페이지를 렌더링합니다.(꼬리)
- SSR은 초기 로딩이 빠르고 SEO가 중요한 서비스에 권장되고,
- 검색엔진 최적화에 유리 ! ➡️ HTML에 담겨진채로 브라우저에 전달되기 때문
- 빠른 초기 로딩 ➡️ 서버에서 렌더링 준비를 마친 파일을 전달 받음
- 상위노출이 필요한 경우 ( 검색엔진 최적화 )
- 누구에게나 동일한 내용을 노출하는 컨텐츠인 경우 ( 사용자와의 상호작용이 적고, 변경사항이 적은 경우 )
- "페이지마다" 데이터가 자주 바뀌는 경우
- CSR은 상호작용이 많은 서비스에 권장됩니다.
- 개인정보 데이터를 기준으로 구성 ( 검색엔진 성능이 좋지 않기 때문 )
- ( 화면 깜빡임이 없기 때문에 )보다 나은 UX를 제공하고 싶은 경우
- 상위 노출보다 데이터 보호 가 우선인 경우
✓ GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요.
- GET메서드는 서버에서 데이터를 조회할 때 쓸 수 있는 메서드 입니다.
- POST 메서드는 서버에서 데이터를 추가할 때 사용하는 메서드 입니다.
GET과 POST는 어떻게 요청하나요 ?
- GET요청 에는 url에 쿼리 파라미터나 path 파라미터를 이용해 필요한 정보를 요청합니다.
- POST 요청 에서는 추가하고자 하는 데이터를 HTTP body에 담아 전달합니다
(꼬리)
- HTTP 메서드 종류에는 무엇이 있나요?
: 대표적으로 HTTP메서드는 GET, POST, PUT, PATCH, DELETE가 있습니다. GET은 정보를 조회, POST는 정보를 생성, PUT, PATCH는 정보를 수정, DELETE는 정보를 삭제할 수 있습니다.- PUT과 PATCH의 차이는 무엇인가요?
PUT은 전체 수정, PATCH는 부분수정을 할 수 있습니다.
💡웹서버 기초
✓ HTTP 메세지 구조에 대해 설명해 주세요.
HTTP Messages?
: 클라이언트와 서버 사이에서 데이터가 교환되는 방식입니다.
- HTTP Messages는 요청(Requests) 과 응답(Responses) 을 통해 서로 데이터를 주고 받습니다.
- 메세지는 start-line(응답 : status-line), header, body로 나뉩니다.
- start line : start line에는 요청이나 응답의 상태를 나타냅니다. 항상 첫 번째 줄에 위치하며 응답에서는 status line이라고 부릅니다.
- HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다.
- empty line : 헤더와 본문을 구분하는 빈 줄이 있습니다.
- body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용합니다.
이 중 start line과 HTTP headers를 묶어 요청이나 응답의 헤드(head)라고 하고, payload는 body라고 이야기합니다.
✓ Same-Origin Policy와 CORS에 대해서 설명해 주세요.
Same-origin Policy란?
동일출처정책을 의미합니다.
SOP 내에서는 uri의 프로토콜, 호스트, 포트 3가지 모두가 동일해야 같은 출처로 인정합니다. 이 정책이 필요한 이유는 동일한 출처가 아닌 곳에서의 요청을 막아 보안성을 유지하기 위함입니다.CORS란?
: 하지만 출처가 다른 경우에도 리소스를 받아야 하는 경우가 있습니다.
이때 사용하는 것이 바로CORS입니다. (Cross-Origin Resource Sharing의 줄임말로) 교차 출처 리소스 공유를 의미합니다.
서버에서 다른 출처에서의 요청을 허용하게 해줄 수 있는 CORS설정을 해준 경우는 접근할 수 있습니다. express에서 cors미들웨어를 사용하여 상황에 맞게 cors 설정을 제어할 수 있습니다.
✨ 내가 답변한 질문
✓ React의 state와 props에 대해서 설명해 주세요.
- 느낀점
- 아직 내용을 다 숙지하지 못해서 글을 읽는 듯이 답변한 부분이 아쉬웠다
- 다음번에는 내용을 잘 숙지해서 자연스럽게 답변하는 연습을 해야겠다 😎
