개발공부일지
Javascript - 브라우저 / 로컬스토리지 / 모듈(module) 본문
목차
1. 짤막한 네트워크와 브라우저 (browser)
2. 로컬스토리지 (localStorage)
3. 모듈(Module)
1. 짤막한 네트워크와 브라우저 (browser)
- URL 주소로 요청과 응답을 하면서 데이터를 주고 받는것 (데이터 통신)
- 브라우저는 요청을 쉽게 해주는 도구로 요청을 한 다음 응답을 받은 결과를 쉽게 볼수있다.
- 파일을 보내는것이 아니라 html이라는 텍스트 전체를 보내서 그걸 브라우저가 읽는것!
- 프로세스끼리는 공유가 안된다.
- 브라우저는 주소창이 중요하다!
- HTML에서도 <img> 태그사용할때도 src로 주소를 입력하는것도 같다.(css, js파일들도 마찬가지)
2. 로컬스토리지 (localStorage)
- 저장한 데이터는 브라우저에 저장된다.
- Key(파일)과 Value(텍스트)로 나타난다. (오로지 string)
3. 모듈(Module)
https://ko.javascript.info/modules-intro
모듈 소개
ko.javascript.info
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="./public/js/index.js"></script>
<script type="text/javascript">
const div = document.querySelector("div");
console.log(div); // null , 모듈보다 먼저찍혀 바로실행되니까
</script>
<script type="module" src="./public/js/index2.js"></script>
<script defer type="text/javascript" src="./public/js/index3.js">
const div = document.querySelector("div");
console.log(div); // null , 아래도 내려둬도 모듈보다 먼저찍혀
</script>
</head>
<body>
<div></div>
</body>
</html>// index.js 파일
export function Hello() {
console.log("hello world!");
}// index2.js 파일
import { Hello } from "./index.js";
Hello();- 파일을 분리해서 사용할 경우에 모듈을 사용한다.
- 모듈을 쓰면 즉시실행함수를 쓰지않아도 스코프가 분리된다.
- defer 라는 속성은 html 읽고 js 다운받고 실행을 멈춘 다음, html 렌더를 진행하고 끝나면 그때 js를 실행시켜준다.
→ DOMContentLoaded와 같아!!
- export는 n개를 만들수 있다.
- 하나만 할때는 export default 을 사용한다!
- import 에서 구조분해할당으로 { } 꺼내 사용한다.
★ 오늘의 포인트와 남겨두기 ★
※ 모듈을 만들때 ( export ), 모듈을 가져올때 ( import )
※ DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
const div = document.querySelector("div");
console.log(div);
});
*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!
'Javascript' 카테고리의 다른 글
| Javascript - 모듈과 Class, 로컬스토리지를 활용하여 Board 만들기 ② write의 데이터 저장해서 view에서 보여주기 (0) | 2023.08.10 |
|---|---|
| Javascript - 모듈과 Class, 로컬스토리지를 활용하여 Board 만들기 ① 게시판의 형태를 만들고 로컬스토리지에 데이터 저장 (0) | 2023.08.09 |
| Javascript - callback / Promise / Async / Await (0) | 2023.08.08 |
| Javascript - runtime / 평가와 실행 / 호이스팅 / 이벤트루프 / setTimeout (0) | 2023.08.07 |
| Javascript - class / 게시판 만들기 (0) | 2023.08.07 |
