프론트엔드 스터디 - 3

리액트를 사용하는 이유

리액트가 그 이전에 존재했던 vanilla js 또는 jquery의 단점을 보완해주기 때문이다.

• Virtual DOM
  • 리액트가 등장하기 이전에는 실제 DOM을 직접 조작하는 코드를 작성했다. 하나의 요소가 변경될 때마다 전체 렌더링 과정을 반복했다. 웹 브라우저 엔진의 성능이 좋아졌다고는 하지만 연산과 페인트를 반복하는 과정은 시간을 많이 소모하게 된다. React는 Vitual DOM을 통해 이 문제를 최소화 한다.
• Component를 사용한 유지보수
  • 기존의 방식은 전체 DOM을 깎아서 만드는 느낌이다. 전체 DOM구조를 알고 있어야 하고, 대규모 앱에서 유지보수가 쉽지 않다. 반면 React는 컴포넌트 블록을 쌓아 만드는 느낌이다. 마크업과 유사한 JSX 문법을 사용해서 컴포넌트 단위로 개발하고, 재사용할 수 있다.
• 단방향 데이터 흐름
  • vue 양방향, 데이터의 흐름이 부모 ⇒ 자식으로 단방향적이다. 디버깅이 용이하며, 안정성이 높다.
• SPA, CSR 구현을 용이하게 해준다.

함수 자식

Virtual Dom

• DOM을 추상화한 Virtual DOM 객체가 메모리에 저장된다. 변화가 발생하면 실제 DOM에 적용되기 전에 Virtual DOM에 우선 적용을 시켜본다. 실제 DOM에 바로 적용하나, Virtual DOM에 적용하나 같은 연산 비용이 필요할 거라 생각할 수 있지만, Vitual DOM은 렌더링 과정이 필요 없기 때문에 연산 비용이 실제 DOM보다 적다. 이렇게 변경 내역을 한번에 모으고, 실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후 그에 따른 렌더링을 한 번만 한다. 물론, 레이아웃 계산과 리랜더링하는 과정의 규모는 커지겠지만, 횟수를 줄이는 것으로 충분히 연산 비용을 적게 만들어 준다.

렌더링 과정

1. HTML parser가 HTML을 바탕으로 DOM tree를 그린다.
2. CSS parser가 CSS를 바탕으로 CSSOM을 그린다.
3. DOM에 CSSOM을 적용하여 Render Tree를 그린다.
4. Render Tree를 바탕으로 Painting 하여 실제 화면에 렌더링 한다.

Rest API

• REST: HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용하는 것을 의미한다.

• 염두할 점

  • URI은 정보의 자원을 표현한다.
  • 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.

• 규칙

  • 소문자를 사용한다.
  • 언더바 대신 하이픈을 사용한다.
  • 마지막에 슬래시를 포함하지 않는다.
  • 행위/동사를 포함시키지 않는다.
  • 파일확장자를 포함시키지 않는다.

URL과 URI의 차이점

• URI는 리소스를 식별하는 자원 식별자(Uniform Resource Identifier)를 의미한다. 인터넷에 있는 자원을 나타내는 유일한 주소이다. 주소창에 들어가는 전체 내용이 URI라고 할 수 있다.

http (프로토콜)

naver.com (도메인)

:3000 (포트)

main (경로)

?id=1 (쿼리스트링)

• URL(Uniform Resource Locator)은 컴퓨터 네트워크 상에서 리소스의 위치를 알려주기 위한 위한 규약이다. URI의 서브셋이다. 위에서 경로 까지만 URL이다.

Typescript를 사용하는 이유

타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어

• 정적타입지원

  • Javascript는 동적타입, 인터프리터 언어이다. 런타임에 동적으로 타입이 지정되며 런타임 이전까지는 에러를 검출할 수 없다. 반면 Typescript는 정적타입의 컴파일 언어이다. 개발단계에서 타입을 명시적으로 지정하고 Typescript 컴파일러를 통해 Javascript로 변환하는 과정을 거친다.

  • 컴파일 단계에서 타입 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매빠르다.(코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점은 있다). 명시적인 타입 지정으로 개발자의 의도를 명확하게 코드로 기술할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다. ⇒ 협업에서의 이점을 가져감.

    컴파일 디버깅 ⇒ runtime

• 타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈, 제네릭 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.
• 프론트, 백엔드 둘 다 사용가능하다.
  • 특히 프론트엔드와 백엔드를 모두 TypeScript로 구현하면 높은 개발 안정성과 편의성을 확보할 수 있다. 특히 API를 백엔드에서 만들고 프론트에서 사용할 때 유용하다. 프론트엔드와 백엔드간의 데이터 포맷, 을 타입으로 정의하여, 이를 양측에서 공통으로 참조하도록 구현하고, 데이터 포맷의 변경 사항이 발생할 경우 이렇게 공용화된 타입의 정의부를 수정함에 따라 개발 편의성을 확보할 수 있다.