250x250

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

관리 메뉴

Hello creators 🙌

[Javascript] 01. 기본 문법 요약 & 구구단 만들기, 수상자 출력, 3의 배수 코드 짜기 본문

[WEB & AI] (feat. 취준)/블록체인 개발자 과정_KGA

[Javascript] 01. 기본 문법 요약 & 구구단 만들기, 수상자 출력, 3의 배수 코드 짜기

부시매나_HA 2023. 3. 11. 15:58

728x90

1️⃣ 이번 회차 학습 목표 (goal)

1. 배우고자 하는 것

javascript 문법 기초 내용
구구단, 수상자 뽑기, 3의 배수 코딩해보기

2️⃣ 기초 문법 내용 요약

1. 웹 만들기 할 때, js 어디에 써? (작성 위치 및 연결)

1) 작성 위치

<body> 태그 밑에 써

2) 연결방법

1. . <script> </script> 태그 사이에 쓴다. 

2. . <body> 태그에 연결
<!-- js 스크립트 연결 ⭐⭐⭐ 
        - 이렇게 해야, html 을 읽고, 그걸 어떻게 움직이게 할지를 이해함. 
        - src 에 가져올 스크립트파일의 경로 -->

%% 연결 코드 👇%%
<script src="./02.index.js"></script>

2. 변수

사용시 주의할 것

- 사용시 주의할 것 
	1. '선언자' 가 없으면 전역변수. 
	2. '선언자' 를 반드시 활용 
	3. let vs var 는 '재선언 가능 여부' 
	4. let 를 주로 쓸 것 ⭐⭐⭐⭐⭐

변수란?

[변수란?]
- 데이터를 가르키는 주소 
- 이 주소를 따라가면 - 데이터가 있음 
- 변수는 데이터를 저장
- 주소를 알면 -> 데이터를 가져올 수 있음. 
	
- 변수를 선언 -> 변수에 데이터를 정의 -> 이걸 메모리에 담아둔다. 

- 메모리 공간에 고유 번호가 있음. 저장해 라고 하면? ❓❓❓ 

- cs 50 다시 들어보자 ⭐⭐⭐⭐⭐⭐⭐⭐⭐

메모리, ram 이란?

[메모리는?] 
- '프로그램이 실행되는 동안' 필요한 데이터와 명령어를 저장 
- '전원이 들어와 있는 동안' ❓❓❓ 

[ram] 
- cpu 가 데이터에 빠르게 접근하고, 사용할 수 있는 공간. 
- cpu 가 처리할 데이터 or 명령어를, '잠시', 저장하고, 사용하는 용도 
- 전원이 꺼지면, 저장된 데이터가 사라진다.

변수 선언

[변수 선언] 

- 한글 예시 
`선언자 변수 이름 = 데이터;`

- 예시 코드 
var var1 = 1 ;
	1 이라는 값을 메모리에 저장
	1 이라는 값을 var1 이름으로저장 
	1 이라는 값에 접근할 수 있게, var1 이라는 변수명을 지정

let let1 = 1;

var 와 let 의 차이

[요약]
- '재사용 가능 여부' 에 따라서 var, let 이 나뉨. 
- let 은 '그렇게 해라~' 라는 거니까 -> 재사용 불가
- var 는 'variation' 이니까 -> 재사용 가능
- 쓸 때는 let 을 위주로 써야 -> 문제가 안 생김 


[let 을 써야 하는 이유 (var의 문제점)]
- var 로 작업했을 때, 변수명이 겹치는 경우

ex) 사례 
- 1번 팀원. var a; 변수를 선언
- 2번 팀원도 var a; 를 선언 -> 1번 팀원이 a 변수에 넣은게 사라짐.

값을 넣지 않고 변수의 이름을 먼저 선언 > 나중에 값을 넣기! ⭐⭐⭐

- 중요한 점 
	- 1. 값 변경할 때('할당'할 때) , '선언자' 를 안 써도 됨. 
	- 2. '선언자' 는 그냥, '선언' 할 때만. 

- 선언
let let2;

- 값 넣기
let2 = 1;

'선언' 및 '할당' 연습

데이터 타입 확인하려고 할 때 (🤟WIL)

// typeof 함수? 를 사용
console.log(typeof type1)

// 1. '선언' 
	// let 선언문을 사용해서, type1 변수 선언(값 없이)
	// '메모리' 에 '데이터 타입은 모르지만', 저장할 수 있는 '공간' 을 할당받음 
let type1 ;

