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

Haizel·2022년 11월 16일

CODESTATES Fed

Front-End Developer 되기

목록 보기

19/70

노션으로 보기

참고자료 CSS 버튼 채우기 효과 만들기 - 웹디자인 버튼 HTML CSS 강의 #2 버블 효과 애니메이션 아고라 스테이츠 샘플#3 - 페이지네이션
github 블로그 만들기 1. 나만의 블로그 만들기 Git hub blog!! (github.io) 초보자를 위한 GitHub Blog 만들기 - 1 쉽고 빠르게 수준 급의 GitHub 블로그 만들기 - jekyll remote theme으로

DOM으로 댓글창 구현하기

전체코드

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

// convertToDiscussion은 아고라 스테이츠 데이터를 DOM으로 바꿔준다.
//DOM으로 변환했다라는 건? -> 데이터를 하나의 디스커션(li요소)로 만들었음을 의미 !
//convertToDiscussion함수를 통해 'agoraStatesDiscussions'배열 안에 있는 각각의 요소(객체)를
//꺼내 DOM으로 바꾼다음 -> 랜더링(뿌려준다.)

//Step2. 하나의 디스커션으로 만들어주는 함수
//convertToDiscussion함수의 역할 : 1) 요소(li, div를 생성(+클래스 이름)하고 2)만든 요소를 원래의 li요소에 appen 해준다.
const convertToDiscussion = (obj) => {
  //Part1. 영역설정
  //(1)아래 댓글창목록 li 생성(부모))
  const li = document.createElement("li"); // li 요소를 생성하고
  li.className = "discussion__container"; // 클래스 이름 지정
  //(2)각 댓글 사진 <div> 생성
  const avatarWrapper = document.createElement("div");
  avatarWrapper.className = "discussion__avatar--wrapper";
  //(3)각 댓글의 내용 <div> 생성
  const discussionContent = document.createElement("div"); 
  discussionContent.className = "discussion__content";    
  //(4)각 댓글의 answered 박스 <div> 생성
  const discussionAnswered = document.createElement("div"); 
  discussionAnswered.className = "discussion__answered";

  //Part2. 각 영역의 자녀정보 생성(자녀)
  //(1)각 댓글의 아바타이미지 <img> 생성
  const avatarImg = document.createElement('img');
  avatarImg.ATTRIBUTE_NODE.toExponential('discussion__avatar--image');
   //data.js에 아바타이미지가 url로 연결되어 있으므로 -> 해당 obj에 url을 가져온다.
   avatarImg.src = obj.avatarUrl;
   avatarImg.alt = "avartar of" + obj.author; //이미지는 alt대체 이미지를 지정해주는 것이 좋다.
   //그리고 댓글 <div>인 'avatarWrapper'에 append 해준다.
   avatarWrapper.append(avatarImg);

  //(2)각 댓글의 제목 'h2' 생성
  const contentTitle = document.createElement('h2');
  contentTitle.className = 'discussion__title';
  //각 댓글 제목에 url이 <a>에 심어져 있기 때문에 <a> 요소를 생성하고 정보(제목, 링크)를 연결한다.
  const titleAnchor = document.createElement('a');
  titleAnchor.textContent = obj.title; //제목
  titleAnchor.href = obj.url; //url 링크
  contentTitle.append(contentTitle, titleAnchor);

  //(3)작성자와 시간 info <div> 생성
  const contentInfo = document.createElement('div')
  //                         작성자 정보     /  *new Date().toLocaleString() : 작성한 현재시간 정보를 가져온다.
  contentInfo.textContent = obj.author + '/' + new Date().toLocaleString();
  contentInfo.classList.add('discussion__informatio');
  discussionContent.append(contentInfo);
 
  //(4)체크박스 <p> 생성
  const checked = document.createElement('p');
  //삼항연산자
  cheked.textContent = obj.answer ?  "☑" : "☒"; //만약 답변이 있다면 '' : 없다면 ''
  checked.style.color = obj.answer ? "#00927a" : "#e90f6a";
  discussionAnswered.append(checked);

  // -> 만든 li 부모요소에 append하고
  li.append(avatarWrapper, discussionContent, discussionAnswered);
  //~이렇게 만들어놓은 data li값을 배열객체의 값으로 리턴한다.
  return li;
}; 

