프론트엔드

Virtual DOM

리액트의 작동방식은 상태변화 시, 그 컴포넌트와 하위 컴포넌트를 모두 교체하기에 많은 DOM 변화가 일어난다.

이때 리액트에서는 DOM을 추상화한 객체인 Virtual DOM을 변경하고, 변경이 완료되면 실제 DOM과의 차이점을 확인한다음 한번의 리렌더로 해결한다.

Virtual DOM은 메모리에 존재하여 메모리를 차지한다는 단점이 있다.

리액트도 DOM API를 사용하여 뷰를 변화시키기에, DOM API보다 더 빠르진 않다. Virtual DOM은 리액트를 빠르게 하기 위한 수단.

링크

React key

리액트에서 리스트를 만들 시, key를 사용하라는 안내문이 뜬다.

그 이유는 리스트에 변화가 생겨 리렌더링이 일어날 시, 변화 전후에 key가 같은 요소는 서로 같은 요소로 받아들여 리렌더링에서 제외시키기 때문에 성능적으로 큰 이점이 있다.

따라서 리스트가 고정되어 변경이 일어나지 않는 경우가 아니라면, key를 인덱스로 사용하자 말자

링크

클래스형 컴포넌트 vs 함수형 컴포넌트

기존에는 함수형 컴포넌트에서 state나 생명주기함수 사용이 불가능했다.

하지만 hook의 등장으로 두가지 모두 함수형 컴포넌트에서도 사용이 가능해졌다.

생명주기 hook으로는 useEffect와 useLayoutEffect가 있다. useEffect는 컴포넌트가 실제 돔에 반영 된 이후 호출되고, useLayoutEffect는 컴포넌트가 실제 돔에 반영되기 직전에 동기적으로 호출된다.

• useEffect : componentDidMount, componentDidUpdate, componentWillUnmount(return문)
• useLayoutEffect : shouldComponentUpdate

함수형 컴포넌트는 코드가 간결하고, 클래스형에 비해 메모리를 덜 사용한다는 장점이 있다.

링크

CSS 최적화

CSS는 렌더링을 막고, HTML 파싱도 막을 수 있다. 따라서 최적화가 필요하다.

CSS 사이즈를 줄이고, 꼭 필요한 Critical CSS를 인라인으로 선언하고, non-Critical CSS는 비동기로 불러올 수 있다.

애니메이션을 최적화하기 위해선, 레이아웃을 변경하는 대신 transform을 사용하는 것이 더 빠르다.

• 그 원리는 CSS는 styles -> layout -> Paint -> composite 순으로 그려지는데, 앞 순서 속성을 변경하면 뒷순서를 다시 그리기 때문이다. 따라서 composite에 해당하는 transform, opacity를 변경하는 것이 가장 빠르다.
• will-change를 통해 애니메이션을 적용할 속성을 미리 브라우저에게 알려주어 GPU 가속을 사용할 수 있다.
  • 너무 많이 사용하면 기기자원소모가 심함.

contain 속성으로 어떤 요소와 그 하위요소가 전체 문서트리와 무관하다는 것을 알려주는 방법도 있다.

variable font로 폰트파일 크기를 줄일 수도 있다.

링크

Javascript

ES6

• let, const 키워드
• 템플릿 리터럴 : ``
• 객체 리터럴
• 화살표함수
• 구조분해 할당
• Promise
• Class
• 모듈시스템

Var vs Let

• 재선언 : 가능 vs 불가능
• hoisting : function-scoped vs block-scoped
  • 하지만 let에서는 선언된 위치 이전에는 사용할 수 없음.

화살표함수

• 조금 더 간편하게 사용할 수 있음.
• 일반 함수내부의 this는 전역 객체로 정의됨. 화살표함수에서는 상위 스코프의 this로 정의됨.
  • 단 일반 함수도 특정 객체의 메소드로 호출될 경우, 그 호출한 객체의 this가 바인딩 된다.
• 이벤트리스너의 콜백함수로는 사용하면 안된다. this가 전역 this로 바인딩 되기 때문.

링크

실행컨텍스트

코드의 실제 진행상황을 추적하는데 필요한 정보들을 모아둔 구조. 함수가 호출되면 생성되고 종료되면 사라짐.

