[SEB_FE_44] JS(11) - My Agora States(1)

오늘 배운 주제

---

• Git으로 협업하기
• 나만의 아고라 스테이츠 만들기

오늘 배운 내용

---

• 깃허브 5단계 (이것만 기억!)

1. git init : 저장소 만들기
2. git add. : git이 관리할 대상으로 파일 등록
3. git commit -m "first commit" : 히스토리 만들기
4. git remote add origin https://github.com/<본인 계정>/<프로젝트명>
5. git push origin master

• Script.js (나만의 아고라 스테이츠)

// convertToDiscussion은 아고라 스테이츠 데이터를 DOM으로 바꿔줍니다.
const convertToDiscussion = (obj) => {
  const li = document.createElement("li"); // li 요소 생성
  li.className = "discussion__container"; // 클래스 이름 지정

  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";
  
  // 프로필 사진
  const avatarImg = document.createElement('img');
  avatarImg.className = "discussion__avatar--image";
  avatarImg.src = obj.avatarUrl;
  avatarImg.alt = 'avatar of ' + obj.author;
  avatarWrapper.append(avatarImg);

  // 제목과 링크
  const discussionTitle = document.createElement('h2');
  const discussionLink = document.createElement('a');
  discussionTitle.className = 'discussion__title';
  discussionLink.href = obj.url;
  discussionLink.textContent = obj.title;
  discussionTitle.append(discussionLink);
  discussionContent.append(discussionTitle);

  // 저자와 날짜
  const discussionInformation = document.createElement('div');
  discussionInformation.className = 'discussion__information';
  discussionInformation.textContent = `${obj.author} / ${new Date(obj.createdAt).toLocaleString('ko-KR')}`;
  discussionContent.append(discussionInformation);

  // 질문에 답변 유무
  const discussionChecked = document.createElement("p");
  discussionChecked.className = 'discussion__answered';
  discussionChecked.textContent = obj.answer ? "☑︎" : "☐"; // 조건 ? value1 : value2 조건이 참인 경우 value1 실행, 거짓이면 value2실행
  discussionAnswered.append(discussionChecked);

  li.append(avatarWrapper, discussionContent, discussionAnswered);
  return li;
};

const form = document.querySelector('.form');
const author = form.querySelector (".form__input--name > input");
const title = form.querySelector(".form__input--title > input");
const textbox = form.querySelector (".form__textbox > textarea");

form.addEventListener('submit', (e) => {
  e.preventDefault(); // 새로고침 안되게 해줌

  const newObj = {
    id: "new id",
    createdAt: new Date(),
    title: title.value,
    url: "/",
    author: author.value,
    answer: null,
    bodyHTML: textbox.value,
    avatarUrl: "https://source.unsplash.com/random",
  };
  agoraStatesDiscussions.unshift(newObj); // 기존 데이터 맨앞으로 추가해준다
  ul.prepend(convertToDiscussion(newObj)) // 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입

  // submit 후 리셋
  title.value = "";
  author.value = "";
  textbox.value = "";
})

// 어떻게 동작하는지 자세하게 알아볼 필요가 있음
// agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하는 함수입니다.
const render = (element) => {
  for (let i = 0; i < agoraStatesDiscussions.length; i += 1) {
    element.append(convertToDiscussion(agoraStatesDiscussions[i]));
  }
  return;
};

// ul 요소에 agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링합니다.
const ul = document.querySelector("ul.discussions__container");
render(ul);

오늘의 과제

---

큰틀은 완성!
더미데이터를 이용해 쇼핑몰을 만든 기억은 있는데 다시 해보니까 기억나는게 없다. 이제 조금 이해되는 정도

내일은 6시간이나 있기 때문에 CSS를 완성시킬 예정
시간이 남으면 페이지네이션까지 도전

깃허브는 코딩 알려주는 누나 이 영상 하나만 보면 끝난다.