항해99 사전스터디 일지2

1. 이번주 스터디

- 이번 주는 웹개발종합반 2회독을 완료하여 복습과 자바스크립트 문법 강의를 들었다. 2회독만으로 사전테스트를 어렵지 않게 할 수 있을까 하는 불안감도 있지만, 조금이라도 익숙하기 위해 복습을 했지만, 귀차니즘이 몰려와서 공부를 하는 건가 마는 건가 했다. 토이프로젝트를 통해 실제 코드를 작성하면서 공부하는 게 필요한 듯 싶다. 월요일 미팅 때는 다같이 토이프로젝트 일정에 대해서 논의하였으며, 진도에 대해서 공유하였다.

2. 자바스크립트 문법 정리

1) 연산자 정리

(1) 산술 연산자

• 숫자 데이터에 대한 여러 연산들이 가능해요 우리가 일상생활에서 많이 쓰는 사칙연산(+, -, *, /) 뿐만 아니라 // (나머지 연산), ** (거듭제곱) 도 있습니다.
  

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을 출력
//짝수, 홀수를 검증할 때는 ( 2 % === 0) 등으로 활용함. 
console.log(10 ** 2) // exponentiation. 10의 2승인 100을 출력

(2)증감연산자

• 자기 자신의 값을 증가시키거나 감소시키는 연산자(++, —)라고 생각하시면 좋을거 같아요.
  이 증감연산자를 변수앞에 놓는냐, 변수뒤에 놓느냐에 따라 차이가 있는데요, 코드를 통해 확인해보도록 할게요.

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) 
// count: 2, preIncrement: 2 (결과)

//////////

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) 
// count: 2, postIncrement: 1

• 말그대로 ++가 앞에 올 경우에는 먼저 연산한 후에 할당을 하고, ++ 등이 뒤에 올 경우 먼저 변수를 먼저 할당하고 그 다음에 연산을 하여 재할당 함.

(3) 대입연산자

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

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

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice)
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice)

totalPrice -= shirtsPrice // totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice) 

(4) 비교 연산자

• 말 그대로 숫자값을 비교하는 연산자예요! 그리고 이러한 비교연산자를 통해서 얻는 값이 바로 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) if 구문

• 논리(Boolean)를 반환해주는 문법임.

• if(조건문) { }로 작성하며, 소괄호(_) 다음에 나오는 중괄호{__}를 body라고 부름

• 대표적인 if 예시

const shoesPrice = 40000
if (shoesPrice < 50000) { // 신발 가격이 50000원보다 작으므로 해당 코드가 실행됨
	console.log('신발을 사겠습니다.')
}

3) if else 구문

• if를 만족하지 못하였고, 두번째 조건도 만족하지 못하였을 때 else를 통해 값을 반환하며,
• 다양한 경우의 논리구조를 만들어낼 수 있음.

const shoesPrice = 50000
if (shoesPrice < 40000) { 
	console.log('신발을 사겠습니다.')
} else if (shoesPrice <= 50000) {
	console.log('고민을 해볼게요...')  // 신발 가격이 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행됨
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}

4) while과 for

 (1) while: 조건문을 반복하여 실행 시킴

let temperature = 20
while (temperature < 25) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
	temperature++ // 증감연산자를 활용해서 온도를 변화시킵니다.
}

• 주의사항: 여기서 주의할 것은 반복문의 조건에 포함된 변수의 값을 계속 변화시켜줘서 언젠가는 반복문이 끝날 수 있도록 해줘야 한다는 겁니다. 위의 코드에서도 온도를 1도씩 계속 올려서 반복문의 조건이 언젠가는 false를 리턴하고 바디의 코드가 실행되지 않습니다. 반복문의 조건이 계속해서 true 를 리턴한다면 무한루프에 빠져서 프로그램이 끝나지 않습니다!

  (2) for: while과는 다르게 조금 더 명확하게 조건문을 표시할 수 있어 for문을 많이 사용함.

for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}
/////
for( let i = 0;  i < i <변수.length; i++){ } //->대표적인 for 구문 

(3) for와 if문의 활용

• for문의 body 안에 if문을 작성함.)

for (let number = 1; number <= 10; number++) {
	if (number % 3 === 0) {
		console.log(`${number}는 3으로 나눠서 떨어지는 숫자입니다.`)
	}
}

5) 함수

(1)함수의 특징

• 함수는 특정 작업을 수행하는 코드의 집합이라고 볼 수 있습니다.
  잠시 코드를 통해서 이 함수라는게 왜 필요한 것인지 생각해보도록 할게요.

