[EP.02] 백엔드 개발자를 위한 React Native를 빠르게 익히는 자바스크립트 기초 지식(Lexical, TDZ, ES6, V8엔진, JIT)

(C, Java, Python) 언어에 익숙한 백엔드 개발자가 React Native를 2주 내로 제작하기 위해, 다른 언어 지식을 기반으로 JS언어만의 특징과 동작 방식을 집중적으로 파악하여 정리한 글. 

 

참고 RN 생태계: https://lasbe.tistory.com/230

2025년 React Native 현황과 CLI vs Expo 비교분석

JS 실습환경: https://codepen.io/

 

변수

name = "Mike";
age = 30;

자바스크립트에서 문자는 항상 따옴표로 감싸준다.

*(겹, 홀) 따옴표 상관없음.

class 같은 예약어로 사용할 수 없음.

---

이렇게 변수를 사용하면 위험하다.
유일하다는 보장이 없음.
이를 방지하기 위한 2가지 키워드 존재.
=> let, const

 

let

이미 변수명을 사용 중이라고 나온다.

하지만, 사실 let은 한 번 선언 후에 다른 값으로 바꿀 수 있다.

let name = "Mike";
name = "google";

이렇게 하면 변수명 바꾸기 가능

 

alert() = 경고창을 띄우는 함수

console.log() = log를 찍는 함수

---

const

*절대로 바뀌지 않는 상수, 수정 x

ex) 절대불변함수(파이), 최댓값, 생일 등

약속: 대문자로 쓰기, 상수기 때문

const PI = 3.14;
const SPEED_LIMIT = 50;
const BIRTH_DAY = '2020-01-01';

 

정리

자바스크립트에서 변수 선언은

변하지 않는 값은 const

변할 수 있는 값은 let

---

*NaN: Not a Number 

=> 숫자와 관련된 작업을 할 때, 항상 NaN이 아닌지 염두하면서 작업해야 합니다.

 

[자료형] boolean

const a = true;
const b = false;

const name = "Mike";
const age = 30;

console.log(name == "Mike")
console.log(age > 40)

 

[자료형] null 과 undefined

undefined: 자료형만 선언하고 값이 없

null: 존재하지 않는다는 의미

 

[함수] typeof

const name = "Mike";

console.log(typeof 3); // "number"
console.log(typeof name); // "string"
console.log(typeof true); // "boolean"
console.log(typeof "xxx"); // "string"
console.log(typeof null); // "object"
console.log(typeof undefined); // "undefined"

object는 객체형임.

null은 사실 object는 아님

---

+(더하기) 사용예제

const name = "Mike";

const a = "나는 ";
const b = " 입니다.";

console.log(a + name + b);

const age = 30;
console.log(a + age + "살");

주의: 숫자+문자 연산 진행 시, 문자로 전부 바뀜.

---

alert, prompt, confirm

alert: 알려줌

prompt: 입력 받음

confirm: 확인받음

 

alert

prompt

const name = prompt("이름을 입력하세요.");
alert(`안녕하세요, ${name}님, 환영합니다. `);

confirm

confirrm과 alert이 다른 점 "확인", "취소"가 있음.

이 결괏값을 이용해서 다음 행위를 진행할 수 있음(true, false)

 

사용자 액션을 확인해 줄 때, 많이 사용한다.

// 결제하시겠습니까?

// 정말 삭제하시겠습니까?

 

기본제공은 단점 존재
1. 창이 떠 있는 동안 스크립트 일시 정지됩니다.
2. 스타일링 x, 브라우저마다 모양도 다름 -> 따로 커스텀한 모달 창도 많이 사용

그럼에도, 빠르고 간단하게 적용할 수 있기에 -> 많이 사용

---

형변환

String() -> 문자형으로 변환 

Number() -> 숫자형으로 변환

Boolean() -> 불린형으로 변환

 

동등 연산자, 일치 연산자 (JS 고유의 특징🚨)

동등 연산자: 값만 같으면 true

일치 연산자: 값, 타입까지 같아야 true

const a = 1;
const b = "1";

console.log(a == b); // true
console.log(a === b); // false

---

조건문

- if, else if, else 사용

- switch 문 (마지막은 default)

- for - in 반복문 있음(⭐)

논리연산자

||, &&, !

반복문

c언어랑 같음. 

• for
• while
• do-while

있음

for (let i = 0; i < 10; i ++){

}

 

---

함수(⭐)

function sayHello(name){

}

매개변수가 있어도 되고 없어도 됨.

*함수 선언 시 반환형을 쓰지 않음. -> JS 엔진이 런타임에 타입을 추론해 다이나믹하게 처리

---

함수 표현식(⭐⭐)

변수로 저장될 수 있다.

let sayHello = function(){

}

실행하는 방식이 같은데 어떤 차이가 있는 걸까요?

 

hoisting(호이스팅⭐⭐⭐)

 -> JS에서 변수와 함수 선언을 스코프의 최상단으로 끌어올리는 것처럼 동작하는 메커니즘

JS는 인터프리터라 실행 전 환경 레코드를 세팅하는 느낌이라고 이해하자.

 

컴파일 단계에서 코드가 실행되기 전 함수와 변수 선언을 스캔한다.

변수는 렉시컬 환경인 JS 데이터 구조 내의 메모리에 추가된다.

따라서 실제 선언되기 전에 사용가능

 

*렉시컬 환경(Lexical Environment): 현재 스코프에서 선언된 변수·함수들의 저장소입니다.

*TDZ(Temporal Dead Zone): 변수가 선언되었지만 아직 초기화되지 않아 접근할 수 없는 구간

Execution Context
 └─ Lexical Environment
      ├─ Environment Record   ← 변수와 함수 선언이 저장되는 곳
      └─ Outer Environment    ← 상위 스코프 참조

 

