React + Node 게시판 구현

5tr1ker·2022년 6월 9일

프로젝트 후기

프로젝트 기간 : 2022.4 ~ 2022.5

프론트엔드와 백엔드의 기본 지식을 다지기 위해 진행된 프로젝트 입니다. 클라이언트에 깔끔한 디자인과 정렬된 데이터 노출 , 데이터베이스를 이용해 데이터 일관성과 제약조건을 이용해 데이터 무결성을 유지시키는데 많은 도움이 된 프로젝트입니다. 비록 대학 공부와 병행하는 프로젝트기에 시간이 많이 걸렸으나 그 이외에 어려웠던것은 없었습니다. 기능적으로 만족하는 프로젝트이지만 보안이나 오픈소스활용 , 대중적인 서버 프레임워크를 사용하지 못한 아쉬움이 크지만 이후에 심화과정을 통해 더욱더 많은 지식으로 프로젝트를 진행할 것 입니다.

프로젝트 요약

주요 기능

게시글과 댓글 (CRUD)
로그인과 회원가입 (CRUD)
검색과 페이징
파일 업로드
해시 태그
알림
통계
쿠키 , 세션

구현

로그인 / 회원가입 / 아이디 찾기

< 기능 >
로그인 창에 접속시 보이는 화면입니다. username 과 password를 입력을 받고 로그인 버튼을 누르면 서버에서 데이터를 전송해 해당 데이터가 유효한지 검사를 받게 됩니다. 로그인 없이 보기 로 아이디 없이 볼 수 있으나, 게시물 사용시 이용이 제한될 수 있습니다.

백엔드 로직

회원가입

< 기능 >
아이디를 만들때 필요한 정보인 username 과 password를 입력받습니다. 비밀번호 표시를 통해 본인이 작성한 비밀번호를 확인할 수 있으며, 하단 라벨에 적힌 조건에 만족하는 데이터를 작성 후 회원가입 을 누르면 계정이 생성됩니다.

백엔드 로직

아이디찾기

< 기능 >
아이디 분실 시 아이디 찾기 기능을 이용할 수 있으며, 본인의 아이디를 작성하고 비밀번호 찾기 버튼을 눌러 해당 계정의 앞 3자리 비밀번호를 받을 수 있습니다.

백엔드 로직

게시글

목록 ( 글 불러오기 , 페이지네이션 )

< 기능 >
게시글 입장시 첫 초기 화면입니다. DB에서 모든 데이터를 가져와 한 페이지에 최대 10개씩 노출시킵니다. 이후에 10페이지당 1개의 페이지네이션을 구성하여 하단에 페이지네이션 번호를 지정할 수 있습니다. 빨간 네모로 친 구간 왼쪽에는 전체 페이지 갯수를 나타내며 , 오른쪽에는 최근 일주일 내로 작성된 페이지를 나타냅니다. 또한 제목 옆에 파란 글씨는 포스터에 등록된 댓글 갯수를 나타냅니다.

백엔드 로직

DB 데이터 추출 방법

게시물 테이블과 댓글 테이블간 왼쪽 외부조인을 사용해서 포스트 별로 Group By를 이용해 집계함수 Count() 를 이용해서 각 테이블마다 댓글 수를 반환합니다.

목록 ( 정렬방식 , 해시태그 )

< 기능 >
게시글은 최근 등록순 , 많은 추천수 , 많은 조회수 순서로 정렬할 수 있으며, 각 옵션마다 내림차순으로 정렬이 됩니다. 오른쪽 하단의 네모 박스는 해시태그 요약이 있으며, 태그 데이터와 태그의 갯수를 요약하고 있습니다.

백엔드 로직

DB 데이터 추출 방법

1 . 게시글 정렬 순서는 Order By를 이용해서 데이터 순서 조정합니다.
2 . Group By를 이용해와 집계함수 Count()를 이용해서 각 태그별로 갯수를 추출합니다.

검색 ( 태그검색 )

< 기능 >
오른쪽 하단에 태그를 누르게 되면 해당 태그가 작성된 게시글만 따로 불러옵니다. 상단 네모칸에는 어떤 태그로 게시글을 불러왔는지 태그의 정보를 나타내고 있습니다.

백엔드 로직

DB 데이터 추출 방법

첫번째 Select 줄에는 외부 조인과 집계함수 Count , Group by를 이용해 각 포스트마다 댓글 개수를 반환하며 , 두번째 줄에서는 서브 쿼리와 ANY 연산자로 태그가 하나라도 있는 포스트를 추출합니다.

검색 ( 검색어 , 검색어 x 태그검색 )

< 기능 >
상단 프레임에 있는 검색어를 통해 제목이나 내용에 해당 내용이 포함되는 게시글을 전부 가져옵니다. 또한 태그 검색을 할 때 검색어를 통해 게시글을 찾을 수 있습니다.

백엔드 로직

