Server-Sent Events(SSE) 란?​

서버에서 클라이언트로 실시간으로 데이터를 보낼 수 있게 해주는 웹 기술.

SSE는 HTTP 연결을 사용하며, 클라이언트가 'text/event-stream'이라는 MIME 타입으로 GET 요청을 서버에 보내고, 서버는 이 연결을 유지. 이후 서버가 새로운 이벤트를 이 연결을 통해 전송함.

웹소켓과 비슷하지만, SSE는 단방향 통신만을 지원함. 만약 클라이언트에서 요청을 보내기 위해서는 별도의 HTTP 요청을 사용해야 됨.

RN 에서의 SSE​

이벤트 루프란?​

자바스크립트는 싱글 스레드(single-thread) 기반으로 동작됨. 즉, 한 번에 하나의 작업만 처리할 수 있다는 것을 의미. 하지만 자바스크립트는 이벤트 루프(event loop)를 통해 비동기적으로 동작할 수 있도록 지원.

이벤트 루프는 자바스크립트 엔진의 메인 스레드에서 동작하는 무한 루프. 이 루프는 실행 중인 코드와 이벤트 큐(event queue)를 관찰하고, 이벤트 큐에 이벤트가 들어오면 해당 이벤트를 처리하는 작업을 수행.

JSX란?​

JSX는 Facebook에서 개발한 JavaScript의 확장 문법. React와 함께 사용되며, 컴포넌트 기반 UI 라이브러리.

JSX는 XML과 유사한 문법으로, HTML 태그와 비슷한 형태로 UI를 작성할 수 있음.

컴파일러에 의해 JavaScript 코드로 변환됨.

Babel이란?​

Gap 이란?​

react native 0.71 버전 부터 지원.

Flex Gap 속성을 사용하면 각 아이템들의 margin 값을 일일히 조정하지 않고도, 아이템들 사이의 간격을 일관되게 유지할 수 있음.

(단, 0.71 버전의 경우 픽셀만 지원. 백분율과 같은 값은 불가.)

마진 사용시 가장자리까지 적용됨.

HOC 이란?​

Higher-Order Component

HOC 패턴은 기존 컴포넌트를 감싸서 새로운 기능을 추가하는 방식.

HOC는 고차 컴포넌트를 반환하며, 이를 이용해 상태 관리, 인증, 라우팅 등 다양한 기능을 추가함.

예제​

Atomic 디자인 패턴 이란?​

• Atoms: UI의 가장 작은 부분을 나타내는 컴포넌트. 예: 버튼, 아이콘, 텍스트, 이미지

• Molecules: 두 개 이상의 Atom 컴포넌트를 조합하여 만든 작은 컴포넌트. 예: 로그인 폼, 메시지 박스

• Organisms: Molecule 컴포넌트와 Atom 컴포넌트를 조합하여 만든 큰 컴포넌트. 예: 헤더, 푸터, 사이드바

문제점?​

출처-휴몬랩 기술블로그

기존 MVC 패턴의 문제점​

기존의 MVC 패턴 state 변경 흐름

MVC 패턴에서 양방향 데이터 흐름이 발생하면 데이터 변환 작업과 유효성 검사를 위해 추가적인 코드 작업이 필요하며, 뷰와 컨트롤러 간의 데이터 전달 과정에서도 문제가 발생할 수 있습니다.

Pure Component / memo / shouldComponentUpdate​

부모 컴포넌트가 업데이트되었을 때 자식 컴포넌트의 불필요한 렌더링을 방지.

그렇다고 해서 모든 컴포넌트에 memo를 사용하게 되면 컴포넌트가 다시 렌더링되지 않도록 최적화를 하지만, 이를 위해서는 컴포넌트를 비교하는 작업이 추가적으로 필요.

이 작업은 일반적인 렌더링 작업보다 더 많은 리소스와 시간이 소모될 수 있기 때문에, 오버헤드가 발생할 가능성이 있음.

렌더링 속도가 느린경우, 자주 불필요하게 재렌더링이 예샹되는 경우에만 사용.

빌드 과정​

1. JavaScript 코드 번들링

   React Native 애플리케이션은 JavaScript로 작성되기 때문에, JavaScript 코드를 번들링해야 됨. Metro 번들러를 사용하여 JavaScript 코드를 번들링하고, 필요한 모든 의존성을 가져옴.

2. JavaScript 코드 실행

   번들링된 JavaScript 코드는 JavaScript 엔진에서 실행됨. Hermes 엔진을 사용하여 더 빠른 실행 속도를 제공.

TypeScript는 JavaScript의 확장된 버전으로, 정적 타입 시스템을 지원함.

코드의 타입 검사를 통해 컴파일러가 빌드하기 전에 오류를 검출.

강력한 객체 지향 프로그래밍 지원. 클래스, 인터페이스, 제네릭 등의 개념을 지원하여 객체 지향 프로그래밍을 더 쉽게 할 수 있음.

문법​

interface Person {
  name: string;
  age: number;
}

type Person = {
  name: string;
  age: number;
}

interface 사용 예제​