[C/F TIL] 19일차 - 나만의 아고라스테이츠 만들기, 솔로 프로젝트

mu-eng·2023년 5월 8일

TIL 솔로프로젝트 아고라스테이츠 코드스테이츠

TIL (in boost camp)

목록 보기

20/53

Code States
Front-end boost camp
Today
I
Learned

🌿 연휴를 보내며 5월 8일 19일차 수업 시작!

🌿 솔로 프로젝트?

코트 측에서 솔로프로젝트 과제를 하나 던져줬다. 섹션1 내용인 HTML, CSS, JavaScript기초, Git을 활용하여 질의응답을 작성하는 웹페이지 하나를 구현하고 서버로 공유, Git으로 과제 제출, 소그룹 회고 프로젝트 까지이다.

그날 그날의 수업은 어떻게 따라가고 있다고 생각했으나, 혼자서 프로젝트를 구현하자니 여간 힘든게 아니었다.

실시간 세션 수업을 들어도 어리버리해서..! 지난 페어 파트너였던 동기분께 연락을 드려서... 모르는 부분을 따로 여쭤봤다. 넘넘 죄송하고 감사하게도 질문에 성심성의껏 응해주셨다.

그리하여... js구현 부분 리뷰와 결과물을 공유하겠음

🌿 나만의 아고라 스테이츠 만들기

이게 코트에서 제공해주는 기본 파일이다. html, css(빈파일), js, data(js)파일을 제공해준다. js파일엔 힌트 코드가 적혀있음

// index.html을 열어서 agoraStatesDiscussions 배열 요소를 확인하세요.
console.log(agoraStatesDiscussions);

// 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에 적절히 넣어주세요.



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

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

▲ 힌트 코드가 적혀있는 js파일

✏️ 수도코드 & 코드

ul이라는 변수가 들어가 실행되는 render함수 (쓰여 있음)
render(ul)함수를 실행하면
data.js 파일 안에 있는 agoraStatesDiscussions 배열 내 각 객체를 모두 가져오는 for문 실행 (되어 있음) <-- 여기까지 힌트 코드에 있음 -->

for문 안에 각 html의 element들을 dom으로 가져와 js파일 내에서 새로 선언해줌
새로 생긴 변수에 클래스 이름을 매치시켜줌
각 속성을 넣어줌
부모 요소에 append로 넣어줌
모든 요소에 코드 반복

const render = (element) => {
  element.innerHTML = ''; // 초기화 : 새로운 요소가 추가될 때 이전 데이터에 덧붙히기 ㄴㄴ 새로 갈고 그 위에 데이터 얹기 위해 빈 문자열 넣기
  for (let i = 0; i < agoraStatesDiscussions.length; i += 1) {
    let data = agoraStatesDiscussions[i]; // i번째 인덱스의 배열을 data라 선언

    let liEl = document.createElement('li'); // html의 li 요소를 liEl 이란 이름으로 새로 만들어 줄거야
    liEl.classList.add('discussion__container'); // discussion__container이라는 클래스명도 붙혀줄거고~

    let discAvaWrap = document.createElement('div'); // liEl 안에 있는 자식 요소 1
    discAvaWrap.classList.add('discussion__avatar--wrapper');

    let discAvaImg = document.createElement('img');
    discAvaImg.classList.add('discussion__avatar--image');
    discAvaImg.src = data.avatarUrl;
    discAvaWrap.appendChild(discAvaImg);

    let discCont = document.createElement('div'); // liEl 안에 있는 자식 요소 2
    discCont.classList.add('discussion__content');

    let discTit = document.createElement('h2');
    let hrefTit = document.createElement('a');
    hrefTit.href = data.url;
    hrefTit.textContent = data.title;
    discTit.append(hrefTit);
    
    let discInfo = document.createElement('div');
    discInfo.classList.add('discussion__information');
    discInfo.textContent = data.author + ' / ' + data.createdAt;
    
    discCont.appendChild(discTit);
    discCont.appendChild(discInfo);

    let discAnsw = document.createElement('div'); // liEl 안에 있는 자식요소 3
    discAnsw.classList.add('discussion__answered');
    discAnsw.textContent = '☑';

    liEl.appendChild(discAvaWrap); // 자식요소 1을 liEl로 추가
    liEl.appendChild(discCont); // 자식요소 2을 liEl로 추가
    liEl.appendChild(discAnsw); // 자식요소 3을 liEl로 추가

    element.appendChild(liEl); // 그 잘난 liEl을 element (ul요소)로 추가

  }
  return;
};
const ulEl = document.querySelector("ul.discussions__container"); // ul태그의 ciscussions__container 클래스
render(ulEl);