//Step3.이벤트 리스너를 만들고(querySelector로 요소들 조회read)
const form = document.querySelector('.form');
const auther = document.querySelector('.form__input--name > input'); //input-name에 입력하는 input 요소들
const title = document.querySelector('.form__input--title > input'); //inp;ut-title에 입력하는 input 요소들
const textArea = document.querySelector('.form__textbox > textarea'); //form_textbox에 입력하는 질문 textarea 요소들

// 함수form.addEventListener의 'submit'이벤트를 통해 각각의 데이터 정보를 -> 아래 form에 맞춰 리턴해라.
form.addEventListener('submit', (event) => {
  event.preventDefault(); //1)submit눌렀을때 새로고침되는걸 방지
  //2)그리고 /const convertToDiscussion = (obj)/에 돌려줄 obj 객체를 하나 만든다.
  const obj ={
    id: "unique number",
    createdAt: new Date(),
    title: title.value,
    url: "https://github.com/codestates-seb/agora-states-fe/discussions/45",
    author: auther.value,
    answer: {
    id: "DC_kwDOHOApLM4AKg6M",
    createdAt: "2022-05-16T02:09:52Z",
    url: "https://github.com/codestates-seb/agora-states-fe/discussions/45#discussioncomment-2756236",
    author: "Kingsenal",
    bodyHTML:
        '<p dir="auto">안녕하세요. <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dubipy/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/dubipy">@dubipy</a> 님!<br>\n코드스테이츠 교육 엔지니어 권준혁 입니다. <g-emoji class="g-emoji" alias="raised_hands" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f64c.png">🙌</g-emoji></p>\n<p dir="auto">질문 주신 내용은 노드 환경이 구성되어 있지 않기 때문에 발생되는 문제로 확인됩니다.</p>\n<p dir="auto"><code class="notranslate">brew unlink node &amp;&amp; brew link node</code></p>\n<p dir="auto">노드를 연결해 보시고 안된다면</p>\n<p dir="auto"><code class="notranslate">brew link --overwrite node</code></p>\n<p dir="auto">이 명령어를 그 다음에도 안된다면 접근권한 문제일 가능성이 큽니다.</p>\n<p dir="auto"><code class="notranslate">$ sudo chmod 776 /usr/local/lib</code> 접근 권한 변경 후<br>\n<code class="notranslate">$ brew link --overwrite node</code> 다시 연결을 해보세요 !</p>\n<p dir="auto">그럼에도 안된다면 다시 한 번 더 질문을 남겨주세요 !</p>\n<p dir="auto">답변이 되셨다면 내용을 간략하게 정리해서 코멘트를 남기고 answered를 마크해주세요 <g-emoji class="g-emoji" alias="white_check_mark" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png">✅</g-emoji><br>\n감사합니다.<g-emoji class="g-emoji" alias="rocket" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png">🚀</g-emoji><br>\n코드스테이츠 교육 엔지니어 권준혁</p>',
      avatarUrl: "https://avatars.githubusercontent.com/u/79903256?s=64&v=4",
    },
    bodyHTML:
      '<p dir="auto">--------------- 여기서부터 복사하세요 ---------------</p>\n<p dir="auto">운영 체제: 예) macOS</p>\n<p dir="auto">현재 어떤 챕터/연습문제/과제를 진행 중이고, 어떤 문제에 부딪혔나요?<br>\nPair 과제 / JavaScript Koans</p>\n<p dir="auto">npm install 명령어 입력 시 env: node: No such file or directory 라고 뜹니다</p>\n<p dir="auto">에러 발생하여 아래 명령어 실행 했는데도 불구하고 똑같은 에러가 발생했습니다<br>\nnpm cache clean --force</p>\n<p dir="auto">rm package-lock.json</p>\n<p dir="auto">rm -rf ./node_modules/</p>\n<p dir="auto">npm --verbose install</p>\n<p dir="auto">폴더 자체가 문제가 있다고 생각하여 github에서 다시 fork 후 진행했는데도 같은 에러가 발생했습니다<br>\n리눅스 기초 챕터 때 npm 설치해서 마지막 submit까지는 잘 됐는데 현재 짝수 생성기 폴더도 똑같이 npm install 시 no such file or directory가 발생합니다</p>\n<p dir="auto">에러가 출력된 곳에서, 이유라고 생각하는 부분을 열 줄 이내로 붙여넣기 해 주세요. (잘 모르겠으면 에러라고 생각하는 곳을 넣어주세요)</p>\n<div class="highlight highlight-source-js position-relative overflow-auto" data-snippet-clipboard-copy-content="minjun@dubi fe-sprint-javascript-koans-main % pwd \n/Users/minjun/Documents/fe_frontand_39/fe-sprint-javascript-koans-main\nminjun@dubi fe-sprint-javascript-koans-main % npm install \nenv: node: No such file or directory"><pre><span class="pl-s1">minjun</span>@<span class="pl-s1">dubi</span> <span class="pl-s1">fe</span><span class="pl-c1">-</span><span class="pl-s1">sprint</span><span class="pl-c1">-</span><span class="pl-s1">javascript</span><span class="pl-c1">-</span><span class="pl-s1">koans</span><span class="pl-c1">-</span><span class="pl-s1">main</span> <span class="pl-c1">%</span> <span class="pl-s1">pwd</span> \n<span class="pl-c1">/</span><span class="pl-v">Users</span><span class="pl-c1">/</span><span class="pl-s1">minjun</span><span class="pl-c1">/</span><span class="pl-v">Documents</span><span class="pl-c1">/</span><span class="pl-s1">fe_frontand_39</span><span class="pl-c1">/</span><span class="pl-s1">fe</span><span class="pl-c1">-</span><span class="pl-s1">sprint</span><span class="pl-c1">-</span><span class="pl-s1">javascript</span><span class="pl-c1">-</span><span class="pl-s1">koans</span><span class="pl-c1">-</span><span class="pl-s1">main</span>\n<span class="pl-s1">minjun</span><span class="pl-kos"></span>@<span class="pl-s1">dubi</span> <span class="pl-s1">fe</span><span class="pl-c1">-</span><span class="pl-s1">sprint</span><span class="pl-c1">-</span><span class="pl-s1">javascript</span><span class="pl-c1">-</span><span class="pl-s1">koans</span><span class="pl-c1">-</span><span class="pl-s1">main</span> <span class="pl-c1">%</span> <span class="pl-s1">npm</span> <span class="pl-s1">install</span> \nenv: node: <span class="pl-v">No</span> <span class="pl-s1">such</span> <span class="pl-s1">file</span> <span class="pl-s1">or</span> <span class="pl-s1">directory</span></pre></div>\n<p dir="auto">검색했던 링크가 있다면 첨부해 주세요.<br>\n<a href="https://mia-dahae.tistory.com/89" rel="nofollow">https://mia-dahae.tistory.com/89</a></p>\n<p dir="auto"><a href="https://stackoverflow.com/questions/38143558/npm-install-resulting-in-enoent-no-such-file-or-directory" rel="nofollow">https://stackoverflow.com/questions/38143558/npm-install-resulting-in-enoent-no-such-file-or-directory</a></p>\n<p dir="auto"><a href="https://velog.io/@hn04147/npm-install-%ED%95%A0-%EB%95%8C-tar-ENOENT-no-such-file-or-directory-lstat-%EC%97%90%EB%9F%AC%EB%82%A0-%EA%B2%BD%EC%9A%B0" rel="nofollow">https://velog.io/@hn04147/npm-install-%ED%95%A0-%EB%95%8C-tar-ENOENT-no-such-file-or-directory-lstat-%EC%97%90%EB%9F%AC%EB%82%A0-%EA%B2%BD%EC%9A%B0</a></p>\n<p dir="auto"><a href="https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&amp;blogId=chandong83&amp;logNo=221064506346" rel="nofollow">https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&amp;blogId=chandong83&amp;logNo=221064506346</a></p>\n<p dir="auto"><a href="https://webisfree.com/2021-07-15/npm-install-%EC%97%90%EB%9F%AC-%EB%B0%9C%EC%83%9D-rename-no-such-file-or-directory-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B0%80" rel="nofollow">https://webisfree.com/2021-07-15/npm-install-%EC%97%90%EB%9F%AC-%EB%B0%9C%EC%83%9D-rename-no-such-file-or-directory-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B0%80</a></p>\n<p dir="auto"><a href="https://hellowworlds.tistory.com/57" rel="nofollow">https://hellowworlds.tistory.com/57</a></p>',
    avatarUrl:
      "https://avatars.githubusercontent.com/u/97888923?s=64&u=12b18768cdeebcf358b70051283a3ef57be6a20f&v=4",
  };

  //3)만든 배열을 data더미의 배열에 추가해준다.(맨 앞 요소로)
  agoraStatesDiscussions.unshift(obj);
  //그리고 전체 데이터 더미를 ui로 append해준다(맨 앞으로->prepend)
  ul.prepend(convertToDiscussion(obj));
  //4)입력한 값을 submit에서 댓글창으로 append 되면 값을 초기화한다.
  auther.value = "";
  title.value  = "";
  textArea.value = "";
});
 
