HTML / CSS
1. 웹 접근성
웹 접근성을 준수한다는 것은 모든 유저가 차별없이 서비스를 이용할 수 있게 하는 것이다.
웹컨텐츠 접근성 가이드라인(WCAG) W3C에서 관리하며, 대표적인 것으로는
1. Semantic html 준수
2. Aria 속성을 사용해 태그에 대한 추가적인 정보제공
3. image alt 속성 및 적절한 색상 사용
등이 있다.
2. 크로스 브라우징
크로스브라우징이란 웹 페이지 제작 시에 모든 브라우저에서 문제가 발생하지 않게 올바르게 호환성을 지키는 것이다.
3. 반응형 웹
모든 환경에서 최적화된 웹페이지를 제공하는 것을 의미.
화면크기, 해상도, 접속 환경이 달라져도 동일한 사용자 경험을 보장.
유지보수가 상대적으로 쉽지만, 디자인 자유도에 제한이 있고, 100% 맞춤 디자인이 힘들며, 성능상 이슈가 생길 수 있다.
CS
1. RESTFUL API?
client와 server와의 통신을 REST하게작성하는 것.
URI를 통해 자원을 명시하고, HTTP method를 통해 해당 자원에 대한 CRUD 동작을 적용한다.
REST(Representational State Transfer)는 통신을 위한 앱 아키텍처상의 규약들로 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받음을 의미한다.
2. CSRF, XSS?
CSRF의 유저의 리퀘스트를 위조하는 것이고, XSS는 유저의 웹페이지에 악성 스크립트를 주입하는 것이다.
이를 방지하는 방법은 다음과 같다.
CSRF
- Same-origin policy검증
- Security Token 검증
XSS
- 입력 및 출력 값 검증
2. URI, URL
Uniform Resource Identifier - Locator
URL은 URI의 서브셋으로, URI는 리소스 식별을 위한 문자열이라면 URL은 실제 리소스가 어디 있는지 알려주는 주소.
JS
1. 얕은 복사와 깊은 복사 and more
얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다.
얕은 복사는 slice, spread operator, Object.assign으로 가능하고, 깊은 복사는 JSON.stringify-parse, StructuredClone api, 기존 라이브러리를 사용해 가능.
JSON.stringify는 문자열로 변경한 후 다시 객체로 변형하는데, string은 불변성을 갖는 primitive 데이터 이기 때문.
하지만, JSON.stringify로도 모든 깊은 복사를 수행할 수는 없다.
(Object, array, number, string, true, false, null 만 가능, ECMAScript-262 -404).
(date 객체, bigInt, 함수 등은 불가)
또한, 더 넓은 범위의 깊은 복사가 가능한 StructuedClone도 instance의 prototype, 함수 등은 복사 할 수 없다.
따라서 완벽한 깊은 복사를 위해선 Lodash와 Ramda를 사용한다.
2. 브라우저 렌더링 과정?
내 화면에 네이버가 켜질 때까지 - 브라우저 렌더링 과정
1.입력한 txt 정보를 확인
- 검색어인지 url 인지 판별
- 주소가 url이라면 네트워크 호출 수행
2.네트워크 호출
- 1차적으로 캐싱된 DNS 기록 조회. (DNS 개념 정리)
- 캐싱이 없다면, DNS를 통해 ip address 요청.
- HTTP protocol을 통해 응답받은 ip로 데이터 요청 및 응답 받기.
3.렌더링
- 파싱 : HTML, CSS 문서 및 JS(script)를 파싱하여 DOM, CSSOM 트리 생성 -> Render Tree 생성
- 레이아웃(reflow) : 위치계산 및 노드를 화면에 배치
- 페인트 : 각 노드를 실제 픽셀로 화면에 나타내기.
3. 렌더링 최적화.
렌더링 과정은 다음과 같다.
서버 리소스 페칭 -> 파싱 -> 레이아웃 -> 페인트.
1) 효율적인 코드 작성: 적절한 알고리즘, 자료구조 활용.
2) 최적화: 이미지, 텍스트 등 압축 혹은 리소스 캐싱
3) 코드 스플리팅: 필요한 코드를 필요할 때 가져오기(lazy loading 등)
4) reflow 및 repaint 최소화
- repaint만 발생하는 속성 사용
- position:absolute,fixed 사용
- script 최하단으로 위치시키기 등
-- GPU에 작업 위임.
5)
3.1 프론트엔드 렌더링 최적화 방법?
0) Javascript, css 파일 최소화
- less javascript, less css(tailwind)
1) Reflow 최소화하기.
- Reflow가 아닌 repaint만 발생하는 속성 사용
CSS문서와 JS문서로 인한 비효율 줄이기 - script 최하단에 위치시키기
- position:absolute,fixed 등 사용
-- transform, opacity 속성 사용 (GPU에 작업 위임하여 reflow,repaint avoid)
3) 코드 스플리팅
- react의 lazy loading, next.js의 dynamic import 등 컴포넌트 별로 적용
- 사전 로딩하는 것도 옵션 중 하나
4. AJAX와 XHR(XMLHttpRequest)에 대해
AJAX(Asynchronous JavaScript And XML)란 웹 페이지가 새로고침(full-page reloading)이 없이도 비동기적으로 업데이트 되게하는 기술의 총칭이다.
이는 빌트인 JS 객체인 XHR로 구현된다.
5. this binding에 대한 설명
Javascript에서 this가 바인딩되는 것은 함수가 호출되는 방식(즉, 실행 컨텍스트가 생성될 때)에 따라 크게 5가지로 분류할 수 있다.
1. default 바인딩
일반적인 함수 안에서 this는 전역 객체(window)를 가르킨다, strict mode에서는 undefined.
화살표 함수는 this가 없고, 상위 스코프의 this를 따른다.
2. 암묵적 바인딩
객체 안의 메소드로 호출 될 경우 함수를 호출한 객체가 바인딩 된다.
3. 명시적 바인딩
call, apply, bind를 통해 명시적으로 this가 바인딩 된다.
4. new 바인딩
함수가 new와 함께 생성자 함수로 호출될 경우, 생성된 인스턴스가 this에 바인딩된다.
5. callback 함수
제어권을 가지는 함수가 this를 어떻게 결정하는지에 따라 this가 결정된다.
addEventListener의 경우 event.currentTarget이 바인딩된다.
6. Event Loop란?
싱글스레드인 자바스크립트 환경에서 비동기 및 이벤트를 핸들링하기 위한 제어 메커니즘이다.
콜스택을 감시하여, 콜스택이 비었을때 태스크 큐의 콜벡을 스택으로 밀어넣는 방식.
호이스팅, TDZ
실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 게 호이스팅이다.
hoisting으로 선언부가 끌어올려지기 때문에 선언과 초기화가 분리된 let,const는 할당 이전에는 tdz 상태에 빠진다.
7. 번들링과 웹팩
번들링이란 Html 구성을 위한 여러 파일을 하나의 파일로 합치는 것. 트리 쉐이킹, 최소화, 트랜스파일링 등의 방법을 통해 성능 최적화를 진행한다.
8. 바벨
"바벨은 무엇일까요? 바벨은 자바스크립트 컴파일러입니다. C 컴파일러처럼 어셈블리어나 바이너리 코드를 생성하는 전통적인 컴파일러는 아닙니다. 바벨은 자바스크립트를 자바스크립트로 컴파일하는 컴파일러(javascript to javascript compiler)입니다. 기존의 코드와 같은 의미를 갖는 또 다른 자바스크립트 코드를 출력합니다." - 바벨 팀원인 니콜라스 리바우도(Nicolò Ribaudo)의 @babel/how-to 발표 중 내용
Javascript 컴파일러(혹은 트랜스파일러)로 이전 ES문법으로 코드를 트랜스파일링 해준다.
웹팩의 빌드 프로세스에서 loadder를 통해 결합되어 함께 사용된다.
9. 클로저
클로저 함수와 함수가 선언된 렉시컬 환경의 조합이다.
클로저를 통해 실행 컨텍스트가 종료된 스코프의 변수에도 접근할 수 있다.
React
Reac를 사용하는 이유
React는 UI를 위한 자바스크립트 라이브러리로, 주로 SPA를 위해 사용된다.
React를 사용하는 이유에 대한 답변은 두 가지 범주로 나눌 수 있다.
첫 째는, pure javascript가 아니라 react를 사용하는 이유며, 두 번째는 다른 모던프레임워크와 react의 차별점이 무엇이냐는 것이다.
React를 사용하면 pure js에서 보다 모듈화를 통해 개발 생산성을 높이고, 가상돔이라는 개념을 통해 효율적인 렌더링이 가능하다는 점을 말할 수 있다.
또한 타 프레임워크(혹은 라이브러리) 대비 풍부한 에코 시스템과 범용성이 가장 큰 react의 장점이다.
React hooks?
클로저 트랩이란?
클로저의 내부의 데이터가 최신 값이 아닌 stale한 값을 출력하는 문제.
React가 DOM을 업데이트하는 과정
React에서 key 가 필요한 이유.
React는 Diffing 알고리즘을 통해 가상 DOM이 업데이트 되었는지 확인하고 리렌더링을 실행한다.
DOM과 가상DOM은 재귀적으로 탐색되는데, ul 하위의 li태그의 경우 단순히 하나의 li 노드가 최상단에 추가되는 경우, 전체 목록 li태그가 변경된 것으로 간주되어, 불필요한 많은 리렌더링이 일어나게 된다.
따라서 unique identifier인 key를 추가하면 이러한 불필요한 리렌더링을 방지할 수 있다.
React에서 불변성을 준수하면서 얻는 장점은?
참조
1. 데이터 조작(mutation)이 중앙화되어 디버깅이 용이해지며 예상치못한 에러가 줄어든다.
2. 코드가 좀더 심플,클린해지기때문에 예측가능해진다.
3. 기존 객체를 수정하는것보다, 새로운 객체를 생성하여 재할당하는게 더 빠르기 때문.
리액트에서의 렌더링이란? 그리고 그 프로세스에 대해 설명하라.
(번역) 블로그 답변: React 렌더링 동작에 대한 (거의) 완벽한 가이드
렌더링이란 현재 props 및 state를 기반으로 리액트가 컴포넌트에게 UI 영역이 어떻게 보이길 원하는지 설명을 요청하는 프로세스이다.
그 프로세스는 크게 두 단계, 렌더 단계와 커밋 단계로 나뉜다.
가장 먼저 렌더 단계에서, 컴포넌트 트리를 순회하며 렌더출력을 저장한다. 렌더 출력은 JSX로 저장되며 이후 JS로 컴파일되고 배포를 위해 준비될떄 React.createElement()호출로 변환된다. 이후 createElement는 의도된 UI 구조를 설명하는 JS 객체인 React 요소를 반환.
이후 커밋 단계에서, reconciliation을 통해 비교 및 계산하여 DOM에 변경사항을 적용한다.
렌더와 커밋 단계가 끝나면, componentDidmount, componenetDidUpdate, usLayoutEffect 훅을 동기적으로 실행.
이후 useEffect 훅 실행. (Passive Effects 단계)
Flux에 대해 설명하시오.
Flux란 클라이언트사이드 JS 어플리케이션에서 데이터 레이어를 빌드하기 위한 아키텍처 패턴이다.
양방향 데이터흐름을 가지는 기존의 MVC 패턴은 프로젝트 크기가 커지면 커질수록, 복잡성이 기하급수적으로 증가하기 때문에, 이에 대한 대안으로 등장하였고 데이터는 단방향으로 흐른다.
Flux는 Dispatcher - Store - View로 구성된다.
Redux는 Flux 패턴을 차용한 대표적 구현체이다.
setState 함수가 실행되는 과정
React는 이전의 리액트 엘리먼트 트리와 업데이트된 가상DOM을 비교하여, 변경된 부분만 DOM에 적용한다. 이는 Batch update로 이루어지는데, 16ms동안 변경된 상태 값들을 모아서 단 한번 리렌더링을 진행한다.
Hook을 컴포넌트 최상단에서만 사용해야 하는 이유?
리렌더링을 위해서는 state의 이전 값을 기억하고 있어야한다.
react는 state에 대한 정보를 클로저를 통해 저장하는데, 이 때 배열형태로 hook이 사용된 순서로 저장시킨다.
따라서, Hook을 조건문, 루프, 중첩 함수 안에서 호출하게 되면, Hook의 호출 순서가 변경되어 이전 상태 값에 대한 대조가 불가능해진다.
Recoil
