기술면접
CORS(Cross Origin Resource Sharing)
Origin은 호스트와 프로토콜을 합친 것을 의미하는데 이 Origin이 다른 경우, SOP(Same Origin Policy)에 위배되는 상황에서 CORS에러가 발생.
SOP를 지키기 위해 나온 에러.
SPA(Single Page Application)
단일 페이지 애플리케이션으로 동적 페이지를 작성함으로써 처음에만 서버로부터 페이지를 받아오고 새로운 페이지를 받아오지 않는 웹 애플리케이션.
연속되는 페이지 간의 사용자 경험을 향상 시키고 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와줌.
CSR
데이터가 없는 빈 HTML을 먼저 받아오고 데이터(js 코드)는 이후 요청해서 따로 받아오는 방식
단점 : SEO에서 불리하고 초기 로딩시 오래 걸림(여러번에 걸쳐 요청을 보내기 때문에)
따라서 최초 실행시 SSR을 구현하고 이후 CSR하는 SPA가 많음
SSR
전통적인 방식으로 데이터가 포함된 완성된 HTML을 불러오는 방식
단점 : CSR에 비해 서버 부하가 많고 사용자 경험이 매끄럽지 않음(깜빡임)
RESTful API
REST => REpresentational State Transfer의 약자로 HTTP 요청을 보낼 때 어떤 URI에 어떤 메소드를 사용할지 개발자들 사이에 널리 지켜지는 한 약속이자 형식
post, get, put, delete, patch라는 메소드가 있고 요청을 하면 JSON포맷으로 데이터를 받을 수 있음
RESTful API란 REST의 설계규칙을 잘 지켜서 설계된 API를 말하고 요청을 보내는 주소만으로도 어떤 것을 요청하는지 파악이 가능해야함
React Lifecycle
각각의 컴포넌트는 라이프사이클(생명주기)를 가지며 크게 세가지 상태로 나눌 수 있음
생성될때(마운트) / 업데이트할때(state / props변경, 부모컴포넌트 리렌더링) / 제거할때(언마운트)
어떻게 답변해야할지 아직 잘 모르겠음
Redux와 Recoil의 차이점
Redux는 Vuex와 같은 Flux 아키텍쳐 기반, Recoil은 Atomic 모델 기반
Redux는 단방향 데이터 흐름이 가장 큰 특징이며 액션-디스패쳐-스토어-뷰 순서로 흐르고 뷰에서 액션을 발생시켜 다시 디스패쳐로 흐르는 형태
Recoil은 atom이라는 단위로 상태를 관리하며 컴포넌트에서 해당 atom을 구독하는 개념, 상태를 구독한 컴포넌트만 리렌더링이 발생하기 때문에 불필요한 렌더링이 발생하지 않음
웹 표준, 웹 접근성, 반응형 웹
웹 표준이란 다른 브라우저에서도 동일하게 웹이 보여지는 것
웹 접근성은 누구나 원할하게 웹을 이용할 수 있어야 하는 것을 의미(예를 들어 스크린 리더를 이용할 때도 문제없이 웹 문서 내용을 알 수 있고 이용할 수 있어야 함)
반응형 웹이란 디바이스 종류에 따라 원활하게 렌더링 되는 웹 페이지를 의미
SEO 검색엔진 최적화
구글, 네이버와 같은 검색 엔진으로 웹사이트를 검색했을 때 페이지 상단에 노출될 수 있도록 최적화하는 것
최적화 방법으로는 캐노니컬 태그 설정, 태그와 메타 데이터 설정, 페이지 속도 개선(PageSpeedInsights에서 확인 가능), 구조화, 사이트맵관리, 5가지 방법이 있음
TypeScript 장단점
장점 : 컴파일 단계에서 타입 에러를 잡고 디버깅하기가 쉬워서 버그가 줄어듬(동적타이핑에서 타입 실수방지), 타입이 미리 정해져 있어서 실행속도가 빠름
단점 : 코드량이 증가하고 자바스크립트의 장점이라고 할수 있는 다형성이 사라지는 경항이 있음, 컴파일 시간이 조금 더 오래 걸림
styled-components 장단점
css-in-js방식으로 별도의 스타일시트 파일이 존재하지 않고 컴포넌트 레벨 단위로 모듈화되는 방식
장점 : 자바스크립트 환경을 최대한 활용할 수 있어 상수와 함수의 공유가 쉬움(예를 들어 react에서는 props를 이용한 조건부 스타일링이 가능), 유니크한 클래스 이름을 자동으로 생성해주기 때문에 네이밍에 대한 고민을 하지 않아도 됨
단점 : 추가 라이브러리를 설치해야하기 때문에 크기가 커짐, 모든 css를 컴포넌트로 만들어야 함
Last updated