1.후기
Section2가 벌써 마무리됐다. 이렇게 2번만 더 지나가면 수료 기간이 다가온다. 부트캠프에서 짜준 바쁜 스케줄과 "00기수"라는 소속감 넘치는 단어에 힘들긴 했어도 걱정 없는 날들이었는데, 갑자기 불안해졌다. 이럴 때일수록 빡공해야지...나 할 수 있겠지..????
2.새롭게 알게 된 것
Chapter1. 기술 면접 준비
Chapter2. 미니 잡서칭
Chapter3. 회고 블로깅
<Chapter1. 기술 면접 준비>
1.JavaScript
Promise의 기능과 필요한 이유에 대해서 설명해주세요.
비동기 함수의 순서를 제어하기 위해 사용
동기 처리 방식-> 응답 후 요청 가능
비동기 처리 방식 -> 응답과 관계없이 언제나 요청 가능, 효율적 작업
but 단점 -> 비동기 처리의 응답은 먼저 처리된 순서대로 나옴, 의도와 다른 값을 반환할 수 있음
그 순서를 제어해주기 위한 방법 중 하나가 프로미스
즉, 비동기 처리의 순서를 제어하기 위한 장치
순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
사이트 이펙트가 없고(외부 상태를 변경하지 않음)
+불변성을 유지하는 함수(동일한 전달 인자가 주어졌을 때 항상 같은 값을 리턴하는 함수)
ex.
toUpperCase() -> 순수함수(외부 상태 변경 안 함, 값은 값 리턴)
Math.random() -> 순수함수 아님(외부 상태 변경 안 하지만, 실행할 때마다 다른 값 리턴, 블변성 위배)
즉, 순수함수란 사이드 이펙트는 없고, 불변성은 있는 함수
2.React
React의 state와 props에 대해서 설명해주세요.
react에서 데이터를 다룰 때 사용되는 개념
state -> 컴포넌트 내부에서 변화하는 값, 상태 변경 시 상태 변경 함수 사용
props -> 컴포넌트 외부에서 전달받은 컴포넌트 속성, state와 달리 변경 불가(읽기 전용)
react에서 데이터는 단방향 하향식으로 흐르지만
state 값을 자식 컴포넌트에서 변경하고 싶은 경우
상태 변경 함수 자체를 자식 컴포넌트에 넘겨주어 자식 컴포넌트에서 실행하는 방식으로 데이터 흐름 원칙에 부합하게 하면서 state 값 변경 가능
즉, state는 컴포넌트 내부 값, props 외부 값으로 react에서 데이터를 다룰 때 사용하는 개념
React 컴포넌트의 key 속성에 대해서 설명해주세요.❌
일반적으로 리엑트에서 map 함수로 동일한 컴포넌트를 생성할 때 사용
주의 -> map 안의 최상위 컴포넌트에 삽입, 유일한 값은 넣어 주는 것이 좋음
키 속성을 넣는 이유 -> 기존 요소의 트리와 비교해서 새로운 변경점에 대해서만 리렌더링하기 때문에 최적화하기 위해 사용
즉, key 속성을 컴포넌트의 유일한 속성값을 설정하여 최적화를 돕는 속성
useEffect의 dependency array에 대해서 설명해주세요.
useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 하는 react의 훅
종속성 배열 -> useEffect의 두 번째 인자, effect 함수를 언제 실행하게 할지 결정
종속성 배열이 없다면 -> 처음 렌더링 될 때, props 업데이트, state 업데이트 시 실행
빈 배열 -> 최초 1번 실행
state를 요소로 갖고 있다면 -> 처음 렌더링 될 때, 해당 state가 업데이트될 때 실행
즉, 종속성 배열은 effect 함수의 실행 시기를 결정하는 useEffect의 두 번째 인자
3.HTTP/네트워크
CSR과 SSR의 차이점에 대해서 설명해주세요.
csr -> client side rendering, 클라이언트에게 파일 전송 후 클라이언트에서 렌더링
ssr -> server side rendering, 서버에서 렌더링 후 클라이언트에 전송
csr -> 클라이언트가 html, js 다운받는 동안 화면에 아무것도 렌더링되지 않으므로 첫 페이지 로딩 시간 길다는 단점.
하지만 다른 사이트로 이동 시 처음에 파일을 모두 받아왔기 때문에 빠르게 렌더링 가능하다는 장점
ssr -> html, js의 필요한 부분만 받아오기 때문에 첫 페이지 로딩은 짧은 대신 페이지 이동 시 같은 작업을 반복하여 렌더링이 느림
즉, csr, ssr은 렌더링의 위치, 렌더링 소요 시간에 차이가 있음
GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
get, post: http 요청 메서드
get -> 특정 리소스의 데이터를 받아올 때 사용
post -> 특정 리소스에 데이터를 제출할 때 사용
차이점: 멱등성(여러 번 요청을 보내도 한 번 보낸 것과 같이 서버 상태가 동일한 것)
ex.
get -> 같은 요청을 여러 번 보내도 데이터를 받아올 뿐 서버 상태를 변경시키지 않음 -> 멱등성 있음
post -> 같은 요청을 여러 번 보낼 때마다 새로운 리소스 생성 -> 멱등성 없음
즉, get은 데이터를 받아올 때 사용하는 멱등한 메서드
post는 데이터를 제출할 때 사용하는 멱등하지 않은 메서드
4.웹서버 기초
HTTP 메세지 구조에 대해 설명해주세요.
HTTP 메세지는 크게 "요청", "응답"으로 나뉨
// 구조
"'요청'과 '응답' 각각 Start Line/Status Line, Header, Body
// Start Line (head)
"Start Line 은 1) HTTP 메서드 2) 요청 대상 3) 프로토콜 버전을 포함합니다."
// Status Line (head)
"Status Line 은 1) 프로토콜 버전 2) 상태 코드 3) 상태 텍스트을 포함합니다."
// Header (head)
"요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다."
// Body (payload)
"데이터의 정보를 나타내는 부분, 모든 요청에 Body 가 필요하지 않음."
즉, http는 start/status line, header, body의 구조를 가진 요청과 응답으로 메세지를 주고받음
Same-Origin Policy와 CORS에 대해서 설명해주세요.
same origin policy -> 동일 출처 정책, 보안을 위해 동일한 출처의 리소스만에만 접근하게 하는 정책
cors -> 교차 출처 리소스 공유, 다른 출처라도 특정 리소스에 접근 가능하도록 권한을 허용해주는 것(sop를 잠시 해제)
cors 장점: 실제 요청을 통째로 보내기 전에 권한 확인을 하므로 리소스 측면에서 효율적, CORS에 대비가 되어있지 않은 서버를 보호
즉, cors는 다른 출처에서 특정 데이터를 받아올 수 있게 하는 장치
<Chapter2. 미니 잡서칭>
1.추천하는 GitHub Repository 목록
- https://github.com/JaeYeopHan/Interview_Question_for_Beginner
- https://github.com/baeharam/Must-Know-About-Frontend
- https://github.com/jojoldu/junior-recruit-scheduler\
2.개발/기술 블로그 찾아보기 - Surfit
https://www.surfit.io/explore/develop/web-dev
<Chapter3. 회고 블로깅>
