[ React & Node ] Book-Reports-App - 1. Setting

저는 Inflearn 사이트에서 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 라는 강의를 보고 Todo List 프로그램을 만들어 보았지만 뭔가 부족한 느낌이 들었습니다.

 

그래서 Book Reports[독후감] app 을 만들어 볼려고 합니다.

 

일단 기능에 대해 생각을 해볼려고 하는데 FE 부분 부터 생각을 해보자면,

기술 스택은 React + Node.js 를 사용할 예정이며 DB는 mysql을 사용하고 ORM 을 적용을 해볼것입니다.

 

1. 책 이미지를 넣을 공간이 필요합니다.

2. Author (작가) 를 기입할 공간이 필요하다.

3. 독후감 이기에 책에 대해 comment(설명 또는 후기)를 적어야 합니다.

4. 별점 (이 책을 읽고 나의 별점) 을 넣을수 있어야 합니다.

5. 확인 버튼 ( 다 적고 난 뒤 ) 을 클릭 할수 있어야 합니다.

 

이제 BE 부분을 생각하자면

1. React, Node.js 서로 연동을 할것이며 rest api를 통해 react --> epxress.js로 axios 요청을 하여 받아올것입니다.

React 와 NodeJS 연동에 관련된 블로그 포스팅

https://coxemonkey.tistory.com/6

 

디자인은 대충..

 

 

일단 github Repository 를 생성합니다.

npx create-react-app my-app

그리고 cmd 를 키고 작업할 폴더에서 이런식으로 명령어를 칩니다.

이럼 이런식으로 Happy hacking 이라고 나옵니다.

 

폴더를 보면 조금 어지러운데 정리를 조금 해줍니다.

 

import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

 

App.css 안에있는 내용을 모두 지우고

App.js 안에 내용을 조금 수정해줍니다.

 

... 계속 수정중

 

다음 포스트는 기본적인 컴포넌트 작업, express 서버에서 api 받아오는것을 해보겠습니다.