웹의 3가지 요소
- 내용을 담당하는 HTML
- 외형을 담당하는 CSS
- 동작을 담당하는 JavaScript ◀
📍 "자바스크립트는 프로그래밍 언어이다."
- HTML과 JavaScript 둘 다 컴퓨터 언어이지만 JavaScript는 프로그래밍 언어이다.
- 프로그램 (Program)
: 진행 계획이나 '순서', 컴퓨터를 실행시키기 위해 차례대로 작성된 명령어 모음.- 프로그래밍 (programming)
: 순서를 만드는 '행위', 컴퓨터에 부여하는 명령을 만드는 작업.- 프래그래머 (programer)
: 순서를 만드는 '사람', 컴퓨터 프로그래밍을 하고 컴퓨터 소프트웨어를 개발하는 사람.
1. 프로그래밍(Programming)이란?
- '프로그래밍' 이란 '컴퓨터 프로그램을 작성하는 일'을 뜻하며, 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.
✍️ 0과 1밖에 알지 못하는 기계가 우리가 원하는 작업을 실행할 수 있도록 정확하고 상세하게 요구사항을 설명하는 작업이며(코드), 때문에 문제를 해결할 방안을 고려할 때 우리는 컴퓨팅 사고력(Computational thinking: 컴퓨터로 처리할 수 있는 형태로 문제와 해결책을 표현하는 사고 과정) 이 필요하다고 한다. 🤔 !!
2. 프로그래밍 언어(Programming Language)란?
-
프로그래밍 언어는 컴퓨터를 이용하여 특정 문제를 해결하기 위한 프로그램을 작성하기 위해 사용되는 언어이다. 고급 언어일수록 사람이 사용하는 언어에 가까우며, 컴파일러나 인터프리터에 의해 저급 프로그래밍 언어로 번역되어 실행된다.
-
직접 기계어로 명령을 전달하는 것을 대신할 가장 유용한 대안은 인간이 이해할 수 있는 약속된 구문(Syntax, 문법)으로 구성된 프로그래밍 언어를 사용하여 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하여 주는 일종의 번역기(컴파일러, 인터프리터)를 이용하는 것이다.
- 컴파일러(compiler) : 고급언어로 쓰인 프로그램을 그와 의미적으로 동등하며 컴퓨터에서 즉시 실행될 수 있는 형태의 목적 프로그램으로 바꾸어 주는 번역 프로그램.
- 인터프리터(interpreter) : 프로그램을 해석하는 방법 중 하나로, 사람이 이해할 수 있는 고급언어로 작성된 코드를 한 단계씩 해석하여 실행시키는 방법을 말한다.
- 언어는 자연어와 인공어로 구분할 수 있는데, 프로그래밍 언어는 인간과 컴퓨터(컴파일러나 인터프리터) 모두가 이해할 수 있는 약속된 형태의 '인공어'이다.
❗️ 프로그래밍 언어라면 대부분 조건문, 반복문, 함수 등의 핵심 기능을 가지고 있다.
: 문법을 적절히 사용하여변수를 통해 값을 '저장'하고 '참조'하며연산자로 값을 '연산', '평가'하고조건문과반복문에 의한 흐름제어로 코드의 '실행 순서'를 제어하고함수로 '재사용이 가능한 문의 집합'을 만들며객체,배열등으로 자료를 '구조화'한다.
✍️ 프로그래머는 프로그래밍 언어의 기본적인 개념과 동작 원리를 이해할 수 있어야 문법에 맞는 정확한 코드를 사용함으로써 동료와의 원활한 협업이 가능하며, 에러 상황에서 디버깅이 가능하고, 효과적인 코드를 생산할 수 있다.
📍 자바스크립트(JavaScript)
JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다.
(네이티브 앱: iOS, 안드로이드OS 등 각 OS에 맞는 언어로 앱을 개발하는 것을 말한다.)
1. 자바스크립트의 역사
-
1995년 당시 약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈(Netscape comunications)는 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를 해결하기 위해서 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 도입하기로 결정했고, 그래서 탄생한 것이 브렌던 아이크(Brendan Eich)가 개발한 자바스크립트이다.
-
자바스크립트가 나온 이후 , MS사는 IE 3.0에서 동작하는 ‘JSrcipt’라는 똑같은 언어를 만들어 냈고, 그러자 넷스케이프사는 자바스크립트를 표준화 하기 위해, 표준화 기구인 Ecma International에 요청을 했다. 하지만 당시 Sun사가 ‘JAVA‘라는 단어를 상표 등록을 해 놨기에 ‘JavaScript’라고 부를 수 없었다. 따라서 표준 언어의 이름은 ECMAScript였고, 대외적으로 마케팅효과를 얻기 위하여 자바스크립트 혹은 J스크립트 라고 불렀지만 이후 최종적으로 표준, 구현 모두 'JavaScript'라는 이름으로 불리게 되었다.
-
초창기 자바스크립트는 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었지만, 2009년, 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 프론트엔드는 물론 백엔드 영역까지 사용되는 범용 프로그래밍 언어가 되었다.
🥲 이렇게 한 번 더 언어의 역사를 공부하고 있자니 최초의 웹사이트인 info.cern.ch 를 처음 접속했을 때가 생각났다.
2. 자바스크립트에 대해
-
JavaScript는 줄여서 JS 라고 하며, 파일 확장자는
.js이다. -
JavaScript는 스크립트 언어이자 인터프리터 방식이 사용되어, 컴파일 과정이 필요 없다.
- 스크립트 언어( scripting language )란 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킨다. -
html은 웹 페이지를 묘사하는 것이 목적이기 때문에 시간의 순서에 관계되지 않지만, JS는 사람과 상호작용을 하기 위해 만들어진 언어이므로 시간의 순서에 따라서 웹 브라우저의 여러기능이 실행 되어야 한다.
-
단순히 규격을 나타내는 HTML과 CSS와 달리, 변수와 함수 등이 존재하는 프로그래밍 언어이며, 현재도 활발한 발전이 이루어지고 있다.
-
자바(Java)와 자바스크립트(JavaScript)는 다른 언어이다.
-
CSS와 비슷하게 HTML 문서 내에 기술하거나 별도 파일로 분리하고 불러와서 사용한다.
▼ 분리하여 사용할 경우)
<head>
<script type="text/javascript" src="JS파일위치.js"></script>
</head>❗️❗️ 여기에서 <script type="text/javascript">가 웹 표준이며, HTML5 에서는 <script> </script> 로도 작성이 가능하지만, 하위 호환성을 위해 type~ 을 적어주는게 좋다고 한다.😉
📍 Node.js
-
웹 브라우저에서 동작하는 간단한 웹 애플리케이션(사용자와 대화하는 식으로 기능을 수행)은 브라우저만으로도 개발을 할 수 있지만, 프로젝트의 규모가 커짐에 따라 React, jQuery와 같은 외부 라이브러리를 도입하거나 Babel, Webpack, ESlint 등 여러 가지 도구를 사용해야 할 필요가 있다. 이때
Node.js와npm이 필요하다. -
2009년 라이언 달(Ryan Dahl)이 발표한 Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)이다.
브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이 Node.js이다.
NPM
: npm (노드 패키지 매니저/Node Package Manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.
- 패키지 관리자(package manager, 패키지 매니저), 패키지 관리 시스템(package management system)은 컴퓨터의 운영 체제를 위해 일정한 방식으로 컴퓨터 프로그램의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임이다.
❗️ 런타임(runtime)은 컴퓨터 과학에서 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 말한다.
✍️ 정리하자면
Node는 자바스크립트를 실행할 수 있게 해주는 실행환경이고, NPM은 Node로 실행할 수 있는 여러 패키지들의 관리를 도와주는 매니저의 역할을 하는 도구이다.
reference
Coding Everybody poiemaweb MDN w3school
