[Section 1] Coz' Mini Hackathon 회고

프로젝트 개요

지금까지 배운 html, css, javascript, DOM 등을 활용하여 나만의 아고라스테이츠(질문 게시판)을 만들어야 한다.

구현해야 하는 기능

• 디스커션 나열
• 디스커션 추가 기능
• css로 스타일 및 레이아웃 추가
• 현지 시간 적용
• 페이지네이션 기능
• 디스커션 유지 기능(local storage)

---

개발 과정

1. 디스커션 나열, 디스커션 추가 기능 구현, 현지 시간 적용

• h1, form, discussion 분리 및 discussion 내부 li 정렬 (CSS)
• 더미 데이터의 값을 DOM을 통해 html의 요소로 변환 및 화면에 render
• form에서 입력된 값을 submit 하면 discussion의 제일 첫번째 행에 추가
• new Data()로 현지 시작 적용

2. 페이지네이션 기능 구현 실패

• 페이지네이션의 원리 터득 (3시간 이상 소요)

  • 한 화면에 표시할 데이터 배열의 index 범위를 정하고
  • 페이지 버튼을 누르면 데이터 배열의 index 범위를 변경하여
  • 화면에 render한다

• 위의 원리를 바탕으로 약 50줄의 코드를 작성했지만 전혀 작동이 되질 않음
• 제출 시간 임박하여 포기

3. CSS 0.1% 첨가

• 페이지네이션 덕에 조잡한 CSS 추가
• form 구역을 discussion 구역 왼쪽으로 이동하여 화면을 꽉 채움
• form에 display: sticky를 적용하여 스크롤해도 화면에 고정되게 설정
• 이 상태로 과제 제출 완료

4. 페이지네이션 (이전, 다음) 기능 구현 및 1,2,3,.. UI 구현

• 과제 제출 후 프로젝트 완성을 위해 reference의 도움을 받아 이전, 다음 기능 구현
• 나는 1,2,3,.. 을 먼저 하려고 했는데 이전, 다음부터 했으면 차라리 원리 이해하는게 더 빨랐을 듯
• reference에는 1,2,3,..이 없었지만 대략 이런 식으로 하니까 됐다

  • 더미데이터 배열의 길이를 한 화면에 표시할 데이터 수로 나눠서 전체 페이지 수를 구하고
  • 반복문을 사용하여 1부터 전체 페이지 수까지 버튼을 추가한다

5. local storage 기능 구현

• let data; // 변수 data 선언
  const dataFromLocalStorage = 
  localStorage.getItem('agoraStatesDiscussions')
  // local storage에서 더미 데이터를 추출
  if (dataFromLocalStorage) {
    data = JSON.parse(dataFromLocalStorage);
  // 가져온 데이터가 있다면, JSON 형식으로 파싱하여 data 변수에 할당
  } else {
    data = agoraStatesDiscussions.slice();
  }
  // 가져온 데이터가 없다면, 더미 데이터 배열을 복사하여 data 변수에 할당

• 이후 form 의 submit 이벤트 함수에
  localStorage.setItem('agoraStatesDiscussions', JSON.stringify(data)); 으로 local storage에 저장

6. local storage reset 기능 구현

• reset 버튼을 누르면 local storage 의 데이터 삭제

• const resetButton = document.querySelector('section.localStorage_reset');
  resetButton.addEventListener('click', () => {
    localStorage.removeItem('agoraStatesDiscussions');
    data = agoraStatesDiscussions.slice();
    limit = 10;
    page = 1;
    render(ul, 0, limit);
  })

7. CSS 수정 및 완성

• CSS로 레이아웃 및 스타일 수정
• 완성!

• 완성본 링크 : https://mooobi.github.io/fe-sprint-my-agora-states/

---

문제 해결 방법 및 결과

• 페이지네이션 기능
  계속 코드를 하나하나 뜯어서 해석해보니 알고리즘이 이해가 되었고, 이전다음 기능은 reference를 참고했지만 1,2,3,.. 은 거의 직접 코드를 짤 수 있었다.

• local storage
  local storage라는 개념을 처음 보아서 chatGPT 등을 통해 개념을 배우고, reference를 통해 코드의 진행 원리를 알게 되어 적용하였다.

---

개선점 도출

• 기능적인 부분을 어찌저찌 다 구현은 했지만, 다시 하라고 하면 할 수 있을지 의문이다. DOM을 통한 알고리즘을 도출해 내는게 생각보다 너무 어렵기 때문에 알고리즘 테스트를 통해 알고리즘 문제 해결 능력을 길러야 한다.
• CSS 코드는 보면 볼수록 더럽다. tailwind를 배워서 CSS에 소요되는 시간을 줄이는 것이 좋겠다.

---

결론

• 첫 솔로 프로젝트는 나의 현 위치를 알 수 있는 계기가 되었다. 나는 여러 기능 구현에 실패하고, CSS도 기본적인 라인만 만들어놓고 제출하기에 급급한데 반해, 진작에 기능 구현 완료하고 CSS도 멋들어지게 작업한 분들이 많이 있었다. 나름 진도를 잘 따라간다 생각했는데 따라가는 척만 했었던 게 아닌가 싶다. 이제 내 위치를 알았으니 끝날 때는 엇비슷하게 도착할 수 있도록 더 빨리 달려야겠다.

---