나만의 아고라 스테이츠 만들기 과제 되돌아보기

📍 구현 과제 : 

• 데이터 객체가 배열에 담긴 더미 데이터를 끌어와서 화면에 렌더링 
• 각자 취향대로 css 스타일링
• 게시판 형태로 페이지네이션 작업
• 새로운 데이터 입력시 기존 더미 데이터에 합쳐서 화면에 렌더링 
• 로컬 스토리지 이용해 새로운 데이터 저장해서 새로고침 해도 화면에서 유지
• github page 이용해서 배포 링크 만들기

 

 

📍 과제 구현한 웹페이지 배포 링크 :

아바타 이미지 16종을 준비해서 사용자가 새로운 질문을 등록하면 랜덤 아바타 16개 중 하나가 배정되어서 뜨게 만들었다 🤗

https://ah-ae.github.io/fe-sprint-my-agora-states/

 

* 과제 코드 확인해 보고 싶으신 분은 GitHub Repository로 들어가시면 됩니다.

 

 

과제하면서 배운 것들

1. 페이지네이션 기능

이번 과제의 핵심 기능이었다. 무한 스크롤보다 어려운 것이 한 화면에 보여줄 게시물 개수를 정하고 다음 페이지, 이전 페이지로 넘어가는 작업이라니... 늘 당연하게 쓰는 기능들을 막상 구현하려고 하면 뭐 하나 쉬운 것이 없는데, 이번에도 마찬가지였다. 

처음부터 맨땅에 헤딩할 수는 없어서 검색 후 아래 블로그 포스팅을 보면서 내 코드에 맞춰서 작업했다. 큰 틀에서만 이해가 가고 세부적인 코드 라인 한 줄 한 줄 중에는 아직 이해가 가지 않는 것들이 많이 있다. 라인 한 줄 한 줄을 다 이해하지 못해도 가져다 쓸 수 있다는 것을 처음으로 알게 되었다는 것이 성과라면 성과... 지금 모르는 것들을 한 달 뒤에 다시 들여다 보았을 때 더 많이 이해가 가기를 바란다. 

 

일단 그 중 몇 가지만 간단하게 기록해 둔다. 

• dataset property 로 현재 페이지 및 페이지 이동 제어
  참고: HTMLElement.dataset
• forEach.call() : 유사배열이 배열 메소드 쓸 수 있도록 해줌
  (위의 dataset 프로퍼티를 통해 DOMStringMap 을 순회하며 'active' 클래스 제거)
  참고: ZeroCho blog - 배열과 유사배열

 

📚 페이지네이션 참고자료: 

간단한 페이지네이션 구현하기

 

2. '함수는 작은 기능의 단위'라는 말이 의미하는 바를 체감했다

기본 화면 컴포넌트 스타일링 컨셉을 트위터 타임라인 스레드로 잡았다. 아래 이미지처럼 질문에 대한 답변이 없다면 스레드 없이 질문만 보여주고, 답변이 있는 경우에는 말풍선 아이콘 옆에 숫자 1을 띄워주고 해당 질문에 스레드를 달아서 답변을 보여주는 식으로 만들고자 했다. 

 

답변이 없는 경우

 

답변이 있는 경우

 

보시는 바와 같이 화면 구성은 질문과 답변이 동일하지만, 질문인지 답변인지에 따라서 화면에 보이는 아바타 이미지, 글쓴이 정보, 날짜, 제목 텍스트 등 더미 데이터에서 가져와야 하는 정보의 출처가 달랐고, 화면에 렌더링해줄 때도 스레드 구현을 위해서 DOM 트리 중에서 어디에 붙여야 할지도 달랐다. 컨텐츠를 만들어주는 함수 안에서 질문과 답변을 만들 때 반복되는 부분을 한 번 더 내부 함수로 만들어준 다음, 질문인지 답변인지에 따라서 다르게 들어가는 부분만 parameter로 세팅해줘서 같은 작업을 반복하지 않고 한 번만 정의해준 다음 필요한 곳에 각각의 argument를 전달해 주는 식으로 정리할 수 있었다. 

 

 

3. 기존 더미 데이터와 사용자 입력을 받아서 추가된 새로운 데이터를 연결해주기

처음에는 export, import로 script.js 파일과 더미 데이터 파일을 연결해 주면 될 거라고 생각했는데 왜 때문인지 에러가 나면서 두 파일 연결이 안 됐다. (이때 난 에러가 어떤 에러였는지 기록해 놨어야 했는데 미처 생각을 못했다.) 

(2022. 12. 4. 추가: export, import 관련 에러 포스팅)

 

그래서 두 파일 간 연결을 포기하고 기존 더미 데이터와 새로 추가된 데이터를 각각 따로따로 관리해줬다. 새로운 데이터는 로컬스토리지에 저장해서 관리하고, 화면에 렌더링하기 직전에 새로운 배열을 하나 더 만들어서 두 데이터 배열을 새 배열에 복사해서 합친 다음 뿌려주는 방식으로 구현했다. 데이터를 기존 데이터, 새로운 데이터 두 가지 방식으로 관리하다 보니 렌더링하는 함수도 각기 따로 만들어줘야 했다. 

 