실행컨텍스트에는 지역메모리와 실행문이 있음.

실행컨텍스트는 콜스택에 차례대로 쌓임. 자바스크립트 엔진이 현재 실행중인 함수의 실행컨텍스트를 추적하기 위해 쌓는다.

**스코프체인 **: 현재 실행 컨텍스트에서 변수를 찾을 수 없으면, 상위 스코프의 실행컨텍스트로 탐색범위를 옮기는 것

**클로저 ** : 함수가 함수를 반환할때, 반환되는 함수가 선언된 환경의 스코프를 기억한 상태로 반환되는 것. 상위 스코프를 탐색하기 전 클로저를 먼저 확인한다.

• 렉시컬스코프 : 함수가 선언된 시점의 유효범위

링크

바벨

자바스크립트 트랜스파일러로, 주로 모던 자바스크립트를 호환성을 위해 예전 문법으로 변환할 때 사용한다.

플러그인과 프리셋으로 설정을 할 수 있다.

하지만 바벨을 사용해도 변환할 수 없는 모던자바스크립트 코드들이 있다.(Promise 등) 이를 변환하기 위해서는 Polyfill을 사용하여야한다. Polyfill은 바벨에서 설정해도 되고, 웹팩에서 설정해도 된다.

링크

CS

선언형 프로그래밍

How를 감추고, What을 노출하는 방식의 추상화. 명령형 코드에서 리팩토링하여 생성할 수 있다.

명령형 코드를

• what을 적절히 인터페이스에 노출시키고
• How를 내부에 숨기고
• 언제 어디서 불러와도 동일한 결과가 나와서 재사용하기 편하게 추상화한다면

선언적 코드이다.

명령형 코드를 해석할 땐 시간 흐름에 따라 해석해야한다. 하지만 선언적코드는 흐름에 따라 읽지 않아도 되기에, 디버깅에 용이하다. 코드 자체에 어떤 일이 벌어지는지 설명하기 떄문에 추론하기 좋다

또한 언제 불어와도 동일한 결과를 내니, 재사용하기도 좋다.

링크

SSR

• CSR은 리액트가 포함된 자바스크립트를 다운 받고, 리액트를 실행시켜 화면을 렌더링한다. 이때 리액트는 앱 전체를 실행시키기에, 리액트 코드가 방대하다면 그만큼 사용자는 빈 화면에 방치된다.
• SSR은 서버에서 미리 첫번째 화면을 생성하고 그 생성된 첫번째 화면의 html, css를 사용자에게 보내는 방법. 사용자 브라우저는 이후 js를 다운 받고 리액트를 실행시켜 인터랙션이 가능하게 한다.

• 따라서 CSR을 사용하면 사용자가 첫 화면을 보는 시점이 SSR에 비해 늦어지게 된다. 또한 SEO에도 문제가 있다.

• SSR에도 단점이 있다. 첫페이지를 구성한 이후 다른 페이지로 넘어갈 때, CSR에서는 그 다른 페이지를 렌더링하기 위한 코드가 이미 있고 필요한 부분만 다시 렌더링하면 되기에 다른 페이지로 넘어갈 때는 CSR이 더 빠르다. 또 SSR의 경우 매번 서버로 페이지를 요청하기에 서버의 부담이 크다. 이를 해결하기 위해 CSR와 SSR를 결합하는 방식을 채택하여 해결하는 걸로 알고 있다.

• 또 기존 리액트에서 SSR에서는 html 코드를 받아오고 리액트 코드를 입히는 hydration 동작을 앱 전체 단위로 진행시켜서 사용자가 최초로 인터랙션을 하는데까지 시간이 오래 걸렸는데, 이번에 react 18 업데이트에 포함된 Suspense API를 통해 컴포넌트 단위로 hydration을 진행시켜 우선도가 높은 컴포넌트부터 먼저 인터랙션이 가능하도록 하는 발전이 있었다

Suspense API에 대해

MVC 패턴

Controller

• 클라이언트의 요청을 받으면, 데이터를 가공하여, 그 요청에 대한 실제 업무를 수행하는 모델 컴포넌트를 호출함.
• 모델이 업무를 마치면 그 결과를 뷰에게 전달한다.
• 다른 컴포넌트와 달리 모델이나 뷰에 대해 알고 있어야 하며, 둘의 변경을 모니터링해야한다.

