오늘 한 일
- 드림코딩 JS 기본 문법 강의 중 1, 2편 들음
- Node.js 설치
Node.js는 최신 lts 버전(14.17.1)으로 설치했는 데 서치 하면서 실리콘 맥은 v14 설치 시 오류가 난다는 글을 봐서 멘붕이 왔다. 그래서 삭제하고 v16으로 다시 설치 해야 하나 고민하고 있었는데
일단 별 문제 없이 실행 되길래 냅두는 중이다...
brew 설치도 로제타로 안했는데 대체 왜 되는거지..?
공부한 내용
JS 1. 자바스크립트란?
탄생 배경
1993 마크 앤더슨이 Netscape 회사 설립 → Netscape Navigator 출시
1995 LiveScript 개발 → JavaScript로 이름 변경
- Microsoft에서 JavaScript를 리버스 엔지니어링을 통해 JScript를 개발 → Internet Explorer 출시
1996 Netscape사에서 ECMA International와 JavaScript 표준안 개발 제안
1997 ECMAScript 1 정의
1998 ECMAScript 2 정의
1999 ECMAScript 3 정의
2000 ECMAScript 4 정의
- Microsoft의 Internet Explorer 점유율이 95%를 넘김 → ECMAScript 표준안에 참여X
2004 moz://a의 Firefox 출시
- Jesse James Garrett가 AJAX 도입
→ 개발자들의 편의를 위해 jQuery, dojo, mootoos등 여러 라이브러리 등장
2008 Google의 Chrome 출시
2009 ECMAScript 5 정의
2015 ECMAScript 6 정의
자바스크립트 엔진
- Chrome V8
- Firefox SpiderMOnkey
- Safari JSCore
BABEL
개발할 때에는 최신 버전의 ECMAScript를 사용하며, 배포할 때는 JavaScript transcompiler(BABEL)를 이용해서 ECMAScript의 최신 버전을 ECMAScript 5, 6으로 변환한다.
SPA Single Page Application
웹사이트의 하나의 페이지 안에서 데이터를 받아와서 필요한 부분만 부분적으로 업데이트 하는 것
→ vue.js, React, ANGULAR 등 프레임워크 등장
이용할 수 있는 분야
- node.js 백엔드 서비스 구현
- React Native 모바일 애플리케이션 개발
- ELECTRON 데스크탑 애플리케이션 개발
JS 2. 환경 설정
node.js 설치 → node.js에는 자바스크립트 엔진이 있어서 브라우저 없이 자바스크립트 실행이 가능함
Hello World 출력하기
console.log('Hello world');
console API 중 log라는 함수로 원하는 메세지를 콘솔창에 출력할 수 있음
또한 Node.js를 이용해서도 console창에 출력 되는 것을 볼 수 있음
→ Node.js와 웹 API 둘 다 console에 관련된 API가 있고 인터페이스가 동일 하기 때문
- API (Application Programming Interface)
→ 웹 API는 JS 언어에 포함된게 아니라 브라우저가 제공하는 함수들이다.
Dev Tools
Console 탭: 코드에서 작성한 메세지를 확인 할 수도 있지만 자바스크립트를 실행 할 수도 있음
Sources 탭: 디버깅 할 때 유용하게 쓰임
Network 탭: 네트워크가 어떻게 발생하는지 얼마나 많은 사이즈들의 데이터가 오고 가는 지 검사할 수 있음
자바스크립트 공식사이트
ecma-international
공식사이트지만 개발자가 보기 난해함
MDN Web Docs
대부분의 개발자가 참고함
HTML에서 자바스크립트를 포함할 때 효율적인 방법 찾기
<head> 안에 포함하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
<body></body>
</html>HTML을 parshing 하다가 script 태그 에서 parshing을 잠시 멈추고 필요한 JS파일을 서버에서 다운 받아서 실행한 다음에 parshing을 진행한다.
→ 단점: JS파일이 크면 클수록 사용자가 웹사이트를 보는 데까지 많은 시간이 소요된다.
<body> 안에 포함하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>HTML을 계속 parshing 해서 페이지가 준비가 된 다음에 스크립트를 서버에서 받아오고 실행한다.
→ 장점: 페이지가 JS를 받기 전에 이미 준비가 되어서 페이지 컨텐츠를 볼 수 있다.
→ 단점: 사이트가 JS에 많이 의존적이면 사용자가 정상적인 페이지를 보기 전까지는 서버에서 JS를 받아오는 시간과 실행하는 시간을 기다려야 한다.
<head> 안에 async 속성값 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script asyn src="main.js"></script>
</head>
<body></body>
</html>HTML을 parshing 하다가 Async에서 병렬로 JS를 다운하는 명령을 한 후 다시 parshing를 한다. JS가 다운이 완료되면 parshing을 멈추고 다운로드 한 JS를 실행한 다음 나머지 HTML을 parshing 한다.
→ 장점: <body> 끝에 사용하는 것 보단 fetcting이 parshing 하는 동안 병렬적으로 일어나기 때문에 다운 시간을 절약할 수 있다.
→ 단점 : JS가 html이 parshing 되기도 전에 실행되기 때문에 만약 JS에서 쿼리셀렉터를 이용해서 DOM 요소를 조작하려고 해도 해당 시점에서 html이 원하는 요소가 정의 되지 않을 수 가 있다.
- 다수의 스크립트를 다운받게 되면 정의된 스크립트 순서에 상관 없이 먼저 다운 받아진 JS파일을 먼저 실행하게 됨 → 순서에 의존적인 js이면 문제 발생!
<head> 안에 defer 속성값 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body></body>
</html>parshing 하다가 Defer에서 JS를 다운 받도록 명령 한 후 나머지 html을 끝까지 parshing 하고 끝난 다음 사용자에게 페이지를 보여주고 바로 이어서 다운로드 된 JS를 실행한다.
→ JS를 정의한 순서대로 스크립트가 실행되며, 가장 효율적이고 안전한 방법이다.
Use strict
js는 유연한 언어이므로 개발자들이 많은 실수를 할 수 있다.
(선언되지 않은 변수의 값 할당, 기존에 존재하는 프로토타입을 변경하는 등...)
'use strict'; //added ECMAScript 5
console.log('Hello world');바닐라 js에 use strict을 선언하게 되면 상식적인 범위안에서 JS를 이용할 수 있음
- js 엔진이 좀 더 효율적으로 빠르게 js를 분석 할 수 있음 → 성능 개선
드림코딩 강의는 각잡고 세세하게 가르쳐 줘서 정말 좋다.
ECMAScript, BABEL 등 처음 아는 개념도 탄생 배경을 알게 되니까 더 이해가 잘 되는 것 같다. IE가 여러모로 사람 힘들게 한다는 것도..
생활코딩에서는 거의 body태그 안에 script 태그를 넣는 방법을 사용 했는데 async나 defer 같은 개념을 알게되서 신세계다. 게다가 장단점도 쉽게 설명해주셔서 이해하는데 무리가 없었다.
아직 2챕터 밖에 안들었는데 뒤로 갈수록 어려워지겠지..🥲
