fe-sprint-my-agora-states

Description

Section1에서 배운 내용을 총 동원하여 나만의 멋진 아고라 스테이츠를 만듭니다.

코드스테이츠 fe-sprint-my-agora-states 리포지토리에서 자신의 리포지토리로 fork후 과제 진행합니다.

배포 링크

Github Page 배포 링크를 아래 작성합니다.

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

Bare Minimum Requirement Self Checklist

스스로 구현 완료한 부분까지 체크하여 제출합니다.

[O] 디스커션 나열 기능
- [O] script.js를 수정하여 agoraStatesDiscussions 배열의 데이터를 나열할 수 있게 구현합니다.
[O] CSS
- [O] 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다.
- [O] style.css를 수정하여 멋지고 아름답게 나만의 아고라 스테이츠를 꾸밉니다.
- [O] colorhunt, dribbble에서 적절한 색 조합, 디자인을 참고합니다.
[O] 디스커션 추가 기능
- [O] script.js를 수정하여 디스커션 추가 기능을 구현합니다.
- [O] section.form__container 요소에 새로운 아고라 스테이츠 질문을 추가할 수 있는 입력 폼을 제작합니다. 형식은 자유입니다.
- [O] 아이디, 본문을 입력하고 버튼을 누르면 실제 화면에 디스커션이 추가되어야 합니다.
- [O] agoraStatesDiscussions 배열에 추가한 데이터가 실제 쌓여야 합니다.
[O] Github Page 배포
- [O] Github Page 배포 기능을 이용하여 누구나 볼 수 있게 배포합니다.
[O] 코드스테이츠 fe-sprint-my-agora-states 리포지토리로 Pull Request
- [O] 나만의 아고라 스테이츠를 코드스테이츠 깃허브에 Pull request합니다.
- [O] 주어진 Pull request 형식에 따라주세요.

Advanced Challenge Self Checklist

스스로 구현 완료한 부분까지 체크하여 제출합니다.

[O] 현지 시간 적용
- [O] 샘플 시간을 잘 변형하여, 현지 시간에 맞게 표현합니다. (ex. 오전 10:02:17)
[O] 페이지네이션 기능
- [O] 페이지네이션에 대해서 스스로 학습합니다.
- [O] 한 페이지에 10개씩 디스커션이 보여야 합니다.
- [O] 다음 페이지로 넘어갈 수 있어야 합니다.
- [O] 이전 페이지로 돌아올 수 있어야 합니다.
- [O] 다음 페이지가 없거나, 이전 페이지가 없는 경우 페이지를 유지해야 합니다.
[O] 디스커션 유지 기능
- [O] LocalStorage에 대해서 스스로 학습하고, 새롭게 추가하는 Discussion이 페이지를 새로고침해도 유지되도록 제작합니다.

My Own Self Checklist

자신이 추가로 더 구현한 기능이 있으면 아래 적어주세요.

[O] 질문을 추가할 때 한페이지에 표시되는 질문리스트의 갯수가 10으로 유지하면서 어느 페이지에서 질문을 추가했든 추가시킨 흔적이 바로바로 반영되게 구현했습니다.
[O] 내가 현재 보고있는 페이지를 확인할 수 있는 기능을 추가했습니다.
[O] 다양한 크기의 화면에서 볼 때의 상황도 고려하여 CSS를 만들었다.
[O] Hover, Focus 상태일 때와 notHover, notFocus상태일 때를 고려하여 사용자와 동적으로 상호작용할 수 있도록 했습니다.
[O] 5페이지 뒤로 넘어가거나 앞으로 넘어갈 수 있는 버튼을 구현했습니다.
[O] My Agora States를 클릭할 때 일정확률로 발생하는 이스터에그를 추가했습니다.

배포 시연 화면

아래 예시를 지우고, 자신의 과제 시연 화면을 추가합니다.

가장 자랑하고 싶은 기능

제목을 클릭할 때 일정확률로 발생하는 이스터에그가 있습니다.
페이지네이션 기능을 잘 구현했습니다.
인풋에 넣은 값을 초기화하지 않도록 해놨으니 잔뜩 추가한다음 페이지를 오가보시는것도 좋을 것 같아요

구현하고 싶었는데 하지 못한 아쉬운 기능

클래스를 이용해 서로 관련있는 함수들을 묶어주고 모듈로 만들어 관리하고 싶었는데
거기까지 생각이 닿은 이후엔 너무 많은 코드를 짠 상태여서 엄두를 내지 못했습니다..

도움을 받고 싶은 부분

재사용성을 높이기 위해 함수를 많이 만들어서 사용하는 식으로 코드를 작성했는데
그렇게 했더니 인자 관리, 참조오류에 관한 문제가 발생했습니다.
또한 함수 안에서 호출의 호출이 이어지며 함수의 동작을 예측하기 힘들고
모든 함수의 트리거가 되는 핵심 함수를 찾아다니게되었습니다.

-> 해결방안.. 클래스로 같은 일을 하는 함수들을 묶어주고 모듈로 나눠주어 관리를 용이하게하고
핵심함수의 네이밍을 좀 더 돋보이게 지어야할 것 같습니다.
결론적으로 상태관리가 너무 어려운 구조가 되어버렸고 여러 함수를 쓰는만큼
상태를 어떻게 관리해야할지에 대한 고민이 필요했습니다.

함수의 단일 책임 원칙을 지키지 못했습니다. 채 300여줄도 안되는 코드임에도 불구하고
점점 스파게티 코드가 되어가고 있다는 것을 느꼈습니다.

-> 역시 처음 설계부터 잘했어야했다.

페이지네이션을 추가로 구현하는 과정에서 기존코드의 확장성이 안좋다는 걸 느꼈습니다.
어떤 기능을 추가하기위해 많은 구조를 변경해야하는 문제가 있었습니다.

-> 처음부터 확장을 고려하면서 코드를 짜야했다.

성능을 고려하지 않은 구현에 급급한 코드를 짰다.

-> 조금 더 고민하고 코드를 작성했다면 더 좋은 코드를 짤 수 있었을 것 같다.
예컨대 DocumentFragment를 사용했다면?
불필요하게 전체를 전부 리렌더링 하는 코드들을 최대한 억제할 수 있었다면?

함수에 필요한 인자를 최대한 억제해주면 좋겠다.

-> 인자를 넘겨줘야하는 것 자체가 불편하다.
또한 함수가 하는 일을 세분화하면 할 수록 가장 작은 일을 하는 함수에 꼭 필요한 인자가 있다면
마치 props 드릴링을 하는것처럼 쓰지도 않을 객체들을 인자로 받고 넘겨주는 일을 반복하는 함수들이 많이 생겼음

xionwcfm / fe-sprint-my-agora-states Goto Github PK