DB 데이터 추출 방법

위에 태그 검색과 같이 첫번째 Select 줄에는 외부 조인과 집계함수 Count() , Group by를 이용해 각 포스트마다 댓글 개수를 반환하며 , 두번째 줄에서는 서브쿼리를 이용해 ANY 연산자로 태그에 해당되는 포스트와 두번째 서브쿼리에서는 Like문과 ANY연산자를 이용해 제목과 내용에 해당 내용이 포함되어 있는 포스트를 반환합니다.

게시글 등록

< 기능 >
new post를 눌러 새 글을 등록할 수 있습니다. 왼쪽에 텍스트 에디터를 통해 글을 작성할 수 있으며 , 오른쪽에 글 옵션을 통해 게시글의 옵션을 바꿀 수 있습니다. 우선 작성취소 cancel 버튼과 글 출간 update 버튼이 있으며 , 그 밑에 Public in Section 구역에는 비밀글 설정인 Private Post 와 댓글 차단인 Block comments 가 있습니다. 하단이 Title 구역에서 글 제목을 정할 수 있으며 , 그 밑에는 HashTag를 작성할 수 있습니다 + 버튼을 눌러 원하는 내용을 작성을 하며 x 버튼을 눌러 해시태그를 삭제할 수 있습니다. 하단에 Attachments 는 첨부파일을 등록하는 기능으로 add attachments 버튼을 눌러 첨부파일을 추가할 수 있으며 , 등록된 첨부파일은 x 버튼 를 통해 제거할 수 있습니다.

백엔드 로직

DB 데이터 추출 방법

게시글 번호를 갱신하기 위해 집계함수 MAX()를 이용해 게시글중에 가장 큰 숫자를 가져와 1을 더해서 키값으로 사용합니다.

게시글 보기

<기능>
목록에서 포스트를 눌렀을 때 이동되는 화면입니다. 상단에는 작성자와 제목 , 그 밑에는 순서대로 조회수 , 추천수 , 댓글 수 , 작성날짜가 존재합니다. 그리고 그 밑에 작성된 내용과 태그 , 첨부파일이 순서대로 나타내고 있습니다. 오른쪽 위에는 왼쪽부터 뒤로가기 , 글 삭제 , 글 수정 , 추천이 있습니다. 이 리모컨은 작성자를 제외하고 삭제 , 수정할 수 없으며 , 자신의 글에 추천을 할 수 없습니다.

백엔드 로직

게시글 수정

< 기능 >
게시글 보기에서 수정버튼을 눌렀을 때 들어오는 화면입니다. 작성한 데이터를 그대로 불러와 데이터를 보여주며 , 데이터를 수정해서 Update 를 누르면 글이 수정이 됩니다.

백엔드 로직

댓글 등록 / 삭제

< 기능 >
게시글 조회 하단에 댓글 작성창과 댓글이 있습니다. text 창에 댓글을 작성 후 Commit 버튼을 눌러서 댓글을 작성할 수 있습니다. 작성된 댓글은 하단에 나타나며 , 댓글 삭제는 쓰레기통 모양의 버튼을 눌러 삭제할 수 있습니다. 단 삭제 버튼은 본인이 작성한 댓글에만 나타납니다.

백엔드 로직

알림

< 기능 >
본인이 작성한 게시글에 등록된 댓글이 생기면 알림에 정보가 나타납니다. 본인이 작성한 댓글은 나타나지 않으며 작성자가 어떤 게시판에서 몇시에 어떤 글을 작성했는지 나타나며 , 해당 알림을 누르면 댓글이 작성된 게시글로 이동이 됩니다. 하단에 알림 설정은 프로필로 연결됩니다.

백엔드 로직

DB 데이터 추출 방법

서브 쿼리를 이용해 내가 작성한 글의 번호를 select로 추출한 다음에 ANY연산자로 댓글 데이터를 전부 추출합니다. 다만 댓글 작성자가 본인인 댓글은 뽑지 않습니다. 이 과정을 Union을 이용해 다른 게시판에서도 데이터를 추출합니다.

프로필

< 기능 >
프로필 화면 상단에는 통계치가 나오며 , 자신이 작성된 모든 글에 대한 조회수와 , 작성한 게시글 수 , 작성한 댓글 수와 가입일자를 나타내고 있습니다. 하단에는 프로필 정보가 있으며 Edit Profile 버튼을 눌러 개인 정보를 수정할 수 있습니다. 오른쪽에는 설정을 할 수 있으며 , 로그인 지속시간과 알람 설정으로 알림을 받을건지 여부를 선택 할 수 있습니다.
하단에 Delete account 로 계정을 삭제할 수 있으며 , 삭제하면 본인이 삭제한 글과 댓글이 모두 사라집니다. 저장 및 돌아가기 로 옵션과 계정 정보를 수정한 데이터를 저장할 수 있습니다.