회고록 블로그
[공부 필기] JavaScript 문법 공부 4일차 (1) 본문
※ 필자는 자바스크립트 초보자입니다
※ 피드백/잘못된 사항 지적은 언제든지 환영합니다
왜 다시 공부를 시작했는지 등은 이전 글을 참고
2022.02.19 - [2. 개발 공부/JavaScript] - [공부 필기] JavaScript 문법 공부 1일차
[공부 필기] JavaScript 문법 공부 1일차
※ 필자는 자바스크립트 초보자입니다 ※ 피드백/잘못된 사항 지적은 언제든지 환영합니다 0. 사담 여러 언어를 조금씩 공부해봤는데 가장 흥미로웠던 분야는 프론트엔드 개발이었다. 정확하게
cinnamonc.tistory.com
1. 이 글은 이렇게 작성될 계획..
너무 좋은 자료(https://ko.javascript.info/)에, 너무 좋은 필기들, 너무 좋은 댓글들이 이미 있기 때문에
별도로 필기를 하며 공부하지는 않고 그냥 글을 쭉쭉 읽어가면서
더 추가적으로 공부한 내용이나, 개인적으로 필기해놓고 싶은 내용, 실습해보기 위해 작성해본 소스코드 등만 본 글에 필기할 계획이다.
2. 사담
공부하는데 참고한 자료는 아주 유용하고 학습하기 좋은 '모던 자바스크립트 튜토리얼' 이다.
모던 JavaScript 튜토리얼
ko.javascript.info
공부하기전에 사담으로 소망을 하나 말해보자면, 티스토리에 템플릿 복사 기능이 있었으면 좋겠다.
매번 똑같은 템플릿으로 필기글 쓰고 있는데 이전 글 복사해서 붙여넣기 너무 귀찮다.
노션(notion)은 가능한데 왜 티스토리는 안되냐고..
티스토리 기획자..제발 개선점 발굴해서 사용감 향상시켜달라고..ㅜㅜ
노션으로 갈아타야하는걸까 고민중이다.
- 자바스크립트 기본_Hello, world!
이제 정말 코어 자바스크립트 문법을 공부할 수 있다.
출처 : https://ko.javascript.info/hello-world
Hello, world!
ko.javascript.info
준비 사항 : 스크립트를 실행할 수 있는 환경 (가장 심플하게 '브라우저'를 준비)
브라우저 이외의 환경에 주력하는 학습자(node.js 사용자 등)를 위해 브라우저 한정 명령어는 최소한으로 사용한다고 한다.
Browser API는 적당히 사용한다는 의미인 듯.
크롬이 편해서 환경은 크롬을 이용할거고, IDE는 Visual Studio Code를 이용할건데
자바스크립트 문법 공부가 목적인지라 JavaScript 코드만 수정할 것 같아서 HTML 파일은 아래와 같이 대충 만들어놓았다.
내용도 별거 없다.
Visual Studio Code를 사용하지 못하는 환경일 때는 https://codepen.io/ 을 사용할 계획이다.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
웹페이지에 스크립트를 삽입하는 방법은 아래와 같다고 한다.
<script> 태그를 이용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
...
</script>
</body>
</html>만약 외부파일로 분리하지 않을 것이라면 위와 같이 body 태그의 가장 하단에 script 태그를 추가하는게 좋다고 하는데
그 이유는 예전에 기록해뒀으니 스킵
참고자료 :
2021.05.06 - [2. 개발 공부/JavaScript] - [공부 필기] 생활코딩 웹브라우저 자바스크립트 강의 필기 (1)
[공부 필기] 생활코딩 웹브라우저 자바스크립트 강의 필기 (1)
1. 웹브라우저에서의 자바스크립트 * 프로그래밍의 본질적인 요소인 조건문, 함수 등을 배우고 * 자바스크립트의 고유 요소인 DOM에 대해서 학습함 * [참고] 자바스크립트가 HTML, CSS를 어떻게 제어
cinnamonc.tistory.com
<script> 태그엔 몇 가지 속성(attribute)이 있다.
HTML의 속성(attribute)이다.
HTML4에서는 type 속성을 꼭 넣어주어야 했다고 한다.
하지만 필수가 아니라고 한다. 심지어 모던 HTML 표준(현대적인 HTML 표준)에서는 이 속성의 의미가 바뀌었다고 한다.
<script type="text/javascript">
....
</script>language 속성도 더는 사용할 필요가 없어졌다고 한다.
위의 내용에 대해서 더 찾아봤는데, 간단하게 정리해주신 글이 있어서 스크랩 해왔다.
https://dog-developers.tistory.com/95
자바스크립트 사용하기
마크업 태그 방식 script 태그 사이에서 자바스크립트 코드가 바로 실행이 됩니다. 삽입 위치는 어디든 상관없이 실행은 됩니다. 하지만 스크립트는 load 진행 순서? 가 있기 때문에 그 부분은 나
dog-developers.tistory.com
type 속성은 HTML5부터는 "불필요한 MIME 유형을 제공하기보다는 속성을 생략"하라고 한다.
또한 language 속성은 "표준화되지 않았기 때문에 사용하지 말라"고 말하고 있다.
최근에는 type 유형을 module로 사용할 수 있다고 한다. 아래와 같이.
<script type="module">
...
</script>위와 같이 쓰면 자바스크립트 모듈로 간주한다고 한다.
자바스크립트 모듈(JavaScript module)이 무엇인지에 대해서 짧게 찾아봤는데
하나의 큰 프로그램으로 퉁- 코드를 짜는게 아니라 기능이나 여러 필요에 따라 작게 작게 코드를 나눠서 필요한 곳에 가져다 쓸 수 있게 만든게 모듈(module)인 듯 하다.
개인적인 생각으로는 type="module"을 쓰면 <script> 태그 안에 있는 코드는 모두
모듈(여러 사정과 필요에 따라 작게 나눠놓은 코드이며 이 코드가 프로그램의 전부가 아님)이라고 인식하는 듯 하다.
모듈 사용법에 대해서 공부할 때는 MDN을 이용하면 좋을 듯 하다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules
JavaScript modules - JavaScript | MDN
이 가이드는 자바스크립트 모듈 구문을 시작하는데 필요한 모든 것을 제공합니다.
developer.mozilla.org
스크립트는 별개의 분리된 파일로 만들어 관리하는게 좋다.
브라우저는 스크립트를 다운받아 캐시(cache)에 저장하는데
별개의 분리된 파일로 스크립트(js 파일)를 저장하면 동일한 스크립트를 사용하는 경우
(e.g. html 파일은 다른데 js 파일은 동일하게 사용하는 페이지 등)
여러번 똑같은 스크립트를 다운로드 받지 않고 캐시에서 스크립트를 가져와 사용할 수 있다고 한다.
그럼 트래픽도 절약되고 웹페이지 속도도 빨라진다고 한다.
참고로 script의 src 속성이 있으면, script 태그 내부의 코드는 무시된다고 한다.
<script src="test.js">
alert("Hello World!"); //무시됨
... //무시됨
</script>만약 위의 코드가 모두 유효하게 하고 싶다면 아래와 같이 분리해야한다고 한다.
(이때, test.js는 같은 디렉터리 안에 존재한다고 가정)
<script src="test.js"></script>
<script>
alert("Hello World!");
...
</script>
https://ko.javascript.info/hello-world
Hello, world!
ko.javascript.info
과제가 있다! 문제를 풀어서 정답을 아래와 같이 냈다.
'2. 프로그래밍 언어 공부 > JavaScript' 카테고리의 다른 글
| [공부 필기] JavaScript 문법 공부 5일차 (0) | 2022.03.05 |
|---|---|
| [공부 필기] JavaScript 문법 공부 4일차 (2) (0) | 2022.03.02 |
| [공부 필기] JavaScript 문법 공부 3일차 (2) (0) | 2022.02.23 |
| [공부 필기] JavaScript 문법 공부 3일차 (1) (0) | 2022.02.23 |
| [공부 필기] JavaScript 문법 공부 2일차 (0) | 2022.02.21 |