// 2. console.log() 로 type1 변수 값 확인 
console.log(type1)

// 3. let 선언문 사용해서, type1 변수에 '5' 를 할당 ⭐⭐⭐⭐⭐
	// 아! let 을 빈 변수로 선언하면, 값을 할 당 할 때는 let 을 빼줘야 한다! 
	// '숫자형' 이기 때문에 -> 자동적으로 8byte 를 확보했을 것. 
type1 = 5;

// 4. console.log 로 값 확인 
console.log(type1)

// 5. typeof 와 console.log 로 datatepe 확인 ⭐⭐⭐
console.log(typeof type1)

// 6. "정덕진" 을 type1 변수에 대입
type1 = "정덕진"

// 7. console.log() 로 확인 
console.log(type1)
console.log(typeof type1)

자바스크립트에서 변수를 선언할 때, let var `선언문` 을 꼭 사용

- 키워드 없으면 -> '전역변수' 로 쓰임 -> 문제 발생. ⭐⭐⭐⭐⭐

- 이 경우, '예상치 못 한 문제' 가 발생함 ⭐⭐⭐⭐⭐

html 상에서 변수를 로그로 확인해보기

- 예시 코드 👇 
console.log()
console.log("브라우저 개발자 모드에서 콘솔 창에 보여줄 값을 넣기")


- 👇 이렇게 하면 > 개발자 도구 > console 에서 let2 의 값 확인 가능
let let2 = 2 ;
console.log(let2);

- '숫자는 파랑, 글자는 검은색' 으로 보임 ⭐⭐⭐
let let4 = "나는 문자 저장";
console.log(let4)

변수 이름 작성법

✅ 주의할 사항 / WIL

- CSS 는 케밥으로 하자? 
	EX) let item-box
	🟥 그런데, 'vs code' 에서 클래스명 더블클릭하면, 한꺼번에 선택이 안 돼

- js 는 카멜
	- 음... 아직 어색해... 
	ex) let itemBox;

변수 이름 정하는 법


- 원칙 
	- 회사가서, '사수가 쓰는 표기법' 으로 하면 됨. 

- 케밥 표기법 (Kebab Case)
	- css class 이름은 보통 이렇게 ⭐⭐⭐⭐⭐ 
	- ex) let item-box 

- 카멜 표기법 (Camel) (낙타표기법)
	- 변수명을 선언할 때, 자주, 사용하는 표기법
	- 구분되는 곳에 '대문자'
	- ex) let itemBox;

- 스네이크 표기법 (snake) (뱀 표기법)
	- 구분하는 곳에 `__` 언더바
	- ex) let item_box;

- 헝가리안 표기법 (사용도가 떨어짐)
	- datatype 을 변수명에 사용 
	- ex) let strItemBox;

- 파스칼 표기법 
	- react 에 들어가게 되면, 보게 될 것 ⭐⭐⭐⭐⭐ 
	- 컴포넌트 라는게 있음 ⭐⭐⭐⭐⭐ 
	- 첫 글자도 대문자
	- ex) let ItemBox;

3. 데이터 타입 (data type)

✅ WIL / 주의할 사항 / 요약

[데이터 넣기]

- 배열(리스트)에 데이터를 넣기 
let arr = [1, 2, 3, "1", "2", "3"]
arr.push("4"); ⭐⭐⭐⭐⭐⭐⭐

- 객체(딕셔너리, dict) 에 데이터 넣기 
let obj = {a:1, b:2, c:3};
obj.a = 10; ⭐⭐⭐⭐⭐

data type 별 크기

data type 을 알아야 하는 이유

- 블록체인 들어갔을 때, byte padding 기법으로 byte data 를 전송 & 저장 할 것임. 이때 사용 예정. 

- byte padding 기법이 있는 이유는 data 를 전송할 때, '보안성 및 속도' 를 향상 시킬 수 있기 때문. 

- 암호화를 할 때, 'sha-256' 함수를 사용할 것임.

데이터 타입 별 byte 크기


- 숫자 타입 : 8byte 
- 문자열 : 길이에 따라 다름. 대략 2byte
- boolean : 1byte
- null : 0byte
- undefined : 0byte

4. 연산

1) 사칙연산

🤟 주의할 것 / WIL

- `%` 는 '나머지' 를 구하는 것 임

- `+` 는 문자열을 더할 수도 있음. ⭐⭐⭐
	ex) 구구단 만들기 할 때, 나오는 결과값을 + 를 활용해서 만들어줄 수 있음.

사칙 연산 알아보기


