리액트9 [React] + express + mariadb 데이터베이스 화면 띄우기 todo list 원래 App.js 상태값에 데이트베이스 대신 배열로 대신하여 화면에 띄웠었는데 이제 express 와 mariadb 를 연결하여 데이터베이스 내용을 화면에 띄울거다. 먼저 app.js 에 있던 배열을 지워준다. class App extends Component{ constructor(props){ super(props) this.state={ todolist:[] } } 이제 서버와 db 세팅을 해야한다. src 폴더밑에 server폴더를 만들어주고 server.js 파일을 생성해준다. const express = require('express'); const db = require('./config/db'); const bodyParser = require('body-parser') .. 2023. 7. 2. [React] 슬라이드(React Slick) 사용 npx create-react-app react-slide-ex npm install react-slick npm install slick-carousel components 폴더에 MySlider.js 생성, css폴더에 MySlider.css, images 폴더 생성하기 MySlider.js 에 슬릭 라이브러리 임포트 해주고 사진도 불러오기 import '../css/MySlider.css'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import img1 from '../images/slide-images1.jfif' func.. 2023. 6. 24. [React Hook] axios / api 받아오기 리액트 훅으로 api 받아오기 npx create-react-app react-hook-axios useEffect 임포트 해주기 import './App.css'; import {useEffect} from 'react'; function App() { //리액트 오리지날 - componentDidMount 기능 useEffect( () => { },[]) //[name], ... //useEffect - componentDidMount, componentDidUpdate, componentWillUnm ... return ( 화면 ); } export default App; axios 써주기 import './App.css'; import {useEffect} from 'react'; function.. 2023. 6. 18. [React] React hook CRUD npm install express npm install mysql npm install react-router-dom npm install axios (XMLHttpRequest -> $.ajax -> axios) npm install query-string queryString.parse() 프로젝트 React - Express -MySQL React : 화면 만들고, 서버에 요청(axios), 응답받고 Express : React에서 보낸 요청을 받아들여서 인자, 쿼리스트링, 바디를 읽음 , 읽고 꺼내고 가공(요청된 정보를 가공)함/ 이 연결된 데이터베이스에 CRUD MySQL : DB구축 -------------------------------------------------------------.. 2023. 6. 18. [React hook] 리액트 훅으로 카운터 만들기 React 2013 - 클래스형 컴포넌트, 함수형 컴포넌트 React hook 2018 -함수형 컴포넌트 -useState, useEffect, useRef hook - 갈고리 ------------------------------------------------------------------------------ 기존의 클래스형으로 만들었던 카운터 기능을 리액트 훅으로(함수형으로) 만들어보기 npx create-react-app react-hook-counter Counter1 은 클래스형 import { Component } from "react"; class Counter1 extends Component{ constructor(props){ super(props) this.state={ num:.. 2023. 6. 17. [React] 검색창 만들기 / api 서버로 데이터 받아와서 검색기능 프론트엔드 4 : 서버에서 DB접근해서 가져와서 화면뿌리기(풀스택) express 어떻게 받고 응답하는지 서버 동작원리 ,req.params, req.body, req.query -------------------------------------- npx create-react-app react-search-practice 라우터 다운로드 npm install react-router-dom App.js 클래스형으로 만들어주기, components 폴더생성 후 SearchInput.js, Home.js, SearchResult.js 파일생성 SearchInput은 상태값을 저장해야하기 때문에 클래스형으로 만들어주기 import '../css/SearchInput.css'; import { Component.. 2023. 6. 17. [React] Router 를 이용한 페이지 이동 npx create-react-app react-router0611 터미널 열어서 다운로드 해주기 npm install react-router-dom 다운로드 완료되면 package.json 에서 확인해야됨. App.js 클래스형 컴포넌트로 변경 import { Component } from 'react'; import './App.css'; class App extends Component{ constructor(props){ super(props) this.state ={ } } render(){ return( ) } } export default App; 2. 라우터 돔 임포트하고 주소 지정해주기 Home = / Profile = /profile import { Component } from 're.. 2023. 6. 11. [React] To do list 데이터 배열+1 / map() CRUD 모두 구현됐지만 id 값이 제대로 넘어가지 않아서 추가되는 항목에 id 값이 존재하지 않았다. 그래서 삭제할 때도 id 값이 비어있는 항목들은 모두 삭제 되었다. 곰곰이 생각해보니 기존 데이터값은 App.js 에 저장되어있어서 InputComp.js 나 Todo.js에서 아무리 id 값을 App.js에 넘겨도 추가된 id 값이 없었다. App.js 에서 해당 이벤트 함수에 id값의 상태값을 알려줘야한다. 추가 이벤트 함수 App.js addTodoList=(id,todo)=>{ alert('추가(App)') alert('넘어온 id : ' + (this.state.todolist.length + 1) ) //Todo에서 id 값을 설정할 수 없어서 App의 상태값에 +1 해줘야함 //(strin.. 2023. 6. 5. [React] CRUD 삭제 react-student-crud 1. Studnt.js에 수정,삭제 버튼과 함수 만들어주기 //수정, 삭제를 하려면 상태값이 변경되어야하니까 클래스 컴포넌트를 써야함 import { Component } from "react"; import '../css/Student.css'; class Student extends Component{ constructor(props){ super(props) this.state={ } } updateStudentInfo=()=>{ alert('수정!') } deleteStudentInfo=()=>{ alert('삭제!') } render(){ return( 학번:{this.props.id} 이름:{this.props.name} 전공:{this.props.major}.. 2023. 6. 3. 이전 1 다음 728x90
