TIL 6일차

 

1-1. 시작하기에 앞서 

 

1. 프로그래밍, 코딩이란? 

 

1) 엑셀, 노션, 쿠팡의 공통점

 

- 프로그래밍을 통해 만들어진 프로그램이라는 점 

- 프로그래머들이 "어떤 도구"를 이용해 컴퓨터가 작동시킬 수 있는 프로그램을 만들었고, 

우리는 마우스 클릭이나 키보드 입력과 같은 쉬운 방식으로 사용하는 것 

 

 

2) 입력 -> 처리 -> 출력 

 

- 마우스를 클릭하거나 키보드로 타이핑을 한다는 것은 데이터를 입력한다는 것

- 최종 구매를 하겠다는 버튼을 누르면 그 정보들은 어딘가에 저장이 되어서 처리가 될 것

- 모든 기록과 실시간 업데이트 상황이 화면에 "출력"되어 우리가 쉽게 확인을 할 수 있다. 

 

 

3) 프로그램이 하는 일

- 데이터의 입력 -> 처리 -> 출력 이런 3가지 일을 하는 것이 바로 프로그램이 하는 일 

 

 

4) 프로그래밍 

- 프로그램이 정해진 방식에 따라 일할 수 있도록 작성해놓는게 프로그래밍 

 

 

5) 코딩이란?

- 프로그램이 정해진 방식에 따라 일할 수 있도록 문법, 글에 맞게 작성하는 것

- 프로그래머들이 어떤 도구를 활용해서 코딩을 한다고 했는데 이 때 사용하는 도구가 바로 프로그래밍 언어

 

 

 

2. 프로그래밍 언어

 

1) 프로그래밍 언어의 특징 

- 인간이 사용하는 언어와 마찬가지로 프로그래밍 언어도 정해진 문법이 있기 때문에 정해진 문법에 따라서 우리가 작성을 해야 한다. 

- 그렇게 되면 컴퓨터가 이를 해석해서 데이터를 입력받고 처리하고 출력을 해서 우리가 마지막으로 확인할 수 있게 되는 것

- 프로그래밍 언어도 인간이 쓰는 언어처럼 매우 다양하고, 지속적으로 발전을 하고 있다. 

 

 

2) 자바스크립트란?

- 자바스크립트도 이런 프로그래밍 언어 중 하나 

- 이미 많은 사람들로부터 사랑받고 있고, 또 다양한 곳에서 널리 쓰이고 있는 언어 중에 하나

 

 

 

3. Node.js 란? 

- 노드란 우리가 자바스크립트 언어의 문법에 맞게 코딩을 했을 때 이것을 해석하는 일종의 컴퓨터 전용 번역기라고 할 수 있다. 

- node.js를 설치하게 되면 우리 컴퓨터에서 언제든지 쉽고 빠르게 자바스크립트 언어의, 자바스크립트 문법에 맞게 코딩된 파일들을 해석해서 그 결과물들을 바로 출력해줄 수 있다. 

 

 

 

 

1-2. Hello World

 

 

1. Hello World 출력하기 

 

- console.log('Hello World')

 

 

 

1-3. 변수

 

 

1. 변수 선언과 데이터 할당

 

 

1)변수?

 

- 프로그래밍 세계에서 어떤 값을 저장해놓고 사용하기 위해서 변수라는 것을 사용한다. 

- 변수는 저장해놓은 데이터 또는 값을 가리키는 일종의 이름표 같은 거

- 자바스크립트는 변수를 사용할 때 let이라는 키워드를 많이 사용한다. 

- let 변수이름 = 값 

- 우리는 이걸 보통 "변수 <변수이름>를 선언했고 해당 변수에 <값>을 할당했다."고 얘기한다. 

- 이렇게 변수를 사용하면 해당 데이터가 의미하는 바를 변수 이름을 통해 정확히 표현할 수 있고, 계속해서 재사용도 할 수 있는데, 이것들이 정확히 무엇을 의미하는지는 차근차근 감을 잡아보도록 하자. 

 

 

let name = 'Sinok Kim'     // name이라는 변수에 Sinrok Kim 이라는 값을 할당 

console.log(name)     // 변수 name이 가리키고 있는 값 Sinrok Kim을 출력 

 

name = 'William'     // 위에서 선언했던 name이라는 변수에 "William"이라는 값을 재할당 

console.log(name)      // 변수 name이 가리키고 있는 값 "William"을 출력 

 

 

 

2) const

- 자바스크립트에서는 변수를 선언하는 const라는 키워드도 있다. 

 

- const 변수이름 = 값 

