Javascript - class / 게시판 만들기

---

목차

1.class

2. 게시판 만들기

---

1.class

- 추상을 만들고 실체를 만드는것

- new 라는 인스턴스를 생성 (인스턴스화)

class 의자 {
    다리가 있다.
    앉을수 있다.
    등받이가 있다.
    //추상
}

const chair = new 의자();
//인스턴스화, 실체화한다

 

★ 직업이라는 사람의 정보를 class로 만들때 

function Job(_job) {
  // this = {}
  this.job;
  console.log(_job);
  // return this
}
const job = new job("senior");

- Job에 this가 빈 객체이고, 리턴으로 this가 생략되어있다고생각하면 된다.

 

 

class Job {
  job;
  //쓸거라고 미리 지정

  constructor(_job, _career) {
    // 생성자 : 실체화할때사용할 함수
    // this = {}
    console.log(_job);
    // return this
  }
}

const job = new Job("senior");
const job2 = new Job();

- 새로운 객체를 만든것으로 job과 job2는 다르다.

 

 

class Job {
  job;
  career;
  // 멤버변수
  // 프로토타입 키값이 들어감

  constructor(_job, _career) {
    // 생성자 함수
    // this ={}
    this.job = _job;
    this.career = _career;
    // return this
  }

  //메서드는 생성자함수 밖에서 선언
  move() {
    console.log("hello world!");
    // 리턴값이 없는것으로 void
  }
}

const job = new Job("senior", "10");
console.log(job);
// job.move();

console.log(console.log("hello world!"));

- class안에서 메서드를 사용할수있다. (생성자함수 밖에서 선언)

 

 

 

2. 게시판만들기

class Borad {
  id;
  title;
  content;
  writer;
  created_at;
  hit;

  constructor(_id, _title, _content, _writer) {
    this.id = _id;
    this.title = _title;
    this.content = _content;
    this.writer = _writer;
    this.created_at = "2023-08-04";
    this.hit = 0;
  }
}

const row1 = new Borad(1, "hello world!", "내용입니다1", "boram");
const row2 = new Borad(2, "hello world!", "내용입니다2", "boram");
const row3 = new Borad(3, "hello world!", "내용입니다3", "boram");
const row4 = new Borad(4, "hello world!", "내용입니다4", "boram");
const row5 = new Borad(5, "hello world!", "내용입니다5", "boram");

const list = [row1, row2, row3, row4, row5];

function template(item) {
  return `
    <tr>
        <td>${item.id}</td>
        <td>${item.title}</td>
        <td>${item.content}</td>
        <td>${item.writer}</td>
        <td>${item.hit}</td>
    </tr>

    `;
}

function tableRows() {
  let html = "";
  for (let i = 0; i < list.length; i++) {
    html += template(list[i]);
  }
  return html;
}

function render(html) {
  // 출력만해주는 리턴 void
  const tbody = document.querySelector("tbody");
  tbody.innerHTML += html;
}

function init() {
  const html = tableRows();
  render(html);
}

init();

- 게시글을 만들어주는 클래스를 만든다.

- 게시글을 모아둘수있는 배열을 만든다.

- 직접 해보기 → 다시 board 수업듣고나서 작성해보기

 

---

★ 오늘의 포인트와 남겨두기 ★

 

※ class는 속성만 미리 지정해두는것

※ 객체지향은 속성을 뽑을수있는 생각하는 사고가 중요하다!

 

*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!