//* 지금까지 순서 총정리 
 //1. [form.addEventListener('submit', (event)] 로 입력한 요소들을 배열로 만들어주고
 //2. convertToDiscussion에 넣어서 DOM으로 변환한다.
 //3. 그리고 변환한 데이터를 render함수에 넣어서 브라우저에 랜더링해준다.[ul.prepend(convertToDiscussion(obj));]

/Step4. agoraStatesDiscussions의 모든 요소를 순회하는 함수
// agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하는 함수
          //여기 ui는 기존HTML의 ul.discussions__container이다.
const render = (ui) => {
  //agoraStatesDiscussions->data.js의 배열
  //for반복문 : agoraStatesDiscussions 데이터에 있는 모든 요소를 순회하면서
  for (let i = 0; i < agoraStatesDiscussions.length; i += 1) {
    //ui(디스커션들이 들어있는 컨테이너)에 append한다.
    //무엇을? -> agoraStatesDiscussions의 i번째 요소를 함수convertToDiscussion에 전달해서 나온 디스커션 하나를.
    ui.append(convertToDiscussion(agoraStatesDiscussions[i]));
  }
  return;
};

//Step5. ul 요소에 agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하고,
const ul = document.querySelector("ul.discussions__container");
//Step6. reder 함수를 호출한다.
render(ul);

