JSP 강의 Day14

주세환·2023년 4월 19일

Java Node React vscode

JSP

목록 보기

15/16

React

초기설정

https://nodejs.org/ko

위 링크에서 Node.js를 다운받는다.

18.16.0 LTS 버전을 다운받았다.

프로젝트를 생성할 폴더에 가서

cmd를 입력한다.

cmd창에서 위처럼 입력하여 프로젝트를 생성하자.

폴더가 생성된 것을 확인할 수 있다.

vscode에서 폴더열기에서 방금 만든 폴더를 선택하고

cd front01로 경로를 지정하고 npm start를 입력하여 실행시킨다.

cdm에 위처럼 뜨고

리액트창이 뜨면 성공.

이렇게 실행해도 된다.

Hello React!!를 작성하면

Hello React!!가 적힌다.

실습

npm i axios, npm i react-router-dom을 입력하여

axios와 react-router-dom을 설치한다.

src에 components폴더를 생성하고 About.js, Board.js, Home.js를 생성한다.

import React from 'react';

function App() {
    return(
        <div>
            <h3>홈화면</h3>
        </div>
    );
}

export default App;

Home.js

import React from 'react';

function App() {
    return(
        <div>
            <h3>about</h3>
        </div>
    );
}

export default App;

about.js

import React from 'react';

function App() {
    return(
        <div>
            <h3>board</h3>
        </div>
    );
}

export default App;

board.js를 작성한다.


import './App.css';

import Home from './components/Home'
import Board from './components/Board'
import About from './components/About'
import { Link, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/board">Board</Link>
      </div>
      <hr />
      <Routes>
        <Route path="/" element={ <Home/> } />
        <Route path="/about" element={ <About/> } />
        <Route path="/board" element={ <Board/> } />
      </Routes>
    </div>
  );
}

export default App;

App.js를 위처럼 작성하고

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { HashRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.js를 이렇게 수정한다.

이렇게 뜨면 성공.

Home을 누르면 홈화면, About 누르면 about, Board를 누르면 board가 뜬다.

<div className='App'>
  <div>
    <Link to="/">Home</Link>  /
    <Link to="/about">About</Link>  /
    <Link to="/board">Board</Link>
  </div>

이렇게 수정하면

이렇게 중간정렬이 된다.

import './App.css';

이 부분이 중간정렬이 포함되어있는 거 같다.

import React from 'react';

function App() {
    const name = "가나다";

    return(
        <div>
            <h3>about</h3>
            asdf
            asdfasdf
            {name}
        </div>
    );
}

export default App;

About.js에 이렇게 추가해보았다.

About을 누르니 이렇게 바뀐 모습을 볼 수 있다.

연동


import axios from 'axios';
import React, { useEffect } from 'react';

function App() {

    // postman으로는 잘됨.
    // Acess-Control-Allow-Origin => CORS문제 => 같은 서버가 아니면 rest자료를 받을 수 없다.
    // 함수 생성
    // async function selectList() { }
    const selectList = async () => {
        const url = `/web02/api/board/select.json?page=1`
        const headers = {"Content-Type":"application.json"};
        const { data } = await axios.get(url, {headers});
        console.log(data);
    }

    // 화면이 로딩될 때
    useEffect( () => {
        selectList(); // 함수 호출하기
    },[])

    return(
        <div>
            <h3>board</h3>
        </div>
    );
}

export default App;

Board.js를 수정한다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/web03/api',
    createProxyMiddleware({
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
    })
  );
};

setupProxy.js를 생성하여 위처럼 작성한다.

그 뒤에 cdm에서 Ctrl + C를 눌러 종료한 후 npm start로 다시 실행해보자.

오류가 뜨지 않는다면 정상적으로 잘 연결이 되었다는 뜻이다.


...

    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

  "homepage": "./resources/react"
}