1. `+`
- 문자열을 더할 수도 있음. ⭐⭐⭐
	let text1 = "나는 ";
	let text2 = "배고프다.😥" ;
	console.log(text1 + text2);


2. '-', '*', '/', '%'
- 예시 
		console.log(a - b);
        console.log(a * b);
        console.log(a / b); 
		// 떨어지고 남은 '나머지 값'
        console.log(a % b);

2) ++, --, **

🤟 주의할 것 / WIL

1. -- 를 하면 -> 1씩 빠짐

2. ** 이건 -> 제곱이 됨

++

- `++` 을 사용하면 -> '1' 씩 값이 증가 
- input 값이 1 이고 > ++ 하면 > output 은 2가 됨 

- for 문을 생각하면 된다. 
	for (i = 0; i < 10; i++) { }

-- , **

-- 하면 -> 이전 값에서 '1이 빠짐'
	// ex) 이전값(input) : 2 > -- 연산 > 결과값 : 1
	a--;
	console.log(a)


** 하면 > '제곱' 이 된다.
            // a 에 3제곱을 해 -> 그 값을 a 에 대입!!!
            a = a ** 3;

연습

test1 ++ 
console.log(test1)

test1 -- 
console.log(test1)

console.log(test1 ** 2)

시사점

- ⭐값이 변화하려면⭐, '대입' 을 해줘야 함 
- 다만, ++,-- 는, 대입 하지 않아도, 값이 변화함. ⭐⭐⭐⭐⭐   
	- ++, -- 는 그 자체로 1이 더해짐 
	- a+1; 이렇게 쓴다고 변수의 값이 변하진 않는다. 
	- a = a+1; 이렇게 다른 연산자들은 값을 넣어줘야 함.

3) 비교 연산자

🤟 주의할 것 / WIL

1. === 이건 data type 까지 비교해줌! ⭐⭐
2. !== 이건, data type 까지 비교해줌! ⭐⭐
3. '>=' 를 해석 : '클 것 같은데, 혹시 같아?' 의 순서로 작성

비교 연산자

// ! 는 반전!
		// 반전 시키는 것. 
	let test2 = true;
	let test3 = false;
	// !를 붙이면, bool 값을 반전!
	console.log(!test2);


// == 
	// 이 둘이 같은지를 본다. 
	// 값이 같으면 -> true
	// 값이 다르면 -> false 를 반환
	let test4 = 2;
	let test5 = "2";
	console.log(test4 == test5);
		// 숫자2 랑 문자2 가 같다! 오잉? ❓❓❓❓❓❓ 


// === 
	// 비교를 좀 더 확실하게 하는 연산자 ⭐⭐⭐⭐⭐ 
	// == 는 '값' 만 비교함. ⭐⭐⭐ 
	// === 는 'type' 까지 비교함. ⭐⭐⭐
	console.log(test4 === test5);
	// [해석] 
		// == 을 쓰면, 숫자2 랑 문자2 를 구분 못 함. 
		// === 을 쓰면, 숫자2 랑 문자 2를 구분 함. ⭐⭐⭐⭐⭐ 


// != 
	// 같은지 비교함
	// 원래, 같으면 -> true 를 보여줘야 함. 
	// 근데 이건, != 니까 -> 같으면, false 를 보여줌.  
	
	// 값이 같으면 -> false
	// 값이 다르면 -> ture
	console.log(test4 != test5);


//  !==
	// === 의 반대
	// data type 까지 확실히 비교 가능 ⭐⭐⭐⭐⭐ 
	console.log(test4 !== test5);


// > , <
	// 초과, 미만! 을 비교
	// 값이 큰지, 작은지, 확인해줌. 
	// 값이 크면 -> true
	// 값이 작으면 -> false
	let test6 = 5; 
	let test7 = 5; 

	console.log(test6 > test7);
		// [해석] 6 이 7 보다 크니? -> 안 커 -> 결과값은 fasle!
		// 비교연산자는 true, false 로 알려준다. ⭐⭐⭐⭐⭐ 

	console.log(test6 < test7);
		// [해석] 이건 true 나와야 함. 


// [비교 연산자] >=, <=, 
	// = 는 꼭 뒤에⭐⭐ 
	// 이상, 이하, 를 비교
	// '크거나 혹시 같니?', '작거나, 혹시 같니?'

	console.log(test6 <= test7);
	// [해석] test7 이 test 6 보다, 크거나, 혹시 같니? 

	console.log(test6 >= test7);
	// [해석] test6 이 test7 보다, 크거나, 혹시 같니?

