전체 글 (102) 썸네일형 리스트형 React - mysql연동하기, 연결 (데이터불러오기) 저번에는 저장을 했다. 이번엔 불러와서 화면에 출력해보자 디비는 저번의 test테이블을 쓰겟다. 이러한 데이터가 있고 이거를 불러와서 화면에 출력해보자 먼저 server.js를 수정하자 const express = require("express"); const app = express(); const port = 3001; // react의 기본값은 3000이니까 3000이 아닌 아무 수 const cors = require("cors"); const bodyParser = require("body-parser"); const mysql = require("mysql"); // mysql 모듈 사용 var connection = mysql.createConnection({ host : "localhost.. React - Mysql 연동하기, 연결(데이터 저장) 1. 준비 mysql mysql workbench를 사용할 것이다. 2. database 만들기 및 express에 연결하기 database와 table을 만들어주자. 나는 tistory라는 database와 test라는 table을 만들거다. CREATE DATABASE tistory; CREATE TABLE `tistory`.`test` ( `test_key` INT NOT NULL AUTO_INCREMENT, `test_body` VARCHAR(45) NULL, PRIMARY KEY (`test_key`)); key는 AI(Auto Increment)이다. 이제 express에 mysql에 연결해보자 먼저 mysql모듈을 설치해주자 npm install mysql 이전 코드 2020/10/15 - .. React와 Express연동하기 2 저번시간에는 프론트에서 입력을 받고 server에서 출력을 해보았따. 이번에는 반대로 server에서 보내보자 먼저 server.js다 const express = require("express"); const app = express(); const port = 3001; // react의 기본값은 3000이니까 3000이 아닌 아무 수 const cors = require("cors"); const bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use(cors()); app.get('/', (req, res) =>{ res.send(.. React와 Express연동하기 1 준비 과정 1. CRA npx create-react-app tistory(파일명) 2. npm start Express 설치 1. Express설치 npm install express --save --save는 안붙혀도 된다. --save의 뜻은 종속 항목 목록에 저장한다는 뜻이다. --save를 안붙히면 프로젝트를 git clone하여서 다운받았을때에 npm install express를 해줘야하지만 --save를 붙힌 것들이 npm install 만 치면 알아서 설치가 된다. 2. server.js 만들기 server파일과 server.js를 만들어준다. const express = require('express') const app = express() const port = 3001 // rea.. React - SPA(Single Page Application)만들어보기 - 4. Modal창 만들기 Modal창을 만들어보자. material-ui같은 것들은 이번에는 안쓸거다. 직.접 만들거다 constructor(props){ super(props); this.state=({ mode : false, }) } opneModal =()=>{ this.setState({ mode : true, }) } closeModal=()=>{ this.setState({ mode :false, }) } modal을 열고 닫을 수 있게 mode라는 state를 만들고, 클릭함수를 만든다. 그리고 Contact contact를 누르면 mode값이 true가 된다. {this.state.mode? ( Modal X ):null} 삼항 연산자를 사용하여 mode값이 참이면 ~이고 거짓이면 null값이다. (x를 누르면 .. Git, Slack 연동 Add an app을 누른다. 원래는 Install이다. 다운을 받아준다. 채팅방에 /github help를 치면 여러가지명령어에 대한 설명이 나온다. 이중에 원하는 기능을 찾아보고 명령어를 치면된다. 나는 /github subscribe owner/repository명 과 /github subscribe list 만 했다. 그러면 git push origin main을 하면 이런 식으로 나온다. (test는 commit 명이다. ) Git - organization, branch, merge organization을 만들어보자 New organization클릭 free를 선택하면 끝이다. 그리고 초대하고 싶은 팀원이있으면 초대해서 organization 조직을 만들면 된다. 그럼 이제 브랜치에 대해 알아보자 ! 제일 처음은 main이다. 1. branch 생성 git branch branch1 2. git checkout main, git checkout [branch이름] git branch main 또는 git branch branch1 3. git merge [branch이름] git merge branch1 다른 것들은 기본적으로 개인 repository와 비슷하다. 조금 다른점이 있따면 remote이다. 4. git remote add [id] [organization reposit.. Github - 자신의 프로젝트 올리기(git 사용법), commit git이란 것을 사용하기 이전에 왜 쓰는 지에 한번 설명해 주자면 github를 사용함으로써 소스코드 관리가 쉬워 진다. Git은 기본적으로 로컬 저장소를 지원하여 원격저장소가 없어도 사용이 가능하다. 또한 로컬저장소가 있으니 속도도 빠르고 자신의 로컬에 부담없이 커밋도 할 수 있고 원격저장소가 날라가도 로컬저장소를 통해 복구가 가능하다 장점을 예를들어 설명하면 abcde라는 것을 만들고 싶고 abc까지 만들어서 git에 저장을 했다고 가정하자. 그리고 d를 만드는 과정에서 오류가 많이 났고 확실히 되는 abc로 이동을 하고 싶을때에 ctrl + z만을 이용해서 되돌리기는 어려울 것 이다. 그 때에 깃에 확실히 저장되있는 abc를 불러오면 된다. 이렇게 소스코드의 관리가 쉬워지고 브랜치를 사용하면 협업이.. 이전 1 ··· 8 9 10 11 12 13 다음