Model

• 컨트롤러가 호출했을 때, 요청에 맞는 비즈니스 로직을 수행함. 응용프로그램에서 데이터를 처리하는 부분.
• DB와 통신하며, 상태의 변화가 있을 때 컨트롤러에 통보해 후속조치 명령을 받는다.

View

• 컨트롤러로부터 받은 모델의 결과값을 가지고 사용자에게 출력할 화면을 만든다.
• 만들어진 화면은 컨트롤러로 보내고, 컨트롤러는 이를 클라이언트로 다시 전송한다.

링크

테스트 관련

유닛테스트가 무엇인지

소프트웨어의 가장 작은 단위에서, 그 부분이 예상대로 동작하는지 테스트하는 기법이다.

요구사항에 맞는 테스트 코드를 한번 작성해 놓으면, 나중에 리팩토링할 때 테스트를 실행하는 것만으로 정상적으로 동작함을 보장할 수 있기에 두려움 없이 리팩토링을 할 수 있다.

TDD가 무엇인지

테스트를 미리 작성하고 개발을 하는 방법. 실패하는 테스트 코드를 작성하고, 테스트 코드를 성공시키기 위한 실제코드를 작성한 후 리팩토링을 거치는 작업을 반복하는 개발법.

요구사항에 대한 이해도를 높이고, 테스트 코드를 통과하는 코드를 작성함으로써 코드의 정확성을 보장할 수 있다. 또한 리팩토링이 포함되어있기에 코드 품질도 높일 수 있다.

실제 코드의 작성을 마치고 테스트를 하는 것보다 개발 비용을 절감할 수 있고, 개발자의 특성 상 작업이 끝난 코드에 테스트를 붙이는 것을 싫어하기에 미리 테스트를 작성하는 것이 효율적이다.

UI 테스트를 위한 기법에는 무엇이 있는지

실제 DOM에 보여지는 걸 기준으로 테스트하는 기법(react-testing-library)과, 컴포넌트 내부 동작을 테스트(enzyme)하는 기법 두 가지가 있다.

실제 DOM에 보여지는 걸 테스트할 때는, 보여져야 할 텍스트가 제대로 보여지는지 어떤 버튼을 클릭했을 때 적절한 요소가 등장하는지를 본다.

컴포넌트 내부 동작을 확인할 때는, 매개변수와 상태가 적절한지 확인하고, 컴포넌트 내장 메소드를 직접 호출하기도 한다.

DB

DB 페이징

Offset Paging : DB의 Limit과 offset을 활용한 방법

장점

• 구현이 간단하다.

단점

• 비효율적이다.
• 데이터가 누락되거나, 중복될 가능성이 존재한다.

Cursor Paging : 유니크하고 순차적인 컬럼을 기준으로 정렬하여 구현하는 방법

장점

• 효율적이다.
• 데이터가 누락되거나 중복될 가능성이 없다.

단점

• 구현이 까다롭다.
• 무한 스크롤이 아닌 경우 특수한 처리를 해줘야한다.

링크

관계 데이터모델

무결성 제약조건

• 개체 무결성 제약조건 : 기본키를 구성하는 모든 속성은 널 값을 가질 수 없다.
• 참조 무결성 제약조건 : 외래키는 참조할 수 없는 값을 가질 수 없다.

링크

인덱스

DBMS에서 데이터베이스 테이블의 모든 데이터를 검색하여 데이터를 찾는 것은 비효율적이기에, 데이터의 칼럼 값과 그 데이터가 저장된 레코드의 주소를 키와 값의 쌍으로 만든 것

DBMS의 인덱스는 항상 정렬된 상태를 유지하기에 원하는 값을 탐색하는 빠르지만, 추가/삭제/수정에는 느리다.

즉, 데이터베이스의 탐색성능은 높이되 저장성능은 희생시키는 방법. 따라서 모든 컬럼을 대상으로 인덱스를 생성하면 데이터 저장 성능이 크게 저하되어 역효과가 난다.

링크

트랜잭션

하나의 논리적인 작업을 수행하는 쿼리문들을 묶어놓은 것. 트랜잭션에 속한 쿼리문들은 모두 완전히 실행되거나 그렇지 않으면 원상복구해야함.

링크