[React] 리액트를 활용한 간단한 텍스트 게시판

 

 

 

 

리액트를 활용한 간단한 게시판

---

리액트를 공부하면서 정말 조금이라도 서버 단과 DB를 직접 구현해서 간단한 텍스트 게시판을 만들어보았습니다. 블로그 게시판처럼 위지윅 에디터인 Ckeditor5를 연동하려 했으나, 웹팩 설정에서 오류가 도저히 고쳐지지 않아 나중에 다시 시도해보거나 다른 에디터로 추가해야겠습니다. 연동하려면 이미지 업로드 기능 때문에 백엔드도 손봐야 합니다.

 

* 작업환경

---

• 장비 : MacBook Pro 13인치(macOS BigSur)
• OS : Mac
• IDE : Visual Studio Code
• 브라우저 : PC : 크롬(Chrome) Mobile : Safari(iOS)

 

 

* 개발환경

---

 

프론트엔드 : 리액트(Webpack, babel), CSS(반응형)

 

- 라이브러리 : Material-UI, React-Router-dom(BrowserRouter), Redux, axios

 

백엔드 : Node.js

- 라이브러리 : Express, pm2, Mongoose, dotenv, query-string, bcrypt

 

데이터베이스 : MongoDB

 

배포 : AWS EC2 Linux

 

 

initial Screen

---

 

Simple-React-Board

 

Simple-React-Board

 

junheeleeme/React_board

 

 

Simple-React-Board는 리액트와 리액트 라우터를 사용해 SPA(Single-Page-Application) 방식으로 구현했습니다. 글은 제목과 본문, 닉네임, 글 비밀번호를 입력하여 작성할 수 있도록 구성되어있습니다.

 

글 수정과 삭제는 작성 시 입력했던 비밀번호 확인 후 진행할 수 있습니다. 비밀번호는 bcrypt를 사용하여 암호화 후 DB에 저장합니다. 

 

 

React-Roouter의 경우 상세페이지에서 새로고침 했을 경우 서버에서 경로를 알 수 없어 404 에러가 발생합니다. 이를 해결하기 위해서 HashRouter를 사용하는 방법이 있습니다. HashRouter는 주소에 #을 표기해 사용하는데, 새로고침 후 경로를 찾는데 문제는 없지만, '#' 문자 때문에 검색엔진이 페이지를 제대로 읽을 수 없어 SEO에 제약이 있다고 합니다. 그래서 최종적으로는 SSR(Server-Side-Rendering) 방식으로 변경해야 합니다.

 

상태 관리는 기본 useState를 사용했으나 추후 Redux로 변경 예정

(적용 완료 21-08-01)

 

다음 개선사항으로는 게시글이 많아졌을 때를 대비해 페이징 처리를 해야 함.

(페이징 처리 완료)

 

Next.js를 사용해 기존 SPA 방식에서 SSR 방식의 Simple Forum으로 개편하였습니다. 기존 텍스트 작성만 가능했으나 Toast UI 에디터를 적용해 위지윅 환경에서의 글 작성 및 이미지 업로드가 가능합니다. 회원가입 및 로그인 기능을 추가하였습니다.

 

(2022-02-06)

 

 

Simple Forum

[Node.js] Bcrypt로 사용자 비밀번호 암호화하기