* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.
* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.
1. 프론트엔드(Frontend)
-
사용자가 직접 보고 상호작용할 수 있는 웹 애플리케이션의 UI(사용자 인터페이스)를 개발하는 분야.
-
사용자가 웹사이트에 접속했을 때 눈에 보이는 모든 화면 요소와 동작을 구현해야하는 역할이라고 이해하면 된다.
데이터 가공
-
데이터를 화면에 표현하기 전에 필요한 데이터 처리 과정.
-
데이터를 어떻게 다루고, 변형하며, 최종적으로 사용자에게 제공해야하는가? 프론트엔드에서 가장 중요한 고민거리 중 하나.
-
데이터를 담는 변수, 데이터를 처리하는 함수, 이들을 실행하는 메커니즘의 3요소로 이루어져 있다.
- Flow Control(흐름 제어): 조건문, 반복문 등으로 데이터 처리의 흐름을 제어하는 방법.
- JavaScript에서 제공하는 내장 객체/빌트인 객체(예: Array, Math, Date 등)를 사용하여 데이터를 다룰 수도 있다.
- 실행 메커니즘? JavaScript 엔진. 데이터를 처리하고 실행하는 핵심 요소. / 데이터 변환, 비동기 처리 등 언어 자체의 메커니즘 등등..
- 데이터를 받고, 이를 처리하고, 적절하게 화면에 표현하는 것이 가공의 흐름.
화면 렌더링(Rendering)
-
사용자가 웹사이트를 열면 파일이 로드되고 실행된다. 이 과정에서 HTML, CSS, JavaScript가 브라우저 엔진에 의해 해석되어 화면에 표시되는 것.
-
서버 등지에서 데이터를 가져오는 것은 거의 필연적으로 비동기적(Asynchronous)으로 이루어진다.
-
데이터를 가져와서 화면에 표시하는 것이 렌더링.
-
이후 사용자가 버튼을 클릭하거나, 입력 필드에 텍스트를 입력하거나, 링크를 클릭하는 동작 등의 상호작용인터렉션(Interaction)을 처리해주어야 한다.
- 이벤트 리스너(Event Listener) 등을 이용하여 사용자에 동작에 반응하여 적절한 인터렉션을 구현하는 것.
2. JavaScript 기초 1
-
Javascript의 기본 개념과 발전은 이전 포스팅 참조.
-
1995년. Netscape 브라우저를 위한 클라이언트 측 스크립트 언어로 개발
-
2009년. V8 JavaScript 엔진(구글 크롬 브라우저의 JS 엔진)을 기반으로, 자바스크립트를 브라우저 외부에서도 실행할 수 있도록하는 Node.js의 개발로 웹 브라우저 전용 스크립트 언어에서 범용 프로그래밍 언어로 확장.
Node.js?
- 이전 포스팅 참조
인터프리터 언어(Interpreted Language)
-
소스 코드를 실시간으로 해석하여 실행하는 언어.
-
소스 코드가 실행되기 전에 별도의 기계어로 컴파일되지 않으며, 인터프리터라는 도구가 코드를 한 줄씩 해석하며 실행.
-
자바스크립트는 대표적인 인터프리터 언어. 다만 성능 최적의 이유로 최신 엔진은 JIT(Just-In-Time) 컴파일러도 사용.
-
브라우저 또는 Node.js 환경의 JavaScript 엔진이 코드를 처리.
-
코드를 읽고 문법을 분석 - 파싱
-
기계어로 바로 변환되지 않고, 중간 단계로 바이트코드를 생성
-
인터프리터가 바이트코드를 해석하고 실행
-
(최신 버전에서는) 반복적으로 실행되는 코드를 미리 기계어로 컴파일하여 성능을 최적화.
프로그래밍 패러다임(Programming Paradigm)
-
프로그램을 설계하고 구현하는 방식이나 접근법.
-
객체지향, 명령형, 선언형 등등..
JavaScript는?
-
프로토타입 기반 객체 지향 언어.
-
고차 함수, 일급 함수, 불변성(immutable data), 그리고 순수 함수와 같은 함수형 프로그래밍의 개념을 지원.
-
스크립트 언어로 시작해서 프로그래밍 언어로 확장.
-
인터프리터 언어이지만, 현재는 Just-In-Time 컴파일러를 사용해 성능을 최적화한다.
일급 객체(First-Class Citizen, First-Class Object)
-
다른 일반 데이터와 동일하게 다룰 수 있는 값.
-
변수나 데이터 구조 안에 담을 수 있다. / 함수의 매개변수로 전달할 수 있다. / 함수의 반환값으로 사용할 수 있다.
-
이상의 3개 조건에 해당되는 것이 일급 객체.
-
이름에 비해서 그렇게 어려운 개념은 아니다. JavaScript의 함수가 바로 일급 객체. 함수는 일반 값처럼 변수에 할당가능 / 다른 함수의 매개변수로 전달가능 / 반환값으로 사용가능이기 때문.
-
일급 객체는 고차 함수를 활용할 수 있고 / 콜백 함수와 클로저를 사용할 수 있고 / 함수형 프로그래밍 지원하기 때문에 중요한 개념으로 여겨진다.
-
JavaScript는 함수 이외에도 객체와 배열도 일급 객체의 특징을 지닌다.
고차함수?
프로토타입
- 이전 포스팅 참조.
ECMAScript
호이스팅
-
이전 포스팅 참조.
-
호이스팅은 의도된 기능은 아니고.. 실행 컨텍스트 기반이라는 JavaScript의 특징에서 발현된 현상이다.
-
var, let, const와 연관된 항목이니, 이 포스팅도 참조.
네이밍 컨벤션
자료형
- 이전 포스팅 참조.
BigInt 타입
| 특징 | BigInt | Number |
|---|---|---|
| 표현 가능한 범위 | 무제한 | ±(2^53 - 1) |
| 데이터 타입 | 정수만 가능 | 정수 및 부동소수점 모두 가능 |
| 산술 연산 | 기본 연산자 지원 | 기본 연산자 지원 |
| 타입 비교 | 다른 타입(Number)과 혼합 연산 불가능 | 다른 타입과 혼합 연산 가능 |
| Math 메서드 사용 | 불가능 | 가능 |
-
아주 큰 정수(Arbitrary Precision Integer)를 처리하기 위한 데이터 타
입. -
Number 타입은 2^53 - 1 (9007199254740991)을 초과하는 정수를 안전하게 표현할 수 없다.
-
이를 보완하기 위해 ES11(ECMAScript 2020)에서 도입.
// BigInt 생성 방법
const big1 = 1234567890123456789012345678901234567890n; // 리터럴
const big2 = BigInt("1234567890123456789012345678901234567890"); // 생성자 함수
const big3 = BigInt(12345); // 일반 숫자에서 변환
console.log(big1); // 1234567890123456789012345678901234567890n
console.log(big2); // 1234567890123456789012345678901234567890n
console.log(big3); // 12345n연산자와 함수
- 이전 포스팅 참조
매개변수(parameter)와 인자(argument)
- 은근히 헷갈리는 용어들이라서 따로 정리해보겠다..
매개변수(Parameter)
- 함수를 선언할 때 함수 내부에서 사용할 입력값의 이름을 정의하는 변수
function greet(name) { // 'name'은 매개변수
console.log(`Hello, ${name}!`);
}인자(Argument)
- 함수를 호출할 때 함수에 전달되는 실제 값.
function add(a, b) { // 'a'와 'b'는 매개변수
return a + b;
}
const result = add(5, 3); // '5'와 '3'은 인자
console.log(result); // 출력: 8
형변환, 동적 타입 언어
-
이전 포스팅 참조
-
JavaScript의 장점이자 특징이긴 한데.. 요새는 타입 안정성 문제로 타입을 강제하는 TypeScript가 주류가 되었다.
