1/10 일일정리 Solo project - 나만의 아고라스테이츠 만들기

1/9 ~ 1/ 10 이틀동안 나만의 아고라스테이츠 만들기 Solo project를 진행하였다.

아고라스테이츠

 

아고라스테이츠는 코드스테이츠의 질문 답변 게시판이다. 

이번 프로젝트의 경우 Html, CSS, javascript를 이용해서 나만의 아고라 스테이츠를 만드는 작업을 했다.

 

1. Discussion list 만들기

더미 데이터를 받아서 DOM을 이용하여 웹페이지에 discussion 리스트를 만드는 작업을 했다.

DOM을 이용한 img 파일 넣기와 더미데이터

위 코드처럼 element를 추가해서 더미 데이터에 있는 각각의 정보들을 받아 웹페이지에 랜더링 되도록 코드를 작성했다.

 

2. Discussion 추가 기능 구현

 입력폼에서 입력을받아서 Discussion list에 추가될 수 있도록 구현했다.

새로운 객체 생성

 위 코드처럼 입력받은 값과 현재 시각을 받아서 더미데이터 형태와 유사한 객체를 만들어 더미데이터 가장 앞에 추가한 후 다시 랜더링을 했다. Discussion 은 추가되지만, 새로고침 하면 데이터가 사라진다.

 

3. 페이지네이션 구현

Discussion을 6개씩 한페이지로 묶어서 페이지 버튼을 누르면 이동 할 수 있도록 구현했다. 어떻게 할지 감이 안잡혀서

구글링을 통해서 페이지네이션 예시를 보고 따라하면서 코드를 작성했다.

https://nohack.tistory.com/125

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

페이지 랜더링 함수와 버튼 랜더링 함수

코드가 너무 많아서 대략적으로 정리하면

1. 페이지 버튼을 생성하고

2. 페이지 랜더링 함수를 만들고

3. 버튼 랜더링 함수를 만든 후

4. 랜더링을 실시한다.

아직 이해 안되는 코드도 있어서 좀 더 살펴봐야 될 것 같다.

 

4. 현지 시각 반영

더미 데이터에 있는 createdAt 이라는 프로퍼티를 사용해 현지시각을 적용해서 Discussion list에 나타나도록 코드를 작성했다.

createdAt: "2022-05-16T02:09:52Z"

코드를 작성하면서도 너무 비효율적으로 작성한다는 것이 느껴졌다... 좀 더 간단한 방법이 분명 있을거 같은데 일단 동작은 하는 것 같아서 나중에 리팩토링 하게되면 좀 더 찾아봐야 할 것 같다.

 

5. Local Storage를 사용해서 추가된 Discussion 남기기

Discussion 추가할 때 그냥 추가하면 새로고침 할 때 추가된 Discussion이 사라지게 되는데, Local Storage를 사용하면 새로고침 해도 기록을 남길 수 있어서 추가된 Discussion이 없어지지 않는다.

Discussion을 추가하는 코드에서 추가된 객체를 Local Storage에 저장하고, 코드 최상단에 더미 데이터에 Local Storage에 저장된 객체를 추가하는 방식으로 코드를 작성했다.

더미데이터에 local storage에 저장된 객체 추가

 

코드를 시험해 보면서 하다보니 Local Storage를 초기화 하는 버튼이 있으면 좋을 것 같아서 추가해봤다.

firstObj는 기존 더미데이터를 복사해 놓은 것

6. 완성본

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

7. 회고

 일단 아쉬웠던 점은 더미 데이터에 질문 내용과 질문에 대한 답변도 다 들어있었는데, Discussion list를 클릭 했을 때 옆으로 질문 내용과 답변이 나오도록 구현하고 싶었는데 시간이 부족해서 하지 못했다.

 

 이번에 처음으로 100줄이 넘어가는 코드를 혼자서 작성해봤는데, 나중에는 코드가 여기저기 계속 왔다갔다 해야해서 가독성도 좋지 않고 혹시라도 오류가 나면 어디서부터 잘못됐는지 찾기도 쉽지 않았다. 나름대로 주석을 달아서 보기좋게 해 보려고 했는데 아직까지는 깔끔한 코딩을 하는것이 잘 안되는 것 같다.

 소그룹 회고에서 그룹원 한분 코드를 보니 css, javascript파일을 여러개로 나누어서 코딩 하신걸 봤는데 엄청 좋은 방법인 것 같다. 깔끔한 코딩 하는법 같은 책도 있는 것 같던데 읽어보는 것이 좋을 것 같다.

 

 CSS 같은 경우 일단은 보기 좋을 정도로만 정렬을 하고, 색을 입혀놓았다.

CSS도 구글링을 하면서 느낀건데 쓸수 있는 기능도 많고, 방법도 엄청 다양한 것 같다. 그리고 적용 시키는 것 자체는 그리 어렵지 않다고 느껴지는데 시간이 되게 오래 걸리는 것 같다. 계속 써보면 익숙해져서 배치라던가 작동방식 같은것이 머리로 그려지지 않을까 생각해본다.