Step1. index.html을 열어서 agoraStatesDiscussions 배열 요소를 확인

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

Step2. 하나의 디스커션으로 만들어주는 함수

// convertToDiscussion은 아고라 스테이츠 데이터를 DOM으로 바꿔준다.
//DOM으로 변환했다라는 건? -> 데이터를 하나의 디스커션(li요소)로 만들었음을 의미 !
//convertToDiscussion함수를 통해 'agoraStatesDiscussions'배열 안에 있는 각각의 요소(객체)를
//꺼내 DOM으로 바꾼다음 -> 랜더링(뿌려준다.)

//Step2. 하나의 디스커션으로 만들어주는 함수
//convertToDiscussion함수의 역할 : 1) 요소(li, div를 생성(+클래스 이름)하고 2)만든 요소를 원래의 li요소에 appen 해준다.
const convertToDiscussion = (obj) => {
  //Part1. 영역설정
  //(1)아래 댓글창목록 li 생성(부모))
  const li = document.createElement("li"); // li 요소를 생성하고
  li.className = "discussion__container"; // 클래스 이름 지정
  //(2)각 댓글 사진 <div> 생성
  const avatarWrapper = document.createElement("div");
  avatarWrapper.className = "discussion__avatar--wrapper";
  //(3)각 댓글의 내용 <div> 생성
  const discussionContent = document.createElement("div"); 
  discussionContent.className = "discussion__content";    
  //(4)각 댓글의 answered 박스 <div> 생성
  const discussionAnswered = document.createElement("div"); 
  discussionAnswered.className = "discussion__answered";

  //Part2. 각 영역의 자녀정보 생성(자녀)
  //(1)각 댓글의 아바타이미지 <img> 생성
  const avatarImg = document.createElement('img');
  avatarImg.ATTRIBUTE_NODE.toExponential('discussion__avatar--image');
   //data.js에 아바타이미지가 url로 연결되어 있으므로 -> 해당 obj에 url을 가져온다.
   avatarImg.src = obj.avatarUrl;
   avatarImg.alt = "avartar of" + obj.author; //이미지는 alt대체 이미지를 지정해주는 것이 좋다.
   //그리고 댓글 <div>인 'avatarWrapper'에 append 해준다.
   avatarWrapper.append(avatarImg);

  //(2)각 댓글의 제목 'h2' 생성
  const contentTitle = document.createElement('h2');
  contentTitle.className = 'discussion__title';
  //각 댓글 제목에 url이 <a>에 심어져 있기 때문에 <a> 요소를 생성하고 정보(제목, 링크)를 연결한다.
  const titleAnchor = document.createElement('a');
  titleAnchor.textContent = obj.title; //제목
  titleAnchor.href = obj.url; //url 링크
  contentTitle.append(contentTitle, titleAnchor);

  //(3)작성자와 시간 info <div> 생성
  const contentInfo = document.createElement('div')
  //                         작성자 정보     /  *new Date().toLocaleString() : 작성한 현재시간 정보를 가져온다.
  contentInfo.textContent = obj.author + '/' + new Date().toLocaleString();
  contentInfo.classList.add('discussion__informatio');
  discussionContent.append(contentInfo);
 
  //(4)체크박스 <p> 생성
  const checked = document.createElement('p');
  //삼항연산자
  cheked.textContent = obj.answer ?  "☑" : "☒"; //만약 답변이 있다면 '' : 없다면 ''
  checked.style.color = obj.answer ? "#00927a" : "#e90f6a";
  discussionAnswered.append(checked);

  // -> 만든 li 부모요소에 append하고
  li.append(avatarWrapper, discussionContent, discussionAnswered);
  //~이렇게 만들어놓은 data li값을 배열객체의 값으로 리턴한다.
  return li;
};

