post-blog-server 바로가기
간단한 포스트를 작성, 읽기, 수정, 삭제 등 할 수 있는 CRUD 블로그 웹 앱의 client입니다.
styled-components를 사용하여 스타일을 적용하였고
react-router-dom를 사용하여
LoginPage, RegisterPage, WritePage, PostPage, PostListPage 총 5개의 페이지를 구현하였습니다.
서버에서 제공하는 HTTP 헤더에 'last-page'를 받아와서 PostListPage에서 페이지네이션 기능을 구현하였습니다.
React-redux를 사용하여 상태관리를 합니다
Ducks 패턴으로 redux관련 파일은 모두 modules에 작성했습니다.
Container-Presenter 디자인 패턴으로 데이터 처리와 데이터 출력을 하는 파일들을 나눠서 작성하였습니다.
Container Components는 containers
Presentational Components는 components
폴더에서 확인할 수 있습니다.
axios를 사용하여 API를 호출합니다.
Redux-saga 미들웨어를 사용하여 API 요청과 같은 비동기적 작업을 관리합니다.
배포하는 웹서버를 nginx를 사용하여 새로 구현하지 않고 API를 제공하는 post-blog-server 서버에서 koa-static을 사용하여 정적 파일을 제공하도록 통합해서 구현하였습니다.
그후에 Docker를 사용하여 빌드된 클라이언트와 서버를 이미지로 만들었고
Google Cloud Run에 빌드된 이미지를 올려서 배포하였습니다.
Young-blog 배포된 사이트입니다.
"/register"
"/login"
"/write"
"/" ,"/?tag" , "/@:username"
"/@:username/:postId"
- axios@0.21.1
- immer@9.0.1
- qs@6.10.1
- quill@1.3.7
- react@17.0.1
- react-dom@17.0.1
- react-helmet-async@1.0.9
- react-redux@7.2.2
- react-router-dom@5.2.0
- react-scripts@4.0.3
- redux@4.0.5
- redux-actions@2.6.5
- redux-devtools-extension@2.13.9
- redux-saga@1.1.3
- styled-components@5.2.1