FullStack Project

• 프로젝트를 하면서 오늘은 서버말고 클라이언트를 만드는 실습을 하였다.
  • client 파일에서 npx create-react-app . 으로 설치를 해주고, 필요없는 파일들을 삭제하고 , 코드를 수정하는 작업을 하고 Axios 를 설치해주었다. npm install axios

App.js (Client)

• axios 설치를 해주고 , 위에 import를 한 후 , useEffect로 get요청을 하였다.
• 응답을 확인하기 위해서 console.log(response)를 했고 db에 있는 data를 보려면 console.log(response.data) 로 하면 db 테이블에 있는 데이터들을 볼 수 있었다.

Server

• MySQL 서버를 먼저 열어주고, 서버폴더 안에서 npm start로 nodemon을 실행시켜주었다.
• 하지만 서버에서 cors를 설치를 안해서 처음엔 response를 볼 수 없었는데, 설치를 해주니 정상적으로 데이터가 나왔다.
• server folder index.js 파일에 cors import, middleware를 쓰기위해 app.use(cors()); 도 해주었다.
• 그리고 get 요청을 한 http://localhost:3001/posts 로 가니까 , TutorialDB에 저장되어있는 데이터들이 렌더링 되었다.

Client

• 이제 서버에서 볼 수 있는 데이터들을 웹에서 display 하기위해서 App.js 에서 코드를 작성하였다.
• axios, 그리고 useState, useEffect 를 import 해주고 ,
• 데이터 리스트들을 보기위해 useState 하나를 만들어서 초기값은 빈배열로 주었다.
• 그리고 App funcion 안에서 가장 메인인 App div태그 사이에 ListOfPosts 를 map으로 전부 가져와서
  value와 key를 인자로 받아 post, title, body, footer className을 만들어 주었다. 그리고 value.title, value.postText, value.username 이렇게 Db에있는 속성에 접근해서 데이터들을 가져왔다.
• 그렇게 하니 값들이 렌더링 되었다.

App.css (Client)

• 그냥 데이터들만 보이면 밋밋해서 css로 꾸며주었다.

아이디어

• 프로젝트가 끝나면 db ERD 도 만들고 페이지를 좀 더 꾸미고 수정해서 전북대 중고도서 페이지를 만들어 보려한다