5. if 비교문

🤟 알게 된 것 / WIL / 주의할 것

1. if (true 일때만) {이 부분을 실행시킬거야}

2. true 가 나오려면, 괄호 부분에, '비교 연산' 이 전제 되어야 해.
	- 비교연산 : !, ==, ===, !=, !==, >, <, <=, >=,

3. 비교연산이 2번(판단이 2번, 조건이 2번) 들어가면 -> if, else if, else 문을 쓴다. (📛📛📛/ ⭐⭐⭐ / 이건 아직 안 써봄)

비교문 기본 내용

- 한글 구조 
	- 결과값이 false 면 실행하지 않음
if (비교연산자의 결과값, true, false) { true 일 경우, 실행하게 되는 구문}


- '특정 조건이 false 일 때, 실행시키려면?' 
	- if, else 문 활용!
if (age < age2) {
	console.log("true면 이게 나와");
} else {
	console.log("false면 이게 나와");
}


- '참, 거짓' 이외에 '다른 결과' 가 필요하면? 
	- if, else if, else 활용 

if (age < age2) {
	// if 문이 맞으면 여기 실행
	// [해석] age vs age2 -> false 니까, -> 여기는 pass 
	console.log("첫번째 조건이 true 일 때 실행");
} 
else if (age == age2) {
	// if 가 틀리면, 여기로 와서, 조건이 맞는지 확인 -> 맞으면 실행
	// [해석] 5 == 5 니까, 같아 -> 그러니까, 이 부분을 실행 
	console.log("else if 문에서, age==age2 비교했고, true 여서, else if 문이 실행");
}
else {
    // else if 도 안 맞으면 -> else 로 와서 실행
	// else 에는 '조건' 이 없네? ⭐⭐⭐⭐⭐⭐     
	console.log("나는 두 번째, else 문 이야");
}

6. 반복문

🤟 주의할 것 / WIL / 요약

1. for 문 실행 순서 🤟🤟🤟🤟🤟 
	- 1턴 : [선언] -> [비교] -> [구문실행] -> [값 증가] -> 비교해서, True면, 2턴 시작 
	- 2턴 : [선언 : 증가된 값으로 진행] -> [비교는 2턴 전에 했으니 skip] -> [곧장, 구문실행] -> [값 증가] -> 비교해서 true 면 3턴 시작 

2. 한글로 읽기 ⭐⭐⭐⭐⭐  
	- 반복할거야 (let 처음에시작하는값 = 1; 언제까지돌아? i<50; 한번 돌고 index 값 어떻게 변화해? a++ )

3. 각 line 이 반복될 때, '선언' 이 먼저 되어서, data 가 update 된다는 것 ⭐⭐⭐⭐ 

4. 쉽게 이해하면, 1) 반복할 조건(종료 조건)이 뭔지 2) 반복할 때, '어떤 변수의 값' 을 '얼마나 변화' 시켜서 반복할 건지 를 정의하는게 for (let a = 1; a < b; a++) { } 에서 괄호 안에 있는 부분! 

5. for 를 쓴다는 건, '반복되는 행동' 은 '동일'. 'data 가 어떻게 변화?' 할지에 대한 관점 ⭐⭐⭐⭐⭐

반복문 설명

let b = 5; 
for (let a = 1; a < b; a++) {
	console.log(a);
}


[for 문 실행 순서 해석]
	1) [선언] 변수 선언하고 -> 값을 확인 
	2) [비교] a 가 b 보다 큰지 확인 -> true면 for 문 안에 있는 걸 실행 
	3) [구문 실행] { 안에 있는거 실행 } 
	4) [값 증가] a++ 에 의해, a=1 에서 a=2 가 됨. 
	5) [비교] true 이면 -> '구문실행' 
	6) [구문 실행] {안에 있는거 실행함}
	7) [값 증가] 
	... 이 과정이 반복
	8) [비교] 이 비교가 만약, false 이면, 그때, '반복문 종료'


[주의] ⭐ 무한으로 반복 시키면, 사이트가 터져~ / 노노!! / 조건식을 잘 확인해야 함.

🤯 미니 과제

구구단 만들기

for (let c = 2; c <= 9; c++) {
    for (let d = 1; d <= 9; d++) {
        console.log( c, "x", d, "=", c * d );
    }
}

생각해보기

진행 되어야 하는 것
2*1
2*2
2*3
2*4
이런 과정이 반복되야 함
여기에서 데이터를 하나씩, 혹은, 데이터를 2개씩, 변경할 수 있음. -> 데이터가 2개씩 변경되면 -> 반복문 2개 를 쓸 수 있어.

