Chapter 1. 자바스크립트 기본 개요
1.1 소개
자바스크립트 | 웹 브라우저에서 동작하는 스크립트 언어 |
스크립트(Script) 언어 |
소스 코드를 컴파일(Compile)하지 않고도 실행할 수 있는 프로그래밍 언어 자바스크립트는 객체지향언어이다. 자바스크립트는 프로토타입 기반 언어이다. 자바스크립트는 웹페이지를 동적으로 변경해주는 언어이다. - ex) C언어, JAVA, 비주얼베이직 같은 경우 작성한 소스를 컴파일러를 통해 기계어 코드로 변경해야 사용자가 실행할수 있는 실행 파일이 얻어지는데 비해 스크립트 언어는 별도의 컴파일 없이 내장된 번역기에 의해 번역 되므로 바로 실행 할 수 있다. - 장점 : 소스를 작성한 후 컴파일 과정 없이 바로 실행하여 결과를 확인할 수 있다 - 단점 : 번역 과정을 거쳐야 하기 때문에 다소 느리다 반대로, C언어나 Java와 같은 비스크립트 언어(=컴파일 언어)의 경우 실행 속도가 빠른 장점이 있는 반면 컴파일 과정을 거쳐야 하는 등 개발 과정이 조금 복잡하다는 단점이 있다. - 용도 1. 시스템에 사용 유닉스의 쉘(Shell) 스크립트, 윈도우의 배치(Batch) 스크립트처럼 일괄 처리 작업에 사용 2. 웹 어플리케이션에 사용 일반적으로 빠른 성능이 필요하지 않은 웹 어플리케이션을 만드는 데 이용되어 왔으며, 크게 서버 사이드 스크립트(server-side-script) 와 클라이언트 사이드 스크립트(client-side-script) 로 나눌 수 있다. |
서버 사이드 스크립트(server-side-script) | 해당 소스의 실행 결과를 확인하기 위해 웹 서버를 거쳐야 하는 스크립트로 ASP, PHP, JSP, PYHTON, PERL, RUBY 등이 있다. |
클라이언트 사이드 스크립트 (client-side-script) | 내장된 번역기(인터넷 익스플로어 등) 에 의해 실행되는 스크립트로 서버를 거치지 않고 사용자쪽(웹서버에 접속한 PC) 에서 처리되는 스크립트이다. Javascript, VBScript, JScirpt 등이 있다. |
컴파일(Compile) | 사람이 이해하는 언어를 컴퓨터가 이해할 수 있는 언어로 바꿔주는 과정 |
로직 | 프로그래밍 관점에서 프로그램을 개발할 때 어떠한 조건이나 논리에 의해 실행되는 흐름 |
HTML | Hyper Text Markup Language 약자로 월드와이드 웹 문서를 작성하는 마크업 언어 |
CSS | Cascading Style Sheets 약자로 HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 |
렌더링(Rendering) |
컴퓨터 프로그램을 사용하여 모델(or 이들을 모아놓은 장면인 씬(scene)파일)로부터 영상을 만들어내는 과정. 즉 클라이언트(사용자)에서 서버에 파일을 받아 브라우저에 뿌려주는 과정으로 볼 수 있다. rendering의 주최자는 renderer engine(skia)이다. Rendering은 Render가 html로 입력받아 해석한 후 표준 출력 장치(모니터)로 출력해준다. React에서 Rendering은 data를 html로 변환해서 renderer에게 전달하는 일관 작업을 뜻한다. |
prototype.js |
가장 많이 쓰이는 자바스크립트 라이브러리 중 하나로, Sam Stephencon에 의해 만들어져서 현재는 오픈소스로 계속 개발, 관리되고 있다. 하나의 파일로 만들어진 JS라이브러리지만 자바스크립트 및 Ajax.JSON을 위한 프레임워크라 할 수 있을 정도로 강력하다. 또한, Ruby on Rails, script.aculo.us, Rico 등과 같은 다른 강력한 라이브러리의 기반 혹은 일부가 되어 있다. |
프로토타입(prototype) |
Java, Python, Ruby 등 객체지향언어에서 빠질 수 없는 개념인 Class가 없는 자바스크립트는 대신 프로토타입(Prototype) 이 존재한다. (자바스크립트가 프로토타입 기반 언어라고 불리는 이유) 클래스가 없으니 기본적으로 상속기능이 없다. 그래서 프로토타입을 기반으로 상속을 흉내내도록 구현해 사용한다. 참고로 최근의 ECMA6 표준에서 Class문법이 추가되었지만 자바스크립트가 클래스 기반으로 바뀌었다는 것은 아니다. Prototye Link와 Prototype Object를 통틀어 Prototype이라고 부르기도 한다. 참고: https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67 |
아키텍처 |
기획한 내용을 프로그램화했을 경우 필요한 주요 특징을 기술적으로 설계하고 명시하는 것 프로그램 주요 구조 설계 (ex: 자동차 도면) 결과물에 필요한 모든 구성 요소를 명시하지만, 구체적인 구현 방법은 포함되어 있지 않는다. 참고: https://blog.gaerae.com/2016/11/what-is-library-and-framework-and-architecture-and-platform.html |
DOM |
문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다 내가 작성한 HTML 코드는 DOM이 아니지만 브라우저에 의해 파싱되면 DOM이 된다 개발자 툴에서 보이는 것은 DOM이다 DOM이 HTML과 달라지는 경우는 브라우저가 HTML을 수정한 경우, Javascript로 DOM을 조작하는 경우, Ajax나 Tempating을 사용하는 경우이다 JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어이고, DOM은 바로 이 작업이 이루어지는 장소이다 (javascript로 하는것은 사실 DOM API이다) DOM은 브라우저에 의해 기록되는 모든것이다 출처: https://velog.io/@godori/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80 |
Node.js |
Node.js는 자바스크립트 언어로 구현된 서버 사이드 언어 Node.js는 Chrome V8 javascript 엔진으로 빌드된 javascript 런타임 - 장점 1. V8 Engine (구글이 망하지 않는한) 2. Event - driven 방식 사용자가 이벤트를 발생시켰을 때, 입력장치로 데이터를 전송했을 때만 작동하는 방식이다. 3. non-blockig 패러다임 non-Bloking I/O(비동기식 I/O)는 이벤트가 시작하자마자 모듈을 변화시켜 다른 작업을 하도록 준비상태가 된다. 그래서 속도가 동기식보다 빠르고 메모리도 덜 차지하게 된다. (문제가 될 때 promise함수가 비동기함수를 동기함수로 바꾸어줄 수 있다.) 4.Single Thread (양날의 검..) 적은 양의 자원으로 일을 처리하는 것이 가능하다는 것이 장점이지만, 만일 어느 한 곳에 예외 상황이나 에러가 발생하면 애플리케이션 전체에 영향을 미친다. 5. 클라이언트와 서버에서의 언어가 동일! |
1.2 자바스크립트 활용 범위
자바스크립트 엔진 |
자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터 자바스크립트 엔진은 표준적인 인터프리터 or 자바스크립트 코드를 바이트코드로 컴파일하는 져스트인타인(just-in-time) 컴파일러로 구현할 수 있다 |
플랫폼 |
플랫폼 위에 다른 플랫폼이 존재할 수 있다. (ex: windowsdptj Java로 개발하고 있으며 앱스토어에서 어플을 내려받는 과정에서 이미 3개의 플랫폼을 사용하는 것) 프로그램이 실행되는 환경 (ex: 자동차 주행 환경 - 고속도로, 경주용, 사막 전용) - 플랫폼 예시 Windows, Linux, macOS등 O/S는 모두 플랫폼이다. 어플을 다운받는 앱스토어, 구글플레이, 원스토어는 플랫폼이다. V8 JavaScript Engine은 javascript에게 큰 힘이 되어주는 플랫폼이다. Java 프로그램은 OS제약이 없지만 실행하기 위해서는 해당 OS에 자바 가상 머신(JVM) 위에서 실행되므로 Java 플랫폼이 필요하다. 참고: https://blog.gaerae.com/2016/11/what-is-library-and-framework-and-architecture-and-platform.html |
웹OS(WebOS) |
데이터를 작업하고 관리할 수 있는 운영 체제 일종의 가상 테스크탑 환성 서비스로 인터넷 브라우저 상에서 운영체제와 비슷한 간단한 작업을 할 수 있는 온라인 서비스 리눅스 커널에서 구동되는 모바일 운영체제 |
크로스 플랫폼 |
다양한 플랫폼에서 사용할 수 있는 JAVA는 크로스 플랫폼을 지원하는 언어이다. - 종류 : 자마린, 리액트 네이티브 |
1.3 자바스크립트의 핵심 개념
일급 객체 |
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급객체라고 한다. |
숨겨진 링크의 프로토타입 |
해당 객체를 생성한 생성자의 프로토타입 객체를 가리킨다 |
실행 컨텍스트 |
scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념으로, 코드가 실행되는 환경입니다. 변수나 함수의 실행 컨텍스트는 다른 데이터에 접근할 수 있는지, 어떻게 행동하는지를 규정한다. |
클로저(closure) |
외부함수의 맥락(context)에 접근 가능한 내부함수 좀 더 포괄적으로는 함수 선언시 생성되는 유효 범위 접근하려고 하는 함수의 생명 주기가 종료됐지만, 내부함수가 참조 하고 있어서 그 함수에 접근할 수 있는 함수 |
유효 범위(Scope) |
변수의 수명을 의미 (전역변수, 지역변수) 변수와 매개변수의 접근성 및 생존 기간을 제어하고, 이름 충돌 문제 및 메모리 관리를 해주는 중요한 개념 중 하나 |
함수형 프로그래밍 |
순수한 함수를 작성하고, 공유된 상태와 변경 가능한 데이터 및 부작용을 피하여 소프트웨어를 작성하는 프로세스 함수형 프로그래밍은 명령형이 선언형이며, 애플리케이션의 상태는 순수한 함수를 통해 전달된다. - 장점: 함수형 코드는 명령형이나 객체지향 코드보다 간결하고 예측하기 쉬우며, 이에 따라 테스트가 더 쉬워진다 자바스크립트는 일급 객체로서의 함수 특성과 클로저를 활용하여 함수형 프로그래밍을 가능케 한다 |
모듈화 |
사전적인 의미로 “몇 개의 관련된 부품들을 하나의 덩어리로 생산해 장착하는 기술방식” 의미 플랫폼과 모듈화가 다른 점은 플랫폼이란 A라는 본진이 있고 상대적으로 커진 A를 토대로 B,C,D로 사업을 확장하는 것을 의미한다면 모듈화의 경우는 A-1 / A-2 / A-3 등의 모듈들이 모여 A라는 서비스를 만드는 것이다. 플랫폼보다 모듈화가 하위의 개념에 있다 |
'Web > javascript & j-query' 카테고리의 다른 글
[Javascript] 배열에서 모든 특정 중복 제거 - filter(), includes() (0) | 2020.09.04 |
---|---|
[J-query] 내가 클릭(선택)한 요소의 index 찾기 (0) | 2019.10.31 |
[Javascript] Inside Javascript 책 단어 뽀개기 (chapter 3/8) (0) | 2019.09.12 |
[J-query] scroll, offset() 메소드 (0) | 2019.09.11 |
[J-query] 헤더 가로스크롤 처리하는 방법 (0) | 2019.03.05 |