2023.01.28
자바스크립트 스터디 1회차
공부 사이트: https://poiemaweb.com/
1. 기본 개념과 동작 원리 이해의 중요성
프로그래밍 = 요구사항의 집합을 분석하여 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것
프로그래밍의 목적 = 문제 해결
2. 자바스크립트란?
1) 이름의 변천사
Mocha → LiveScript → JavaScript
2) ECMA에 의해 표준화
JavaScript → ECMAScript → ECMAScript 3(ES3) → ES5 → ES6 → ES7 ....
3) 역사
1999, Ajax가 등장
- Ajax(Asynchronous JavaScript and XML): 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능
- 이전에는 웹 브라우저가 데이터 요청 시 서버는 웹 페이지 전체를 렌더링
- Ajax 등장 이후, 서버로부터 필요한 데이터만을 전송받아 변경이 필요한 부분만을 렌더링
2006, jQuery 등장
- DOM(Document Object Model)을 보다 쉽게 제어
- 크로스 브라우징 이슈 개선
- 크로스 브라우징: 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한대로 나오게 하는 작업 (호환성)
2008, 구글의 V8 자바스크립트 엔진
- 빠른 성능
- 과거 웹 서버에서 수행되던 역할들이 클라이언트로 이동. 프론트엔드 주목받는 계기가 됨.
2009, Node.js 등장
- 브라우저에서만 동작하던 자바스크립트를 브라우저 이외 환경에서 동작시킬 수 있는 js 실행환경
- 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에도 사용 => 범용 프로그래밍 언어가 됨
자바스크립트는 크로스플랫폼을 위한 주 언어로 주목받고 있음.
| 웹 | 모바일 하이브리드 앱 (PhoneGap, Ionic) |
서버사이드 (Node.js) |
| 데스크톱 (Electron) |
머신러닝 (TensorFlow.js) |
로보틱스 (Johnny-Five) |
4) 프레임워크
- SPA가 대중화되며 Angular, React, Vue.js 등 다양한 SPA 프레임워크/라이브러리 등장.
- SPA(Single Page Application): 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성. 사용자와 소통하는 웹 애플리케이션/사이트를 의미
5) ECMAScript
ECMAScript는 자바스크립트의 표준. 기본 뼈대.
6) 자바스크립트 특징
- 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 인터프리터 언어. 별도의 컴파일 작업 미수행
- 멀티 패러다임 프로그래밍 언어 (명령형/함수형/프로토타입 기반)
함수형 프로그래밍: 수학적 함수의 계산을 통해 자료를 처리. ex) F#, 하스켈
프로토타입 기반 프로그래밍: 객체지향 프로그래밍인데 클래스 없음 (class-less), 인스턴스 기반
3. 개발 환경
브라우저에는 자바스크립트 엔진이 내장되어 있다. Node.js도. 모두 ECMAScript 실행 가능
둘의 차이는 무엇일까?
| 차이점 | |
| 브라우저 | - 존재목적: HTML, CSS, js를 실행하여 웹 페이지를 화면에 렌더링 - DOM API 제공 (Client-Side Web API) - 사용자 컴퓨터에서만 동작 - ECMAScript, Client-Side Web API 지원 |
| Node.js | - 존재목적: 서버 개발 환경 제공 - File 시스템 제공 (파일 생성 및 수정) - ECMAScript, Node.js 고유 API 지원 |
1) 웹 브라우저 - 개발자 도구
| 패널 | 설명 |
| Element | 로딩된 웹 페이지의 DOM과 CSS 편집하여 렌더링된 뷰 확인 가능 여기서 내용을 편집했다고 해서 저장되진 않음. |
| Console | 로딩된 웹 페이지 에러 확인, console.log() 결과 확인 |
| Sources | 로딩된 웹 페이지의 자바스크립트 코드 디버깅 가능 |
| Network | 로딩된 웹 페이지 관련 네트워크 request 정보 확인 가능, 퍼포먼스 확인 가능 |
| Application | 웹 스토리지, 세션, 쿠기 확인 및 관리 |
Console.
- 애플리케이션 구현 시 에러가 빈번하므로 콘솔 열어둔 상태에서 개발 진행하면 좋음
- 디버깅 하는 것보다 간편하게 값 확인 가능. console.log() 많이 사용함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Counter</title>
</head>
<body>
<div id="counter">0</div>
<button id="increase">+</button>
<button id="decrease">-</button>
<script>
// 에러를 발생시키는 코드
const $counter = document.getElementById('counter-x');
const $increase = document.getElementById('increase');
const $decrease = document.getElementById('decrease');
let num = 0;
const render = function () { $counter.innerHTML = num; };
$increase.onclick = function () {
num++;
console.log('increase 버튼 클릭', num);
render();
};
$decrease.onclick = function () {
num--;
console.log('decrease 버튼 클릭', num);
render();
};
</script>
</body>
</html>
위 HTML 소스를 연 후 +/- 버튼 클릭 시 Console 통해 에러 확인 가능.
[에러] getElementById('counter-x'): id값이 counter-x인 요소에 접근하나, counter-x 미존재
[해결] getElementById('counter'); 로 변경
2) Node.js
// 아래와 같이 입력 시 REPL 환경 진입
// REPL(Read Eval Print Loop): 간단한 코드를 직접 실행해 결과를 확인해볼 수 있는 가상환경
node
// 자바스크립트 파일 실행
node index.js
3) VSCode - Live Server 확장
해당 확장을 사용하면 소스코드를 수정할 때마다 수정 사항을 자동으로 반영해준다.
4. 브라우저 동작 원리
1) 사용자가 참조하고자 하는 웹페이지를 서버에 요청
2) 서버로부터 응답을 받아 브라우저에 표시
- HTML, CSS, Javascript, 이미지 파일 등
- HTML, CSS파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환된 후 렌더 트리로 결합
- 생성된 렌더 트리 기반으로 웹페이지 표시
[HTML 파서]
script 태그 만나면 코드 실행하기 위해 DOM 생성 프로세서 중지, 자바스크립트 엔진으로 제어 권한 넘김.
[자바스크립트 엔진]
script 태그 내 자바스크립트 코드를 파싱하여 실행. 완료되면 다시 HTML 파서로 제어 권한 넘김
==> 동기적으로 HTML, CSS, Javascript 처리
==> script 태그 위치에 따라 블로킹이 발생하여 DOM 생성이 지연될 수 있음. script 태그 위치는 중요하다.
＃ script 태그 위치: body 요소 가장 아래에에 위치시킬 것.
- HTML 요소들이 렌더링이 지장이 없도록 하기 위해 (페이지 로딩시간 감소)
- DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러 발생 (??)
'프로그래밍 > js' 카테고리의 다른 글
| lessons 9. 타입 변환과 단축 평가 (1) | 2023.02.05 |
|---|---|
| lessons 8. 제어문 (0) | 2023.02.03 |
| lessons 7. 연산자 (0) | 2023.01.31 |
| lessons 6. 데이터 타입과 변수 (1) | 2023.01.30 |
| lessons 5. 자바스크립트 기본 문법 (0) | 2023.01.30 |