레퍼런스 코드를 보니 처음 시작부터 data 변수를 만든 다음 1)로컬스토리지에 저장된 데이터가 있다면 data 변수에 로컬스토리지 데이터를 복사해주고, 로컬스토리지에 저장된 데이터가 없다면 data 변수에 기존 데이터 더미를 복사해서 앞으로 쭉 data 변수에 있는 데이터만 쓰는 방식으로 구현했다. 그리고 2)새로운 데이터를 등록할 때 data 변수에 새로운 데이터를 추가하고, 로컬 스토리지에 데이터 변수에 담긴 데이터를 통째로 저장했다. 이렇게 하나의 변수로 데이터를 관리하니 렌더링 함수도 하나로 정리할 수 있었다. 

 

 

4. 처음부터 설계를 잘 하고 시작해야 한다

처음부터 큰 그림을 그리고 시작한 게 아니라 튜토리얼대로 따라하며 진행하다보니 전부 다 들어엎고 새로 써야 하는 판국을 두 번 맞이했다. 

 

첫번째 난관은 위의 기본 화면 컴포넌트 구성을 튜토리얼에서 진행한 것처럼 질문에 간단하게 답변이 있는지 없는지 여부만 체크해주는 방식에서 스레드 방식으로 바꾸려고 스타일링을 결정했을 때였다. 처음 마크업부터 다 달라져야 했고, 이것은 곧 더미 데이터를 가져와서 DOM 조작을 해주는 함수의 모든 순서와 내용을 바꿔야 한다는 얘기였다. 기본 컴포넌트를 제대로 만들어놓고 시작해야 고생을 안 한다. 마크업 단계에서 스타일링 스케치를 같이 하고 들어가야 한다. 

 

두 번째는 기능 구현 측면에서 로컬 스토리지 저장과 페이지네이션을 같이 생각을 못 하고 각기 따로따로 작업을 해서 발생했다. 로컬 스토리지는 전에 노마드 코더 바닐라 JS 클론코딩에서 한 번 다뤄본 적이 있어서 비교적 간단하게 할 수 있을 거라고 생각해서 이 작업부터 시작했는데 위에 쓴 것처럼 기존 데이터와 새 데이터를 따로따로 관리해주다보니 엉망진창이 되어갔다. 렌더링 함수 자체를 양쪽 데이터에서 똑같이 쓸 수 있는 방식으로 바꾸는 것보다 새로 한두 줄 쓰는 게 더 간단할 정도로 꼬인 실타래를 풀기가 힘들어졌다. 

 

여기에 페이지네이션 기능까지 추가되면서 누덕누덕 기워져 가는 모양새로 구현이 되었다😇 누더기 같은 코딩이 끝내 작동했다는 것에 나 홀로 의의를 두고 과제 제출을 했다. 과제 제출 당일 저녁에 레퍼런스 코드가 올라오긴 했는데 도저히 들여다볼 여력이 나지 않아서 이번 주말 레퍼런스 코드와 비교해보며 누더기 같이 기운 부분들을 조금이라도 펴보는 것으로 주말 일정을 세웠다 ㅋㅋ

 

추가로 구현해 보고 싶은 기능들

• 답변 게시물에 텍스트 띄우기
  스레드가 달린 답변에 아직 아무런 텍스트도 보이지 않는데, 이게 더미 데이터에서 답변 쪽 데이터의 텍스트가 innerHTML 형태로 태그와 텍스트가 섞여서 들어가 있어서 텍스트만 빼오는 법을 몰라서 못하고 있다.😇 태그와 속성은 전부 제거해주고 plain 텍스트만 빼와서 답변 컴포넌트에 보여주고 싶은데 아직 구현을 못했다. 정규표현식으로 요소 중에서 <p dir="auto"> <br> </p> 등은 제거해주고 컨텐츠만 딱 뽑아오고 싶은데, 그러려면 정규식 패턴을 조금 더 공부해야 한다. 
  
  
• 반응형 디자인
  media query 사용해서 태블릿, 모바일 분기만 만들어주면 되기 때문에 비교적 쉬운 작업 (이지만 이번 주는 못해...) 
  
  
• 좋아요 count 기능
  지금은 말풍선 이모티콘만 있는데, 하트 이모티콘도 넣어서 좋아요 하트 버튼 누르면 하트 빨간색으로 차오르고 숫자 카운팅하는 기능 넣어보고 싶다. 어떻게 해야하는지 아직 하나도 모름..🧐
• 다크모드 기능 
  남들 하는 건 다 해보고 싶지만 이것도 아직 정확히 모른다. 예전에 생활코딩 javascript 강의가 다크 모드 적용하는 거였는데 자바스크립트의 ㅈ의 한 획도 모를 때 본 거라 머릿속에 남은 게 없다. 다시 한 번 정리해 봐야겠다. (언젠가 근미래에...)