[포스코 x 코딩온] 웹 개발자 부트캠프 4주차 수업 회고

🐯  포스코 x 코딩온 웹개발자 부트캠프 4주차 수업 회고 

 

1. 배열

4주차 첫번째로 순서있는 리스트인 배열에 대하여 배웠다.

배열을 선언하고 배열에 접근하는 방법에 대하여 알아보았고 배열에 사용할 수 있는 length, push, pop, shift 등 메서드를 알아보면서 배열을 사용하는 이유와 더 효율적으로 사용할 수 있는 법을 배울 수 있었다.

 

배열 실습

const kdt = ["박지원", "김민정", "송민영", "이찬호"];

kdt.push("지원"); //배열 끝에 추가
console.log(kdt);

kdt.pop(); // 배열 끝 요소 제거
console.log(kdt);


kdt.unshift("지원"); //배열 앞에 추가
console.log(kdt);

kdt.shift("지원"); //배열 앞 요소 제거
console.log(kdt);

for (let i = 0; i < kdt.length; i += 1) {
  console.log(`5번째 줄의 ${i + 1}번째 참여자의 이름은 ${kdt[i]} 입니다. `);
}
// 반복문을 통해 같은줄의 참여자 출력

 

2. 객체

다음으로 key 와 value를 가지는 객체에 대하여 배웠고 객체에 접근하는 방법들, key와 value를 추가하고 제거하는 방법을 배웠다.

또 for in 반목분을 통해 객체의 key와 value에 접근하여 효율적인 반복문을 사용할 수 있는 방법도 알아보았다.

그리고 객체 프로퍼티로 할당 된 함수인 메서드에 대하여 배웠고 메서드의 선언방법과 사용법, 메서드에서의 this 에 대하여 배웠다.

 

- 객체 생성, 접근 및 데이터 추가,삭제

// 객체 생성
let superman = {
    name: "Clark",
age: 33 }

// 객체 접근 
console.log(superman.name); 
console.log(superman.age);

// 객체 데이터 추가 
superman.gender = "M"; 
superman["height"] = 187; 
console.log(superman);

// 객체 데이터 삭제 
delete superman.height; 
console.log(superman);

 

 

 

- 프로퍼티 생성 방법들, this 사용

const pororo = {
  name: "뽀로로",
  age: 7,
  height: 190,
  weight: 120,
  //   running: function () {
  //     console.log("뽀로로가 뜁니다.");
  //   },
  running() {
    console.log("뽀로로가 뜁니다!");
  },
  cute() {
    console.log("뽀로로는 귀엽습니다!");
  },
  hello() {
    console.log(`my name is ${this.name}`);
  },
  showHeight,
};

function showHeight() {
  console.log(`My height is ${this.height}`);
} //여러 객체에 재사용 가능

 

- 화살표 함수에서의 this

let boy = {
	name: 'Mike" ,
    	sayHello : () => {
    		console.log(this);  //화살표 함수는 일반 함수와 달리 자신만의 this를 않고 외부에서 값을 가져옴
    	}
}

boy.sayHello();  // window -> 브라우저 환경 :window, node.js :global

 

3. 생성자 함수

특성이 비슷한 객체들을 효율적으로 생성할 수 있는 생성자 함수에 대해서도 배웠다.

생성자 함수를 만들고 호출하여 객체를 생성하는 방법에 대하여 배웠다.

 

- 생성자 함수 생성 및 사용 실습

function Kdt(name, gender) {
  this.name = name;
  this.gender = gender;
  this.showInfo = () => {
    console.log(`참여자의 이름은 ${this.name}님 성별은 ${this.gender} 입니다.`);
    //화살표 함수 내부에서 this 없고 생성자 함수꺼 가져와서 가능
  };
}

const user1 = new Kdt("박지원", "M");
const user2 = new Kdt("김민정", "F");
const user3 = new Kdt("송민영", "F");
const user4 = new Kdt("이찬호", "M");