수상자 이름 출력하기

let students = ["누가있나", "손흥민있나", "박지성", "정더기", "정덕진"];
let awards = ["아자자", "정덕진"]; 

for (i = 0; i < students.length; i++) {
    for (j = 0; j < awards.length; j++) {

        if (students[i] == awards[j]) {
            console.log("수상자는" + " " + students[i] + "🙌")
        }
    }
}

3의 배수 출력하기

// ( ) 괄호 안이 단순하게, 조건 반복만을 결정하는 건 아님 
    // '동일 동작'을 유지하면서 '데이터가 어떻게 각 turn 마다 바뀌게 할지' 를 하는게 for 문 이라면
    // 괄호 안은 인덱싱 역할만 하는게 아니라, 그 자체로 data 가 나오는 곳이 된다. ⭐⭐⭐⭐⭐ 
    
for (num = 0; num <= 60; num++) {
    if (num % 3 == 0) {
        console.log (num + "이 숫자는 3의 배수 👍");
    }
    else {
        console.log (num + "이 숫자는 3의 배수는 아님 📛")
    }
}

--- ## 참고자료 - KGA_경일게임아카데미_블록체인과정_WEEK02_javascript ---

728x90

저작자표시 비영리 변경금지

'[WEB & AI] (feat. 취준) > 블록체인 개발자 과정_KGA' 카테고리의 다른 글

[git & github] 02. 1) branch 생성 및 merge 2) 다른 협업 팁 (feat. git, github, 형상 관리 도구) (0)	2023.03.11
[git & github] 01. 1) 깃헙 가입 및 설치 2) git 활용해서 1️⃣ pull 2️⃣ push 해보기 (feat. git, github, 형상 관리 도구) (2)	2023.03.07
[HTML&CSS] 04. 메가박스 영화 예매 페이지 만들기 (feat. input 과 label 태그, 형제 관계, sibling, 선택자의 중요성) (2)	2023.03.07
[HTML&CSS] 03. 유튜브 썸네일 만들기 (feat. 호버, hover, 개발자 도구의 중요성) (0)	2023.03.07
[HTML&CSS] 02. 게시판 만들기 (feat. html, css 선택자, css link, css input 태그) (0)	2023.03.07

'[WEB & AI] (feat. 취준)/블록체인 개발자 과정_KGA' Related Articles

Comments

Hello creators 🙌

[Javascript] 01. 기본 문법 요약 & 구구단 만들기, 수상자 출력, 3의 배수 코드 짜기 본문

[Javascript] 01. 기본 문법 요약 & 구구단 만들기, 수상자 출력, 3의 배수 코드 짜기

1️⃣ 이번 회차 학습 목표 (goal)

1. 배우고자 하는 것

2️⃣ 기초 문법 내용 요약

1. 웹 만들기 할 때, js 어디에 써? (작성 위치 및 연결)

1) 작성 위치

2) 연결방법

2. 변수

사용시 주의할 것

변수란?

메모리, ram 이란?

변수 선언

var 와 let 의 차이

값을 넣지 않고 변수의 이름을 먼저 선언 > 나중에 값을 넣기! ⭐⭐⭐

'선언' 및 '할당' 연습

자바스크립트에서 변수를 선언할 때, let var 선언문 을 꼭 사용

html 상에서 변수를 로그로 확인해보기

변수 이름 작성법

✅ 주의할 사항 / WIL

변수 이름 정하는 법

3. 데이터 타입 (data type)

✅ WIL / 주의할 사항 / 요약

data type 별 크기

data type 을 알아야 하는 이유

데이터 타입 별 byte 크기

4. 연산

1) 사칙연산

🤟 주의할 것 / WIL

사칙 연산 알아보기

2) ++, --, **

🤟 주의할 것 / WIL

++

-- , **

연습

시사점

3) 비교 연산자

🤟 주의할 것 / WIL

비교 연산자

5. if 비교문

🤟 알게 된 것 / WIL / 주의할 것

비교문 기본 내용

6. 반복문

🤟 주의할 것 / WIL / 요약

반복문 설명

🤯 미니 과제

구구단 만들기

수상자 이름 출력하기

3의 배수 출력하기

'[WEB & AI] (feat. 취준) > 블록체인 개발자 과정_KGA' 카테고리의 다른 글

티스토리툴바

자바스크립트에서 변수를 선언할 때, let var `선언문` 을 꼭 사용