01장. 프로그래밍
프로그래밍이란, 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다.
- 컴퓨터와 사람은 사고하고 인지하는 방식이 다르다.
따라서 컴퓨터의 관점에서 문제를 사고(Computational Thinking)해야 한다.
이를 위해 논리적, 수학적 사고가 필요하며, 해결해야 할 과제를 작은 단위로 분해하고, 패턴을 찾아 추출해야 한다.
또한, 프로그래밍 내에서 사용되는 모든 개념은 평가 가능하도록 명확하게 정의되어야 한다.
- 컴퓨터와의 커뮤니케이션
컴퓨터는 명령을 수행하는 주체이므로, 우리가 원하는 작업을 기계어(컴퓨터가 이해할 수 있는 언어)로 전달해야 한다.
하지만 사람이 직접 기계어로 명령을 전달하는 것은 매우 어렵기 때문에, 프로그래밍 언어를 사용해 코드를 작성한 뒤,
컴파일러 또는 인터프리터를 통해 기계어로 변환하여 실행하게 된다.
즉, 프로그래밍이란 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 과정이다.
- 프로그래밍 언어의 구성
프로그래밍 언어는 구문(Syntax)과 의미(Semantics)의 조합으로 이루어져 있다.
우리는 요구사항을 분석한 후, 이를 적절한 자료구조와 함수의 집합으로 변환하고, 그 흐름을 제어하는 방식으로 프로그래밍을 수행한다.
02장. 자바스크립트란?
자바스크립트(JavaScript)는 웹을 구성하는 필수적인 프로그래밍 언어로, 현재 모든 브라우저의 표준 언어로 자리 잡고 있다.
초창기에는 단순히 웹페이지에 동적인 요소를 추가하는 보조적인 역할만 수행했지만,
기술이 발전하면서 서버 개발부터 모바일, 데스크톱 애플리케이션 개발까지 활용 범위가 확장되었다.
자바스크립트의 발전 과정
자바스크립트가 현재처럼 강력한 언어로 자리 잡기까지 여러 가지 중요한 기술들이 등장했다.
1. Ajax (Asynchronous JavaScript and XML)
Ajax는 서버와 브라우저가 비동기적으로 데이터를 교환할 수 있는 통신 기술이다.
과거에는 새로운 데이터를 요청할 때마다 전체 페이지를 새로고침해야 했지만,
Ajax를 통해 필요한 데이터만 서버에서 가져와 변경해야 하는 부분만 렌더링할 수 있게 되었다.
- 이를 통해 **빠르고 부드러운 사용자 경험(UX)**을 제공할 수 있게 되었으며,
구글의 Gmail, 구글 맵스(Google Maps) 같은 인터랙티브 웹 애플리케이션이 가능해졌다.
2. jQuery
jQuery는 DOM(Document Object Model) 조작을 쉽게 할 수 있도록 도와주는 라이브러리다.
초기 웹 개발에서는 브라우저마다 DOM API가 달라 크로스 브라우징 문제가 많았는데,
jQuery를 사용하면 이런 문제를 상당 부분 해결할 수 있었다.
- 간결한 문법과 다양한 플러그인 지원 덕분에 한때 웹 개발의 필수 요소였지만,
이후 React, Vue.js 같은 프레임워크가 등장하면서 사용 빈도가 점차 줄어들었다.
3. V8 자바스크립트 엔진
Google이 개발한 V8 엔진은 자바스크립트의 실행 속도를 비약적으로 향상시켰다.
이는 JIT(Just-In-Time) 컴파일을 사용하여 자바스크립트를 즉시 기계어로 변환해 실행하는 방식 덕분이다.
- V8 덕분에 웹 애플리케이션의 성능이 크게 개선되었으며,
데스크톱 애플리케이션과 유사한 고성능 웹 애플리케이션 개발이 가능해졌다.
4. Node.js
Node.js는 V8 엔진을 브라우저에서 독립시켜 서버에서도 실행할 수 있도록 만든 자바스크립트 런타임 환경이다.
- 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작하기 때문에,
많은 요청을 동시에 처리할 수 있어 고성능 웹 서버 구축에 적합하다.
✅ 장점:
- 가벼운 서버 환경 구축 가능
- 웹 API, 실시간 채팅, 마이크로서비스 개발에 유용
- npm(Node Package Manager) 생태계를 활용한 다양한 모듈 사용 가능
❌ 단점:
- CPU 연산이 많은 작업(예: 데이터 분석, 머신러닝)에는 적합하지 않음
- 싱글 스레드 기반이기 때문에 CPU 집약적인 작업이 많으면 성능이 저하될 수 있음
5. SPA 프레임워크
SPA(Single Page Application)는 한 번 페이지를 로드한 뒤, 추가적인 페이지 이동 없이 필요한 데이터만 동적으로 갱신하는 방식이다.
SPA가 대중화되면서 CBD(Component-Based Development) 방법론이 널리 사용되었고,
이에 따라 React, Vue.js, Angular, Svelte 등의 SPA 프레임워크가 각광받게 되었다.
✅ SPA의 장점:
- 페이지 전환 속도가 빠르고, 네이티브 앱과 유사한 사용자 경험(UX) 제공
- 서버 부하 감소 (필요한 데이터만 요청)
- 코드의 재사용성과 유지보수성이 높음
❌ SPA의 단점:
- 초기 로딩 속도가 느릴 수 있음 (JS 파일을 한 번에 다운로드해야 하기 때문)
- SEO(검색 엔진 최적화)가 어려움 (HTML을 동적으로 생성하므로 크롤링이 힘듦)
자바스크립트의 특징
1. 웹을 구성하는 필수 요소
자바스크립트는 HTML, CSS와 함께 웹을 구성하는 3대 요소 중 하나로,
웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.
2. 인터프리터 언어
자바스크립트는 인터프리터 언어로, 한 줄씩 읽고 변환한 후 즉시 실행하는 특징을 가진다.
📌 최신 자바스크립트 엔진(V8 등)은 JIT(Just-In-Time) 컴파일을 사용해
인터프리터와 컴파일러의 장점을 결합하여 성능을 더욱 향상시켰다.
3. 멀티 패러다임 언어
자바스크립트는 다양한 프로그래밍 패러다임을 지원하는 유연한 언어다.
- 명령형 프로그래밍 (Imperative) : for, while 문을 사용한 절차적인 코드 작성 가능
- 함수형 프로그래밍 (Functional) : map(), reduce(), filter() 등의 고차 함수 지원
- 프로토타입 기반 객체지향 프로그래밍 : 클래스 기반이 아닌 프로토타입(prototype) 기반으로 객체 생성
4. 동적 타이핑(Dynamic Typing)
자바스크립트는 변수의 타입을 미리 선언하지 않아도 된다.
5. 비동기 처리(Asynchronous Processing) 지원
자바스크립트는 기본적으로 싱글 스레드 환경에서 실행되지만,
비동기 처리를 지원하기 위해 이벤트 루프(Event Loop)와 콜백 큐(Callback Queue) 를 활용한다.
- setTimeout(), setInterval()과 같은 비동기 함수 사용 가능
- Promise, async/await을 통해 비동기 코드의 가독성을 개선
03장.자바스크립트 개발환경과 실행 방법
자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다!
V8 엔진과 Node.js의 등장으로 서버, 데스크톱, 모바일 등 다양한 환경에서 실행할 수 있게 되었다.
- V8 자바스크립트 엔진
V8 엔진은 구글 크롬과 Node.js에서 사용되는 고성능 자바스크립트 엔진이다.
- 크롬 개발자 도구(DevTools) – 콘솔과 디버깅
구글 크롬(Chrome)에는 자바스크립트를 실행하고 디버깅할 수 있는 강력한 개발자 도구(DevTools) 가 내장되어 있다.
이를 활용하면 코드 테스트, 디버깅, 성능 최적화 등을 쉽게 할 수 있다.
- F12 또는 Ctrl + Shift + I (Cmd + Option + I on Mac) 를 눌러 개발자 도구(DevTools) 를 연다.
- 비주얼 스튜디오 코드(Visual Studio Code, VS Code)
VS Code는 현재 가장 널리 사용되는 자바스크립트 개발용 코드 편집기이다.
마이크로소프트가 개발하였으며, 가볍고 강력한 기능을 제공하는 것이 특징이다.
자바스크립트는 다양한 실행 환경에서 사용 가능하며,
특히 크롬의 V8 엔진과 Node.js, 그리고 강력한 편집기인 VS Code를 활용하면 더욱 효율적으로 개발을 진행할 수 있다.
04장. 변수 (Variables)
애플리케이션은 데이터를 다룬다.
즉, 데이터를 입력받아 처리하고, 그 결과를 출력하는 것이 핵심 역할이다.
이러한 데이터를 저장하고 관리하기 위해 변수(Variable) 가 필요하다.
변수란?
- 프로그래밍 언어에서 데이터를 저장하고 참조하는 메커니즘
- 하나의 값을 저장하기 위해 확보된 메모리 공간 또는 그 공간을 가리키는 이름
- 값의 위치(메모리 주소)를 가리키는 상징적인 이름
변수를 사용하면 같은 값을 여러 번 사용하거나 변경할 수 있어, 코드의 유지보수성과 가독성이 좋아진다.
변수의 3가지 핵심 개념
| 할당(대입, 저장) | 변수에 값을 저장하는 과정 |
| 참조(읽기) | 변수에 저장된 값을 읽어오는 과정 |
| 식별자(변수 이름) | 값이 저장된 메모리 주소를 가리키는 이름 |
* 식별자 네이밍 규칙
1. 특수문자를 제외한 문자,숫자,언더스코어(_),달러기호($)를 포함할 수 있다.
2. 숫자로 시작하면 안된다.
3. 예약어는 식별자로 사용할 수 없다.
4.의미를 명확히 표현해야 가독성이 올라간다.
5. 코드 전체의 가독성을 높이려면 카멜케이스(firtName)와 파스칼케이스(FirstName)를 따르는것이 유리하다.
변수 선언과 키워드 (var, let, const)
자바스크립트에서 변수를 사용하려면 먼저 선언해야 한다.
자바스크립트에서는 var, let, const 키워드를 사용하여 변수를 선언할 수 있다.
| var | 함수 스코프, 호이스팅 발생, 재선언 가능 |
| let | 블록 스코프, 재할당 가능, 재선언 불가 |
| const | 블록 스코프, 재할당 불가, 상수 선언 |
변수 초기화
변수를 선언 후 값을 할당하지 않으면 자동으로 undefined 값으로 초기화된다.
그러나 명확한 값을 할당하지 않으면 예기치 않은 오류가 발생할 수 있다.
💡 초기화되지 않은 변수는 undefined 값을 가지므로, 항상 명확한 값을 할당하는 것이 좋다!
변수 호이스팅 (Variable Hoisting)
변수 선언은 코드가 인터프리터에 의해 한줄씩 순차적으로 실행되는 런타임, 그 전단계에서 먼저 실행된다.
즉 변수 선언이 소스코드에 어디에 있든 상관없이 다른 코드보다 먼저 실행된다.
이처럼 변수 선언이 코드의 선두로 끌어 올려진것처럼 동작하는 특징을 변수 호이스팅이라고 한다.
변수 뿐 아니라 키워드를 사용해 선언하는 모든 식별자는 호이스팅된다.
* 주의할점 : 변수 선언은 런타임 전에 실행되고 값의 할당은 런타임에 실행된다.
05장. 표현식과 문
값(Value)란?
- 프로그래밍에서 값(Value) 은 "식(Expression)이 평가되어 생성된 결과" 를 의미한다.
즉, 모든 값은 평가 결과물이며, 이를 변수나 상수에 저장할 수 있다.
데이터 타입(Data Type)
- 자바스크립트에서 모든 값은 특정한 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장
- 데이터 타입이 중요한 이유는 메모리에 값을 저장하는 방식과 연산 방법을 결정하기 때문이다.
리터럴(Literal)
- 리터럴이란 "값을 생성하는 표기법" 을 의미한다.
즉, 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 직접 값을 나타낸다.
표현식(Expression)
- 표현식이란 "값으로 평가될 수 있는 문" 을 의미한다. 표현식은 항상 하나의 값으로 평가될 수 있어야 한다.
모든 리터럴은 표현식이다. (왜냐하면 리터럴 자체가 평가 결과값이기 때문!)
문(Statement)
- 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.즉, 컴퓨터에게 수행할 동작을 지시하는 명령문이다.
- 문을 작성하고 나열하는 것이 프로그래밍이며, 이러한 문의 집합이 프로그램이다.
즉, 여러 개의 문이 모여서 하나의 기능을 수행하는 프로그램을 구성한다.
세미콜론(;)이란?
문의 종료를 나타내는 기호
자바스크립트에서는 자동으로 세미콜론을 삽입(ASI)
단, 중괄호로 묶은 코드 블록 뒤에는 세미클론을 붙이지 않는다.
'BOOK > 모던 자바스크립트' 카테고리의 다른 글
| 모던딥 자바스크립트 11장. 원시 값과 객체의 비교 (0) | 2025.02.18 |
|---|---|
| 모던 딥 자바스크립트 6 -10장 (0) | 2025.02.18 |
