• Blog
• projects

Typescript full-stack 게시판 프로젝트

• React
• Recoil
• Typscript
• webpack
• SASS
• Javascript
• Nodejs
• Expressjs
• HTML5

마지막 업데이트: 2021-01-19

1.기술스택

• frontend
  • react
  • typescript
  • recoil
  • webpack
• backend
  • node.js
  • typescript
  • express.js

2.구현기능 목록

(1) 게시글 목록

• 글번호 / 제목 / 작성자 / 작성일 등의 정보를 볼 수 있다

• 게시물을 클릭하면 해당 상세 페이지로 이동한다

• 게시물을 검색할 수 있다.

• 작성일을 기준으로 내림차순/오름차순 정렬이 가능하다.

• 작성자를 클릭했을 때, 작성자가 작성한 게시물만 조회할 수 있다.
• 초기화 버튼이 존재하며, 해당 버튼을 클릭할 경우 정렬/검색 등이 초기화된다.

• 게시물 페이지네이션이 가능하며, 한 페이지에 볼 수 있는 게시물의 갯수를 선택하거나 입력하는 영역이 존재한다.

(2) 게시글 조회

• 글번호 / 제목 / 내용 / 작성자 / 작성일 등의 정보를 볼 수 있다.
• 수정 / 삭제 / 목록 버튼 이 존재한다.
• 수정을 클릭시 수정 페이지로 이동한다.
  • 수정 페이지로 이동하는 경우, 해당 게시글의 내용이 기본적으로 입력된 상태로 보여져야 한다.

• 삭제를 클릭시 게시글이 삭제된다.
• 목록을 클릭시 목록 버튼으로 이동한다.

• 404 페이지
  • 없는 게시물을 조회할 경우에 대한 이동한다.

(3) 게시글 작성/수정

• 제목 / 내용 등을 입력할 수 있는 input이 있다.
• input을 채운 후 전송 버튼을 클릭할 경우 게시물이 작성(수정) 된다.
• 게시글 작성이 완료되면 자동으로 해당 게시물을 조회하는 페이지로 이동한다.

(4) API 오류 관련

• 4XX, 5XX status에 대한 응답이 내려올 경우에 대한 UI 처리가 존재한다.
  • 없는 페이지로 접근할 경우 404 페이지를 만들고 500 관련 에러가 발생할 경우, 에러에 대한 메세지를 띄워준다.

(5) 유저 정보 전역화

• recoil을 사용하여 구현하였습니다.

3.실행방법

back-end 폴더에서

./back-end

npm install
npm start

front-end 폴더에서

./front-end

npm install
npm run start

build

프론트 엔드 프러덕션 빌드 커멘드는 front-end 폴더에 가서

./front-end

npm run build