1. JavaScript
1-1. 자바스크립트란
자바스크립트(JavaScript)는 웹 페이지를 동적이고 상호작용적으로 만들기 위해 사용되는 프로그래밍 언어이다. 처음에는 단순히 웹 브라우저 내에서 사용자 인터페이스를 개선하기 위한 목적으로 개발되었지만, 현재는 웹의 핵심 기술중 하나로 자리 잡았으며, 웹 개발뿐만 아니라 서버사이드 개발, 모바일 애플리케이션 개발, 그리고 게임 개발 등 다양한 분야에서 널리 사용된다.
1-1-1. 자바스크립트 주요 특징
1. 인터프리터 언어 : 자바스크립트는 컴파일 과정 없이 브라우저가 직접 해석하고 실행하는 인터프리터 언어이다.
2. 클라이언트 사이드 스크립트 : 대부분의 자바스크립트 코드는 사용자의 웹 브라우저에서 실행된다. 이를 통해 페이지의 동적인 동작을 구현할 수 있으며, 서버의 부하를 줄일 수 있다.
3. 동적 타입 언어 : 자바스크립트는 변수의 타입을 런타임에 결정하는 동적 타입 언어이다. 이는 개발자에게 유연성을 제공하지만, 때로는 예상치 못한 버그의 원인이 되기도 한다.
4. 객체 기반 : 자바스크립트는 객체 지향 프로그래밍을 지원하지만, 클래스 기반 언어와는 다르게 프로토타입을 사용한 객체 지향을 구현한다.
5. 다기능성 : 자바스크립트는 웹 개발뿐만 아니라 Node.js를 통한 서버 사이드 프로그래밍, React Native나 lonic 같은 프레임 워크를 통한 모바일 앱 개발 등 다양한 환경에서 사용된다.
6. 이벤트 기반 프로그래밍 : 자바스크립트는 사용자의 행동(ex 클릭, 입력, 페이지로드)에 대응하는 이벤트 기반 프로그래밍을 지원한다.
7. 비동기 처리 : Ajax와 같은 기술을 사용하여 서버와 비동기적으로 통신할 수 있으며, 이는 웹 애플리케이션의 사용성을 크게 향상시킨다.
1-2. 자바스크립트 활용성
1-2-1. 데스크탑 프로그램 개발
자바스크립트는 Electron과 같은 프레임 워크를 통해 데스크탑 애플리케이션 개발에도 사용된다. Electron은 웹 기술(HTML, CSS, JavaScript)을 사용하여 크로스 플랫폼 데스크탑 애플리케이션을 만드는데, 이를 통해 Windows, macOS, Linux에서 실행되는 애플리케이션을 개발할 수 있다.
- VSCode(visual Studio Code): 마이크로소프트에서 개발한 소스 코드 편집기로, Electron을 기반으로 한다.
- Skype: 마이크로소프트의 비디오 통화 및 메시징 애플리케이션.
- WebTorrent : 토렌트 클라이언트.
- Atom : GitHub에서 개발한 텍스트 에디터.
- Microsoft Teams : 협업과 커뮤니케이션을 위한 플랫폼.
- WhatsApp Desktop : 인기있는 메시징 서비스 WhatsApp의 데스크탑 버전
1-2-2. 서버 프로그램 개발
- Node.js : 자바스크립트를 사용하여 서버 측 애플리케이션을 개발할 수 있게 해주는 환경이다. Node.js는 비동기, 이벤트 주도 아키텍처로 설계되었으며, 이를 통해 효율적이고 확장 가능한 네트워크 애플리케이션을 개발할 수 있다.
1-2-3. 데이터베이스 제어
- MongoDB : NoSQL 데이터베이스 중 하나로, JSON과 유사한 문서를 사용한다. 자바 스크립트 객체와 문법적으로 유사하여 자바스크립트와 함께 사용하기 매우 적합하다.
- CouchDB : 또 다른 NoSQL 데이터 베이스로, 웹 브라우저와 웹 서버 모두에서 사용할 수 있는 JavaScript API를 제공한다.
2. JavaScript의 활용
2-1. Web APIs
웹 브라우저가 제공하는 다양한 기능과 서비스에 접근할 수 있도록 하는 인터페이스의 집합이다. 이러한 API들은 자바스크립트 문법을 사용하여 웹 페이지나 애플리케이션에서 호출할 수 있으며, 브라우저의 기능을 활용하여 더 풍부하고 상호 작용적인 웹 경험을 만들어 낸다.
2-1-1. 주요 웹 API 예시
1) 문서 객체 모델(DOM)API: HTML과 XML 문서의 구조를 조작할 수 있게 해주는 API다. DOM API를 통해 웹 페이지의 내용, 구조, 스타일을 동적으로 변경할 수 있다.
2) Fetch API: 네트워크 통신을 통해 리소스를 비동기적으로 가져오는데 사용된다. ex)서버에서 데이터를 가져오거나 서버에 전송할때 사용한다.
3) Canvas API: 그래픽을 생성하기 위한 수단을 제공한다. API를 사용하여 그림을 그리거나 이미지를 조작할 수 있다.
4) WebGL API: 3D그래픽을 브라우저에서 렌더링하기 위해 사용된다. WevGL은 OpenGL ES 2.0에 기반한 저수준의 그래픽 API이다.
5) Web Audio API : 오디오 데이터를 처리하고 합성하는 강력한 시스템을 제공한다. 이를 통해 오디오 재생, 오디오 데이터의 시각화, 오디오 효과 등을 구현할 수 있다.
6) Geolocation API : 사용자의 지리적 위치 정보를 얻는 데 사용된다. 사용자의 동의를 받아 위치 정보를 제공받을 수 있다.
7) Web Storage API : 브라우저에서 키 -값 쌍을 저장하기 위한 API로, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)를 제공한다.
8) Service Workers API : 백그라운드에서 스크립트를 실행할 수 있게 해주어, 오프라인 경험, 백그라운드 동기화, 푸시 알림 등을 구현할 수 있다.
2-2. 자바스크립트의 적용 위치
자바스크립트 파일을 HTML 문서 내에서 어디에 적용하는지는 문서의 파싱(분석)및 렌더링에 영향을 미친다. 자바스크립트를 <head>에 포함시킬지, <body>의 끝에 배치할지, 아니면 async나 defer 속성을 사용할지에 따라 페이지 로딩 속도와 사용자 경험이 달라질 수 있다.
2-2-1. <head>에 배치
기본적으로, <head> 내에 자바스크립트를 위치시키면, HTML 파싱 중에 자바스크립트 파일을 다운로드하고 실행한다. 이는 HTML 파싱이 자바스크립트 로딩 및 실행을 기다려야 하기 때문에 페이지 로딩 시간이 늘어날 수 있다.
2-2-2. <body>끝에 배치
자바스크립트를 <body> 태그의 끝에 배치하면, HTML이 거의 모두 파싱된 후에 자바스크립트가 로딩되고 실행된다. 이 방법은 HTML 요소들이 자바스크립트 실행 전에 로드되므로, 사용자에게 더 빠른 페이지 로딩 경험을 제공할 수 있다.
2-2-3. async 속성 사용
<script async src='script.js'></script>: async 속성을 사용하면, HTML 파싱과 동시에 자바스크립트 파일을 비동기적으로 다운로드한다. 다운로드가 완료되면, 파싱을 잠시 중단하고 자바스크립트를 실행한다. 이는 여러 자바스크립트 파일이 서로에 대해 의존하지 않을 때 유용하다.
2-2-4. defer 속성 사용
<script defer src='script.js'></script>: defer 속성을 사용하면, HTML 파싱과 동시에 자바스크립트 파일을 다운로드하지만, 실행은 HTML 문서의 파싱이 완전히 끝난 후에 이루어진다. 이 방법은 DOM이 완전히 구성된 후에 스크립트를 실행해야 할 때 유용하다.
2-2-5. defer 사용
대부분의 경우에 defer 속성을 사용하는 것이 가장 효율적이다. 이는 HTML 문서의 파싱과 자바스크립트 파일의 다운로드를 동시에 진행하면서도, 자바스크립트 실행이 DOM의 구성을 방해하지 않게 한다. 따라서 사용자에게 빠른 페이지 로딩을 제공하면서도, 스크립트가 필요한 HTML 요소들이 이미 로드되어 있음을 보장한다.
2-3. Strict Mode
"Strict Mode"는 자바스크립트에서 선택적으로 활성화할 수 있는 엄격한 운영 모드다. 이 모드는 "use strict"; 선언을 통해 활성화된다. Strict Mode는 자바스크립트의 오류 가능성이 높은 부분을 더 엄격하게 처리하며, 좀 더 예측 가능하고 관리하기 쉬운 코드를 작성하도록 돕는다.
2-3-1. Strict Mode의 주요 특징
- 변수 선언 강제화: Strict Mode에서는 변수를 선언하지 않고 사용하려고 하면 오류가 발생한다. 이는 전역 변수를 실수로 생성하는 것을 방지한다.
- 안전한 this: 엄격 모드에서는 함수가 객체의 메소드로 호출되지 않을 때 this 값이 undefined로 설정된다. 이는 기존에 this가 전역 객체를 가리키던 것을 방지한다.
- 오류 발생시키는 문법적 실수 방지: 일반적으로 무시되거나 조용히 실패하는 일부 오류들(예: 중복된 매개변수 이름, 8진수 리터럴 등)이 Strict Mode에서는 명시적인 오류를 발생시킨다.
- 보안 향상: Strict Mode는 보안에 영향을 줄 수 있는 일부 동작을 제한한다.
- 성능 최적화: 일부 엄격한 제약 사항은 자바스크립트 엔진이 코드를 더 효율적으로 최적화할 수 있게 해준다. 비록 이 최적화가 항상 눈에 띄는 성능 향상을 가져오는 것은 아니지만, 엔진 최적화에 도움을 줄 수 있다.
3. JavaScript의 출력
각각의 출력 방법은 특정 상황과 요구에 맞게 선택하여 사용할 수 있다. 예를 들어, 웹 페이지의 일부 내용을 변경하려면 innerHTML을 사용하고, 디버깅 목적으로는 console.log()가 적합하다.
3-1. inner HTML
element.innerHTML = value;
HTML 요소의 내부 HTML을 설정하거나 가져옵니다. 이 방법은 HTML 요소의 내용을 동적으로 변경할 때 주로 사용된다.
3-2. document.write()
document.write(text);
HTML 문서에 텍스트를 직접 쓰는 방법이다. 페이지가 로딩되는 동안 실행되지 않으면, 전체 문서를 덮어쓸 수 있으므로 사용에 주의가 필요하다.
3-3. window.alert()
alert(message);
사용자에게 경고 창을 표시한다. 이 창은 일반적으로 메시지를 표시하고 '확인' 버튼을 포함한다.
3-4. console.log()
console.log(message);
브라우저의 콘솔에 메시지를 기록한다. 주로 디버깅 목적으로 사용된다.
3-5. window.print()
window.print();
현재 창의 내용을 인쇄하기 위한 인쇄 대화 상자를 연다. 주로 문서나 페이지를 인쇄할 때 사용된다.
'웹 서비스 개발(FB,BE,SERVER,DB) > Javascript' 카테고리의 다른 글
| DOM API (0) | 2024.03.06 |
|---|---|
| 4. 비동기처리 (1) | 2024.03.06 |
| 3. 함수 (0) | 2024.03.06 |
| 2. 자료형(DataType) (1) | 2024.03.06 |
댓글