[Week9] 프론트엔드 기초: React + TypeScript(1)

프론트엔드 시작 전, JS 정리

지난 시간까지는 백엔드를 진행했고, 이번 시간부터는 프론트엔드 영역에 진입할 예정이에요.
본격적으로 프론트엔드를 배우기 전에, 기초를 다지기 위해 자바스크립트의 핵심 개념들을 먼저 정리해 볼게요.

자바스크립트의 특징과 표준화

자바스크립트는 인터프리터 언어이자 동적 타입 언어예요. 함수를 일급 객체로 취급하고, 프로토타입 기반의 상속을 지원하며 다양한 프로그래밍 패러다임을 가졌다는 특징이 있어요.

초창기에는 브라우저마다 JS가 다르게 동작하는 이른바 '크로스 브라우징' 문제가 심각했어요. 내 코드가 크롬에서는 도는데 익스플로러에서는 안 도는 문제가 생긴 것이에요. 이를 해결하기 위해 나온 표준화 규격이 바로 ECMAScript(ES) 에요.

내가 짠 코드가 특정 브라우저에서 동작하는지 궁금하다면 Caniuse 사이트를 확인할 수 있어요. 만약 지원하지 않는 구형 브라우저까지 커버해야 한다면, 최신 문법을 예전 문법으로 자동 변환해 주는 Babel 이나 Polyfill 같은 도구들을 사용하면 해결할 수 있어요.

변수 (var vs let, const)

변수는 복잡한 메모리 주소 대신 우리가 알아보기 쉽게 달아둔 '별칭'이에요. 변수가 생성될 때는 선언 -> 초기화 -> 할당의 3단계를 거치게 되는데, JS 엔진의 평가 단계와 실행 단계에서 이 과정이 언제 일어나는지에 따라 키워드별 동작 방식이 달라져요.

왜 var 사용을 지양해야 할까?
var 는 평가 단계에서 선언과 초기화가 동시에 일어나요. 그래서 선언 위치와 상관없이 코드 최상단으로 끌어올려진 것처럼 동작하는 호이스팅(Hoisting) 현상이 발생해요. 게다가 중복 선언도 가능하고 전역 변수처럼 오작동할 여지가 많아서 코드가 꼬이기 쉬워요.

안전한 let 과 const
그래서 등장한 것이 let 과 const 예요. 이 둘은 평가 단계에서 선언만 되기 때문에 접근 순서가 엄격해서 var 보다 훨씬 안전하고 혼란이 적어요.

자료형과 연산자

자료형은 크게 원시 타입과 객체 타입으로 나뉘어요.
원시 타입에는 String , Number , BigInt , Undefined , Null , Boolean , Symbol 이 있고, 이 7가지를 제외한 나머지는 모두 객체 타입이라고 생각하면 돼요.

데이터들을 다루기 위해 산술, 비교, 논리, 할당, 삼항 연산자 등 목적에 맞는 다양한 연산자들도 존재해요.

함수는 일급 객체다

JS에서 함수는 일급 객체 예요. 함수를 마치 일반적인 값(변수)처럼 아주 자유롭게 다룰 수 있다는 뜻이에요.

// 1. 함수의 매개변수(인자)로 전달될 수 있어요.
function test(arg) {
  arg();
}
test(() => console.log("callback"));

// 2. 함수의 반환값이 될 수 있어요.
function returnFunc(arg) {
  return arg;
}
returnFunc(() => console.log("callback"))();

// 3. 변수에 할당할 수 있고, 동일 비교도 가능해요.
const myFunc = function (arg) { return arg; };
const myFunc2 = myFunc;
console.log(myFunc == myFunc2); // true

다양한 함수 선언과 매개변수

함수를 선언하는 방식과 매개변수를 다루는 방법도 아주 다양해요.

// 화살표 함수 등 다양한 선언 방식
function test1() { return 1; }
const test2 = function () { return 1; };
const test3 = () => 1;

// 기본값 매개변수 (Default parameter)
function defaultParam(arg = 1) { 
  return arg; 
}
console.log(defaultParam()); // 1 (인자가 없으면 기본값 적용)

// 나머지 매개변수 (Rest parameter)
function restParam(arg, ...rest) {
  console.log(rest); // 나머지 인자들이 배열 형태로 들어와요
  return arg;
}
restParam(1, 2, 3, 4); // rest 에는 [2, 3, 4] 가 담겨요.

유용한 함수 사용 패턴

마지막으로 실제 개발에서 자주 쓰이는 함수 사용 패턴 4가지에요

// 1. 즉시 실행 함수 : 정의되자마자 딱 한 번 바로 실행돼요.
(function iife() {
  console.log(1);
})();

// 2. 재귀 함수 : 자기 자신을 다시 호출해요. (탈출 조건이 꼭 필요해요)
function recursive(arg) {
  if (arg === 2) return arg;
  return recursive(++arg);
}
console.log(recursive(1));

// 3. 중첩 함수 : 함수 안에 함수를 선언해서 사용해요.
function outer(arg) {
  function inner() {
    console.log(arg);
  }
  inner();
}
outer(1);

// 4. 콜백 함수 : 다른 함수의 인자로 넘겨져서 나중에 실행돼요.
function testCb(arg) {
  arg();
}
testCb(() => {
  console.log(3);
});