[스파르타 _ 리액트 과정] 6일차

et Ji·2022년 11월 7일
TIL내배캠 리액트스파르타 코딩클럽
0

TIL

목록 보기
11/40

📜 진행 내용

  • [강의수강] 자바스크립트 문법 뽀개기
    ※강의 순서는 다른 강의와 달리 배열의 순서를 뒤로 한 부분이 의미가 있어서 기재함.
    - 변수
    - 연산자
    - 조건문
    - 반복문
    - 함수
    - 클래스와 객체
    - 배열

💡 배운내용

1-6~7. 연산자

  • 증감 연산자

    • 증감 연산자를 사용할 변수 데이터는 증가/증감시키고 다시 할당하는 변화가

      생기기 때문에, **반드시 let으로 선언할 것**
      {
  let count = 1;
  const preCount = ++count;
  // count = count + 1;
  // const preCount = count;
  // 먼저 자기 자신에게 1을 더해 재할당한 후, 이를 preCount에 할당.

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

{
  let count = 1;
  const preCount = count++;
  // const preCount = count;
  // count = count + 1;
  // 먼저 preCount에게 자기 자신의(count) 값을 할당한 후, 이후에 1을 더해서 자기 자신에게(count) 재할당

  console.log(`count: ${count}, preCount: ${preCount}`);
}
  • 일치 연산자 : === , ==

    • == 연산자로 비교를 하면, 두 값의 데이터 타입이 일치하지 않을 때, 해당 값의 데이터 타입을 자동으로 변환해주는 자바스크립트의 특성이 반영된다.

    • 타입까지 비교해주는 엄격한(strict) 비교 연산자 '==='를 사용해야 코드작성의 실수를 줄여준다.

      {
  console.log(1 === 1);
  console.log(1 === 2);
  // * 문자열의 경우, 띄어쓰기나 대소문자 구분도 일치해야 true로 반환한다.
  console.log('Javascript' === 'Javascript'); 
  console.log('Javascript' === 'javascript');
}

// === 와 ==의 차이
{
	console.log(1 === '1') // false
	console.log(1 == '1') // true
}

🔊 퀴즈

상품 가격을 나타내는 2개의 변수를 선언하고 각각의 변수에 원하는 가격값을 할당해보아요.
두 상품을 더한 가격 역시 총가격을 나타내는 변수에 할당해봅니다.
마지막으로 총가격의 20% 할인된 가격을 구해서 '총 몇 원에 물건을 구입합니다.' 라는 문자열을 출력합니다.

>나의 풀이

const itemPrice = 350000;
const itemPrice2 = 400000;

let sumPrice = itemPrice + itemPrice2;

let salePrice = sumPrice - sumPrice * 0.2;

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

>강의 풀이

const shoePrice = 200000;
const capPrice = 100000;
const totalPrice = shoePrice + capPrice;

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

1-8~9. 조건문

  • if(조건) {조건 만족시 실행코드}
    • {}의 코드(바디)를 들여쓰기하는것은 가독성을 위함으로 코드 해석에는 영향이 없다.

🔊 퀴즈

거리를 의미하는 변수를 선언하고 원하는 숫자값 (단위는 km라고 가정) 을 할당합니다.
2km 미만이면 "걸아가자"를, 2km 이상이고 5km 미만이면 "택시를 타자"를,
그 외에는 "기차를 타자"를 출력해봅니다.

>나의 풀이 (강의 풀이와 동일)

const distance = 1;

if (distance < 2) {
  console.log('걸어가자');
} else if (distance >= 2 && distance < 5) {
  console.log('택시를 타자');
} else {
  console.log('기차를 타자');
}

1-10~11. 반복문

  • while
    • while(조건){조건 만족시 실행코드}
    • 조건을 설정해서 원하는 부분만 반복할 수 있도록 하는 것이 중요
    • while문은 바디에서 변수의 증가/증감을 해주어 조건이 끝날 수 있도록 해주어야한다.
      • 실수로 무한루프 발생시 ctrl + c 눌러서 종료하기
  • for
    • for(begin; condition; step){조건 만족시 실행코드}
    • while과 같은 반복문이지만, 좀더 명시적으로 반복문의 조건을 표현할 수 있다.

1-12. 반복문과 조건문의 만남

🔊 퀴즈

1부터 20까지의 숫자중 홀수인 경우는 '숫자 ...은 홀수입니다.'를
짝수인 경우는 '숫자 ...은 짝수입니다' 를 출력하는 프로그램을 작성해봅니다.

>나의 풀이 (강의 풀이와 동일)

for (let number = 1; number <= 20; number++) {
  if (number % 2 === 0) {
    console.log(`숫자 ${number}는 짝수입니다.`);
  } else {
    console.log(`숫자 ${number}는 홀수입니다.`);
  }
}

1-13~14. 함수

  • 변수에 데이터를 할당하여 계속 사용하는 것처럼, 특정 작업을 반복해서 사용하기 위해 함수를 사용한다.
  • 선언
    • function 함수명(매개변수들...) { 이 함수에서 실행할 코드들 return 반환값
      }
  • 호출
    • const 변수명 = 선언한 함수명(매개변수들..)

🔊 퀴즈

세 개의 물건가격을 매개변수로 전달받아 평균값을 리턴하는 함수를 정의하고,
그 함수를 호출해서 평균값을 출력해보세요.

>나의 풀이

function calculateAvg(price1, price2, price3) {
    const sum = price1 + price2 + price3;
    return sum / 3;
  }

  const a = 1000;
  const b = 3000;
  const c = 5000;
  const avg = calculateAvg(a, b, c);

  console.log(`평균가격은 ${avg}입니다.`);

>강의 풀이

function calculateAvg(price1, price2, price3) {
    const avg = (price1 + price2 + price3) / 3;
    return avg;
  }

  const a = 1000;
  const b = 2000;
  const c = 3000;
  const avg = calculateAvg(a, b, c);

  console.log(`평균가격은 ${avg}입니다.`);

1-15~16. 클래스와 객체

  • 객체(Object) 타입
    • 관련있는 데이터들을 묶어서 한번에 잘 나타낼 수 있는 데이터 타입!
    • 메서드(Method) : value는 어떤 값(문자열, 숫자, 객체, 함수 등)이든 상관없다.
      객체에 함수를 정의할 경우, 속성값(value)이라 하지 않고 메서드(Method)라 한다.
    • key는 문자열만 가능하며, 문자열이지만 따옴표가 없어도 된다.
      다만 띄어쓰기가 있는 경우 따옴표가 있어야 됨.
  • 클래스(Class)

    • 객체를 만들 때 설계도처럼 사용하는 것. 클래스는 템플릿 객체는 이를 구체화한 것이라고도 한다.

    • 함수를 정의하고 그 함수가 필요할 때마다 호출해서 재사용하듯이,
      클래스를 정의해놓으면, 해당 클래스와 동일한 모양의 객체를 만들 때마다
      클래스를 이용하면 된다.

      👉 선언시 첫글자는 대문자!

      // 클래스 만들기

class Notebook {
constructor(name, price, company) {
[this.name](http://this.name/) = name;
this.price = price;
this.company = company;
}

    • 클래스를 이용해 객체 만들기

      • const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)
        const notebook1 = new Notebook('Macbook', 2000000, 'Apple');
console.log(notebook1);
console.log([notebook1.name](http://notebook1.name/));
console.log(notebook1.price);
console.log(notebook1.company);
}

    • 객체 리터럴로 객체 만들기
      - const 변수명 = { 속성명: 데이터, 메소드명: function () { 메소드 호출시 실행할 코드들 } }

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

      🔊 퀴즈

      여러분만의 의류 쇼핑몰을 만들려고 합니다. 옷의 종류는 많지만 기본적으로
      색깔, 사이즈, 가격의 속성을 갖고 있네요. 그리고 이 옷들의 세 속성을 바로
      확인할 수 있게 출력해주는 메소드가 필요할 거 같습니다.
      클래스와 객체를 활용해 작성해보아요.

      >나의 풀이(강의풀이와 클래스명/변수명만 상이)

      class Cloth {
    constructor(color, size, price) {
      this.color = color;
      this.size = size;
      this.price = price;
    }

    printInfo() {
      console.log(
        `color: ${this.color}, size: ${this.size}, price: ${this.price}`
      );
    }
  }

  const longCoat = new Cloth('red', 's', '250000');
  const pants = new Cloth('white', 'm', '170000');
  longCoat.printInfo();
  pants.printInfo();

1-17. 배열

  • 같은 형식의 많은 데이터를 하나의 변수에 순서대로 할당하여 관리하기
    위해 사용하는 데이터 타입의 하나

  • 배열의 선언

    • 클래스를 활용해 객체를 만든 것과 똑같다.
      자바스크립트가 내부적으로 가지고 있는 Array라는 클래스를
      활용한 것이다!
      const arr1 = new Array(1, 2, 3, 4, 5);
    • '[ ]' 사용, 이 방법을 많이 사용함.
      const arr2 = [1, 2, 3, 4, 5];

  • 배열안의 데이터
    배열에 있는 데이터 각각을 요소(element)라고 부른다.
    객체의 속성명처럼 요소들에 접근하기 위해서는 배열에서는 인덱스(index)
    가 동일한 역할을 한다. 인덱스는 배열 안의 데이터들이 자리잡은 순서라고 생각할 것.

  • 배열의 길이 : length

    {
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue'];
console.log(rainbowColors.length);
// 끝요소 출력은 인덱스 자리에 length - 1
console.log(rainbowColors[rainbowColors.length - 1]);
}

※ 배열은 객체이므로 속성(인덱스)과 메서드를 가지고 있다.

  • 배열과 반복문
    배열 요소를 하나씩 꺼내서 출력한다고 가정할 때, 좀더 간결한 방법은?
    바로 반복문이다.

    • for 반복문

          const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue'];
    for (let i = 0; i < rainbowColors.length; i++) {
    console.log(rainbowColors[i]);
    }
  • for of : 배열과 함께쓰이는 간단한 반복문
    자동으로 배열의 끝까지 반복문이 실행되기 때문에 첫번째 for문보다 사용하기 편하다.
      {
      const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue'];

      for (const color of rainbowColors) {
      console.log(color);
      }
      }

🔊퀴즈

열 개의 상품 가격 데이터를 갖고 있는 배열을 만듭니다.
반복문을 활용해 상품들의 가격 합계와 평균을 구해보아요.

> 나의 풀이

{
const itemPrice = [
1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000,
];

let totalPrice = 0;

for (const price of itemPrice) {
	totalPrice += price;
}
console.log(totalPrice / itemPrice.length);
}

> 강의 풀이

{
const priceList = [
1000, 2000, 5000, 7000, 10000, 9000, 3000, 15000, 20000, 17000,
];

let sum = 0;

for (const price of priceList) {
sum += price;
}

const avg = sum / priceList.length;

console.log(`합계: ${sum}, 평균: ${avg}`);
}

❎ 한 번 더 공부할 내용

  • 클래스 예제문제로 더 풀어보기

🎯 문제와 해결

  • 오늘 원래 시간표대로라면, 파이썬을 수강하는 날이었는데 운영에 차질이 있어서 급 자바스크립트 문법 강의를 듣는 날이 되었다. 기초 다지는 개념이라, 다 듣고 다른 온라인 수업으로 파이썬 살짝 공부했다.

🔗 출처

  • 스파르타코딩클럽 - 자바스크립트 문법 뽀개기 강의
profile
et Ji
codesign
이전 포스트

[스파르타 _ 리액트 과정] 5일차

다음 포스트

[스파르타 _ 리액트 과정] 7일차

0개의 댓글