[HTML_CSS_JS] 나만의 아고라 스테이츠 만들기👏🏻

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

• 오늘 공부한 내용
• 어려웠던 내용
• 궁금한 내용과 부족한 내용
• 느낀점
• 완성gif
• git-hub 배포링크

 

✨ 공부한 내용

지금까지 페어와 함께 프로젝트를 해결해 나갔다면, 어제와 오늘! 이틀 동안 솔로 프로젝트를 해보았다.

✅ 프로젝트 제목 : ‘나만의 아고라 스테이츠 만들기’✅

아고라 스테이츠란 기술 관련 질문을 깃허브에 올리면 동기분들이나 크루분들이 답변해주는 커뮤니티이다.

이런 커뮤니티의 틀을 참고해서 기술 관련 질문을 등록하고, 등록 날짜, 제목 등 입력을 받아들이는 기능을 구현해야했다.

localStorage에 저장하기

localStorage.setItem('?');

localStorage에서 가져오기

localStorage.getItem('?')

브라우저 동작시, render() 하기 전에!

localStorage가 있는지 확인한다

LocalStorage에 ‘agoraData’ key로 저장된 배열이 없으면 dummy data를 저장한다.

if (!localStorage.getItem('agoraData')) {
  saveDataLocalStorage(agoraStatesDiscussions)
}

localStorage에 저장시 JSON.stringify()

JSON 메서드 stringify를 사용해 객체를 JSON으로 바꿔서 저장한다. (JSON은 나중에 알아보기로 ::TODO::)

입력 폼을 받으면 로컬스토리지에 저장해 주어야 하기에 함수로 만들어 준다.

const saveDataLocalStorage = (obj) => {
  localStorage.setItem('agoraData', JSON.stringify(obj));
  return;
}

localStorage에서 불러올 때 JSON.parse()

JSON을 객체로 다시 바꾸려면 JSON.parse(localStorage.getItem(key))를 한다.

const getDataLocalStorage = (name) => {
  let localData = JSON.parse(localStorage.getItem(name))
  return localData;
}

 

✨ 어려웠던 내용

페이지네이션 기능은 일단 참고 자료 참조를 했다,, 차후 쓸 때 공부를😁 > 맨 밑 링크 참조

 

대신 화면에 등록 할 ul-li 표시하는 부모요소인

.discussion__wrapper에

overflow-y: scroll; 를 적용하여 무한스크롤? 처럼 나타내어

scrollbar 를 안보이게 적용 해주었다

.discussion__wrapper {
  width: 650px;
  height: 100vh;
  background: rgba(126, 169, 221, 0.5);
  overflow-y: scroll;
  border-radius: 10px;
}

/* scroll bar hide */
.discussion__wrapper::-webkit-scrollbar {
  display: none;
}

 

✨ 부족한 내용

로컬스토리지 기능을 넣는데 시간이 많이 걸렸다.

TypeError: unshift is not a function in JavaScript 에서도 애를 먹었고~

https://bobbyhadz.com/blog/javascript-typeerror-unshift-is-not-a-function

구글링을 하면서 참고도 하면서 했다. 코드를 읽으며 하나하나 봤지만 처음에는 잘 작동 하지 않았다…

정보가 저장된 data.js 에서 정보를 가져와 배열의 상태로 localstorage에 들어가야 인식을 했다.

// Local Storage 생성
if (!localStorage.getItem("dataSet")) {
  //만약 localStorage에 agoraStatesDiscussions가 없으면
  localStorage.setItem(
    "dataSet",
    JSON.stringify(agoraStatesDiscussions)
  ); //localStorage에 키값과 value를 넣는다ㅇㅇ
}
let dataSet = JSON.parse(
  localStorage.getItem("dataSet")
); //dataSet 화면에서 보여줄 변수 저장소, dataSet agoraStatesDiscussions값을 json형식으로 받음

...중략
// 제출 이벤트리스너
form.addEventListener("submit", (e) => {
	e.preventDefault(); // submit 의 새로고침 방지

...중략

// 기존 배열 가장 앞에 추가
  // agoraStatesDiscussions -> Local Storage
  dataSet.unshift(obj);
  localStorage.setItem("dataSet", JSON.stringify(dataSet));
  ul.prepend(convertToDiscussion(obj));

}

그리고 랜더링 함수에서도 로직의 실수가 있었다.

 const render = (element) => {
  for (let i = 0; i < dataSet.length; i += 1) {
    element.append(convertToDiscussion(dataSet[i]));
  }
  return;
};

로컬스토리지에 저장된 객체 정보들의 dataSet의 반복문을 돌리는데

convertToDiscussion 함수를 적용을 해주지 않았다..

출력 함수를 거쳐 값을 등록 convertToDiscussion() → render 를 해주어야지 화면에 나오는데 말이다~~

 

 

그리고 등록한 디스커션 삭제버튼을 만들었다

로컬스토리지랑 연동은 못했지만 투두리스트를 참고하여 넣었다..

x 버튼 생성 후 deleteDiscussion 함수를 등록 했다.

  // 삭제 함수
  const deleteDiscussion = (event) => {
    // console.log(event)
    // console.log(event.target.parentElement.parentElement)

    const removingOne = event.target.parentElement.parentElement;
    removingOne.remove();
  };
  
  
  
 ... 중략
 
 
   // x button
  const button = document.createElement("button");
  button.textContent = "x";
  discussionAnswered.append(button);
  button.addEventListener("click", deleteDiscussion);

 

✨ 느낀점

했다고 하지만, 여전히 부족하다 항상 부족하다~~ 언제쯤 타닥타닥 끝~~ 해볼까^^

재능러는 못잡지만 열심히 해서 따라가보자!!

css 부분은 제일 쉬우면서도 항상 어렵다~ 하나하나 노가다식으로 하는데,, 이렇게라도 해야지 결과물이 나오니ㅠ

js도 공부하며 눈에 더 띄도록 봐야겠다~ 구글링이 필수이긴 하지만,, 뭔가 내 힘으로 코드 짜고 싶다👏🏻

다음 프로젝트에서 조금 더 발전한 모습으로 돌아와 만들어 봐야겠다.

 

✨ 완성 gif

디스커션 입력->등록, overflow-y: scroll, 삭제버튼(디스커션삭제)

✨ git-hub 배포링크

자세한 코드는 배포 링크 들어가서 소스창에서 확인👍🏻

https://min-hh-k.github.io/fe-sprint-my-agora-states/

Min_HK 아고라 스테이츠

---

페이지네이션 참조,,

https://min-kyung.tistory.com/30

로컬 스토리지 참조,,

https://www.daleseo.com/js-web-storage/

https://hianna.tistory.com/697

https://velog.io/@rmaomina/LocalStorage-setItem-getItem

https://yelinz515.github.io/2022-07-19/