181210 - TIL

---

주제: 자바스크립트

강의: 자바스크립트 부트캠프

날짜: 2018.12.10

강의자 : 김민태님

---

앱을 만들 때 처음 할일

초기화 -> 상태 생성(초기 상태), 이벤트 핸들러 연결

todo앱 만들기 첫번째 예제처럼 전역에 배열을 생성하고 메소드를 만드는 방식의 단점은 전역공간에 생기기 때문에 충돌이 날 수 있다. 따라서 전역공간에는 코드를 작성하지 않는다. (의도하지 않았는데 덮어쓸 수 있는 오류가 생길 수 있다)

전역에 객체를 만들어서 객체 안에 메소드 등 코드를 작성하면 적어도 객체 안의 내용은 보호가 된다.  -> name scope, name space

todoApp {

 //코드내용

} // name scope

let TodoApp = {

todos: [],

start() {

let inputElement = document.querySelector('input[name=todo]');

inputElement.addEventListener('keypress', this.onCreateTodo) //this는 todoApp ->실행시점을 보자

},

onCreateTodo(event) { //event는 ‘keypress’이벤트

if (event.which === 13) { //키보드의 아스키코드값

let list = document.querySelector('.list-group');

let li = document.createElement('li');

li.className = 'list-group-item list-group-flat';

li.innerHTML = `<div class="checkbox">

<input type="checkbox" id="checkbox">

<label for="checkbox">${event.target.value}</label>

<button type="button" class="btn btn-outline-secondary btn-sm">X</button>

</div>`;

list.appendChild(li);

}

}

};

TodoApp.start();//실행시점

## 돔을 다루는 방법

1. 프로그래밍 인터페이스(돔이 제공하는 api)를 이용하여 돔을 다루기 -> 유지 비용이 매우 많이 들고 복잡한 ui를 다룸에 있어 효율적이지 않다.
2. 변경할 대상 ui를 html 문자열로 다루고 대상 돔을 수정하는 방법

1번방법

let TodoApp = {

todoStates: [],

start() {

let inputElement = document.querySelector('input[name=todo]');

inputElement.addEventListener('keypress', this.onCreateTodo)

},

onCreateTodo(event) {

if (event.which === 13) {

let list = document.querySelector('.list-group');

let todoContainer = document.createElement('li');

let todoItem = document.createElement('div');

let todoStatus = document.createElement('input');

let todoLabel = document.createElement('label');

let deleteButton = document.createElement('button');

todoContainer.classList.add('list-group-item', 'list-group-flat');

todoContainer.appendChild(todoItem);

todoItem.appendChild(todoStatus);

todoItem.appendChild(todoLabel);

todoItem.appendChild(deleteButton);

todoItem.classList.add('checkbox');

todoStatus.setAttribute('id', 'checkbox');

todoStatus.setAttribute('type', 'checkbox');

todoLabel.setAttribute('for', 'checkbox');

todoLabel.textContent = event.target.value;

deleteButton.classList.add('btn', 'btn-outline-secondary', 'btn-sm');

deleteButton.textContent = 'X';

list.appendChild(todoContainer);

}

}

};

TodoApp.start();

별도의 돔을 하나씩 만들고 이걸 조립하는 방법.

html의 구조가 보이지 않아서 시각적으로 보기 매우 어렵다. 어디에 하위요소가 있는지 구조가 보이지 않는다.

추후 기능을 하나씩 추가할 수록 개미지옥으로 빠진다…😫

개발할 때 중요한 원칙

1. 성격이 동일한 요소들끼리 모여있게 한다 -> 성격이 다른 것 끼리 모여있는건 잘못 되어있다. ui와 데이터는 별도로 되어있어야한다.

2. 다루기 쉬운 형태를 유지한다.(문자열 사이(ui)에 있는 데이터를 분리한다.)

3. 대상과 대상간의 관계에 있어서 너무 깊어지면 종속성이 생기고 서로 간의 영향을 많이 끼치게 된다(어떠한 개체가 다른 개체와 종속성을 많이 가져갈 수록 좋지 않다) , 이러한 종속성을 커플링이라고 한다. 루즈한 커플링 관계를 가져야 좋다. 

리팩토링한 투두앱은 역할별로 함수를 나눴지만 여전히 문제가 있다. 하나가 바뀔 때마다 전체가 렌더링이 되기때문에..

모든 ui는 상태와 업데이트 주기를 가진다. 업데이트 단위를 축소 할 수 있도록

상태와 ui를 잘게 쪼개서 개발을 한다(컴포넌트)

함수문은 기본으로 호이스팅이 일어난다.

function 으로 함수사용시 - 전역에 함수를 쓸때, 내적함수 사용할 때(함수안에 함수)

최근은 객체안에 메소드로서의 함수를 많이 사용한다. 

##예외처리

try ~ catch문

try 문에서 예외가 생기면 catch 문으로 넘어간다

function numberAdd(a, b) {

if (typeof a !== 'number') {

throw new Error('숫자가 아닙니다.');

}

if (typeof b !== 'number') {

throw new Error('숫자가 아닙니다.');

}

// 핵심 로직

return a + b;

}

let result = 0;

try { //try 실행해서 에러가 나면 catch로 넘어가고 안나면 밖으로

result = numberAdd(1000, 2000);

} catch(e) {

console.error(e);

} finally { // 에러의 유무와 상관없이 실행되는 영역, 옵션이기 때문에 쓰지 않아도 된다

result = 0;

}

try catch는 최근들어서 많이 사용하고 있다. 

try catch는 콜백함수가 들어가는 순간 에러를 잡지 못한다. 함수가 아니다.

---

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다