후기
모의 기술 면접을 하는 날이었다. 진도를 나가지 않는 날이라 많은 분이 이 틈을 타 휴가를 내셔서 나도 따라 빠지고 싶은 마음이 굴뚝같았다. 그래도 Section 2 기술 면접을 준비한 것이 전체적인 내용을 상기하는 데 도움이 되었고 모의 면접 경험도 쌓을 겸 출석 결정(?). 모의 기술 면접은 모의지만 그래도 할 때마다 떨린다. 사람들 앞에서 말해야 한다는 것보다 내가 준비한 것을 잊어버리지 않아야 한다는 것이 더 부담스러웠다. 이후 실제 기술 면접 볼 때가 걱정이다. 그래도 면접 후 다들 좋은 말씀을 해주셔서 기분도 좋고 오늘 출석하길 잘했다는 생각이 들었다😎
새롭게 알게 된 것
Chapter1. 기술 면접 준비
Chapter2. 회고 블로깅
<Chapter1. 기술 면접 준비>
1.재귀
재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
1) 일반적으로, 반복해야 하는 연산이 많은 경우
2)
-주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우
-중첩된 반복문이 많은 경우
-반복문 중첩 횟수를 예측하기 어려운 경우
-예시: 피보나치수열(매 연산마다 이전 두 개의 값을 더하는 연산을 반복)
2.UI/UX
UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.
1) UI:사용자 인터페이스, UX:사용자 경험, 포함 관계
2)
-UI: 사람들이 컴퓨터와 상호 작용하는 시스템 / 그래픽 아이콘, 키보드, 마우스
-UX: 사용자가 서비스를 이용하면서 느끼는 총체적 경험
-관계: UX가 UI를 포함, UX의 문제점 발견 -> UI 개선 -> UX 개선 보완 관계이기도 함
3) UX는 UI를 포함, 보완 관계
3.Custom Component
Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.
1) 세 가지
2)
-HTML, CSS, JS를 하나의 파일에서 관리
-class, id 이름을 자동 생성
-CSS에서 자바스크립트, 리엑트 문법 사용 가능(props 속성, 삼항연산자)
-예시: 속성으로 color가 있다면 해상 색을 사용, 없다면 red를 사용 -> props와 삼항연산자를 이용해서 적용 가능
3) 파일 관리 용이, class id 이름 자동 생성, CSS에서도 자바스크립트, 리엑트 문법 사용 가능
useRef가 필요한 상황을 예시를 들어 설명해주세요.
1) React에서 DOM에 직접 접근해야 하는 상황
2) 예시
-입력해야 하는 input text가 여러 개일 때, useRef로 받아온 태그와 현재 이벤트 타겟 된 태그를 비교하여 엔터를 누르면 다음 input text로 넘어가게 구현
-비디오의 재생, 중지 버튼 구현 시
3) useRef는 React에서 DOM에 직접 접근하여 제어해야 할 때 사용
4.Redux
상태관리 라이브러리의 필요성에 대해서 설명해주세요.
1) 상태관리 라이브러리를 사용하면 props drilling 문제 해결할 수 있음.
2)
-props drilling: react의 데이터 흐름은 단방향 하향식이므로, 해당 상태를 사용하지 않는 컴포넌트에도 props로 state를 전달해 주는 것
-Redux와 같은 상태 관리 라이브러리 -> 전역 상태 저장소를 제공, 상태가 필요한 컴포넌트에서 바로 저장소에 접근 가능 -> props drilling 해결
3) 상태관리 라이브러리는 전역 상태 저장소를 제공하여 props drilling 문제를 해결해주는 장점이 있기 때문에 필요
Redux의 주요 개념들과 연결 관계를 설명해주세요.
1) 4가지 주요 개념
Action, Dispatch, Reducer, Store
2) 상태가 변경되어야 하는 이벤트 발생 -> Action에서 Action 객체 생성 -> Dispatch 함수가 Reducer에게 전달 -> Reducer가 Action 객체 확인 후, case에 맞는 함수 실행하여 Store의 상태 변경
3) state 변경 사항을 담은 Action 객체가 Reducer까지 전달되고, 그곳에서 함수를 실행시켜 Store의 상태 변경
5.웹 표준 & 웹 접근성
Semantic HTML의 필요성을 예시를 들어 설명해주세요.
1) Semantic HTML: Semantic Element를 적절하게 사용하여 구성한 HTML
2) 필요성
-개발자 간 원활한 소통을 위해
-검색 효율성과 웹 접근성을 높이기 위해
-예시
- hgroup를 적절히 사용하여 검색 상위 노출 -> 검색 효율성 높임
- 스크린리더가 이미지의 내용까지는 읽지 못하므로 img 태그에 alt 속성을 넣어 줌 -> 웹 접근성 향상
3) Semantic HTML을 사용하여 소통, 검색 효율성, 웹 접근성에 도움
6.네트워크 심화
IP 프로토콜의 한계에 대해서 설명해주세요.
1)
-IP 프로토콜: 패킷 교환 방식으로 정보를 주고받을 때 사용하는 통신 규약
-한계: 비연결성, 비신뢰성
2)
-비연결성: 패킷을 받을 대상이 없거나 서비스 불능 상태여도 클라이언트에서 서버의 상태를 파악할 방법이 없기 때문에 무조건 전송
-비신뢰성: 패킷 소실 가능성, 순서 보장 불가
3) IP 프로토콜은 팻킷 교환 방식에서 사용하는 통신 규약, 비연결성, 비신뢰성 한계가 있음
HTTP 프로토콜의 특징에 대해 설명해주세요.
1)
-HTTP 프로토콜: TCP 혹은 UDP 기반 프로토콜
-한계: 무상태성, 비연결성
2)
-무상태성: 서버가 클라이언트의 상태를 보존하지 않는 것, 장점: 무한한 서버 증설 가능하게 해줌
-비연결성: 실제로 요청을 주고받을 때만 연결 유지, 한계: 데이터를 전송할 때마다 연결과 종류를 반복하는 것이 비효율적, 극복: HTTP 지속 연결로 문제 해결 가능
3) HTTP 프로토콜: TCP 혹은 UDP 기반 프로토콜, 무상태성과 비연결성의 특징을 가짐
7.인증 / 보안
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.
1) MaxAge, Expires 옵션: 쿠키의 유효 기간을 정해주는 역할
2)
-MaxAge: 쿠키를 얼마나 유지할 것인지 설정
-Expires: 언제 폐지할 것인지 설정
-만약, 동시에 설정 시: MaxAge가 실행
-MaxAge, Expires가 없는 쿠키: 세션 쿠키. 브라우저가 실행 중일 때만 사용할 수 있는 임시 쿠키. 창을 종료하면 해당 쿠키 삭제
3) MaxAge, Expire은 쿠키의 유효 기간을 정해주는 옵션으로 설정하지 않으면 세션 쿠키가 되어 브라우저 종료 시 쿠키 삭제.
<Chapter2. 회고 블로깅>