• 이렇게 반복되는 특정 작업을 수행해야 한다면 그 코드 자체를 어딘가에 만들어서 저장해놓고 사용할 수 있지 않을까요? 마치 변수에 데이터를 할당해놓고 계속 사용하는 것처럼요. 바로 이 때 등장하는게 함수입니다!

// 함수의 선언
function calculateAvg(price1, price2) {
	const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
	console.log(`두 상품의 합계는 ${sum}입니다.`)
	const avg = sum / 2
	return avg // 평균가격을 리턴!
}

6) 클래스와 객체

(1)객체

• 관련있는 데이터들을 묶어서 한번에 잘 나타낼수 있는 데이터 타입은 없을까? 노트북 전문 쇼핑몰을 생각해볼게요. 여기서 파는 모든 노트북들은 이름, 가격, 제조사와 같은 데이터들을 가지고 있을 겁니다. 그런데 이러한 것들을 기본 타입만으로 표현한다면 그 데이터들을 묶어서 표현한다는 게 쉽지 않습니다.

• 객체 예시

const notebook1Name = 'Macbook'
const notebook1Price = 2000000
const notebook1Company = 'Apple'

• 이 때 사용하는 데이터 타입이 바로 객체 타입 입니다. 객체를 좀 어렵게 얘기하면 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것' 을 의미합니다. 위의 예시 코드를 통해 다시 생각해보면 노트북1은 이름, 가격, 제조사라는 자신만의 속성을 갖고 있고 다른 노트북들과 식별 가능한 것이니 객체로 나타낼 수 있는 것이죠!

(2) 클래스

• 객체를 만들때 마치 설계도처럼 사용하는 것이 바로 클래스입니다. 그래서 흔히들 클래스는 템플릿이고 객체는 이를 구체화한 것이라고도 하죠. 우리가 함수를 정의하고 해당 함수를 필요할 때 계속 사용할 수 있었다는 것 기억하시나요? 마찬가지로 클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있습니다.

• 클래스 선언

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}

1. class 키워드와 클래스명

   class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나옵니다. 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋겠죠? 위의 예에서 Notebook 대신 Person 같은 이름을 쓴다면 다른 사람들이 코드를 봤을 때 이상하다고 생각할 겁니다.

2. 생성자 (constructor)

   중괄호 안에는 생성자라는 것을 적어줍니다. 혹시 생성자가 함수와 많이 비슷하다는 것 눈치채셨나요? 이 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각해주시면 됩니다. 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고 각각의 이름은 name, price, company 네요.

3. this와 속성(property)

   생성자의 바디를 보면 this 라는 키워드가 등장하네요. 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성입니다.
   생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것입니다.

(3) 메소드

• 클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있습니다.

// 클래스 선언
class Product {
	constructor(name, price) {
		this.name = name
		this.price = price
	}

	printInfo() {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원

(4) 객체 리터럴

• 자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있습니다. 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이라고 생각해주시면 될 거 같아요. 2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주는 게 좋습니다.

const computer = {
	name: 'Apple Macbook',
	price: 20000,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

결과적으로는 클래스를 활용해 객체를 만든 것과 동일합니다. 그렇다면 왜 굳이 복잡하게 클래스를 정의하는 걸까요? 바로 재사용성 때문입니다. 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있습니다.

7) 배열

• 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는 데이터의 수만큼 변수들을 선언해줄 수밖에 없었습니다. 이 때 쓰는 것이 바로 배열입니다. 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입이라고 기억해두시면 좋을거 같아요!

  * 배열의 선언

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)
//1번째 방법은 앞서 우리가 클래스를 활용해 
//객체를 만든 것과 똑같음

// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]
//대괄호 안에 우리가 배열로 저장할 
//데이터를 쭉 나열해주면 됩니다. 

—배열 안의 데이터의 경우 엘리먼트(element)라고 부르며, 개별 호출을 할 경우에는 ‘.log(rainbowColors[0])’ 이런 식으로 호출함. 아래 참조.

• 배열의 길이를 확인할 경우 .length 속성을 사용함
• *예시

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

console.log(rainbowColors.length) // 7을 출력

console.log(rainbowColors[rainbowColors.length - 1]) 
// length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능!

• 배열 삭제 및 추가

3. 어려웠던 부분

• 전반적으로 클래스에 대한 개념이 이해하기가 어려웠음. 그 외의 문법의 경우에는 웹개발종합반과 파이썬문법을 통해 눈에 익은 문법들이라 어렵지는 않았음.

4. 다음주 각오

• 다음주부터 토이프로젝트에 돌입하기로 조원들과 협의를 하였음. 토이프로젝트에서 자율적으로 공부하고 적용할 수 있는 다음주차가 되었으면 함.