성공을 즐기자

React는 SPA(Single Page Application)을 만드는데 최적화되어있다. 별도록 라우팅기능은 제공하지 않지만 react-router라는 라이브러리를 이용하여 라우팅 할 수 있다. 처음에는 직접 구현하려고 했다가 css가 이상해지고 데이터가 이상하게 보였다. 그래서 그냥 라이브러리를 이용하여 구현하기로 했다. 페이지네이션 라이브러리에도 여러개가 있는데 react-js-pagination를 사용했다. npm install react-js-pagination 이제 페이지네이션을 구현해보자! 파일 구조!! 원래 LostFound와 Notice에 BoardList.js가 각자 있었지만 둘다 거의 (99%) 동일한 코드이기 때문에 BoardPage.js를 만들어서 index.js에서 불러주었다. ..

일단 결과 화면 -! DB에 있는 데이터들이 화면에 잘 보이는 것을 확인 할 수있다. 파일 구성 : 1. server.js에서 길 지정하기 const board = require('./routes/board'); const PORT = 4000; // board 처리는 './routes/board'에서 처리 app.use('/board', board); // server port 4000 할당 // 클라이언트와 다른 번호로 충돌나지 않도록 app.listen(PORT, () => { console.log(`Server run : http://localhost:${PORT}/`) }) app.use를 이용해서 uri에 /board가 있다면 board라고 지정된 const, 즉 /routes/board에서 ..

0. 파일 구조 1. DB 설정 1-1. mysql DB를 만든 후 권한설정을 한다. 첫번째 빨간색에는 user이름이 두번째 빨간색에는 비밀번호가 들어간다. 1-2. 사용할 데이터들을 DB에 insert한다. 2. config -> db.js 수정 const mysql = require('mysql'); const db = mysql.createPool({ host : '[host]', user : '[유저 이름 ]', password : '[비밀번호]', database : '[DB 이름]' }); module.exports = db; 만든 DB에 접속할 수 있도록 config에 db파일을 만들어준다. 3. server.js 수정 const express = require('express'); cons..

1. server 디렉토리 안에 config와 routes디렉토리, server.js 를 만든다. 2. server.js const express = require('express'); const app = express(); const api = require('./routes/index'); // api 처리는 './routes/index'에서 일괄처리 app.use('/api', api); // server port 4000 할당 // 클라이언트와 다른 번호로 충돌나지 않도록 const PORT = 4000; app.listen(PORT, () => { console.log(`Server run : http://localhost:${PORT}/`) }) 3. Proxy ; 이를 위해서 package..

1. 부트스트랩 사이트에 들어간다. 2. Read the docs로 들어간다. 3. quick start의 설명을 따른다. public -> index.html 파일에서 첫번째 빨간줄인 중간에 css가 들어있는 줄을 복사하여 안에 넣는다. 두번째 빨간줄인 중간에 js가 들어있는 줄을 복사하여 가 끝나기 전에 넣는다. 3. 요소를 갖고와서 사용한다. 이런식으로! import List from './List'; import Table from 'react-bootstrap/Table'; import bootstrap from 'bootstrap' function Table_list() { return ( {/* */} No 제목 글쓴이 작성일자 1 아이패드 주인찾아요 김철수 2022-07-28 2 아이패드 ..