JavaScript란?
- JS는 브라우저에서 사용하기 위해 개발된 주요 언어임, 바로 브라우저 위에서 동작해서 쓸 수 있음
- 브라우저의 다양한 상호작용 및 유저를 위해서 처리가 됨, 그만큼 많은 동작처리를 차지함
- HTML은 문서임, 이 문서 안에 CSS & JS가 같이 있는 것을 실행시키는 것임
- 브라우저에서 동작을 위해서 처리하는 것이 JS에 핵심임
JavaScript 배경
- Brendan Eich가 개발한 언어(10일만에 만듬)
- 다른 많은 프로그래밍 언어가 있지만 브라우저 위에서 동작하기 위한 언어임
- JS는 다른 다양한 언어에서 핵심적인 요소들을 다 모아서 만든 것임, 그래서 그만큼 유연한 언어임
- JS는 해를 거듭하면서 아주 다양하게 변화를 겪으면서 발전했음
- JS는 Ecma Script와 관련있음, 이는 언어의 명세인데, 일종의 언어의 버전임(JS를 나타내기도 함)
- ES1, 2, 3, 2015+... 연도별로 부르는 것이 최신의 기준
- 해당 명세가 아주 중요하고 연관성도 높음, 이 명세를 자주 확인하는게 좋음
JavaScript Everywhere
- 인터넷 익스플로러, 크롬, NodeJs, npm, V8 엔진 등등
- JS는 원래 브라우저만 있으면 동작한 언어였는데 NodeJS는 V8 엔진을 바탕으로 JS 런타임임(실행시킬 수 있는 환경)
- 이를 통해서 JS 실행 환경을 별도로 제공해주는 NodeJS를 통해서 폭발적으로 성장함
- 페이스북 앱 React Native, 데스크탑 앱 Electron, 노션까지도 JS 기반 언어로 만듬
- VSCode도 Electron 기반으로 만들어서 개발자 도구를 열어서 볼 수 있음
- JS 기반으로 개발을 하는 것에 있어서 많은 곳에서 활용할 수 있음(크로스 플랫폼)
- HTML + CSS + JS를 기반으로 브라우저 앱, 데스크탑 앱, 모바일 앱 등 다양하게 활용할 수 있음
- 서버도 개발 할 수 있음
JavaScript(Vanilla JS 사용사례)
- Vanilla JS의 경우, 실제 Netflix에서도 Vanilla JS를 통해서 본인들의 제품을 만들었음.
- 그리고 Shopify의 경우도, Vanilla JS를 활용해 본인들의 Dawn 테마를 만들었음(예시)
- 그 외에도 Wikipedia의 경우도, Vanilla JS로 본인들의 페이지의 일부를 구현했음
- Yahoo의 경우, Vanilla JS를 기반으로 한 Yahoo Pipes API를 통해 뉴스 위젯을 구현함
- YouTube는 초기 개발 단계에서 바닐라 JavaScript를 활용하여 웹 애플리케이션의 성능을 최적화했음
JavaScript의 미래
-
JS 기반의 프레임워크 라이브러리가 굉장히 많음
-
그리고 이 JS언어 자체가 스택오버플로우, 각종 점유율이 높음
-
웹 어셈블리라는 것을 쓸 때, JS를 활용함
-
브라우저, 모바일 앱, 데스크탑 앱, 고성능 처리하는 웹 어셈블리도 JS 기반임
생태계
- 프로그래밍 언어를 공부할 때 전세계와 소통하기 좋은 것은 구글링임(JS의 경우라면 더더욱, 그리고 영어로 검색이 더 좋음)
- 날짜도 최신순으로 정렬해서 처리할 수 있음(한국어로 검색해서 확인할 수 있음)
- mdn 문서와 modern javascript info이 2가지 문서도 아주 정리도 잘 되어 있고 좋음, javascript deep dive도 포함
- 강의 내용이 이해되지 않을 때 적극활용하면 좋음
HTML 문서
- HyperText(하이퍼텍스트)란 웹 페이지를 다른 페이지로 연결하는 링크임, 이는 초월한 텍스트 즉, 문자가 하는 역할을 넘어섰다고 볼 수 있음
- Markup Language의 경우, 데이터 구조를 명시하는 언어라고 볼 수 있음
- 데이터 구조 표현은 굉장히 많은 태그들이 있고 이를 마크업을 한다고 볼 수 있음(다양한 태그들)
HTML & JavaScript
- JS의 경우 script 태그를 통해 인라인으로 할 수 있고 혹은 직접 js를 src의 요소로 넣어서 할 수 있음
- 하지만 인라인으로 쓰는 것은 앞서 배운 것처럼 지양해야함
- 그래서 아래 예시처럼 src로 js 파일을 불러와서 쓸 수 있음
- 예시
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css" />
<meta charset="UTF-8" />
<script>
console.log('in the HTML')
</script>
<script src="./main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZeroBase</title>
</head>
<body>
<h1>Zero Base JavaScript</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li onclick="console.log('click!!')">JS</li>
</ul>
<h2>반갑습니다.</h2>
<p>본 수업은 기본적인 HTML의 이해가 있는 분들을 대상으로 합니다.</p>
</body>
</html>console.log('in the JS');DOM 소개
- DOM은 문서 객체 모델임, HTML은 태그 기반의 마크업 언어인데, 이 안에 구조화 된 문서들이 있음
- 이런 문서 구조가 있는데, 이 때, 상호작용을 할 방법에 대해서 생각해 볼 수 있는데, JS를 통해서 이러한 문서 구조의 요소의 DOM을 컨트롤 할 수 있음
- 참고자료
DOM을 선택하고 조작하기
document키워드를 통해서 아주 많은 문서 요소에 접근할 수 있음- 이 때,
document.querySelector를 통해서 DOM 요소를 직접 접근해서 고를 수 있음 - 하지만 유의할 점은 만약 HTML 상에서 script 태그를 head 부분에서 선언할 경우, 해당 키워드와 js 파일에서 DOM 조작이 안 될 수 있음
- 왜냐하면 HTML을 불러와서 처리하기 전에 먼저 script를 불러와서 실행시키므로(그래서 순서도 잘 신경써야함)
- 예시
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZeroBase</title>
</head>
<body>
<h1>Zero Base JavaScript</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li onclick="console.log('click!!')">JS</li>
</ul>
<h2>반갑습니다.</h2>
<p>본 수업은 기본적인 HTML의 이해가 있는 분들을 대상으로 합니다.</p>
<script>
console.log('in the HTML')
</script>
<script src="./main.js"></script>
</body>
</html>console.log('in the JS');
console.dir(document.querySelector('body'));querySelector를 통해서 태그값을 불러와서 처리하기 용이함- 예시
const h2Element = document.querySelector('h2');
console.log(h2Element);
function replaceH2Text() {
h2Element.innerText = '안녕하세요';
}
replaceH2Text();- 그리고 클릭시 처리를 아래와 같이도 할 수 있음(이벤트를 달아서 처리한 것)
const h2Element = document.querySelector('h2');
function replaceH2Text() {
h2Element.innerText = '안녕하세요';
}
h2Element.addEventListener('click', replaceH2Text);
측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다