아고라스테이츠 만들어 보자

목표

• 더미 배열 데이터를 나열해 본다.
• 입력 폼으로 데이터를 추가할 수 있다.
• 입력한 시간 데이터를 가공하여 추가할 수 있다.
• Git Page로 배포해 본다.

---

아고라스테이츠 데모 보기

Discussion 나열

1. render()

1. 배열의 갯수만큼 반복문을 돌린다.
2. return 받은 HTML element를 부모 container에 하나씩 append 한다.

// element는 부모 container를 전달인자로 받는 매개변수이다. 
// agoraStatesDiscussions는 객체를 요소로 가진 배열 데이터(더미)이다. 

const render = (element) => {

  for (let i = 0; i < agoraStatesDiscussions.length; i++) {
    element.append(createElement(agoraStatesDiscussions[i]));
  }

  return;
};

2. createElement()

매개변수로 객체를 받아서, 객체 정보를 토대로 element를 만든다.

function createElement(obj) {}
	// 만약 객체가 없으면 아무것도 반환하지 않고 함수를 종료한다.
	if (!obj) {
	  return
	}
	
	const li = document.createElement('li'); 
	li.className = 'discussion__container';
	
	// element를 생성한다. 
	const avatarWrapper = document.createElement('div');
	avatarWrapper.className = 'discussion__avatar--wrapper';
	const discussionContent = document.createElement('div');
	discussionContent.className = 'discussion__content';
	const discussionAnswered = document.createElement('div');
	discussionAnswered.className = 'discussion__answered';
	
	// class와 객체의 정보를 넣어준다.
	const avatarImage = document.createElement('img');
	avatarImage.classList.add('discussion__avatar--image')
	avatarImage.src = obj.avatarUrl;
	avatarImage.alt = `avatar of ${obj.author}`
	avatarWrapper.append(avatarImage)
	
	// 이하 생략

	// 완성된 element를 li에 담고 li를 반환한다. 
	li.append(avatarWrapper, discussionContent, discussionAnswered);
	return li;
}

---

Discussion을 추가

1. createAgoraDiscussion()

submit event를 받을 때 실행할 핸들러 함수를 연결한다.

form.addEventListener('submit', createAgoraDiscussion)

function createAgoraDiscussion(event) {
	event.preventDefault()

  let userName = document.querySelector('#name').value
  let userTitle = document.querySelector('#title').value
  let userStory = document.querySelector('#story').value

	// 객체를 생성해 폼에서 입력받은 값을 넣어 준다. 
	let obj = {
	  title: userTitle,
		// 이하 생략 
	}
}

🛑 잠깐, event.preventDefault()란 ?

이벤트가 발생하면, 브라우저에서 기본 동작을 즉시 수행하게 된다. 링크를 클릭하면 url로 이동하거나, 폼의 submit 버튼을 누르면 폼이 전송되는 것처럼 말이다. event.preventDefault() 메서드는 브라우저의 기본 동작을 막기 위해 사용된다.

---

작성 완료한 form의 input value 비우기

🛑 value에 빈 String을 할당한다?

// 아래 방법으로 value를 리셋시키려고 했지만, 작동하지 않았다!
userName = ""
userTitle = ""
userStory = ""

✅ submit event의 reset() 매서드를 이용한다

// form의 submit event 객체에 reset()이라는 메서드를 사용하면 
// form input들의 정보를 한꺼번에 clear 시킬 수 있다! 
event.target.reset()

---

작성 시간을 추가

현재 시간을 new Date 내장 객체를 이용해 받을 수 있다.

toLocaleString() 매서드를 사용하면 년. 월. 일. 오전/오후 시:분:초 포맷으로 사용할 수 있다.

let date = new Date
let creatdDate = date.toLocaleString()

---

Git pages 배포

1. 해당 git repository의 상단 setting을 클릭하고, 죄측 메뉴에서 Pages를 누른다.
   

2. (아래 사진은 이미 만들어진 후이지만) 여기서 쉽게 해당 repo를 배포할 수 있다.