스파르타코딩클럽 내일배움캠프 6일차

새로운 챕터 시작

지난 주, 일주일 내내 진행했던 첫 번째 프로젝트가 끝이 났다.

주말동안 WIL도 작성하고 다면평가, KPT 회고까지 마무리되고 나니 새롭게 또 다른 시작이었다.

9시부터 줌에서 새로운 발제를 시작했는데,

지난 금요일에 했던 수많은 작별 인사가 무색하게도 오늘까지는 같은 조였다 ㅋㅋㅋ

그래서 머쓱하게 다시 인사하고 원래 있단 자리로 돌아와 강의를 시작했다.

 

시간표에서는 파이썬 강의를 듣는 시간이었는데,

강의가 아직 지급되지 않아서인지 자바스크립트 기초 강의부터 듣기 시작했다.

아래에는 내가 강의를 들으면서 나름대로 정리한 내용을 기록한다.

 

 

변수

• 변수 : 저장해놓은 데이터를 가리키는 이름표
• const ⇒ 변수에 값을 재할당 할 필요하가 없을 때 사용
• var : let, const 이전에 사용

let name = 'Kim'
console.log(name)  // Kim

 

 

데이터 타입

• 문자열 (String)
• Boolean : true / false
• null : 텅텅 비어 있는 값
• undefined : 변수를 선언만 하고 값이 할당되어 있지 않은 것

 

 

연산자

• 문자열 붙이기
  • + 를 사용하여 이어 붙일 수 있다
    • 문자열 + 숫자 ⇒ 숫자가 문자로 인식
  • 템플릿 리터럴 (Template Literals)
    • 백틱(``)을 사용하여 문자열 데이터 표현

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

 

• 산술 연산자 (Numeric operators)
  • 숫자 데이터에 대한 여러 연산
  • 사칙 연산 (+, -, *, /) , //(나머지 연산), ** (거듭제곱) 등
• 증감 연산자 (Increment and Demrement operators)
  • 자기 자신의 값을 증가시키거나 감소시키는 연산자 (++, --)

let count = 1
const preIncrement = ++count
// 자기 자신에게 1을 더해서 재할당한 후 preIncrement에 할당
console.log(preIncrement)  // 2

let count2 = 1
const postIncrement = count++
// postIncrement에 1(자기자신)을 할당하고 이후에 1을 더해서 재할당
console.log(postIncrement)  // 1

• 대입 연산자 (Assignment operators)
  • 어떤 값을 어떤 변수에 할당한다 = 대입연산자를 사용한다
  • +=, -= 로 연산과 대입을 한 번에 할 수 있다
• 비교 연산자 (Comparison operators)
  • 숫자값을 비교하는 연산자
  • 이를 통해 얻는 값이 boolean
• 논리 연산자 (Logical operators)
  • || (or) : 연산 대상 중 하나만 true 여도 true 리턴
  • && (and) : 모두 true여야 true 리턴
  • ! (not) : true를 false로, false를 true로 바꿔서 리턴
• 일치 연산자 (Equality operators)
  • 두 값이 일치하는지 비교

  /*
  == : 비교하는 두 값의 데이터타입이 일치하지 않아도 해당 값의 데이터타입을 자동으로 변환해주기 때문에 실무에서 거의 쓰지 않음
  === : 엄밀한(strict) 일치연산자 (두 값의 데이터 타입과 값 자체가 정확히 일치해야 true 리턴
  */
  
  console.log(1 === "1")  // false
  console.log(1 == "1")  // true (오류 발생 가능)

 

 

+)

증감 연산자 헷갈리지 말것!

한 번 잘못 생각하면 계속 헷갈리니까 까먹지 말기...!!

 

 

 

조건문

• if (조건) { 조건 만족 시 실행 코드 }
• if , else if

const shoesPrice = 50000

if (shoesPrice < 40000) {
	console.log('신발을 사겠습니다')
}
else if (shoesPrice <= 50000) {
	console.log('고민 중...')
}
else {
	console.log('사지 않겠습니다')
}

 

 

 

반복문

