전체 글 썸네일형 리스트형 리액트 _12_라우터(Router)페이징 1. 전에 만든 movie-server를 복사해서 가져온다. 안에 app.get 부분의 링크를 /movie_real2로 바꾸고 페이지를 바꿀 수 있도록 page변수를 생성한다. app.get("/movie_real2",(request,response)=>{ //url : mongodb 주소 var page=request.query.page; var rowSize=12; var skip=(page*rowSize)-rowSize; var url="mongodb://211.238.142.181:27017" Client.connect(url,(err,client)=>{ var db = client.db("mydb"); db.collection("movie").find({cateno:1}).skip(skip).l.. 더보기 리액트 _11_라우터(Router)페이지 만들기 * 화면이동할 때 쓰는 것이 router(라우터)다. 1. 새 프로젝트를 만든다. 2. package.json에 라이브러리를 넣는다. 3. indext.html에 csslink를 넣는다. 4. directory를 하나 만들고 안에 Header.js, Footer.js, Home.js, News.js..등등을 만들어준다. 5. Header.js를 작성한다. WebSiteName Home Page 1 Page 1-1 Page 1-2 Page 1-3 Page 2 Page 3 bootstrap에 가서 메뉴 디자인을 복사해온다. import React,{Component} from "react"; class Header extends Component{ render() { return( Movie Center H.. 더보기 리액트 _10_onMouseOver 이벤트처리 지난 포스팅에서 만든 것 화면 보면 왼쪽만 있는 것을 알 수 있다. 이 포스팅에서는 왼쪽에서 선택한 영화의 상세정보가 오른쪽에 뜨는 기능을 만들어보려고 한다. ( index.html에서 이렇게 설정하면 꽉찬화면으로 나온다.) 1. inShow를 주면 갖다댈때마다 이벤트 주는 것이된다. 갖다 댈때마다 true가 되는 방식! 2. App2의 밑에 MovieDetail이라는 클래스를 하나 만든다. (원래는 파일을 따로 만들어야 하는데 코딩하는데 불편함으로 한 파일에 만든 것) class MovieDetail extends Component{ } 3. render에 MovieDetail를 출력한다. * 참고* -> class일 땐 this.을 사용/function일 땐 그냥 props.을 사용 construct.. 더보기 리액트 _9_외부서버 이용한 페이지 만들기2 1. App2.js 파일을 만든다 2. index.js에서도 App2로 수정해준다 (import 부분이랑 안에) 3. axios를 import한다 import axios from 'axios' 4. 일단 화면만 만들어보자 일단 아래에 버튼처럼 버튼을 만든다. render() { return( 박스오피스 실시간 예매율 좌석 점유율 온라인 이용순위 ) } 버튼을 누를 때마다 아래 div 화면이 다르게 나오게 해야한다. 5. constructor에 state를 이용해서 배열들을 받아서 출력하게 한다. constructor(props) { super(props); this.state={ movie:[], detail:{} } } 6. componentDidMount를 이용해서 데이터를 읽어와서 뿌려주는 작업을 .. 더보기 리액트 _8_request 이용해서 외부서버 불러오기(mongodb아님) 1. movie-server에서 다른 url페이지를 만들어보자 (/movie_home로 접속하게끔) 이렇게 1번 누르면 이 화면나오고 2번누르면 이화면나오고 이런식으로 만들 것이다. 2 .view-source:http://www.kobis.or.kr/kobis/business/main/main.do 페이지 소스보기에서 얘를 가져온다. 3. 이렇게 site를 넣는다. 4. http://www.kobis.or.kr/kobis/business/main/main.do KOFIC 영화관 입장권 통합전산망(2) www.kobis.or.kr 이 사이트 주소에서 뒤에 main.do 빼고 복사한 뒤 url에 넣어준다. app.get("/movie_home",(req,res)=>{ var no=req.query.no; /.. 더보기 리액트 _7_mongodb 연결한 것 출력하기 * function 기반일 때 state를 쓸 수 있게 하는 것 * 1. useState 2. useEffect => componentDidMount() * state 변수: 외부에서 데이터를 읽어올 때 사용 ==> useState()로 변경가능 * 생성자 constructor => state 설정, 이벤트 등록 시 사용 1. App.js 를 작성한다. import React,{Component} from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component{ //생성자 constructor => state 설정, 이벤트 등록 시 사용 constructor(props) { super(props); //.. 더보기 리액트 _6_mongodb연결하기 1. 새 프로젝트 만들기- this window를 누른다. 2. 포트가 충돌했을 때 방어를 해주는 크로스 도메인을 설치한다. 이 코드가 포트 충돌을 막는 코드다. 3. package.json 에다가 "request"랑 "express"랑 "mongodb"랑 서버를 연결할 때 쓰는 "axios"를 설치한다. "path"도 깔고 "react-router-dom": "^5.2.0","react-router": "^5.2.0"도 설치한다. xml을 json으로 바꿔주는 "xml2js"도 깔아준다. 저장하고 install 해주어야한다. 4. movie-server 라는 js 파일을 만든다 5. 서버 js를 구성해준다. const express=require("express") //express는 간단한 서버를 제.. 더보기 리액트 _5_function 1. index.js에다가 import App2를 해주고 태그로 실행해 준 뒤 name을 넣는다. 2. App2에 들어가서 props로 name 값을 받고 props.name으로 값을 불러온다. 결과) 홍길동이 찍혀서 나온다. 더보기 이전 1 2 3 4 5 6 7 다음
