출처-휴몬랩 기술블로그

기존 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()

자바스크립트의 배열은 자유롭게 어떠한 값이든 넣을 수 있으며, 배열의 크기를 미리 선언 할 필요도 없다.

let array = [26, '스물여섯', ['1-1', '1-2'], function () { 'fun' }]

console.log(array.length)   // 4
console.log(array[0])       // 26
console.log(array[1])       // '스물여섯'
console.log(array[2][0])    // 1-1
console.log(array[2][1])    // 1-2
console.log(array[3])       // f () { 'fun' }

배열에 값을 추가하거나 변경할때도 제약이 없이 자유롭다.

심지어, 아래처럼 빠진 슬롯이 있는 배열 생성도 가능하다.

let array = [];

array[3] = '세번째 값'

console.log(array.length)   // 4
console.log(array[2])       // undefined
console.log(array[3])       // 세번째 값

자바 스크립트의 배열에는 주의점이 있다. 배열도 하나의 객체이기 때문에 키/프로퍼티 값을 추가 할 수 있다. 이 때 배열의 length 가 증가하지 않으니 주의 가 필요하다.

형검사에 따른 언어 분류​

타입을 어떻게 얼마나 엄격하게 검사하는지에 따라 언어를 분류할 수 있다.

• 강한 타입(strong typing) : C, C++, Go, Haskell, Java, Kotlin, Rust, Scala

  → 정적 파일 검사 : 타입이 올바른지에 대한 검사를 런타임 이전에 시행

• 약한 타입(weak typing) : Javascript, Lisp, Lua, Perl, PHP, Python, Ruby

자바스크립트란?​

자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌다. 처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(JavaScript)라는 이름으로 변경된다.

JavaScript는 C에서 영향을 받은 C-Family 언어로 기본적인 문법이 유사 중괄호로 구분하는 블럭, 세미콜론으로 줄이 끝남을 알리는 것, 변수 쓰는 법, 연산자 사용법 등 기초적인 문법이 C 문법과 크게 다르지 않다. 호이스팅 같은 것도 C언어의 잔재이다.

자바스크립트 엔진​

자바스크립트 엔진은 소스코드를 가져와서, 문자열 단위로 분해하고(어휘 단위로 정리), 이들 문자열을 컴파일러가 이해할 수 있도록 바이트 코드로 변환한 후, 이를 실 행하며, 메모리를 할당하고, 가비지 컬렉팅을 한다.