CRUD Blog Webpage

간단한 글작성,수정,삭제가 가능한 블로그형식의 웹페이지입니다.

---

Description

개인 프로젝트로 만들어본 웹페이지입니다.

기본적인 웹페이지의 흐름과 구조를 익히고 배우기위해 만들어보았습니다

작성하기 버튼을 클릭하면 제목과 작성자 이름 이메일, 내용을 입력하며 글을 작성할 수 있습니다. 그러면 화면에 제목고 작성자와 작성자 이메일이 보이느 것을 확인할 수 있습니다. 그리 옆의 버튼들의 클릭하여 수정,삭제, 내용 상세보기가 가능합니다.

디렉터리 구조

  ┣ 📂src
  ┃ ┣ 📂components
  ┃ ┃ ┣ 📜About.js
  ┃ ┃ ┣ 📜AddEdit.js
  ┃ ┃ ┣ 📜ContactForm.js
  ┃ ┃ ┣ 📜Contacts.js
  ┃ ┃ ┣ 📜Error.js
  ┃ ┃ ┣ 📜Header.js
  ┃ ┃ ┣ 📜View.js
  ┃ ┃ ┗ 📜index.js
  ┃ ┣ 📂redux
  ┃ ┃ ┣ 📜actionTypes.js
  ┃ ┃ ┣ 📜actions.js
  ┃ ┃ ┣ 📜reducer.js
  ┃ ┃ ┣ 📜root-reducer.js
  ┃ ┃ ┣ 📜sagas.js
  ┃ ┃ ┗ 📜store.js
  ┃ ┣ 📜App.css
  ┃ ┣ 📜App.js
  ┃ ┣ 📜firebase.js
  ┃ ┣ 📜index.css
  ┃ ┣ 📜index.js
  ┃ ┣ 📜reportWebVitals.js
  ┃ ┗ 📜setupTests.js
  ┣ 📜.gitignore
  ┣ 📜README.md
  ┣ 📜package-lock.json
  ┗ 📜package.json
  ┣ 📜package.json

사용예시

demo page : https://octdoki.github.io/Fboard/

[메인] 버튼 클릭 후 [작성하기] 버튼을 클릭하여 자유럽게 글을 작성할 수 있습니다. 그리고 옆의 버튼들을 이용항 수정,삭제,상세보기 등이 가능합니다

Enviorment

• 1.Git
• 2.NodeJS / NPM

Technologies

• antd
• bootstrap
• firebase
• lodash
• react
• react-bootstrap
• react-dom
• react-redux
• react-router-dom
• react-scripts
• redux
• redux-logger
• redux-saga
• redux-thunk