복습하면서 요약
1. CSS & JS 쓰기위해 html 에서 해줘야 하는 것
css 를 작성하려면?
- 요약
1. style 태그 사용
- 위치 : head 태그 아래
2. link 태그로 '외부 파일' 연결 [예시 : style 태그 사용 하는 경우]
<head>
<style>
%% 이곳에 css 스타일 태그 작성%%
</style>
</head>[예시 : style 태그 사용 하는 경우]
<head>
%% 외부 파일과 css 연결 👇 %%
<link rel="stylesheet" href="./01_index.css"></head>javascript 를 작성하려면?
- 요약
1. script 태그 사용
- 위치 : body 태그 아래 ⭐⭐⭐
2. script scr 속성으로 연결
1. script 태그 사용 예시
</body>
<script>
// 그냥, 이곳에 바로 작성
</script>
</html>
2. script scr 속성으로 '외부 파일' 연결 예시
body 끝나는 부분 ⭐⭐⭐
</body>
<script src="./03_연습.js"></script>
</html>2. 변수
선언문 : var, let, const, (feat. 우선, let 으로 대동단결)
- 요약 (TLDR)
- let
- 재선언 불가능 -> 동일한 이름의 변수 사용 불가 -> 변수 중복 방지 가능 ⭐⭐⭐
- 값 변경 가능
- var
- 재선언 가능 -> 동일 이름 변수 선언 가능 -> 카오스의 시작 💨
- ex) 팀작업에서 다른 팀원과 변수가 겹칠 수 있음.
- const
- 재선언, 값 변경 '모두' 불가
- 구체적인 쓰임새는 아직 모르겠음.
세부 설명
값을 넣지 않고 변수의 이름을 먼저 선언 > 나중에 값을 넣기! 가능 ⭐⭐⭐
- 예시
- 선언
let let2;
(나중에, 있다가)
- 값 넣기
let2 = 1;3. 데이터 타입
undefined vs null 차이
// undefined data type
// 변수 선언만 되고 메모리에 값이 저장이 없으면 -> undefined
// '값이 없다.' 응? 왜 없지? 값 없는게 확인 안 될 때. '자동으로 할당되는 data type'
// '값 없이 선언' 되었을 때 -> 자동적으로 들어가는 데이터 타입 ⭐⭐⭐⭐⭐
let let7 ;
console.log(let7) ;
// null data type
// undefined 와 같이, 값이 없음을 나타내는 타입. ❓ 뭐가 다를까?
// '개발자' 가 변수에 '값이 없음'을 '의도적'으로 나타낼 때 쓴다. ⭐⭐⭐
let let8 = null;
데이터 타입 확인하는 명령어
// data type 을 확인 하려면? ⭐⭐⭐⭐⭐
// 1) 개발자 도구에서 색깔이 다름
// 2) 함수 console.log(typeof 궁금한 변수)
console.log(typeof let4)
data type 별 크기(byte) 및 블록체인에서 알아야 하는 이유
- byte data 를 전송, 저장할 때, '일정 크기의 블록' 으로 나눌 때 사용되기 때문
- byte padding 기법을 사용하면, data 전송할 때, '보안성 및 속도' 를 향상 시킬 수 있음.
// data type 별 크기(byte) (엄청 외울건 아님)
// 숫자 타입 : 8byte.
// 문자열 : 길이에 따라 다름. 대략 2byte 이상의 크기.
// boolean : 1byte. (true, false, 둘 중 하나임.)
// null : 0byte
// undefined : 0byte (값이 없으니까~)
'원시 기초 type' 과 '레퍼런스 type'
- 원기 기초 type
// 원시 기초 type
// string, number, bool, undefined, null
- 레퍼런스 type
- 배열, 객체
- 레퍼런스 타입 상세 필기
// 🟦 객체 type ⭐⭐
// 1. 선언
// 중괄호로 선언 ⭐⭐⭐
// 이 객체 에는 값이 여러개, 들어갈 수 있음.
// 예시
let obj = {a:1, b:2, c:3};
// 2. 값 가져오기
// . 으로 객체의 값에 접근할 수 있음. ⭐⭐⭐⭐⭐
// 값을 가져올 때 'key' 값을 사용 ⭐⭐⭐⭐⭐
// 예문
console.log("obj : a : ", obj.a);
console.log("obj : b : ", obj.b);
console.log("obj : c : ", obj.c);
// 3. 값을 넣기
// 3.1 기존 key 에 값을 넣기
obj.a = 10;
// 3.2 key 추가하면서 값 넣어주기 📛📛📛
obj.d = 20;
// 🟦 배열 type
// 1. 특징
// 다양한 datatype 을 가질 수 있음.
// 배열 값의 '순서' 는 0 부터 -1 까지
// 배열 값의 순서는 : 0 부터 '배열의 길이 -1' ⭐⭐ (0부터 시작하니까, 끝에도 -1)
// 2. 선언
// '대괄호' 로 선언
// 배열에 들어있는 값은 6개 임
// 순서는 0 부터 시작
// 순서는 0 에서 부터 5 까지 임.
let arr = [1, 2, 3, "1", "2", "3"]
// 3. 값 가져오기
// [예시] 첫 번째 값을 가져오기
// 값을 가져올 때, 'index' 를 사용 ⭐⭐⭐
console.log("arr[0]", arr[0]);
console.log("arr[1]", arr[1]);
console.log("arr[2]", arr[2]);
console.log("arr[3]", arr[3]);
// 4. 값 넣기 ⭐⭐⭐
// 지금 배열에 있는 리스트 값의 '맨 뒤' 에 새로운 값이 추가 됨 📛📛📛📛📛
arr.push("4");
// 5. 값 확인
console.log(obj);
console.log(arr);
데이터유형 까지 비교하는 연산자
- 요약
// === , !==
// data type 까지! 비교할 수 있음.
// == , !=
// data 유형은 비교하지 못 함
- 상세 설명
// ==
let test4 = 2;
let test5 = "2";
console.log(test4 == test5);
// true 반환
// ===
// === 는 'type' 까지 비교함. ⭐⭐⭐
console.log(test4 === test5);
// [해석]
// === 을 쓰면, 숫자2 랑 문자 2를 구분 함. ⭐⭐⭐⭐⭐
// !=
console.log(test4 != test5);
// false 반환
// !==
console.log(test4 !== test5);
// true 반환
4. 반복문, for문 실습
- 구구단
- 수상자 호출
- 3의 배수
https://codepen.io/anotheryear-hm/pen/MWqNMMP
5. 짧게 알게 된 것들
주석 에 대해서
- 요약
// 자바스크립트 주석 : 한줄 주석
/*
줄 내림 주석
*/
변수 이름 작성법
// 🟦 변수 이름 작성법
// 원칙
// - 회사가서, '사수가 쓰는 표기법' 으로 하면 됨.
// - 케밥 표기법 (Kebab Case)
// css class 이름은 보통 이렇게 ⭐⭐⭐⭐⭐
let item-box
// - 카멜 표기법 (Camel) (낙타표기법)
// 변수명을 선언할 때, 자주, 사용하는 표기법
// 구분되는 곳에 '대문자'
let itemBox;
// - 스네이크 표기법 (snake) (뱀 표기법)
let item_box;
// - 헝가리안 표기법 (사용도가 떨어짐)
// datatype 을 변수명에 사용
let strItemBox;
// - 파스칼 표기법
// react 에 들어가게 되면, 보게 될 것 ⭐⭐⭐⭐⭐
// 컴포넌트 라는게 있음 ⭐⭐⭐⭐⭐
let ItemBox;
으랏찻차