user1.showInfo();
user2.showInfo();
user3.showInfo();
user4.showInfo();

 

4. 클래스

객체지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 틀인 클래스에 대해서도 배웠다.

자바스크립트에서 class는 생성자 함수를 조금 더 편하게 사용하고 약간의 기능을 더한 생성자 함수의 Syntactic Sugar라고 한다.

호이스팅의 여부에 따라 생성자 함수는 선언 전에 사용해도 상관 없지만 클래스는 strict mode가 적용되어 선언전에 사용할 수 없는 특성도 알 수 있었다.

또 extends 와 super를 통한 클래스의 상속과 부모 클래스의 메서드를 변경하여 사용하는 over riding에 대하여 배웠다.

 

- 클래스 실습 

class Shape {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super(width, height);
  }
}

class Triangle extends Shape {
  constructor(width, height) {
    super(width, height);
  }

  getArea() {
    return super.getArea() / 2;
  }
}

class Circle extends Shape {
  constructor(width, height, radius) {
    super(width, height);
    this.radius = radius;
  }

  getArea() {
    return 3.14 * this.radius ** 2;
  }
}

const rectangleArea = new Rectangle(2, 4);
const triangleArea = new Triangle(3, 6);
const circleArea = new Circle(1, 2, 3);

console.log(`Rectangle Area : ${rectangleArea.getArea()}`);
console.log(`Triangle Area : ${triangleArea.getArea()}`);
console.log(`Circle Area : ${circleArea.getArea()}`);

 

5. DOM(Document Object Model)

HTML 문서는 node와 object의 집합으로 문서를 표현하고 각각 node와 object에 접근하여 문서의 구조/스타일/내용 등을 변경할 수 있도록 하는 dom에 대하여 배웠다.

그리고 요소를 선택할 수 있는 querySelector, querySelectorAll, getElementById를 알아보았고, 선택한 요소를 제어할 수 있는 classList, setAttribute,  textContent, innerHTML, innerText, createElement, append, appendChild, prepend, remove, parent(child)Node 를 하나씩 사용해 보며 사용법을 익혔다.

또 페이지에서 이벤트를 제어하는 addEventListener를 사용하는 법에 대하여 배웠고 this와 e.target(이벤트 타겟)을 통해 이벤트를 효율적으로 제어하는 방법을 알아보았다.

앞서 배운 내용들과 dom을 통해 html과 css로만 만들었던 starbucks 클론 페이지에 javascript를 추가하여 동적인 페이지를 만드는 작업도 해볼 수 있었다.

 

- 실습 todo list 만들기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="./todo_answer.js"></script>
    <link rel="stylesheet" href="./todo.css" />
  </head>

  <body>
    <div class="header">
      <h1>Jiwon Todo List</h1>
    </div>
    <div class="contents">
      <div class="input-part">
        <input type="text" class="input-task" />
        <input type="button" class="input-btn" value="추가" />
      </div>
      <div class="list-part">
        <ul class="todo-list"></ul>
      </div>
    </div>
  </body>
</html>

const addBtn = document.querySelector(".input-btn");
const todoList = document.querySelector(".todo-list");
const inputTask = document.querySelector(".input-task");

addBtn.addEventListener("click", function () {
  if (inputTask.value === "") {
    inputTask.setAttribute("placeholder", "내용을 입력하세요!");
    return;
  }

  const li = document.createElement("li");
  li.textContent = inputTask.value;
  const checkBtn = document.createElement("input");
  checkBtn.setAttribute("type", "checkbox");
  const delBtn = document.createElement("button");
  delBtn.innerHTML = "삭제";

  todoList.append(li);
  li.prepend(checkBtn);
  li.append(delBtn);
  inputTask.value = "";

  checkBtn.addEventListener("click", function () {
    if (checkBtn.checked === true) {
      li.style.textDecoration = "line-through";
    } else {
      li.style.textDecoration = "none";
    }
  });

  delBtn.addEventListener("click", function () {
    li.remove();
  });
});

 

