React (23) 썸네일형 리스트형 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를 누르면 .. React - SPA(Single Page Application)만들어보기 -3. 파비콘 및 타이틀바꾸기 html에서 태그는 페이지의 타이틀을 뜻한다. 이것을 "열심히 코딩"으로 바꾸면 이처럼 바뀌게 된다. 자, 그러면 react에서 title은 어디 있을 까 ???? public폴더를 열면 index.html이라는 파일이 있을 것 이다. 그곳에 타이틀이 있다. 27번째 줄에 React App을 자신이 바구고 싶은 것으로 바꾸면 된다. 나는 hyuks blog로 할 거다 짜잔~! 다음은 파비콘을 바꿔보자 파비콘은 16X16 또는 32X32를 쓴다. 구글에 검색해보면 무료로 크기를 변환해주는 사이트도 있고 무료로 배포해주는 사이트도 있다. 간단한 실습을 위해서 무료 이미지를 다운 받아보자 무료 파비콘 사이트 : www.freefavicon.com/ https://www.freefavicon.com/ Try o.. React - SPA(Single Page Application)만들어보기 -2. 각 컴포넌트 지금 현재 만들 페이지는 spa로 나만의 포트폴리오(?) 자기소개 페이지이다. 나는 각 컴포넌트를 이렇게 넣었지만, 여러분들의 컴포넌트는 각자가 짜보는 것을 추천한다. 나의 졸업작품이자 처음으로 웹페이지를 만들어본 team2cc의 2cc(campus chatbot)다. 같이 만든 친구와 나 둘다 cc였어서 팀명을 2cc로 정했었다... (현재는 ... 또르륵...) 잡설은 그만하고 컴포넌트 설명을 해주겠당 ! Intro부분의 각 div의 크기는 저렇게 줬다 이유는 @media를 쓰고 싶지 않아서 이다. Intro.js import React, { Component } from "react"; import "./Intro.css"; import me from "./me.jpg"; export default.. React - SPA(Single Page Application)만들어보기 -1. 설계 및 내비게이션바 리액트를 익혔다. 요새 싱글페이지가 유행이란다. 그래서 한번 익혀보고자 한다. 먼저 설계를 했다. 위 그림을 설명하자면 제일 위에는 내비게이션 바가 있다. 그리고 이쁜사진 하나가 있고 그밑으로 나의 소개글, 그리고 프로젝트 소개를 차례대로 적을 것이다.(db는 안쓸 예정) nav bar는 상단에 고정이고 각 메뉴를 누르면 메뉴의 글로 이동한다. 그럼 먼저 메뉴바를 만들어 보겠다. 참, 모든 것들은 반응형으로 구축할 것이다. Nav.js import React, { Component } from "react"; import "./Nav.css"; export default class Nav extends Component { render() { return ( Hyuks Blog 소개글 2cc 와글와글 ... React 입력창(onChange를 사용해서 Input창 만들기) 이번에는 onchange함수를 사용하여 input창을 만들어 보겠습니다. 먼저 function으로 만들어 보겠습니다. 코드를 직접입력 해보시면 아시겠지만 저기 input창에 입력하시면 바로바로 밑에 글자가 바뀌는 것을 아실수 있습니다. 다음으로 class로 한번 만들어 보도록 하겠습니다. 너무 기초라서 재미가 없으시죠? 라이프사이클에 대해서 설명하겠습니다. 이전 1 2 3 다음