• while
  • 특정 코드를 반복해서 실행 가능
  • 무한루프에 빠지지 않도록 반복문이 끝나도록 해야 한다
• for
  • 명시적으로 반복문의 조건 표현 가능
  • for (begin; condition; step) { 실행 코드 }

  for (let temprature = 20; temperature < 25; temperature++) {
  	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
  }
  

 

 

반복문과 조건문 활용

• 입력된 데이터에 대해 조건문을 활용해 수많은 조건으로 분기하고 반복문을 활용해 반복해서 처리하는 게 프로그램이 주로 하는 일이기 때문

// 1 ~ 10까지 숫자 중 3으로 나누었을 때 나머지가 0인 숫자 출력
for (let number = 1; number <= 10; number++) {
	if (number % 3 === 0) {
		console.log(`${number}는 3으로 나누어 떨어지는 숫자입니다.`)
	}
}

 

 

함수

• 특정 작업을 수행하는 코드의 집합
• 함수의 선언
• 함수의 호출
  • 함수를 사용하기 위해서는 함수를 호출해야 한다.

// 함수 선언
function calculateAvg(price1, price2) {
	const num = price1 + price2
	console.log(`두 상품의 합계는 ${num}입니다.`)
	
	const avg = sum / 2
	return avg  // 평균 가격 return
}

const priceA = 1000
const priceB = 2000

// 함수 호출
const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)

 

 

클래스와 객체

• 객체(Object) 타입
  • 관련있는 데이터들을 묶어서 잘 나타낼 수 있는 데이터 타입
• 클래스(Class) 선언
  • 객체를 만들 때 사용하는 것
  • 클래스 = 템플릿, 객체 = 구체화한 것
  • 클래스를 미리 정의해놓으면 필요할 때마다 동일한 모양을 가진 객체를 만들 수 있다. (재사용성)

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

  • 생상자 (constructor)
    • 객체가 ‘생성’될 때 자바스크립트 내부에서 호출이 되는 함수
  • this와 속성(property)
    • this : 클래스를 사용해 만들어질 객체 자기 자신을 의미
    • 생성자의 바디에서는 함수 호출 시 전달할 매개변수(name,price..)를 객체의 속성에 각각 할당하고 있는 것이다.

• 메소드 (method)
  • 클래스에는 데이터(값)을 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있다
  • 객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 된다
• 객체 리터럴 (Object Literal)
  • 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법
  • 2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별

---

예제

// 의류 쇼핑몰 예시
class Cloth {
	constructor(color, size, price) {
		this.color = color
		this.size = size
		this.price = price
	}

	printInfo() {
		console.log(`색깔: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
	}
}

const shirts = new Cloth('white', 'M', '50000')
const coat = new Cloth('navy', 'L', '200000'

shrits.printInfo()
coat.printInfo()

 

 

 

추가 공부

자바스크립트 기초를 완강하고 난 뒤, 자료구조 강의를 들으려고 했는데

버그가 생겨서 듣지 못하고 기초 강의를 다시 정리하면서 복습했다.

 

추후 자료구조 강의 1주차를 듣고 있었는데,

아무래도 파이썬 문법을 다시 복습하고 조금 더 훈련하고 들어야겠다는 생각이 들어서 중간에 멈췄다.

 

대신 예전에 들었던 유튜브 강의 정리했던 노션에 다시 들어가서 복습도 해보고

1주차에 나왔던 두 문제를 내 식대로 다시 풀어보기도 하니까 시간이 금방 갔다.

 

내일도 아마 그렇게 강의를 듣고 공부하는 식으로 흘러갈듯 싶다.

새로운 조 편성이 내일로 미뤄져서 내일에서야 뭔가 새로운 시작을 하는 것 같은 기분이 든다.

많이 친해진 지금의 조원분들이랑 헤어지는 건 아쉽지만, 완전 굿바이는 아니니까.

내일의 새로운 조원들은 어떤 사람들일까.

혼자 공부하는 것보다 카메라 키고 공부하느나게 확실히 동기부여도 되고 좋은듯 하다.

 

월요일을 견뎌냈으니, 내일도 견뎌보는 걸로...!!