- const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 쓴다. 

- 해당 변수가 고정된 값을 계속 갖고 있을 때 쓰면 좋겠죠?

 

 

const name = "Sinrok Kim"     // name이라는 변수에 "Sinrok Kim"이라는 값을 할당 

console.log(name)      // 변수 name이 가리키고 있는 값 "Sinrok Kim"을 출력

 

 

3) var

- var는 여러가지 단점들이 있기 때문에 더 이상 사용하지 않는다!

 

 

 

 

 

1-4. 데이터 타입

 

 

앞서 데이터를 변수에 할당하고 또 그 변수를 활용해서 데이터에 접근해서 출력해보는 작업을 해봤었음

자바스크립트에서는 여러 종류의 데이터 타입들을 미리 정해놨었음 

저희는 그 정해놓은 거에 따라서 데이터들을 잘 활용하면 된다. 

크게 기본 타입과 객체형 타입이 존재한다. 

 

 

1. 데이터 타입을 구분 짓는 이유 

- 세상에 정말로 많은 종류의 데이터들이 존재하기 때문에 이것들을 미리 구분지어 놓게 되면 컴퓨터가 보다 빠르고 효율적으로 데이터를 처리할 수 있게 된다. 

- 이런 것들 때문에 데이터타입을 미리 정해놓은 것

- console : 출력할 때 

 

 

2. 기본 또는 원시형(primitive)타입

 

 

1) 숫자 (number)

- 말 그대로 숫자 데이터!

- 나이, 거리, 무게, 가격 정말 무수히 많은 종류의 데이터를 숫자로 표현할 수 있다. 

 

 

console.log(10)     // 10을 출력 

 

const myAge = 37 

const yourAge = 25

 

console.log(myAge)     // 37을 출력

console.log(yourAge)     // 25를 출력 

 

 

 

2) 문자열 (string) 

- 말 그대로 문자열 데이터. 이중 따옴표(" ")나 작은 따옴표(' ')로 데이터를 감싸야 한다. 

- 이름, 브랜드명, 제품명.. 역시 많은 종류의 데이터를 문자열로 나타낼 수 있겠죠 

 

 

const firstName = 'Sinrok'

const lastName = 'Kim'

 

console.log(firstName)     // Sinrok을 출력

console.log(lastName)     // Kim을 출력

 

 

 

3) Boolean 

- 자바스크립트에서 참과 거짓을 나타내는 true / false를 표현하는 데이터 

- 나중에 배우게 될 비교연산자에서 많이 활용하게 된다. 

 

const isMan = true

const isWoman = false 

 

console.log(isMan)

console.log(isWoman)

 

 

 

 

4) null, undefined

 

- null은 텅텅 비어 있는 값을 의미합니다. 

- undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것

 

let name1 = null 

console.log(name)     // null을 출력 

 

let name2 

console.log(name2)      //undefined를 출력

 

 

 

 

 

1-5. 연산자(1)

 

 

1. 문자열 붙이기 

 

- + 를 사용하여 문자열을 이어 붙일 수 있다. 

- 추가로 문자열과 숫자를 이어붙이면 숫자가 문자로 인식된다.

 

console.log('My' + 'car')     // My car를 출력

console.log('1' + 2)     // 12를 출력 

 

 

 

 

2. 템플릿 리터럴(Template literals) 

 

- 백틱(``)을 사용하여 문자열 데이터를 표현할 수 있다. 

- 이중 따옴표나 작은 따옴표로 문자열을 표현할 때보다 간결하게 문자열 붙이기가 가능합니다. 

 

const shoesPrice = 200000

console.log(`이 신발의 가격은 ${shoesPrice}원입니다`)

// console.log('이 신발의 가격은' + shoesPrice + '원입니다') 와 동일 

// + 를 활용한 문자열 붙이기보다 간결하게 표현할 수 있음

 

 

 

 

3. 산술연산자(Numeric operators)

 

- 숫자 데이터에 대한 여러 연산들이 가능

- 우리가 일상생활에서 많이 쓰는 사칙연산(+,-,*,/) 뿐만 아니라 // (나머지 연산), ** (거듭제곱)도 있다. 

 

console.log(2 + 1)     // 3

console.log(2 - 1)      // 1

console.log(4 / 2)     // 2

console.log(2 * 3)     // 6

console.log(10 % 3)     // 나머지(remainder) 연산자. 1을 출력

console.log(10 ** 2)     // exponentiation. 10의 2승인 100을 출력 

 

 

 

 

4. 증감연산자 (Increment and Decrement operators) 

