자바 스크립트란?
- 1995년 정적인 HTML을 동적으로 표현하기 위해 개발된 경량화 프로그래밍 언어이다.
- 1997년 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 EMCA 인터네셔널에서 표준화된 자바스크립트 초판(ECMAScript 1)이 완성되었고, 2015년 ECMAScript 6로 개편되면서 범용 프로그래밍 언어로서 갖추어야할 기능이 대거 포함되었다.
- 2008년 구글에서 V8 자바스크립트 엔진을 공개하며 자바스크립트는 데스크톱 앱과 유사한 사용자 경험(User experience)을 제공할 수 있는 웹 앱 개발 프로그래밍 언어로 정착했다.
- 2009년 브라우저에서만 작동하면 자바스크립트를 브라우저 이외의 환경에서도 동작시킬 수 있는 실행 환경인 Node.js가 등장하면서 F/E는 물론 B/E 영역까지 사용할 수 있는 웹 프로그래밍 언어의 표준으로 자리잡았다.
- 특징
1) 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.
2) 기본 문법은 C, Java와 유사. Self에서 프로토타입 기반 상속, Scheme에서는 일급 함수의 개념을 채용했다.
3) 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)이다.
* 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 처리속도가 느린 인터프리터의 단점을 해결했다.
4) 명령형(Imperative), 함수형(Functional), 프로토타입 기반(Prototype-based)의 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.
브라우저의 동작 원리
1. 핵심 기능
: 사용자가 참조하고자 하는 웹페이지를 서버에 요청(request)하고 서버의 응답(response)를 받아 브러우저에 표시하는 것이다.
- 브라우저는 서버로부터 HTML, CSS, JavaScript, 이미지 파일 등을 응답받는다.
2. Rendering Engine
: 서버로부터 응답받은 HTML, CSS은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.
3. JavaScript Engine
: 자바스크립트 엔진에서는 자바스크립트를 처리한다. HTML 파서는 HTML 내부의 <script> 태그에 도달하면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘겨 자바스크립드 코드를 로드하고 파싱하여 실행한다. 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨 중지했던 DOM 생성을 재개한다.
=> 이처럼 브라우저는 동기적(Synchronous)으로 HTML, CSS, JavaScript를 처리한다.
자바스크립트의 기본 문법 (Basic Syntaxes)
1. 변수 (Variable)
: 값(value)을 저장(=할당)하고 그 값을 참조하기 위해 사용한다. 한 번 쓰고 버리는 값이 아닌 유지(=캐싱)할 필요가 있는 값은 변수에 담아 사용한다.
- 변수는 위치(=주소)를 기억하는 저장소이다. 여기서 위치란, 메모리 상의 주소(address)를 의미한다.
=> 즉, 변수란 메모리 주소(Memory address)에 접근하기 위해 지정한 식별자(identifier)이다.
- 변수를 선언할 때에는 "var" 키워드를 사용한다.
2. 값 (Value)
: 값은 프로그램에 의해 저장되고 조작될 수 있는 대상이다.
- 값을 가장 간단하게 생성하는 방법은 리터럴 표기법(literal notation)이다.
3. 데이터 타입 (Data type)
: 자바스크립트의 모든 값들은 테이터 타입을 갖는데, 자바스크립트는 아래 7가지의 데이터 타입을 제공한다.
| 원시 타입 (Privmitive data type) | 객체 타입 (Object data type) |
| - number - string - boolean - null - undefined - symbol (ECMAScript 6에 추가) |
- object |
- 자바스크립트는 C나 Java와는 다르게 변수를 선언할 때 데이터 타입을 지정하지 않는다. 변수에 할당된 값의 타입에 따라 동적으로 변수의 타입이 결정된다.이를 동적 타이핑이라 하고, 다른 프로그래밍 언어와 구별되는 특징 중에 하나이다.
4. 연산자 (Operator)
: 연산자는 하나 이상의 표현식을 대상으로, 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다.
- 연산의 대상자는 피연산자(Operand)라고 한다. 피연산자의 타입은 반드시 일치할 필요는 없다. "암묵적 타입 강제 변환"에 따라 연산을 수행한다.
- 연산자의 종류
1) 산술 연산자
2) 문자열 결합 연산자
3) 할당 연산자
4) 비교 연산자
5) 논리 연산자
6) 타입 연산자
7) 인스턴스 생성 연산자
5. 키워드 (Keyword) = 예약어 (Reserved word)
: 특정 작업을 수행하거나 언어의 구조를 정의하는데 사용하는 예약된 단어를 말한다.
6. 주석 (Comment)
: 주석은 작성된 코드의 의미를 설명하기 위해 사용한다.
- 한 줄 주석은 // 다음에 작성하고 여러 줄의 주석은 /* 와 */ 사이에 작성한다.
7. 문 (Statement)
: 작업을 수행하는 코드 단위. 자세히 말하면 웹 브라우저에 의해 단계별로 수행될 명령들의 집합이다. 하나 이상의 리터럴, 연산자, 표현식, 키워드 등으로 구성될 수 있으며, 세미콜론(;)으로 마무리한다.
- 문은 code block({...})으로 그룹화할 수 있다.
- 문은 일반적으로 위에서 아래로 순서대로 실행된다.이러한 실행 순서는 조건문, 반복문의 사용으로 제어할 수 있고 이를 흐름제어(Flow Control)라고 한다.
- 자바스크립트에서는 블록 유효범위(Block-level scope)를 생성하지 않고 함수 단위의 유효범위(Function-level scope)만 생성된다.
8. 표현식 (Expression)
: 표현식은 하나의 값으로 평가(evaluation)된다. 값(리터럴), 변수, 객체의 성질, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이고 하나의 값으로 평가된다.
* 문(Statement) VS 표현식(Expression)
: 자연어에서 문(statement)이 마침표로 끝나는 하나의 문장(sentence)라면, 표현식은 문(statement)를 구성하는 요소이다. 구별이 어렵지만, 표현식은 값을 만들지만 그 이상의 행위는 불가능하다.표현식을 통해 평가한 값을 실제로 컴퓨터에게 명령하여 무언가를 실행하는 것은 문이다.
=> var, function과 같은 키워드를 사용해 변수나 함수를 생성할 수 있다.
=> if, for, while문 과같은 제어문을 생성해 프로그램의 흐름을 제어할 수 있다.
9. 식별자 (Identifier)
: 변수, 함수, 클래스, 모듈, 속성 등의 이름을 정의하는데 사용한다.
- 식별자는 반드시 문자 (a-z, A-Z), 달러 기호($), 밑줄(_)로 시작해야 한다. 숫자(0-9)로 시작할 수 없다! 두번째 문자부터 숫자 또한 사용 가능하다.
- 자바스크립트는 대소문자를 구분하므로 myVariable과 MyVariable은 다른 식별자로 취급된다.
- 자바스크립트의 키워드(예약어)는 식별자로 사용할 수 없다.
- 대부분의 자바스크립트 개발자가 식별자를 만들 때 지키는 관례를 적어보면 다음과 같다.
1) 클래스의 이름은 항상 대문자로 시작한다.
2) 변수, 함수, 속성, 메소드의 이름은 항상 소문자로 시작한다.
3) 여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로 한다.
10. 함수 (Function)
: 함수란 어떤 작업을 수행하기 위한 문(statement)들의 집합을 정의한 코드 블록이다. 함수는 이름과 매개변수를 가지며 필요할 때 호출해서 코드 블록에 담긴 문들을 실행할 수 있다.
- 함수는 호출될 때 여러 번 호출할 수 있으며 코드의 재사용성 측면에서 매우 유용하다.
11. 객체 (Object)
: 객체 지향 기반의 언어인 자바스크립트에서 거의 모든 것은 객체이다. 객체에 해당하지 않은 것에는 원시 타입(Primitive-type) 값들이 있다.
- 객체의 구성
1) 프로퍼티(Property) : 데이터를 의미
2) 메소드(Method) : 데이터를 참조하고 조작할 수 있는 행동(behavior)를 의미
- 자바스크립트는 객체지향의 상속을 구현하기 위해 "프로토타입"을 사용해 객체의 프로퍼티와 메소드를 상속받을 수 있다.
12. 배열 (Array)
: 배열은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바스크립트에서 배열은 객체이다.
- 아래와 같이 배열을 선언했을 때 데이터의 순서는 0부터 시작한다.
var arr = [ 1, 2, 3, 4, 5 ];
console.log(arr[1]); === 2
=> 배열 arr 자리1의 데이터는 2의 값을 가진다.
자바스크립스트를 작성 및 실행하는 방법
1. node.js 를 기반으로 실행
- node.js 를 기반으로 실행할 경우 REPL(Read-Evla Print Loop)을 사용한다.
* REPL : 코드를 한 줄 입력하 때마다 결과를 곧바로 보여주는 node.js 내부에 탑재된 프로그램
- 명령 프롬프트에서 실행
C:\Users\dooxi> node <= REPL 실행 명령어
Welcome to Node.js v20.17.0.
Type ".help" for more information.
> <= node.js의 REPL 프롬프트
......
> .exit <= REPL 종료 명령어
C:\Users\dooxi> <= 윈도우의 명령 프롬프트 빠져나옴 확인
2. 자바스크립트 파일을 작성해서 실행
C:\Users\dooxi> cd c:\dev\react <= 작업 디렉터리로 이동
c:\dev\react> code . <= VSCode 실행 명령어 (반드시 띄어쓰기 + . 입력)
또는
c:\dev\react> code test.js <= VSCode를 실행하고 해당 디렉터리에 test.js라는 이름의 파일을 생성하여 오픈
c:\dev\react> node test.js <= 코드 작성 후 REPL을 실행하고 test.js를 실행 (js파일일 경우 .js는 생략 가능)
400
3. HTML 파일을 작성하고 이를 브라우저를 통해 실행
c:\dev\react> code test.html <= VSCode 를 실행하고 해당 디렉터리에 test.html 파일을 생성하여 오픈
작성한 html 코드를 실행하는 방법에는 2가지 방법이 있다.
1) 작업 디렉터리에서 html파일 실행
- 위와 같이 메인 화면에 사이의 내용이 출력되고 f12 관리자 도구 console에 i+j 값이 출력됨을 확인.
2) Live Server 확장 프로그램을 사용하여 VSCode에서 HTML 파일 오픈
- 확장 프로그램을 다운 받은 뒤, html파일 우클릭 후 Open with live server 클릭.
- 위와 같이 메인 화면에 사이의 내용이 출력되고 f12 관리자 도구 console에 i+j 값이 출력됨을 확인.
* 차이점
: Html 파일을 실행하는 경우 주소를 "작업 디렉터리/파일이름"의 형태로 나타나고,
Live server를 사용할 경우 주소를 "가상주소.포트/파일이름"의 형태로 가상주소에 포트를 할당하여 나타낸다.
파싱(Parsing)
: 어떤 자료에서 원하는 정보만 가공하고 뽑아서 원하는 때에 불러올 수 있게 하는 것이다. 이를 수행하는 프로그램을 파서(parser)라고 한다.
HTML 파일 내부에서 <script> 태그의 위치에 따라 블로킹이 발생해 DOM 생성이 지연될 수 있기 때문에 <script> 태그의 위치는 중요한 의미를 갖는다. 그렇기 때문에 <script> 태그는 보통 HTML 파일의 body 요소 아래에 위치시키는데, 그 이유는 2가지이다.
1) HTML 요소들이 <script> 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
2) DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.
리터럴(literal)
: 소스코드 안에 직접 만들어 낸 상수 값 자체를 말한다. 이는 값을 구성하는 최소 단위이다.
'Study > seSAC 금천 4기' 카테고리의 다른 글
| 컨테이너 애플리케이션 개발_1일차_240912 (1) | 2024.09.26 |
|---|---|
| 네트워크 및 시스템 관리_1일차_240910 (0) | 2024.09.25 |
| 개발환경 구축하기 (2) | 2024.09.14 |
| SeSAC 특강 - 이노그리드 운영본부 이사님_240912 (0) | 2024.09.12 |
| 네트워크 및 시스템 관리_2일차_240911 (2) | 2024.09.11 |