성공을 즐기자

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에서 ..

어플을 위한 개발 환경 설정 완료-! 원래 있던 안드로이드 스튜디오에서 새로운 버젼의 안드로이드 스튜디오로 업데이트 하였다. 나는 원래있던 안드로이드 스튜디오가 잘 삭제되고 새로운 안드로이드 스튜디오가 잘 설치될거라 생각했다. 그러나 설치를 완료하고 열자마자 안열리는 에러가 발생하였다. java.lang.runtimeexception: could not find installation home path. 환경변수 설정부터 인텔리제이 설치까지 전부 구글링 해보았다. 구글링 해보니 idea.properties를 파일에 만들어보라고 해서 jdk 파일/bin 에 만들어보고 했는데 소용없었다. 그래서 파일에서 Android -> Android Studio를 찾아보았는데 2개가 설치되어있었다. 원래 안드로이드 스튜..

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. cmd 창에 docker ps를 통해 컨테이너의 ID를 알아낸다. (컨테이너가 run상태여야 한다.) 2. docker exec -it [컨테이너 ID] mysql -uroot -p 입력 또는 그냥 여기서 들어가도 된다. 3. 비밀번호 입력 후 들어갈 수 있다. 4. show databases; 데이터 베이스들을 확인한다. 5. use [데이터 베이스 이름] ; 이제 원래 사용하던 대로 mysql 명령어를 이용해서 테이블들을 이용하면 된다. [+ cmd에서 복붙을 할 때는 마우스 우클릭을 이용하면 된다. ]

0. spring 프로젝트 생성 start.spring.io 사이트에서 프로젝트를 생성한다. https://start.spring.io/ 1. docker 이미지 pull & 컨테이너 실행 docker run -e MYSQL_ROOT_PASSWORD=mysqlpw -e MYSQL_DATABASE=demo -p 3306:3306 mysql:8 위 명령어를 cmd에 입력해준다. (도커를 킨 상태에서) 비밀번호는 mysqlpw이고 database이름은 demo이다. 이런 식으로 갖고와진다. 2. application.properties 입력 spring.jpa.hibernate.ddl-auto=no..

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 아이패드 ..