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

 

이번에 부트캠프에서 솔로 프로젝트로 만든 과제이다.질문을 등록할 수 있고 등록된 질문들을 확인할 수 있다.

배포 링크:https://lhs9602.github.io/fe-sprint-my-agora-states/

주요기능(과제 요구사항)

---

• 디스커션 추가 및 출력
• 페이지네이션
• 로컬 스토리지에 저장하여  새로고침해도 유지 추가한 디스커션이 유지되게 만듦
• 질문 등록 시, 당시 시간을 기록

 

커스텀 기능(개인적으로 추가한 기능)

---

• 스크롤을 내리면 나타나고, 클릭시 최상단으로 이동하는 버튼
• bgm을 껐다 켰다 할 수 있는 기능
• 배경화면에서 벚꽃이 흩날리는 애니매이션

 

 

주요 코드

---

로컬 스토리지 코드

agoraStatesDiscussions.unshift(tempobject);//디스커션 배열에 새 객체 추가  
localStorage.setItem("localdata", JSON.stringify(agoraStatesDiscussions));
//setItem을 이용해 로컬 스토리지에 agoraStatesDiscussions를 배열로 바꿔서 JSON파일로 저장

const render = (element,currentPage,maxItem) => {//화면에 렌더링하는 함수
  if(localStorage.getItem("localdata") !== null){//로컬 스토리지에 데이터가 존재하면 실행
  agoraStatesDiscussions = JSON.parse(localStorage.getItem("localdata"));//기존 배열을 로컬 스토리지에 저장된 데이터로 변경.이때 parse로 객체로 바꿈
  }
  }

 

 

페이지네이션

const ul = document.querySelector(".discussions__container");
const page = document.querySelector(".page__container");
let currentPage = 1;//현재 위치한 페이지
let maxItem = 10;//한 페이지의 최대 디스커션 갯수

let first = currentPage * maxItem; //한 페이지의 시작점을 구하는 변수
let last= first + maxItem;////한 페이지의 끝점을 구하는 변수 
let pagelist = agoraStatesDiscussions.slice(first,last);//한페이지에 담길 디스커션들을 저장

  for(let i = 0; i < pagelist.length; i++){
    element.append(convertToDiscussion(pagelist[i]));//디스커션을 하나하나 보내서 렌더링
}
//이후 코드가 있지만 다른 코드와 섞여있어서 생략

 

 

 

 

부족한 점

---

• 위의 코드에서 알 수 있듯이 코드의 분리가 이루지지 않아 수정할 때 이리저리 왔다가 갔다 해서 헷갈렸다.
• css가 조금 조화가 이루어져 있지 않는다. 알맞는 색이랑 폰트를 찾기 어려웠기에 다음에는 그냥 통일된 테마로 사용하는 것이 좋을 것 같다.
• 초기에 화면을 클릭해야 내용을 볼 수 있도록 하는 이벤트를 만들었지만 잦은 오류와 생각과 다른 실행으로 제거했다. 다음에는 좀 더 공부가 필요할 것같다.  

 

후기

---

의외로 JS 기능 구현이 어렵지는 않았다. 오히려 로컬 스토리지와 페이지네이션을 공부할 수 있는 기회가 되었다. 가장 어려웠던 페이지네이션의 경우, 검색하니 바로 나와서 하나하나 적용하는데 1시간 채 걸리지 않았다. 내가 과제를 수행한 시간이 대략 12시간 정도인데 한 4시간 정도만 JS를 하고 나머지는 전부 css에 투자했다. 그리고 css에서 고생했다. 기본적으로 flex,grid 같은 배치 기능을 활용해도 뭐만 하면 뒤죽박죽이 되어서 힘들었다. 크기 조절이랑 배치만 5넘께 쏟은 것 같다..... 어디 마우스로 하는 css가 없나 하는 생각이 절로 들었다.. 

 

이번 과제에서 가장 놀랐던 것은 나 자신이다. 기본적으로 나는 그리 부지런한 편은 아니다. 그런데 합격 컷을 한참 넘었는데도 새로운 기능들을 넣으면서 마지막까지 붙잡고 있었다. 심지어 제출 이후에도 부족한 부분이 보이면 바로 수정하고 다른 사람들의 프로젝트를 보며 다음에 어떻게 하면 좋을지를 생각하고 있었다. 힘들었지만 그래도 부뜻한 시간이었다.