섹션 1 마무리

아고라 스테이츠를 만들며 섹션 1이 마무리 되었다. !

그럴거라고 예상은 했지만, 직접 만들어보니, html,css 다루기도 쉽지 않았다.

내가 만들고 싶은 서비스는 피그마에 있는 다양한 컴포넌트들을 활용해서 만들어내는 것이었는데, 실제로 해야할 기본 기능들을 시간 안에 해내는 것도 쉽지 않았다.

css의 flexbox를 다루는 것도 헷갈렸고, 어디에 색감을 넣어야 하는지도 헷갈렸다.

지식으로 아는 것과 실제 해보는 것은 천지 차이가 있는 것 같아.
내가 직접 만들어보며 자동적으로 익혀버리는 시간을 많이 가져야겠다는 생각이 들었다.

아고라스테이츠를 만들며 다양한 함수들을 사용했는데,
-submit 버튼을 눌렀을때, 디스커션에 추가되는 것.
-더미 데이터를 렌더링 하는 것.
-페이지네이션 등등.

다른 분들은 현지시간이나, 다크모드/화이트모드 등을 추가했다.
그 부분과 페이지 추가 되었을때 알림메시지가 뜨는 것,
나만의 오답노트 만들기
베스트 튜터 매칭 기능.
좋아요 카운트 기능 등을 추가하고 싶다.

일단 이번에는 커밋해서 제출하는 것도 쉽지 않았기 때문에
제출한 것만으로도 뿌듯하다.

섹션 1은 아예 새로운 분야에 처음 들어와 겪는 다양한 두려움,
내가 할 수 있을까 싶은 막연함,
다른 사람들은 이미 저만치 나갔는데 나만 뒤쳐진거 같은 불안감,
너무 빠른 속도감으로 진도가 나가는 것에 대한 미움, 불만.

조급한 마음에서 오는 오버텐션 등으로

많은 시간을 허비했던 것 같다.

아직 이 분야에 대한 확신이나 공부에 대한 흥미 포인트를 많이 찾지 못했었던 것도 있다.

하지만, 무언가를 새롭게 창작하고, 기획하고 새로운 코딩을 기획해보는 것은 참으로 즐거웠고, 어제 모르는 것을 새롭게 알아가는 즐거움.

다양한 친구들을 만나 으쌰으쌰 하는 즐거운 경험은 참으로 잊지 못할 것 같다.

그리고 언제 이렇게 공부를 해볼까 싶기도 하고,
통과 될듯 안될듯 되어버리는 npm run test도 한몫했다.

중독 된거 같다........애기가 태어났는데. 어떻게 기르지?

// index.html을 열어서 agoraStatesDiscussions 배열 요소를 확인하세요.
console.log(agoraStatesDiscussions);
let data;
const dataFromLocalStorage = localStorage.getItem("agoraStatesDiscussions");
if (dataFromLocalStorage) {
  data = JSON.parse(dataFromLocalStorage);
} else {
  data = agoraStatesDiscussions.slice();
}

// 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";

  // TODO: 객체 하나에 담긴 정보를 DOM에 적절히 넣어주세요.
  const avatarImg = document.createElement("img");
  avatarImg.src = obj.avatarUrl;
  avatarImg.alt = "avatar of " + obj.author;
  avatarWrapper.append(avatarImg);

  const discussionTitle = document.createElement("h2");
  const titleAnchor = document.createElement("a");
  titleAnchor.href = obj.url;
  titleAnchor.textContent = obj.title;
  discussionTitle.append(titleAnchor);

  const discussionInformation = document.createElement("div");
  discussionInformation.className = "discussion__information";
  discussionInformation.textContent = `${obj.author} / ${new Date(
    obj.createdAt
  ).toLocaleTimeString()}`;
  discussionContent.append(discussionTitle, discussionInformation);

  const checked = document.createElement("p");
  checked.textContent = obj.answer ? "☑" : "☒";
  discussionAnswered.append(checked);

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

// data 배열의 모든 데이터를 화면에 렌더링하는 함수입니다.
const render = (element, from, to) => {
  console.log(from, to);
  if (!from && !to) {
    from = 0;
    to = data.length - 1;
  }
  // 다 지우고 배열에 있는 내용 다 보여주기
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
  for (let i = from; i < to; i += 1) {
    element.append(convertToDiscussion(data[i]));
  }
  return;
};

// 페이지네이션을 위한 변수
let limit = 10,
  page = 1;

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

const getPageStartEnd = (limit, page) => {
  const len = data.length - 1;
  let pageStart = Number(page - 1) * Number(limit);
  let pageEnd = Number(pageStart) + Number(limit);
  if (page <= 0) {
    pageStart = 0;
  }
  if (pageEnd >= len) {
    pageEnd = len;
  }
  return { pageStart, pageEnd };
};

const buttons = document.querySelector(".buttons");
buttons.children[0].addEventListener("click", () => {
  if (page > 1) {
    page = page - 1;
  }
  const { pageStart, pageEnd } = getPageStartEnd(limit, page);
  render(ul, pageStart, pageEnd);
});

buttons.children[1].addEventListener("click", () => {
  if (limit * page < data.length - 1) {
    page = page + 1;
  }
  const { pageStart, pageEnd } = getPageStartEnd(limit, page);
  render(ul, pageStart, pageEnd);
});

buttons.children[2].addEventListener("click", () => {
  localStorage.removeItem("agoraStatesDiscussions");
  data = agoraStatesDiscussions.slice();
  limit = 10;
  page = 1;
  render(ul, 0, limit);
});

// 문서의 내용을 확인해야 합니다.
const form = document.querySelector("form.form");
const author = form.querySelector("div.form__input--name > input");
const title = form.querySelector("div.form__input--title > input");
const textbox = form.querySelector("div.form__textbox > textarea");

// 문서를 제출해야 합니다.
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const obj = {
    id: "unique id",
    createdAt: new Date().toISOString(),
    title: title.value,
    url: "https://github.com/codestates-seb/agora-states-fe/discussions",
    author: author.value,
    answer: null,
    bodyHTML: textbox.value,
    avatarUrl:
      "https://avatars.githubusercontent.com/u/12145019?s=64&u=5c97f25ee02d87898457e23c0e61b884241838e3&v=4",
  };
  data.unshift(obj);

  // 로컬스토리지에 저장
  localStorage.setItem("agoraStatesDiscussions", JSON.stringify(data));

  // 렌더링
  render(ul, 0, limit);
});
코드를 입력하세요