들어가기에 앞서...​

바라봄 4.x.x 이전의 버전은 단순히 디자인이 망가진다는 이유로 시스템 폰트 크기는 무시한 체 폰트 크기를 고정했었다.

바라봄을 완성하고 엄마에게 보여줬을 때, 시력이 나쁜 울 엄마는 내 앱을 제대로 사용할 수도 없었다.

반려동물을 키우는 인구는 젊은층 부터 노년층까지 다양하고 반려동물을 사랑하는 마음은 모두 같을 것이다.

그리고 가족 공유기능을 기획하고 있었던 시기였기에 폰트 접근성 개선을 먼저 하기로 마음먹었다.

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 사용 예제​

ASI(Automatic Semicolon Insertion)​

자바스크립트 프로그램은 코딩시 세미콜론(;)이 하나라도 누락되면 돌아가지 않는다.

자바스크립트 파서(parser)는 줄 단위로 파싱을 하다가 세미콜론(;)이 빠져 에러가 나면 세미콜론(;)을 넣어보고 타당하면 세미콜론(;)을 삽입한다

문(Statement)​

프로그램을 구성하는 최소 실행 단위

• 타입 캐스팅(Type Casting) : 명시적으로 타입을 바꾸는 경우

  let a = 26
  let b = String(a)
  

• 강제 변환(Coercion) : 암시적으로 타입을 바꾸는 경우

  let a = 26
  let b = 26 + ""
  

문자열이 아닌 값을 문자열로 변환

let a = true;
a = a.toString()
let b = 26
b = b.toString()

console.log(a)          // "true"
console.log(typeof a)   // string

console.log(b)          // "26"
console.log(typeof b)   // string

console.log(Object.prototype.toString.call(a))  // [object String]
console.log(Object.prototype.toString.call(b))  // [object String]

null , undefined 원시값은 타입 캐스팅을 사용할 수 없으니 주의해야 한다.

네이티브란? 특정 환경(브라우저)에 종속되지 않은 ESMAScript 명세에 있는 내장 함수로 원시 값을 감싸는 객체 래퍼 이다.

• String()
• Number()
• Boolean()
• Array()