Step3.이벤트 리스너를 만들고(querySelector로 요소들 조회(read)

//Step3.이벤트 리스너를 만들고(querySelector로 요소들 조회(read)
const form = document.querySelector('.form');
const auther = document.querySelector('.form__input--name > input'); //input-name에 입력하는 input 요소들
const title = document.querySelector('.form__input--title > input'); //inp;ut-title에 입력하는 input 요소들
const textArea = document.querySelector('.form__textbox > textarea'); //form_textbox에 입력하는 질문 textarea 요소들

// 함수form.addEventListener의 'submit'이벤트를 통해 각각의 데이터 정보를 -> 아래 form에 맞춰 리턴해라.
form.addEventListener('submit', (event) => {
  event.preventDefault(); //1)submit눌렀을때 새로고침되는걸 방지
  //2)그리고 /const convertToDiscussion = (obj)/에 돌려줄 obj 객체를 하나 만든다.
  const obj ={
    id: "unique number",
    createdAt: new Date(),
    title: title.value,
    url: "https://github.com/codestates-seb/agora-states-fe/discussions/45",
    author: auther.value,
    answer: {
    id: "DC_kwDOHOApLM4AKg6M",
    createdAt: "2022-05-16T02:09:52Z",
    url: "https://github.com/codestates-seb/agora-states-fe/discussions/45#discussioncomment-2756236",
    author: "Kingsenal",
    bodyHTML:
        '<p dir="auto">안녕하세요. <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dubipy/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/dubipy">@dubipy</a> 님!<br>\n코드스테이츠 교육 엔지니어 권준혁 입니다. <g-emoji class="g-emoji" alias="raised_hands" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f64c.png">🙌</g-emoji></p>\n<p dir="auto">질문 주신 내용은 노드 환경이 구성되어 있지 않기 때문에 발생되는 문제로 확인됩니다.</p>\n<p dir="auto"><code class="notranslate">brew unlink node &amp;&amp; brew link node</code></p>\n<p dir="auto">노드를 연결해 보시고 안된다면</p>\n<p dir="auto"><code class="notranslate">brew link --overwrite node</code></p>\n<p dir="auto">이 명령어를 그 다음에도 안된다면 접근권한 문제일 가능성이 큽니다.</p>\n<p dir="auto"><code class="notranslate">$ sudo chmod 776 /usr/local/lib</code> 접근 권한 변경 후<br>\n<code class="notranslate">$ brew link --overwrite node</code> 다시 연결을 해보세요 !</p>\n<p dir="auto">그럼에도 안된다면 다시 한 번 더 질문을 남겨주세요 !</p>\n<p dir="auto">답변이 되셨다면 내용을 간략하게 정리해서 코멘트를 남기고 answered를 마크해주세요 <g-emoji class="g-emoji" alias="white_check_mark" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png">✅</g-emoji><br>\n감사합니다.<g-emoji class="g-emoji" alias="rocket" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png">🚀</g-emoji><br>\n코드스테이츠 교육 엔지니어 권준혁</p>',
      avatarUrl: "https://avatars.githubusercontent.com/u/79903256?s=64&v=4",
    },
    bodyHTML:
      '<p dir="auto">--------------- 여기서부터 복사하세요 ---------------</p>\n<p dir="auto">운영 체제: 예) macOS</p>\n<p dir="auto">현재 어떤 챕터/연습문제/과제를 진행 중이고, 어떤 문제에 부딪혔나요?<br>\nPair 과제 / JavaScript Koans</p>\n<p dir="auto">npm install 명령어 입력 시 env: node: No such file or directory 라고 뜹니다</p>\n<p dir="auto">에러 발생하여 아래 명령어 실행 했는데도 불구하고 똑같은 에러가 발생했습니다<br>\nnpm cache clean --force</p>\n<p dir="auto">rm package-lock.json</p>\n<p dir="auto">rm -rf ./node_modules/</p>\n<p dir="auto">npm --verbose install</p>\n<p dir="auto">폴더 자체가 문제가 있다고 생각하여 github에서 다시 fork 후 진행했는데도 같은 에러가 발생했습니다<br>\n리눅스 기초 챕터 때 npm 설치해서 마지막 submit까지는 잘 됐는데 현재 짝수 생성기 폴더도 똑같이 npm install 시 no such file or directory가 발생합니다</p>\n<p dir="auto">에러가 출력된 곳에서, 이유라고 생각하는 부분을 열 줄 이내로 붙여넣기 해 주세요. (잘 모르겠으면 에러라고 생각하는 곳을 넣어주세요)</p>\n<div class="highlight highlight-source-js position-relative overflow-auto" data-snippet-clipboard-copy-content="minjun@dubi fe-sprint-javascript-koans-main % pwd \n/Users/minjun/Documents/fe_frontand_39/fe-sprint-javascript-koans-main\nminjun@dubi fe-sprint-javascript-koans-main % npm install \nenv: node: No such file or directory"><pre><span class="pl-s1">minjun</span>@<span class="pl-s1">dubi</span> <span class="pl-s1">fe</span><span class="pl-c1">-</span><span class="pl-s1">sprint</span><span class="pl-c1">-</span><span class="pl-s1">javascript</span><span class="pl-c1">-</span><span class="pl-s1">koans</span><span class="pl-c1">-</span><span class="pl-s1">main</span> <span class="pl-c1">%</span> <span class="pl-s1">pwd</span> \n<span class="pl-c1">/</span><span class="pl-v">Users</span><span class="pl-c1">/</span><span class="pl-s1">minjun</span><span class="pl-c1">/</span><span class="pl-v">Documents</span><span class="pl-c1">/</span><span class="pl-s1">fe_frontand_39</span><span class="pl-c1">/</span><span class="pl-s1">fe</span><span class="pl-c1">-</span><span class="pl-s1">sprint</span><span class="pl-c1">-</span><span class="pl-s1">javascript</span><span class="pl-c1">-</span><span class="pl-s1">koans</span><span class="pl-c1">-</span><span class="pl-s1">main</span>\n<span class="pl-s1">minjun</span><span class="pl-kos"></span>@<span class="pl-s1">dubi</span> <span class="pl-s1">fe</span><span class="pl-c1">-</span><span class="pl-s1">sprint</span><span class="pl-c1">-</span><span class="pl-s1">javascript</span><span class="pl-c1">-</span><span class="pl-s1">koans</span><span class="pl-c1">-</span><span class="pl-s1">main</span> <span class="pl-c1">%</span> <span class="pl-s1">npm</span> <span class="pl-s1">install</span> \nenv: node: <span class="pl-v">No</span> <span class="pl-s1">such</span> <span class="pl-s1">file</span> <span class="pl-s1">or</span> <span class="pl-s1">directory</span></pre></div>\n<p dir="auto">검색했던 링크가 있다면 첨부해 주세요.<br>\n<a href="https://mia-dahae.tistory.com/89" rel="nofollow">https://mia-dahae.tistory.com/89</a></p>\n<p dir="auto"><a href="https://stackoverflow.com/questions/38143558/npm-install-resulting-in-enoent-no-such-file-or-directory" rel="nofollow">https://stackoverflow.com/questions/38143558/npm-install-resulting-in-enoent-no-such-file-or-directory</a></p>\n<p dir="auto"><a href="https://velog.io/@hn04147/npm-install-%ED%95%A0-%EB%95%8C-tar-ENOENT-no-such-file-or-directory-lstat-%EC%97%90%EB%9F%AC%EB%82%A0-%EA%B2%BD%EC%9A%B0" rel="nofollow">https://velog.io/@hn04147/npm-install-%ED%95%A0-%EB%95%8C-tar-ENOENT-no-such-file-or-directory-lstat-%EC%97%90%EB%9F%AC%EB%82%A0-%EA%B2%BD%EC%9A%B0</a></p>\n<p dir="auto"><a href="https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&amp;blogId=chandong83&amp;logNo=221064506346" rel="nofollow">https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&amp;blogId=chandong83&amp;logNo=221064506346</a></p>\n<p dir="auto"><a href="https://webisfree.com/2021-07-15/npm-install-%EC%97%90%EB%9F%AC-%EB%B0%9C%EC%83%9D-rename-no-such-file-or-directory-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B0%80" rel="nofollow">https://webisfree.com/2021-07-15/npm-install-%EC%97%90%EB%9F%AC-%EB%B0%9C%EC%83%9D-rename-no-such-file-or-directory-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B0%80</a></p>\n<p dir="auto"><a href="https://hellowworlds.tistory.com/57" rel="nofollow">https://hellowworlds.tistory.com/57</a></p>',
    avatarUrl:
      "https://avatars.githubusercontent.com/u/97888923?s=64&u=12b18768cdeebcf358b70051283a3ef57be6a20f&v=4",
  };

  //3)만든 배열을 data더미의 배열에 추가해준다.(맨 앞 요소로)
  agoraStatesDiscussions.unshift(obj);
  //그리고 전체 데이터 더미를 ui로 append해준다(맨 앞으로->prepend)
  ul.prepend(convertToDiscussion(obj));
  //4)입력한 값을 submit에서 댓글창으로 append 되면 값을 초기화한다.
  auther.value = "";
  title.value  = "";
  textArea.value = "";
});
 
// *지금까지 순서 총정리 
 //1. [form.addEventListener('submit', (event)] 로 입력한 요소들을 배열로 만들어주고
 //2. convertToDiscussion에 넣어서 DOM으로 변환한다.
 //3. 그리고 변환한 데이터를 render함수에 넣어서 브라우저에 랜더링해준다.[ul.prepend(convertToDiscussion(obj));]

Step4. agoraStatesDiscussions의 모든 요소를 순회하는 함수

//Step4. agoraStatesDiscussions의 모든 요소를 순회하는 함수
// agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하는 함수
          //여기 ui는 기존HTML의 ul.discussions__container이다.
const render = (ui) => {
  //agoraStatesDiscussions->data.js의 배열
  //for반복문 : agoraStatesDiscussions 데이터에 있는 모든 요소를 순회하면서
  for (let i = 0; i < agoraStatesDiscussions.length; i += 1) {
    //ui(디스커션들이 들어있는 컨테이너)에 append한다.
    //무엇을? -> agoraStatesDiscussions의 i번째 요소를 함수convertToDiscussion에 전달해서 나온 디스커션 하나를.
    ui.append(convertToDiscussion(agoraStatesDiscussions[i]));
  }
  return;
};

Step5. ul 요소에 agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링

//Step5. ul 요소에 agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하고,
const ul = document.querySelector("ul.discussions__container");

Step6. reder 함수를 호출

//Step6. reder 함수를 호출한다.
render(ul);

Haizel

한입 크기로 베어먹는 개발지식 🍰

이전 포스트

S1. Git, Coz’ Mini Hackathon

다음 포스트

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

Front-End Developer 되기

DOM으로 댓글창 구현하기

전체코드

Step1. index.html을 열어서 agoraStatesDiscussions 배열 요소를 확인

Step2. 하나의 디스커션으로 만들어주는 함수

Step3.이벤트 리스너를 만들고(querySelector로 요소들 조회(read)

Step4. agoraStatesDiscussions의 모든 요소를 순회하는 함수

Step5. ul 요소에 agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링

Step6. reder 함수를 호출

S1. Git, Coz’ Mini Hackathon

S1. 기술면접, 미니잡서칭

0개의 댓글