6. 코딩 테스트에 유용한 js 기능

문자 관련 기능

- 문자열 길이 : 문자열.length

- 문자를 위치 찾기 : 문자열.indexOf("찾을 문자열")

- 문자열 자르기 : 문자열.slice(시작위치, 종료위치)

- 문자열 바꾸기 : 문자열.replace("찾을 문자", "바꿀 문자")

- 문자열 반복하기 : 문자열.repeat(반복횟수)

- 앞 뒤 공백 문자 제거하기 : 문자열.trim()

 

수학 관련 기능

- 절대값 : Math.abs()

- 최솟값, 최댓값: Math.min(), Math.max()

- 올림 : Math.ceil()

- 버림 : Math.floor()

- 반올림 : Math.round()

- 랜덤 : Math.random()

 

배열 관련 기능

- arr.map : 기존 배열에 특정 작업을 한 배열을 리턴, 화살표 함수로 줄일 수 있음

   => arr(function(배열의 값, 인덱스, 원본배열){ 작업 });

- arr.filter : 조건에 부합하는 배열 요소만을 반환

   => arr.filter(function(매개변수){return 조건});

- arr.include : 해당 배열에 지정한 요소가 있는지 확인

   => arr.include(요소)

- find / findIndex : 배열에 특정 값이 있는지 찾고 반환 / 배열에 특정 값이 있는지 찾고 위치 반환

- arr.reduce : 많은 기능을 가진 메서드

   => arr.reduce(function(누산기, 배열의 값, 인덱스, 원본배열),누산기 초기 값)

 

객체 관련 기능

- object.assign() : 객체의 병합에 사용되는 기능, 기존에 선언된 객체에 사용하지 않고 가상의 Object라는 것을 불러와 사용하는 정적 메서드 같은 key값이 있다면 뒤에 지정한 value로 덮어 씌움

- 구조 분해 할당 : 객체 또는 배열의 각각 값을 분해하여 변수에 넣어 사용

// 구조분해 할당
const jiwon = {
  name: "박지원",
  age: 26,
  brain: "empty",
};

// const name = jiwon.name; //원래
const { name: jiwonName, age, brain, girlFriend = "없음" } = jiwon;
 //구조 분해 할당, : 변수명 쓰면 변수명 교체 가능 =사용해서 default 값 줄수 있음
console.log(jiwonName, age, brain, girlFriend);

- 전개 연산자 : 배열의 값을 ,단위로 구분하여 전개시켜주는 연산자

const fruits = ["사과", "바나나", "수박", "망고", "딸기"];
console.log(fruits);
console.log(...fruits);

function conLog(a, b, ...c) {
  console.log(a, b, c);
}

// conLog(fruits[0], fruits[1], fruits[2]);
conLog(...fruits);

const str = "apple";
const strToArr = [...str];
const strToArr2 = str.split("");

console.log(strToArr);
console.log(strToArr2);

- 나머지 연산자 : 매개 변수에 너무 많은 값들이 들어올 때 나머지 연산자를 사용하여 한꺼번에 처리 가능

 

7. 느낀 점

이번 주차에 배웠던 것들은 애매하게 알고있던 부분들이 많았고 해당 부분들을 더 확실하게 알고 실습과 프로젝트 적용을 통해 감을 익힐 수 있어서 재밌었다.

이론으로 배울 때는 이해했지만 직접 실습을 통해 사용할 때 헷갈렸던 부분이 많았지만 생각을 많이 해보고 다른 사람들의 방법들도 참고할 수 있어서 많은 도움이 됬었던 것 같다.

또 코딩 테스트에 대해 궁금했던 점들과 여러가지 좋은 팁들을 많이 알 수 있었던 한주였다.