- 자기 자신의 값을 증가시키거나 감소시키는 연산자(++, ㅡ)

- 이 증감 연산자를 변수 앞에 놓느냐, 변수 뒤에 놓느냐에 따라 차이가 있는데 코들르 통해 확인하기

 

 

1) 증감연산자를 앞에 놓게 됐을 때

 

let count = 1

const preIncrement = ++count     // 먼저 자기 자신에게 1을 더해서 재할당한 후, 이를 preIncrement에 할당했다는 의미 

// count = count + 1

// const preIncrement = count 

console.log(`count: {count}, preIncrement: ${perIncrement}`)     // count: 2, preIncrement: 2

 

 

 

2) 증감연산자를 뒤에 놓게 됐을 때 

 

let count = 1

const postIncrement = count++  // postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당한다. 

// const postIncrement = count

// count = count + 1

console.log(`count: ${count}, preIncrement: ${preIncrement}`) 

// count: 2, preIncrement: 1

 

- 1을 증가시키거나 1을 감소시키는 연산자

- 변수에다가 1을 선언을 해놓고 변수 ++ => 1이 증가

- const a = 1

- a++;

- a = a + 1;

 

 

3) count 변수를 const가 아니라 let 구문으로 선언한 이유??

 

 - 우리가 증감연산자를 활용해 count의 값을 계속 증가시키고, 다시 count에 할당하고 있기 때문에 const를 사용하면 에러가 발생한다. 

 

 

4) 증감연산자 예시

const a = 1

a++;

a = a + 1;

 

 

5. 대입연산자 

 

- 앞서 어떤 값을 어떤 변수에 할당한다는 표현을 많이 했는데 그게 바로 대입연산자를 사용한다는 의미 

- 뿐만 아니라 +=, -= 같은 것들을 통해 연산과 대입을 한번에 할 수도 있다. 

 

 

 

 

 

 

1-6. 연산자(2)

 

 

1. 비교연산자 (Comparison operators)

 

- 말 그대로 숫자값을 비교하는 연산자. 그리고 이러한 비교연산자를 통해서 얻는 값이 바로 boolean!

- 뒤에서 배우게 될 조건문과 같이 많이 활용할 것

 

console.log(1 < 2)     // 1이 2보다 작은가? true

console.log(2 <= 2)     // 2가 2보다 작거나 같은가? true

console.log(1 > 2)     // 1이 2보다 큰가? false

console.log(1 >= 2)     // 1이 2보다 크거나 같은가? false 

 

 

 

2. 논리연산자 (Logical operators) 

 

- || (or), &&(and), !(not)과 같은 연산자를 말함. 이것 역시 조건문과 찰떡궁합

 

 

1) || 

- 연산 대상 중 하나만 true 여도 true 리턴 

 

 

2) &&

- 연산 대상이 모두 true 여야만 true 리턴 

 

 

3) !

- true를 false로, false를 true로 바꿔서 리턴 

 

 

4) 예시

 

let isOnSale = true

let isDiscountItem = true 

 

console.log(isOnSale && isDiscountItem)     // true && true 이므로 true

console.log(isOnSale || isDiscountItem)       // true || true 이므로 true 

 

isOnSale = false

console.log(isOnSale && isDiscountItem)     // false && true 이므로 false 

console.log(isOnSale || isDiscountItem)       // false || true 이므로 true 

 

isDiscountItem = false

console.log(isOnSale && isDiscountItem)     // false && false 이므로 false 

console.log(isOnSale || isDiscountItem)       // false || false 이므로 false

 

 

console.log(!isOnSale)     // !false 이므로 true 

 

 

 

 

3. 일치연산자 (Equality operators) 

 

 

1) 두 값이 일치하는지 비교하기 

 

console.log(1 === 1)      // true

console.log(1 === 2)      // false

console.log('Javascript' === 'Javascript')     // true

console.log('Javascript' === 'javascript')     // 대소문자나 띄워쓰기도 다 정확히 일치해야함. 따라서 false 

 

 

 

2) 일치연산자 ==

 

(1) 일치연산자는 == 를 안 쓰는 이유 

자바스크립트에는 두 가지의 일치연산자가 있다.

우리가 배운 === 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴합니다.

반면 == 는 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있어요. 이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 쓰지 않고 있습니다.

 

 

(2) == 과 === 의 차이 확인해보기

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

 

 

 

 

Q. 상품 가격을 나타내는 2개의 변수를 선언하고 각각의 변수에 원하는 가격값을 할당해보자. 

두 상품을 더한 가격 역시 총가격을 나타내는 변수에 할당해본다. 

