투두리스트 by 컴포넌트

Status

Done

Tags

실습

컴포넌트

날짜

Oct 11, 2023 05:37 AM

notion image

TodoList의 컴포넌트들(재사용 가능, 서로 독립적)

Header

TodoForm

TodoList

+) 이 세개를 총괄하는 App 컴포넌트까지!

TodoList 컴포넌트 만들기

todoList.js

1) function 컴포넌트와 2) class 컴포넌트 두가지 방법으로 만들 수 있다.

여기서는 this.render();가 있기 때문에 생성하자마자 바로 render 함수가 호출된다.

params.$target : 해당 컴포넌트가 추가 될 DOM 엘리먼트

params.initialState : 투두 데이터 리스트의 초기 상태

$변수 ⇒ 이 변수는 dom 객체를 담는 변수라는걸 뜻함(컨벤션)

⇒ $ 쓰지 않고 변수 접미사로 Element를 써주는 방법도 있음

(current) => `<li>${current.text}<li>`) 에서 current.text를 바로 매개변수로 두고 싶다면, ...map(({text}) => ...${text} ...

⇒ 매개변수가 하나라도 객체에서 꺼내 쓸 때는 소괄호를 꼭 해줘야 하는 것에 주의

main.js

index.html

script의 src는 절대경로로 써주는 것이 좋다. 상대경로를 쓰면, 현재 href 기준을 따른다.

script를 선언된 순서대로 보기 때문에, todolist.js가 main.js 보다 먼저 선언되어야 한다.

script를 head가 아닌 body에 넣는 이유

html은 위에서 아래로 차례로 코드를 실행하기 때문에, script를 body에 넣어야 head를 비교적 빨리 load할 수 있다.
같은 이유로 body 중에서도 맨 밑에 script를 배치하는 것이 좋다.

html, css 파일이 html 파서, css 파서에 의해서 파싱되어서 DOM, CSSOM 트리로 변환 ing → 중간에 script를 만나면 DOM생성을 중지하고 자바스크립트 엔진에 권한을 넘김
→ js가 끝나면 다시 html파서로 권한을 줌
→ 중지 되었던 시점부터 DOM생성
이러한 이유로 script위치에 따라서 DOM생성 지연이 생길 수 있다.
또한 DOM생성이 되지 않은 상태에서 DOM을 조작하면 에러가 발생한다.

출처 : https://m.blog.naver.com/gngh0101/221165224648

async / defer

async : 웹 페이지 파싱과 외부 스크립트 다운로드가 동시에 진행. 스크립트는 다운로드가 완료되면 바로 실행.

defer : 웹 페이지 파싱과 외부 스크립트 다운로드가 동시에 진행. 스크립트는 웹 페이지 파싱이 끝나면 실행된다.

프로젝트 실행! ⇒ 프로젝트 위치로 가서 npx serve 실행

npx serve -s : 해당 페이지가 404에러가 난다면, 루트 페이지로 대신 전환

포트가 사용중이면 -l 포트번호 커멘드를 뒤에 붙여서 실행

(참고) html같은 정적 리소스만 확인할 땐 npx http-server 실행

TodoForm 컴포넌트 만들기

todoForm.js

(index.html에서 스크립트 추가, main.js에서 컴포넌트 생성까지 해줘야 함~)

form 태그

사용자로부터 입력을 받을 수 있는 HTML 입력 폼
웹 페이지의 정보를 다른 페이지로 전송하는 역할 (⇒ 여기서는 이 기본 동작을 해제할 것이다.)
단독으로 쓸 수 없다. 폼 요소를 내부에 정의해야 한다.

폼 요소 : input태그, textarea태그, select태그, button태그

action 속성 : 폼 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시

HTML5에서 필수x, 값을 지정하지 않으면 현재 url로 보냄, 즉 새로고침 됨
그래서 이 기본 동작을 해제해줘야 한다

e.preventDefault() : 이벤트의 태그의 기본 동작을 끄는 것
form에서 submit 시, 위 메서드를 호출해서 전송을 막는다.

form 태그 안에 있는 button은 type을 지정하지 않을 시, 자동으로 submit 동작을 한다.

submit은 버튼을 눌러도 되고, 엔터키를 쳐도 동작된다.

input 태그

사용자로부터 입력을 받을 수 있는 입력 필드
<form> 요소 내부에서 사용
빈 태그(empty tag)이며, 속성만을 포함
[속성들]

type : input이 나타낼 타입(text, button, checkbox, email, password 등)
name : 이름 부여
value : 현재 entered 값

value값을 “”로 감싸줘야 띄어쓰기까지 적용된다.(안하면 속성으로 간주됨)

placeholder : 기본 value 값

TodoForm에 입력한 값을 TodoList에 추가하려면 ?

TodoForm 안에 TodoList 관련 코드 넣기 X

⇒ TodoForm이 TodoList에 강하게 의존

콜백함수로 통신!

TodoForm 생성 파라미터에 이벤트 콜백을 넣고, text를 입력받으면 해당 콜백에 text 넘겨주기

[기능] TodoForm 폼에 추가한 텍스트를 TodoList에 추가하기 ⇒ setState이용!

[기능+] 입력을 다 하면 input 필드가 비어있게 해보자!

[기능++] 빈 텍스트는 리스트에 추가하지 않게 해보자~

- App.js

- todoForm.js

프로젝트에 들어가는 컴포넌트들 렌더링과 그 외 작업을 분리하기

App.js에서 컴포넌트 렌더링!

main.js

App.js

마지막으로 헤더를 만들어보자! - header.js

header.js

App.js


function TodoList({$target, initialState}) {
    const $todoList = document.createElement('div');

    $target.appendChild($todoList);

    this.state = initialState; //상태 = todo객체들을 담은 배열

    this.render = () => {
        $todoList.innerHTML = `
        <ul>
            ${this.state.map(({text}) => `<li>${text}</li>`).join('')}
        </ul>`;
    }

    this.render();
}


const data = [
    {
        text : "바닐라 JS 강의 듣기",
    },
    {
        text : "TS 강의 듣기",
    }
]

const $app = document.querySelector('.app');

new TodoList({
    $target : $app,
    initialState: data
});


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>투두리스트당</title>
</head>
<body>
    <main class="app"></main>
    <script src="todoList"></script>
    <script src='index.js'></script>
</body>
</html>


<script async src="test.js"></script>

<script defer src="test2.js"></script>


function TodoForm({$target}) {

    const $form = document.createElement('form');
    $target.appendChild($form);

    let isInit = false;

    this.render = () => {
        $form.innerHTML=`
        <input type="text" name="todo">
        <button>제출</button>
        `

        if(!isInit) {
            $input.addEventListener('submit',e=> {
                e.preventDefault();
                const text = $form.querySelector('input[name=todo]').value;
                console.log(text);
            });
        }
    }
    
    this.render();
}


if (text.value) {
                    onSubmit(text.value);
                    text.value = "";
                }


...
new TodoForm({
    $target : $app,
    onSubmit : (text) => {
        list.setState(
           [
            ...list.state,
            {
                text
            }
           ]
        )
    }
});

const list = new TodoList({
    $target : $app,
    initialState: data
});


function TodoForm({$target, onSubmit}) {

...
        if(!isInit) {
            $form.addEventListener('submit', e => {
                e.preventDefault();
								const $input = $form.querySelector('input[name=todo]');
                const text = $input.value;

                if (text) {
                    onSubmit(text);
                    $input.value = "";
                }
            });
        }
    }  
...
}


const data = [
    {
        text : "바닐라 JS 강의 듣기",
    },
    {
        text : "TS 강의 듣기",
    }
];

const $app = document.querySelector('.app');

new App({$target : $app, initialState: data});


function App ({$target, initialState}) {
    new TodoForm({
        $target,
        onSubmit : (text) => {
            list.setState(
               [
                ...list.state,
                {
                    text
                }
               ]
            )
        }
    });
    
    const list = new TodoList({
        $target,
        initialState
    });
}


function Header ({$target, text}) {
    const header = document.createElement('h1');

    header.textContent = text;

    $target.appendChild(header);
}


function App ({$target, initialState}) {
    new Header({
        $target, 
        text : 'Simple Todo List'
    })
...