Q: let과 const 변수는 호이스팅 되지 않은 것일까?

A: 호이스팅 되지만, 초기화 후 지연되기 때문에 호이스팅 되지 않는 것처럼 느낀다.

 

let과 const는 렉시컬 환경의 Environment Record에 호이스팅 되지만, uninitialized 되어있다가 실행 시점에 값이 할당됩니다.

초기화 이전에 접근하면 TDZ 때문에, ReferenceError 가 발생

---

화살표 함수(⭐⭐⭐)

마찬가지로 호이스팅은 되지만 TDZ 때문에, 화살표 함수 정의 전에 사용 불가능
ES6 이후 화살표 함수 활발하게 사용 중
* ES6(자바스크립트 2015 버전): 기존 JS의 불편한 부분 개선(+클래스, 모듈, 화살표 함수 도입)

*Modern JavaScript: ES6(2015) 이후 추가된 현대적 문법과 패턴을 활용하는 자바스크립트 스타일.

 

*왜 모던하게 개발해야 할까요?

레거시는 무조건 '악'이고 새로운 기술은 항상 바람직할까요? 당연히 그렇진 않습니다.

다만, 나중에 나온 기술이나 아이디어는 대체로 많은 문제를 해결하고 훨씬 편리한 추상화를 제공합니다.

개발 환경이나 경향성, 맥락, 패러다임의 유의미한 변화에 대처합시다.

let showError = () => {
  console.log("error");
}

showError();

 

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음.

내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴. 

---

Object

const superman = {
  name: 'clark',
  age: 33,
}

 

어떤 것이 나올지 확신할 수 없을 때 -> in 연산자 사용

 

여기서 3개가 궁금할 수 있음

superman.birthgDay; // undefined
'birthgDay' in superman; // false
'age' in superman; // true

이런 식으로 나옴.

 

method: 객체 프로퍼티로 할당된 함수(⭐⭐)

const superman = {
  name: 'clark',
  age: 33,
fly: function(){
  console.log("날아갑니다.")
 }
}

this(⭐)

this는 런타임(실행되는 시점)에 결정됩니다.

---

Array

인덱스 0번부터 시작

배열은 문자, 숫자, 객체, 함수 등 도 하나의 배열에 포함할 수 있음.

배열은 for - of로 빠르게 for문이 가능.

 

- push(): 배열 맨 끝에 값 추가

- pop(): 배열 맨 끝에 값 제거

- unshift(): 배열 맨 앞에 값 추가

- shift(): 배열 맨 앞에 값 제거

let mixedArray = [
  42,                           // 숫자
  "Hello, World!",              // 문자열
  { name: "Yongwoo", age: 27 }, // 객체
  [1, 2, 3],                    // 배열
  function() {                  // 함수
    console.log("I'm a function inside an array!");
  }
];

 

하지만 V8 엔진에서의 배열의 최적화하자.

굉장히 작은 최적화이지만, 티클 모아 태산 -> 대규모 서비스로 가는 길

 

 

위 예시처럼 각자 다른 타입의 동적 할당 배열 방식은 Array가 내부적으로 희소 배열이라는 뜻이다.

data들이 메모리에 연속적으로 적재되어 있지 않다.

 

v8의 Elements kind (21가지 내부 배열 형태 존재)

출처. https://v8.dev/blog/elements-kinds

SMI(Small Integer), DOUBLE, PACKED, HOLEY 등의 유형이 존재한다.

유형이 자주 바뀐다면 성능에 문제가 발생한다.

* V8은 처음에 "모든 요소가 동일한 타입이고 연속적"이라면 내부를 C 배열처럼 패킹(Packed) 해둠.
타입이나 구조가 변하면 "사전(dictionary) 기반 구조" 구조로 바꿔서 성능이 크게 떨어집니다.

🔥 “Packed → Holey → Dictionary”

V8은 Packed 상태를 유리하려 함 -> 가장 빠름

중간 인덱스를 건너뛰거나 섞이면 -> Holey로 강등

더 복잡해지면 Dictionary(일반 객체)처럼 바뀌어 느려짐

 

Best Practice 제시 💡

1) 배열은 한 가지 타입으로 유지

2) TypeScript 사용 - 런타임 전부터 타입 안정성을 확보

 

V8엔진이란?

google에서 개발한 오픈 소스 자바스크립트 엔진으로 웹 브라우저에서 자바스크립트 코드를 실행하는 데 사용되며 C++로 작성되었습니다. chrome, safari에서 V8 엔진을 사용 중입니다.

V8은 속도 향상을 위해 JIT(Just In TIme) 컴파일러를 활용해 속도 측면에서 이점이 있다. 

출처(올리브영 테크블로그): https://oliveyoung.tech/2023-10-28/oliveyoung-javascript-turbofan/

 

Q: 나 스프링 개발자인데 JIT 들어봤다,, V8엔진의 JIT랑 같은 거예요? 😂😂

A: JIT 컴파일러라고 부릅니다.

-> 코드를 실행 직전에 기계어로 변환한다라는 공통의 개념을 가리킴

"JIT"는 개념을 가리키는 기술 용어라서 JVM·V8·.NET 등 여러 런타임이 각자의 JIT를 가지고 있지만, 내부 동작은 언어 특성과 런타임에 맞게 다르게 구현됩니다.

 

자바는 코드를 실행하기 위해서는

1) 바이트 코드로 컴파일하는 과정 

2) 바이트코드를 인터프리트하는 과정을 거쳐야 한다.

*일반적으로 인터프리터는 컴파일러보다 느리기에 문제 발생.

문제 개선을 위해 JIT 컴파일러로 성능을 올렸다.

*자세한 내용 추후 포스팅링크 (JIT 컴파일러)