미니 게시판

타입스크립트, 리액트, 스타일드 컴포넌트 등을 배웠으니, 작게라도 프로젝트를 하나 해봐야겠다는 생각이 들어서 미니 프로젝트를 시작했다. 딱히 생각나는 주제가 없어서 게시판으로 정했다. 저장소는 다음과 같다. 깃허브 만들면서 생각하고 정리했던 것들을 적어본다.

목적

게시글과 댓글을 읽고 쓸 수 있는 게시판

목표

1. 게시글을 작성하고 볼 수 있다.
2. 댓글을 작성하고 볼 수 있다.
3. 작성한 게시글과 댓글을 저장하여 다시 볼 수 있어야 한다.

스택

1. react, typescript, styled-component
2. 리덕스 없이 useReducer, useState, context api로 상태 관리를 한다.

생각거리

• Post(게시글) 컴포넌트가 비대해졌다. 게시글과 댓글 관련 기능들이 모여 있어서 그런 거 같다. 어떤 게 바꿀 방법이 없을까.
  • Post 컴포넌트 안에 있던 게시글, 댓글 관련 reducer와 context 소스를 분리하였다. 각 컴포넌트 안에 context와 reducer 디렉토리를 만들어서 관리.
  • reducer와 context를 관리하는 방법을 찾아보니, 모든 컴포넌트의 reducer와 context를 모아놓은 디렉토리를 만들고 그 안에 다시 컴포넌트 별로 분리하기도 하는 것 같다.
  • 이 부분은 계속 경험을 쌓아봐야겠다.
• 라우팅 대상이 되는 컴포넌트들을 페이지로 따로 분류하는 것도 같다.
• 라우팅 경로 이름이 별로다. post/view-all, post/write, post/1, post/2... 경로 이름을 잘못정하면서 기존의 Post 컴포넌트가 비대해진 것 같다. 머릿속에서 제대로 나누어져 있지 않으니, 일단 한 파일에 놓고 보자는 생각으로 처리했었다.
  • 동일한 상위 경로(/post)를 지니면서 정적(/post/write, /post/all), 동적(/post/숫자)로 변경하는 방법을 찾아봐야겠다.
  • post/all, post/write, post/1(동적)을 다룰 수 있도록 라우팅을 변경하고 페이지도 세분화하였다.

결과

컴포넌트 구성

미니 게시판을 구성하는 컴포넌트들

위 도식에 페이지용 컴포넌트가 4개이지만, 중간 단계에서 게시글(Post)이라는 거대한 페이지 컴포넌트에서 게시글 목록, 게시글 작성, 게시글 보기를 모두 처리했었다. 비대해진 컴포넌트를 나누는 과정을 '생각거리' 문단에서 정리하였다.

글 목록

게시글 목록을 볼 수 있다. 각 목록을 누르면 해당 게시글로 이동한다.

게시글 목록의 레이아웃을 작성하고 정렬을 위해 flex를 사용하였다. 테이블을 사용하는게 보통의 접근 방법일 것 같은데, 써봐야 느는 법이라 flex로 시도했다. 기억나는 문제점은 게시글의 헤더(번호, 글제목...)와 바디(게시글 목록)의 정렬을 맞추는 게 생각대로 되지는 않았던 점이다. 헤더 쪽은 문자열이 고정되어 있지만, 바디안에 담긴 글제목 등은 유동적으로 변하기 때문이다. 이를 해결하기 위해서 바디 안의 요소들에 width를 지정하여 문자열이 짧아도 일정 영역을 유지하도록 했다. 너무 길어질 경우를 대비하여 일정 길이 이상이 되면 문자열을 자르고 말줄임표를 붙여서 해결했다.

 

각 목록을 누르면, 해당 글로 이동할 수 있도록 하고 싶었다. 리액트 라우터의 Link 컴포넌트를 사용해서 해결했다. 기본 설정된 텍스트 데코레이션을 없애기 위하여 스타일드 컴포넌트로 한 번 래핑 하여 사용하였다.

게시글 보기, 댓글 보기, 댓글 추가

게시글을 볼 수 있고, 게시글 안에 댓글을 작성하여 등록할 수 있다.

글을 보는 페이지는 작성된 게시글을 볼 수 있고, 게시글에 딸린 댓글을 보거나 게시글에 댓글을 추가할 수 있다. 현재 프로젝트에서 가장 복잡한 페이지라고 할 수 있다. 이를 위해 게시글 컴포넌트와 댓글, 댓글 쓰기 컴포넌트를 분리하고 페이지 컴포넌트에서 이 셋을 불러오도록 하였다.

이 페이지는 게시글, 댓글 리스트, 댓글 작성 컴포넌트를 자식으로 가지고 있다..

위 이미지 가장 아래에 있는 텍스트 에어리어와 버튼이 댓글 쓰기 컴포넌트이다. 등록을 누르면 저장이 되어야 하고, 저장된 댓글은 게시글에 나타나여 바로 볼 수 있어야 한다. 이를 위하여 댓글과 관련된 context와 reducer를 추가하여 상태 관리를 하였다. 댓글용 reducer의 dispatch함수를 호출할 수 있는 함수를 만들어 context에 콜백함수로 제공했다. 댓글 컴포넌트에서 useContext를 이용하여 콜백함수를 얻고, 등록을 누르면 해당 콜백함수를 호출하도록 하였다. 부모 컴포넌트(여기선 현재 페이지 컴포넌트)의 상태가 변하게 되고, 렌더링이 발생하여 업데이트된 댓글 목록을 볼 수 있다.

글 작성

글 작성하기 페이지

글 작성하기 페이지에선 글 작성하기 컴포넌트를 그대로 사용하였다. 등록한 게시글은 글목록보기 페이지에서도 볼 수 있어야 한다. 글 작성하게 페이지와 글 목록보기 페이지는 형제 컴포넌트이기에 부모 컴포넌트(앱 컴포넌트)에 context와 reducer를 추가하여 상태를 관리했다. 

 

뒤로가기뒤로 가기 기능과 작성완료 후 작성한 게시글을 바로 볼 수 있도록 하기 위하여 useNavigate훅을 사용하였다. 뒤로 가기에선 인자로 -1을, 작성한 게시글을 보기 위해 게시글을 저장하기 위한 id를 이용하여 '/post/숫자'를 사용하였다. 

추가 목표

1. 게시글과 댓글을 localStorage하고 있다. DB로 옮기고, 서버로부터 받아올 수 있게 한다.
2. RTK를 사용하여 상태 관리를 개선한다.
3. 커뮤니티(레딧 등)의 게시판이 어떻게 되어 있는지 더 자세하게 관찰하고, 그 동작을 적용한다.