자바스크립트 언어의 개념에 대해서 알아보고, 주요 기능인 동적 웹페이지 제공에 대해 자세히 살펴봅니다. 이후 모던 자바스크립트도 소개합니다.
[ Contents ]
1. 자바스크립트 (JavaScript)
웹페이지를 동적으로 만들어주는 프로그래밍 언어
자바스크립트는 '자바(Java)'와 이름은 비슷하지만 전혀 다른 프로그래밍 언어입니다. 자바스크립트는 웹페이지에서 마우스나 키보드 입력 등의 특정 조건의 이벤트를 처리하고 동적으로 갱신하게 해줍니다.
2. 동적 웹프로그래밍
사용자와 상호작용하며 반응하는 웹페이지
과거 HTML과 CSS로 이루어진 웹페이지를 '정적(Static)'이라고 표현합니다. 사용자는 서버에서 보내온 정적인 페이지만 읽고 요청할 수 있었죠. 비유하자면 종이책과 비슷합니다. 해당 페이지를 다 읽었으면 서버로 새로운 페이지를 요청해서 책장을 넘기는 식이죠.
반면 '동적(Dynamic)' 웹페이지는 전자책과 비슷합니다. 전자책은 서버로부터 받은 페이지를 확대, 축소할 수 있으며 메모를 남기거나 책갈피를 설정할수도 있습니다. 이처럼 서버로부터 받은 웹페이지를 사용자가 변형하고 상호작용할 수 있으면 동적 웹페이지라고 합니다.
2022.04.23 - [Web] - [HTML] 하이퍼 텍스트 마크업 언어란? (HTML 정의)
[HTML] 하이퍼 텍스트 마크업 언어란?
HTML에 대해서 알아보고, 마크업 언어의 특징과 예시를 살펴보겠습니다. [ Contents ] 1. HTML HTML: 웹 페이지의 구조, 형태, 내용을 담당하는 마크업 언어 Hyper Text Markup Language의 약자로, 본래에는 웹페
star7sss.tistory.com
2022.04.29 - [Web] - [CSS] 캐스케이딩(계단형) 스타일 시트란? CSS의 구성요소와 장점 (CSS 정의)
[CSS] 캐스케이딩(계단형) 스타일 시트란? CSS의 구성요소와 장점
CSS의 정의와 개요에 대해서 알아보겠습니다. [ Contents ] 1. CSS란? CSS(Cascading Style Sheet): 웹페이지의 레이아웃이나 스타일, 디자인을 정의하는 언어 HTML이 웹페이지의 내용이나 구조를 담당한다면, C
star7sss.tistory.com
3. 모던 자바스크립트 (Modern JS)
ES6(2015) 버전 이후의 최신 자바스크립트
모던 프로그래밍은 최신의 프로그래밍 언어, 개발 방법, 디자인 패턴 및 개발 관례를 말합니다. 하드웨어 성능이 좋지 못해 극한의 최적화와 어셈블리 코딩을 하던 시대와 달리, 현대는 하드웨어 성능이 월등히 좋아졌습니다. 성능 최적화보다는 빠르게 변화하는 트랜드에 따라 '빨리 만들고, 재빠르게 개선할 수 있는 프로그래밍'이 중요해졌죠.
즉, 모던 프로그래밍은 개발자 친화적인 코드와 개방적이고 협력적인 팀 문화를 기반으로 하고 있습니다. 이에 따라 자바스크립트도 코드 가독성, 유지 보수성, 생산성 및 성능을 높이기 위해 여러 개선을 했습니다.
- 화살표 함수(Arrow Function): 간결하고 가독성 높은 함수 정의
- 클래스(Classes): 객체지향성 ↑
- 모듈(Modules): 재사용성, 유지보수성 ↑
- 템플릿 리터럴(Template Literals): 문자열 가용성 ↑
- Promise와 async/await: 비동기성 ↑
- DOM 요소 개선: DOM 요소 및 이벤트 처리를 위한 다양한 메서드와 기술 제공
- 컴포넌트 기반 아키텍처: 재사용성 ↑
- 테스트 자동화 및 빌드 프로세스
(Modern JS 주요 업데이트 내역)
앞으로의 JavaScript 관련 글은 최신 버전을 다루며, 기본적인 문법을 비롯해 주요 기능까지 살펴보겠습니다.
'PL (Programming Language) > JavaScript' 카테고리의 다른 글
[JS] 자바스크립트 배열 생성, 특징, 함수: push, unshift, pop, shift, length, splice (0) | 2023.09.14 |
---|---|
[JS] 자바스크립트 함수 정의 방법: 함수 선언식과 (익명)함수 표현식 (0) | 2023.09.13 |
[JS] 자바스크립트 연산자: 나머지(%), 증감(++, --), 논리(!, ||, &&), 일치(===), ??(Null 병합), 삼항 연산자 (0) | 2023.09.13 |
[JS] 자바스크립트 변수와 상수 선언: let, var, const (feat. let과 var의 차이) (0) | 2023.09.13 |
[JS] 자바스크립트 개발환경 세팅: 브라우저 개발자도구, VS코드 (0) | 2023.09.12 |
댓글