뉴히의 개발 로그
[TIL] 20230602 - 독립적 스코프 생성 : 자바스크립트 모듈화 <script type module, defer, user strict> 카멜케이스,파스칼케이스,케밥케이스 본문
[TIL] 20230602 - 독립적 스코프 생성 : 자바스크립트 모듈화 <script type module, defer, user strict> 카멜케이스,파스칼케이스,케밥케이스
뉴히 2023. 6. 3. 03:24작업 환경 / 파일 디렉터리 셋업 및 html,css
html문서 <head>에는 meta, link, script등 파일들이 들어간다 ㅎㅎ
그런데, 스크립트 파일이 html 본문보다 위에 있으면 좋지않다!
실제로 작업하다가 오류가 나서 보니 이 이유였다.
이유인 즉슨!!!!!!!!!
scirpt 파일이 에 먼저 올라가있으면
파서(html을 파싱하는 그것)가 html 본문(body)를 다 읽기전에 다운로드 받고 실행을 시키게 되는데
그럼 선언을 해도, 뭘해도 그내용을 불러 올 수가 없어 null이 보여진다.
코드예시
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>타이틀</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<script>
console.log("ul") // null
</script>
</head>
<body>
<!-- header -->
<header class="banner">
<h1><a href="index.html">The Best Movie</a></h1>
<div class="search">
<form name="search" onsubmit="return false">
<label for="검색창" class="blind">검색창</label>
<input type="text" id="search-input" name="search" autofocus/>
<button type="submit" id="search-btn" class="search-btn">검색</button>
</form>
</div>
</header>
<!-- main list -->
<main class="container">
<h2><a href="index.html"><i class="fas fa-solid fa-list-ul"></i> 전체 목록</a></h2>
<ul class="card-wrap">
<!-- 영화 리스트 -->
</div>
</main>
<!-- footer -->
<footer>
<div><p>Copyright © NBCamp 2023</p></div>
</footer>
<!-- top btn -->
<a id="top-btn" href="" ><i class="fas fa-solid fa-arrow-up"></i></a>
</body>이런걸 방지하기 위해서 두가지의 방법이 있다.
</body> 태그 바로 위에 스크립트 소스를 넣거나
<script type="" src="" defer></script> 를 넣어준다!
defer는 스크립트 소스코드가 상단에 있어도 다운로드는 받지만
실행은 html 파서가 문서 파싱을 한번쫙 다 한다음에 실행되도록 한다!
defer를 그림으로 보면
이렇게 표현할 수 있다.
또한 스크립트는 독립적으로 나눠서 관리하는게 좋다.
자바스크립트는 import와 export를 사용해 모듈화 시켜서 작업 관리가 가능하다.
이렇게 모듈화 시키게 되면 협업시에 여럿이 각각의 모듈을 개발한다해도
작업, 유지 보수에도 좋고 스코프를 독립적으로 만들어서
변수 중복에도 오류없이 구현이 가능하다!
자바스크립트의 모듈화를 위해서는 <script type="module">을 넣어줘야한다!
모듈을 사용하게되면 defer , use strict도 기본으로 내장되어 진다!!
다음주에는 다시 팀프로젝트가 진행되는데
이런 모듈, 코드 컨벤션, 깃 풀 리퀘스트, 머지 등
협업에 있어 더 효율적인 방법들이 많으니 잘 활용하고 배우면서 작업해 봐야겠다!!
Tip!
스네이크 케이스(snake case)
let snake_case;
언더바(_) 가 들어 있는 표현 방식을 뱀처럼 생겼다고 하여 스네이크 케이스라고 한다.
파스칼 케이스(pascal case)
let PascalCase;
첫 글자와 중간 글자들이 대문자인 경우 파스칼 언어의 표기법과 유사하다고 하여 파스칼 케이스라고 한다.
카멜 케이스 (camel case) : 변수선언
let camelCase;
중간 글자들은 대문자로 시작하지만 첫 글자가 소문자인 경우에는 낙타와 모양이 비슷하다 하여 카멜 케이스라고 한다.
케밥 케이스 (kebab-case)
let kebab-case
모든 문자의 첫 자는 소문자로 표기하고 문자들 사이는 -(하이픈)로 연결한다. 폴더명이나 URL에 사용한다.
콘스트 케이스 (CONST_CASE) : 상수 선언
const CONST_CASE
상수는 모든 문자를 영문 대문자로 표기하고 언더바로 연결하여 스네이크 표기법을 사용한다.
터미널을 예쁘게 꾸며주는 것
Mac : oh my zsh Window : oh my posh
'개발일지 > TIL' 카테고리의 다른 글
| [TIL] 20230607 - 알고리즘 스택(stack)자료구조 (0) | 2023.06.08 |
|---|---|
| [TIL] 20230605 - localStorage / git flow (git branch 전략) (0) | 2023.06.05 |
| [TIL] 20230601 - 공백 제거 split(), join(), replace() 정규식 사용 문자열 치환하기 (0) | 2023.06.01 |
| [TIL] 20230531 - forEach안에 if로 alert을 띄우면 안되는 이유!/split(), join() 메서드 / 검색 띄어쓰기 삭제 (0) | 2023.05.31 |
| [TIL] 20230530 - 클로저 closure / if문 alert창 한번만 띄우기 / 키보드 enter키로 검색 클릭 (0) | 2023.05.30 |
