학습 기록
📜 자바스크립트 역사
모카(1995) => liveScript(1996) => javaScript(1996) => ES(ecmaScript)(1997) => ES2(1998) => ES3(1999) => ES4(2000) => ES5(2009) => ES6(2015) => 이후에 나온 것들은 그냥 ES6+라 부름
📜 HTML script 태그
🟡 기본적인 HTML 파싱
👉🏻 HTML 문서는 순차적으로 파싱이 되는데 이 과정에서 script 태그를 만나면 DOM생성을 잠시 미룬다음 script를 먼저 다운받고 실행한 후 나머지 코드를 실행한다. 이때 스크립트 태그 아래의 DOM요소에는 접근 할 수 없게 된다. 만약 script 태그가 무거우면 그 만큼 DOM생성이 늦어진다.
👉🏻 그래서 보통은 아래의 코드처럼 body태그 아래에 script 태그를 작성하는데 그러면 빠르게 웹 페이지를 보여준다는 장점이 있지만 interaction이 중요한 회사에서는 단점으로 작용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<main> </main>
<script src="./index.js"></script>
</body>
</html>
🟡 script 태그의 async와 defer라는 옵션
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
// 여기서 async나 defer 속성 사용
<script async src="./asyncIndex.js></script>
<script defer src="./deferIndex.js"></script>
</head>
<body></body>
</html>
👉🏻 async와 defer옵션은 모두 script태그를 만나면 다른 코드들을 실행하면서 병렬로 다운로드를 받아주는 역할을 한다.
👉🏻 하지만 async 옵션은 스크립트가 다운되면 바로 실행이 되어서 실행될때 DOM요소 생성을 멈추기 때문에 실행 순서가 불확실하다는 단점이 있고, defer 옵션은 병렬적으로 다운로드를 받고 다운로드가 다 되어도 실행은 마지막에 실행되기 때문에 body태그에 작성하는 것보다 좀 빠르겠지만 body태그에 작성하는 것처럼 interaction이 나중에 입혀진다는 단점이 있다.
async 옵션 => 병렬 다운로드, 실행 순서 불확실
defer 옵션 => 병렬 다운로드, 순차적 실행, 나중에 interaction 적용
📜 var, let, const
👉🏻 var : 중복 선언 가능 , 재할당 가능
👉🏻 let : 중복 선언 불가능, 재할당 가능
👉🏻 const : 중복 선언 불가능, 재할당 불가능, 선언과 동시에 초기화 시켜야함
👉🏻 만약 키워드를 안붙이고 선언을 하면 암시적으로 j가 var 키워드를 붙이기 때문에 var 키워드의 특징을 갖는다.
👉🏻 함수, 객체, 배열은 되도록 const 키워드 사용
📜 자료형
👉🏻 크게 기본자료형(primitive datatype)와 참조 자료형(reference datatype)으로 구분
👉🏻 기본자료형 : 숫자형, 문자열형, 논리형, 특수자료형(undefined/null), 심볼(sybol)
👉🏻 참조 자료형: 객체, 배열, 함수
👉🏻 같은 값이라도 참조형은 주소가 다름, 기본자료형은 주소가 같음 (가장 큰 차이점)
const fruits1 = ["app", "ban"]
const fruits2 = ["app", "ban"]
console.log(fruits1 === fruits2) // false
const fruits1 = ["app", "ban"]
const fruits2 = fruits1 // => fruits1의 주소 값을 fruits2에 넘겨주기 때문에 참이 나옴
console.log(fruits1 === fruits2) // true
📜 연산자
👉🏻 == : 동등 연산자 값만 비교, 자료형 검사 안함, 암묵적 형변환 일어남
👉🏻 삼항 연산자: (식) ? (참) : (거짓)
let myage = 18
const isAdult = 19 < myage ? "성인" : "미성년자"
console.log(isAudlt) // "미성년자"👉🏻 && (and) , ||(or) , !(not)
1일차 후기
오프라인 교육은 처음 들어보는데 대면이다보니 뭔가 좀 더 집중할 수 있고 좋은 것 같다. 하지만 아무래도 사전직무교육이다보니 진도를 훅훅훅 나가시는데 정리할 시간이 부족....하달까? 원래 알고 있던 내용도 있긴 하지만 세부적으로 몰랐던 내용도 알려주셔서 그걸 정리하다보면 어느새 진도가.... 심지어 오전에는 오리엔테이션을 해서 오후 수업만으로도 많은 내용이 입력되어서 머리속에 둥둥 떠다니는 중 정리.. 하자!
본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성 되었습니다.
'TIL' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 사전직무교육 3일차(05.28) (1) | 2024.06.07 |
|---|---|
| [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 사전직무교육 2일차(05.27) (1) | 2024.06.05 |
| 데이터를 처리하는 chunk, buffer, stream (0) | 2024.05.07 |
| SEO(Search Engine Optimization) 이란? (0) | 2023.08.24 |
| 웹 표준, 웹 접근성, 웹 호환성 (1) | 2023.08.19 |