마지막으로 총가격의 20% 할인된 가격을 구해서 '총 몇 원에 물건을 구입합니다.' 라는 문자열을 출력한다. 

 

const shoesPrice = 200000

const capPrice = 100000

const totalPrice = shoesPrice + capPrice 

 

console.log(`총 ${totalPrice * 0.8}원에 물건을 구입합니다.`) 

 

 

 

 

 

1-7. 조건문(1)

 

1. if

 

1) if 조건문이란?

- if 구문을 활욜해 조건을 만족했을 때만 코드를 실행하도록 할 수 있다. 

이 조건의 결과값이 바로 앞서 우리가 배운 Boolean을 리턴하는 연산자는 비교연산자, 논리연산자, 일치연산자가 있다. 

 

 

2) if(조건) {조건을 만족할 때 실행할 코드}

 

const shoesPrice = 40000

if (shoesPrice < 50000) { // 신발 가격이 50000원보다 작으므로 해당 코드가 실행됨

     console.log('신발을 사겠습니다.')

}

 

const capPrice = 50000

if (capPrice < 50000) {

     console.log('모자를 사지 않겠습니다.')     // 모자 가격이 50000원보다 작지 않으므로 해당 코드가 실행되지 않음

 

 

 

 

2. 들여쓰기 

 

- 코드를 최종적으로 해석하는 것은 컴퓨터이지만 이 코드를 읽고 작성하는 주체는 우리와 같은 사람.

그래서 코드를 작성할 땐 가독성을 최대한 높일 수 있도록 하는 게 좋다.

 

 

 

 

 

 

 

1-8. 조건문(2)

 

 

1. else

 

1) else 구문의 쓰임새

- if 구문의 조건을 만족하지 않았을 때 실행하고 싶은 코드를 else 구문과 함께 작성합니다.

 

const shoesPrice = 50000

if (shoesPrice < 40000) {

     console.log('신발을 사겠습니다.')

} else {

     console.log('너무 비싸요. 신발을 사지 않겠습니다.')

}

 

 

2) else if 구문

- else if 구문을 활용하면 보다 더 많은 조건을 판단하고 코드를 실행할 수 있다. 

 

const shoesPrice = 50000

if (shoesPrice < 40000) {

     console.log('신발을 사겠습니다.')

} else if (shoesPrice <= 50000) {

     console.log('고민을 해볼게요...')

} else {

     console.log('너무 비싸요. 신발을 사지 않겠습니다.')

}

 

 

 

 

 

 

2-1. 반복문(1)

 

 

1. while 

 

1) 반복문 활용

 

- 반복문을 활용해서 특정 코드를 반복해서 실행할 수 있다. 

이 때 조건을 설정해서 우리가 원하는 만큼만 반복할 수 있도록 합니다.

 

while(조건) {조건을 만족할 때 실행할 코드}

 

 

2) while 반복문 예시

 

let temperature = 20 

while (temperature < 25) {

     console.log(`${temperature}도 정도면 적당한 온도입니다.`)

     temperature++

}

 

 

 

2. 반복 무한 루프에 빠지지 말기

 

1) 여기서 주의할 것 ! 

- 반복문의 조건에 포함된 변수의 값을 계속 변화시켜줘서 언젠가는 반복문이 끝날 수 있도록 해줘야 한다. 

- 위의 코드에서도 온도를 1도씩 계속 올려서 반복문의 조건이 언젠가는 false를 리턴하고 바디의 코드가 실행되지 않습니다. 반복문의 조건이 계속해서 true를 리턴한다면 무한루프에 빠져서 프로그램이 끝나지 않는다. 

 

2)무한루프에 빠졌을 땐?

- ctrl + c 누르기!!

 

 

 

 

2-2. 반복문(2)

 

 

1. for 문 

 

1) for의 특징 

- while 과 같은 반복문. 좀 더 명시적으로 반복문의 조건을 표현할 수 있다. 

- for(begin; conditionl step) {조건을 만족할 때 실행할 코드}

 

for (let temperature = 20; temperature < 25; temperature++) {

     console.log(`${temperature}도 정도면 적당한 온도입니다.`)

}

 

 

2) for문이 실행되는 순서 

 

(1) temperature라는 변수를 선언하고 값을 할당한다. (begin)

 

(2) temperature가 25보다 작은지 연산한다. 결과값이 true라면 계속 실행, false라면 for문 종료 (condition) 

 

(3) 중괄호 안의 코드가 실행된다. 

 

(4) temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복한다. (step) 

 

 

 

 

 

 

오늘은 매우매우 할만했음 !!

이번주는 시작이 좋다