Javascript - Comment 구현하기

---

목차

1. 과제로 만들었던 Comment 코드의 이슈사항

2. Class 만들어서 Comment 구현하기 ⓛ

 

---

 

 

1. 과제로 만들었던 Comment 코드의 이슈사항

- 이벤트 중복처리를 하지 않아서 생긴 이슈

- 추가되거나 삭제했을때의 리랜더링

- 재활용할수없는 코드의 가독성 문제

 

- 댓글을 구현하는 작업은 CSR 

   - NodeJS 프로젝트는 SSR 

   - 비동기통신 (AJAX)이 필요

- 언어적 깊은 이해도가 있어야 한다!

  

 

 

2. Class 만들어서 Comment 구현하기 ⓛ

 

- html,css 작성

   - ul, li 태그를 사용해서 가장 바깥 ul에 li으로 댓글을 작성하는 블록과 작성한 댓글을 보는 리스트로 나눈다.

   - 댓글을 보는 리스트 li 안에서 다시 ul과 li 태그를 사용해서 댓글이 생성될때마다 ul 이 늘어나게 한다.

   -  생성된  ul 안의 li 안에는 댓글을 작성한 작성자의 이름, 댓글내용, 삭제아이콘 그리고 날짜가 담긴다.

 

- public/js 안에 component.js 와 app.js 파일을 만든다

   - 부모클래스로 component, 자식클래스로 app

   - 자식클래스에서 오버라이딩으로 부모의 메서드를 사용

 

- app에서 class app의 인스턴스 생성되었을때 생성자 함수를 찾는데 그때 constructor가 생략되어 있다면 상속받은 부모의 생성자함수를 실행하게 된다.

  - 그러면 이때 부모클래스 Component 가 실행되면서 target을 찾고 setup() 이 먼저 실행되는데

     - 실제 실행은 자식클래스인 app 에서 하기 때문에 부모클래스에서 구조를 잡아주고 오버라이딩으로 app class에 있는 setup() 메서드가 실행된다.

    

 

2-1 class  Component 

class Component {
    target;
    state;
    constructor(target) {
        this.target = target;
        this.setup();
        this.render();
    }

    setup() {}
    template() {}
    
    setState(newState) {
        this.state = {...this.state, ...newState};
        this.render();
    }

    render() {
        this.target.innerHTML = this.template();
        this.setEvent();
    }

    setEvent() {}
}

export default Component;

 

 

 

2-2 class  App 

import Component from "./core/component.js";

class App extends Component {
    // constructor(target) {
    //     super(target);
    // 부모의것과 같을경우 생략가능함
    // }

    setup() {
        // 오버라이딩이 되어있기때문에 실행이된다
        this.state = {
            comment: [
                {
                    id: "guniee",
                    content: "나도 패스 돌려돌려~~!!",
                    date: "2023-10-16",
                },
            ],
        };
    }
    template() {
        const {comment} = this.state;
        const items = comment.map(
            (item) => ` 
            <ul class="comment-row" data-index="1">
                <li>${item.id}</li>
                <li>
                    <span>${item.content}</span>
                    <span>💣</span>
                </li>
                <li>${item.date}</li>
            </ul>
            `
        );
        return `${items.join("")} <button id="app_btn">버튼</button>`;
    }

    setEvent() {
        this.target.querySelector("#app_btn").addEventListener("click", (e) => {
            const {comment} = this.state;
            this.setState({
                comment: [
                    ...comment,
                    {
                        id: "guniee",
                        content: "확인!!!",
                        date: "2023-10-16",
                    },
                ],
            });
        });
    }
}

const app = new App(document.querySelector("#app"));
console.log(app);

 

 

 

---

※ CSR :  Client Side Rendering

 

※ React 는 데이터가 바뀌면 화면이 바뀐다

    ( 데이터 = state , 화면 = component ) 

     → 상태가 바뀌면 컴포넌트가 바뀐다

 

※ 상위클래스에서 구조를 잡고 하위클래스에서 실행,사용

    - 예를들면 상위클래스에 커피라고 했을때

       - 구조로 물을 끓이고, 원두를 갈고, 컵에 담고, 다른 추가사항을 지정해준다면

       - 하위클래스에서는 위의 행동을 다하면서

        추가사항으로 설탕을 넣는다, 우유를 넣는다, 추가사항없이 커피를 준다를 할수있다!