set JAVA_HOME=C:\Program Files\Java\jdk-17
set PATH=%JAVA_HOME%\bin;%PATH%
java -version

위와 같이 입력 후 Alt + Enter 을 누르면 RegExp 검사가 실행된다.

아직 모름

2. Maven 탭에서 install 더블 클릭

3. clear 후 install 해야되는 경우도 있음

   • Maven Helper 설치해서 이용하면 한번에 가능함

cordova-plugin-ionic-webview 라는 플러그인을 사용하여 Live Reload 기능을 활성화할 수 있습니다.

1. cmd창을 열어서 프로젝트 폴더로 경로 이동 후 플러그인 설치

   cordova plugin add cordova-plugin-ionic-webview

2. 설치 후 라이브 리로드로 run

   cordova run android -- --livereload

notification.confirm 활용법

• https://gist.github.com/alunny/2416865

  <script>
        // process the confirmation dialog result
        function onConfirm(button) {
            alert('You selected button ' + button);
        }
  
        // Show a custom confirmation dialog
        //
        function showConfirm() {
            navigator.notification.confirm( 'You are the winner!',  // message
                onConfirm,              // callback to invoke with index of button pressed
                'Game Over',            // title
                'Restart,Exit'          // buttonLabels
            );
        }
  
        document.addEventListener('deviceready', function (e) {
            showConfirm();
        }, false);
  </script>

자바 버전 에러

1. 프로젝트 터미널에서 아래 코드를 입력하면 임시로 자바 버전이 11로 변경됨.

   $env:JAVA_HOME="C:\Program Files\jdk-11"

2. 그 다음, 터미널에 cordova run android 입력

브라우저로 live reload 확인하기

1. browser 플랫폼 등록

   PS C:\gwakProj> cordova platform add browser

2. browser run 실행

   C:\gwakProj> cordova run browser --live-reload

cordova platform add android cordova build android

// 애뮬레이터 실행 cordova emulate android // 안드로이드 실행 cordova run android

터미널에서 npm install sass 입력 -> sass를 설치해주면 됨. https://dev-guardy.tistory.com/94

부모컴포넌트의 값을 자식컴포넌트에서 변경하기

TemperatureInput.jsx

// TemperatureInput.jsx

import React from "react";

const scaleNames = {
  c: "섭씨",
  f: "화씨",
};

function TemperatureInput(props) {

  // input 태그의 값 변경 이벤트 발생 시 동작할 함수, event 객체를 매개변수로 가져옴
  const handleChange = (e) => {
    // 부모 컴포넌트에서 전달받은 props 중 키 이름이 onTemperatureChange 인 함수를 실행
    // onTemperatureChange 함수는 부모 컴포넌트의 state 값을 수정하는 함수임(자식 컴포넌트의 데이터 부모 컴포넌트로 전달)
    props.onTemperatureChange(e.target.value);
  };

  return (
    <fieldset>
      <legend>
        온도를 입력해주세요 (단위 : {scaleNames[props.scale]})
      </legend>
      {/* onChange 는 input 태그의 값 변경시 발생하는 이벤트, 해당 이벤트에 handleChange 라는 함수를 연동 */}
      <input value={props.temperature} onChange={handleChange}/>
    </fieldset>
  );
}

export default TemperatureInput;

Calculator.jsx

// Calculator.jsx
import React, {useState} from "react";
import TemperatureInput from "./TemperatureInput";

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>물이 끓습니다.</p>;
  }
  return <p>물이 끓지 않습니다.</p>;
}

// 매개변수로 화씨 온도를 받아서 섭씨 온도로 변환
function toCelsius(fahrenheit) {
  return ((fahrenheit - 32) * 5) / 9;
}

// 매개변수로 섭씨 온도를 받아서 화씨 온도로 변환
function toFahrenheit(celsius) {
  return (celsius * 9) / 5 + 32;
}

// 매개변수로 현재 온도와 온도 변환을 위한 함수(convert)를 받아서 사용
function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  // 입력받은 온도가 숫자인지 아닌지 확인, 숫자가 아니면 빈 문자열 "" 반환
  if (Number.isNaN(input)) {
    return "";
  }

  // 두번째 매개변수로 받은 변환함수(convert) 를 사용하여 표시 온도를 변환
  const output = convert(input);
  // 수학 관련 함수를 사용하여 소수점 이하 부분 처리(반올림)
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();

}

function Calculator(props) {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('C');

  const handleCelsiusChange = (temperature) => {
    setTemperature(temperature);
    setScale('c');
  };

  const handleFahrenheitChange = (temperature) => {
    setTemperature(temperature);
    setScale('f');
  };

  // 현재 온도를 표시방식에 따라서 변환
  const celsius = scale === 'f' ? tryConvert(temperature,  toCelsius) : temperature;
  const fahrenheit = scale === 'c' ? tryConvert(temperature,  toFahrenheit) : temperature;

  return (
    <div>
      {/* 자식 컴포넌트 호출 시 props에 2개의 데이터와 state 의 값을 변경할 수 있는 함수를 제공 */}
      <TemperatureInput scale={'c'} temperature={celsius} onTemperatureChange={handleCelsiusChange} />
      <TemperatureInput scale={'f'} temperature={fahrenheit} onTemperatureChange={handleFahrenheitChange} />
      {/* 온도를 props 를 통해서 전달, 실수로 표현하기 위해서 parseFloat() 사용 */}
      <BoilingVerdict celsius={parseFloat(celsius)} />
    </div>
  );
}

export default Calculator;

App7.jsx

import React from "react";
import Calculator from "./folder5/Calculator";

function App7() {
  return (
    <div>
     <Calculator />
    </div>
  );
}

export default App7;

• 80 일때
• 100 일때

컨텍스트

앱(theme 데이터) - 툴바(theme 데이터) - 테마버튼(theme 데이터) - Button(theme 데이터) 으로 값이 전달되어 dark 가 반영이 됨

컨텍스트 사용 X

App.jsx

// folder5/App.jsx

import React from "react";
import Toolbar from "./Toolbar";

function App(props) {
  // 자식 컴포넌트에 theme 라는 이름으로 데이터("dark")를 전달
  return <Toolbar theme={"dark"}/>
}

export default App;

Toolbar.jsx

// folder5/Toolbar.jsx

import React from "react";
import ThemedButton from "./ThemedButton";

function Toolbar(props) {
  return (
    <div>
      {/* 자식 컴포넌트로 theme 라는 이름의 데이터를 전달 */}
      <ThemedButton theme={props.theme} />
    </div>
  );
}

export default Toolbar;

ThemeButton.jsx

// folder5/ThemedButton.jsx

import React from "react";
const styles = {
  bg: {
    background: "white",
  }
}

function Button(props) {
  // 부모에게서 전달받은 theme 를 사용하고 있음
  if (props.theme == "dark") {
    styles.bg.background = 'black';
  }
  else {
    styles.bg.background = 'red';
  }
  return <button style={styles.bg}>테마 적용 버튼</button>
}

function ThemedButton(props) {
  return (
    // 자식 컴포넌트로 theme 를 전달
    <Button theme={props.theme}/>
  );
}

export default ThemedButton;

App7.jsx

import React from "react";
import Calculator from "./folder5/Calculator";
import Toolbar from "./folder5/Toolbar";
import App from "./folder5/App";

function App7() {
  return (
    <div>
     <Calculator />
      <App/>
    </div>
  );
}

export default App7;

컨텍스트 사용 O

App2.jsx

// folder5/ThemeContext.jsx // folder5/MainContent.jsx // folder5/DarkOrLight.jsx

리액트 라우터 DOM

https://reactrouter.com/en/main 최신버전 : 6.6.1

• 자주 사용하는건 BrowserRouter, Router
• 터미널에서 라우터 설치

pages 경로 추가

App7.jsx 에 코드 추가

import {BrowserRouter, Routes, Route} from "react-router-dom";

, return 내부 주석처리 후 코드 추가

import React from "react";
import Calculator from "./folder5/Calculator";
import Toolbar from "./folder5/Toolbar";
import App from "./folder5/App";
import App2 from "./folder5/App2";
import MainContent from "./folder5/MainContent";
import DarkOrLight from "./folder5/DarkOrLight";
import App4 from "./folder5/App4";

import {BrowserRouter, Routes, Route} from "react-router-dom";

function App7() {
  return (
    // <div>
    //  <Calculator />
    //   <App/>
    //   <hr/>
    //   <App2/>
    //   <hr/>
    //   <DarkOrLight/>
    //   <App4/>
    // </div>
    <BrowserRouter>
      <Routes>
        <Route>

        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App7;

Layout.jsx

Home.jsx

공부할때 유용한 사이트 : https://www.w3schools.com/react/default.asp

조건부 렌더링

어떠한 조건에 따라서 화면에 표시할 렌더링이 달라지는 것 if 문 사용 시 render() 함수가 동작되는 return 부분에서 조건문을 사용하는 것이 아니라 return 밖에서 조건문을 사용하고 return 안에서는 삼항 연산자를 사용함

자바스크립트의 true / false

• true : 논리형 true, 빈 object 타입 {}, 빈 배열 [], 0이 아닌 숫자, 빈 문자열이 아닌 문자열
• false : 논리형 false, 숫자 0 또는 0.0, 빈 문자열 '', "", ` `, null, undefined, NaN(Not a Number) Goal.jsx

  // folder4/Goal.jsx
  

import React from "react"; import MadeGoal from "./MadeGoal"; import MissedGoal from "./MissedGoal";

function Goal(props) { const isGoal = props.isGoal;

// if 문은 return 부분 바깥에서 걸어줘야함. return 안에서 진행하려면 삼항연산자 사용. if (isGoal) { return }

return

}

export default Goal;

MadeGoal.jsx
```js
// folder4/MadeGoal.jsx

import React from "react";

function MadeGoal() {
  return (
    <h1>GOAL!!</h1>
  );
}

export default MadeGoal;

MissedGoal.jsx

// folder4/MissedGoal.jsx

import React from "react";

function MissedGoal() {
  return (
    <h1>MISSED!!</h1>
  );
}

export default MissedGoal;

LoginControl.jsx

// folder4/LoginControl.jsx

import React, {useState} from "react";
import button from "bootstrap/js/src/button";
import Greeting from "./Greeting";
import UserStatus from "./UserStatus";


function LoginButton(props) {
  return (
    <button onClick={props.onClick} type={"button"} className={"btn btn-info"}>로그인</button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick} type={"button"} className={"btn btn-danger"}>로그아웃</button>
  );
}


function LoginControl() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }

  // 엘리먼트 변수 : 자바스크립트 변수에 리액트 컴포넌트를 저장한 것
  // 조건부 렌더링을 사용하기 위해서 자바스크립트 변수 button 에 리액트 컴포넌트를 저장
  let button;

  // state 의 상태에 따라서 엘리먼트 변수에 저장될 리액트 컴포넌트를 변경
  if (isLoggedIn) {
    button = <LoginButton onClick={handleLogoutClick}/>
  }
  else {
    button = <LogoutButton onClick={handleLoginClick}/>
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn}/>
      {/* 엘리먼트 변수에 저장된 리액트 컴포넌트가 출력됨 */}
      {/*{button}*/}

      {/* 삼항 연산자 */}
      {
        isLoggedIn ? <LogoutButton onClick={handleLogoutClick}/> : <LoginButton onClick={handleLoginClick}/>
      }
      <UserStatus isLoggedIn={isLoggedIn}/>
    </div>
  );
}

export default LoginControl;

UserStatus.jsx

// folder4/UserStatus.jsx

import React from "react";
// 문제 1) 아래의 소스에서 삼항 연산자를 사용한 부분을 if ~ else 문을 사용하여 조건부 렌더링으로 수정하세요
function UserStatus(props) {

  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return (
      <div>
        이 사용자는 현재 <b>로그인</b> 상태입니다.
      </div>
    );
  }
    return (
      <div>
        이 사용자는 현재 <b>로그인하지 않은</b> 상태입니다.
      </div>
    );

  // 삼항연산자 사용 코드
  // return (
  // <div>
  //    이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인하지 않은'}</b> 상태입니다.
  // </div>
  // );
}

export default UserStatus;

Greeting.jsx

// folder4/Greeting.jsx

import React from "react";

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <UserGreeting/>
  }
  return <GuestGreeting/>
}

function UserGreeting() {
  return (
    <h1>다시 오셨군요.</h1>
  );
}

function GuestGreeting() {
  return (
    <h1>회원 가입을 해주세요.</h1>
  );
}



export default Greeting;

• 클릭 전
• 클릭 후

inline if, &&

inLine if : jsx 문법으로 렌더링을 진행하는 render() 함수 내부에서 if 문을 사용할 수 없기 떄문에 '&&' 연산자를 사용하거나 삼항 연산자를 사용하여 조건부 렌더링을 진행할 수 있음 '&&'연산자 사용 시 주의점 : && 연산자 오른쪽에 있는 피연산자는 왼쪽에 있는 피연산자의 값에 따라 렌더링이 결정됨 && 연산자 왼쪽의 피연산자 값이 false 일 경우 오른쪽의 피연산자는 아예 동작하지 않음.(=연산 평가 자체가 동작하지 않음) && 연산자 왼쪽의 피연산자는 false 일 때라도 연산 평가가 이루어지기 때문에 해당 값이 그대로 출력이 됨.

MailBox.jsx

// folder4/MailBox.jsx

import React from "react";

function MailBox(props) {
  const unreadMessages = props.unreadMessages;


  return (
    <div>
      <h1>안녕하세요</h1>
      <h3>inline if (&& 연산자 테스트)</h3>
      {
        unreadMessages > 0 &&
        <h2>
          현재 {unreadMessages} 개의 읽지 않은 메시지가 있습니다.
        </h2>
      }
    </div>
  );
}

export default MailBox;

MainPage.jsx

// folder4/MainPage.jsx

import React, {useState} from "react";
import WarningBanner from "./WarningBanner";

function MainPage() {
  const [showWarning, setShowWarning] = useState(false);

  const handleToggleClick = () => {
    setShowWarning(prevState => !prevState);
  }

  return (
    <div>
      <WarningBanner warning={showWarning}/>
      <button onClick={handleToggleClick} className={"btn btn-success"}>{showWarning ? '감추기' : '보이기'}</button>
    </div>
  )
}

export default MainPage;

WarningBanner.jsx

// folder4/WarningBanner.jsx

import React from "react";

/*
컴포넌트 렌더링 막기
- 리액트에서 렌더링을 하고 싶지 않을 경우 null 을 사용
*/
function WarningBanner({warning}) {
  // warning 이 false 일때 if 문 실행됨
  if (!warning) {
    return null;
  }

  return <div>경고!!</div>
}

export default WarningBanner;

• 클릭 전
• 클릭 후

자식 1-1 에서 2-2 로 바로 데이터 이동 불가능. 이것을 가능하게 해주는것이 컨텍스트이다.

참고자료 : 코딩의 신
!youtube[YWG_huG3Gr0]

1. 환경설정

자동 import : Alt + Enter 파라미터로 Model model을 추가해주면 키:값 형식으로 html파일에서 데이터를 받아올 수 있다.

@Controller의 required 속성

@RequestParam은 HTTP 요청 파라미터를 컨트롤러 메소드의 파라미터로 전달받을 때 사용된다. JSP에서 request.getParameter(); 와 비슷하다고 볼 수 있다. 이 @RequestParam이 적용된 파라미터는 필수파라미터다. 그래서 @RequestParam 어노테이션에 명시한 HTTP 요청 파라미터가 존재하지 않을 경우, 스프링 MVC는 잘못된 요청을 의미하는 400 응답 코드를 웹 브라우저에 전송하는 것이다.

1) 필수가 아닌 파라미터인 경우 required 속성 값을 주어 false로 지정해주면 된다. required 속성 값을 따로 작성안할 경우 기본 값은 true로 지정되어 있다.

@RequestParam(value="query", required=false) String query

필수가 아닌 파라미터의 값이 존재하지 않을 경우는 null 값을 할당한다. 하지만 null을 할당할 수 없는 기본 데이터 타입일 경우에는 타입 변환 에러가 발생한다.

2) RequestParam 값이 Null 일 때, 예외 처리
기본 데이터 타입을 사용할 때는 요청 파라미터가 존재하지 않을 때 기본 값을 할당하는 경우가 많다. 이런 경우, defaultValue 속성을 이용해서 기본 값을 지정할 수 있다.

@RequestParam(value="page", defaultValue="1") int page

[출처] spring controller required defaultvalue, Controller와 RestController차이, RequestParam, RequestBody 차이|작성자 토찌

@GetMapping("/greeting")
public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
    model.addAttribute("name", name);
    return "greeting";
    }
}

html의 타임리프 코드 : th:text="'Hello, ' + ${name} + '!' 여기서 html 주소에 localhost:8080/greeting?name=김길동 을 치면 화면에 Hello, 김길동! 출력됨, defaultValue="World" 가 설정되어 있기때문에 ${name} 값을 주지 않으면 Hello, World! 가 출력됨(null 값이어도 defaultValue가 있기 때문에 에러가 나지 않음)

번역 확장프로그램(구글스토어) : Google 번역 + 네이버 영어사전

href 속성과 th:href 속성을 동시에 사용하면 html 파일만 구동했을때는 기본 href 속성이 적용된 화면이 나오고, 서버를 구동했을대는 th:href 속성이 적용된 화면이 나온다.

fragment의 3가지 방식

• insert
• include ← 가장 많이 사용되는 방법
• replace

지역변수

th:each 태그 활용

속성 우선순위

한 태그에 th: 속성이 여러 개 선언되어있을때 어떤것이 먼저 적용되는지?

1. replace, insert
2. each
3. if, unless, switch (조건문)
4. 기타 등등 속성들(if문이 먼ㄴ저

th:text 속성 단순화

기존에

<p>Hello, <span th:text="${session.user.name}"></span>!</p>

와 같이 쓰던 th:text 속성은 아래와 같이 간단하게 사용이 가능하다.

<p>Hello, [[${session.user.name}]]!</p>

[[...]] 는 th:text를 대신하고, [(...)]는 th:utext를 대신한다.

부트스트랩 적용시 코드 순서

<script> 내에 jquery - popper - bootstrap 순서로 코드를 써줘야 한다 스타터 템플릿 참고 : https://getbootstrap.com/docs/5.2/examples/starter-template/

fragments 활용

재사용할 nav 코드( th:fragment 사용 ) : th:fragment="이름설정"

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" th:fragment="menu">
  ...
  ...
  ...
<nav>

main이 되는 html에 사용할때( th:replace 사용 ) : th:replace="fragments/common :: menu">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" th:replace="fragments/common :: menu">
</nav>

• 변수와 함께 보내는 방법 common.html

  // th:fragment=h"fragment명(변수명)"
  <head th:fragment="head(title)">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  // th:text=${변수명}
  <title th:text="${title}">Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </head>

list.html

<head th:replace="fragments/common :: head('게시판')">
</head>

th:classappend 속성

조건문이 true일때 원하는 속성을 추가할 수 있음 ex) nav-bar에서 사용자가 클릭한 메뉴에 색상 변화를 줄 수 있음

common.html의 li 태그 내에 th:classappend 로 조건을 줘야하는데 <!!!!-- 그 전에 --!!!!> menu라는 common의 fragment를 호출할때 파라미터를 함께 넘겨주면 됨

<index.html>
th:replace="fragments/common :: menu" → th:fragment="menu('home')"

<list.html>
th:replace="fragments/common :: menu" → th:fragment="menu('board')"  

common.html

// (menu) 로 변수 넣어줌 (이 menu 변수자리에 replace자리에 넣은 변수 적용시켜주면 됨
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" th:fragment="menu(menu)">

<참고> 강의에서 th:classappend="${menu} == 'home'? 'board'" 사용하면 된다고 나오는데 자꾸 오류가 나서 찾아보니 th:classappend="${menu == 'board' ? 'active' :'' }" 해줘야 했다. 버전이 달라서 그런듯?

완성 코드 : common.html

<div class="collapse navbar-collapse" id="navbarColor02">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" th:classappend="${menu == 'home' ? 'active' :'' }" href="#" th:href="@{/}">홈
            <span class="visually-hidden" th:if="${menu} == 'home'">(current)</span>
          </a>
        </li>
        <li class="nav-item" th:classappend="${menu == 'board' ? 'active' : '' }">
          <a class="nav-link" href="#" th:href="@{/board/list}" th:classappend="${menu == 'board' ? 'active' :'' }">게시판</a>
          <span class="visually-hidden" th:if="${menu} == 'board'">(current)</span>
        </li>
      </ul>
    </div>

JPA를 이용해 게시판 조회하기

테이블 생성

Git을 사용하여 버전 관리를 할 때, 커밋 메시지의 작성 규칙을 의미. 이 규칙에 따라 작성된 메시지는 프로젝트에 기여하는 사람들이 코드 변경 내용을 이해하고 추적하기 쉬워지며, 이를 통해 팀 내의 협업 효율성이 증가한다.

일반적으로 가장 많이 사용되는 git 메시지 컨벤션은 "Conventional Commits"이다. 이 컨벤션은 commit 메시지를 특정 형식으로 작성하도록 요구하며, 다음과 같이 구성된다.

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

위의 구조에서 <type> 은 커밋의 종류를 나타내며, <description> 은 커밋의 간략한 설명이다. <scope> 는 해당 커밋이 영향을 미친 코드 범위를 나타내는 선택적인 요소이다. <body> 는 커밋의 자세한 내용을 작성할 수 있는 선택적인 요소이며, <footer> 는 커밋에 대한 참조 등 추가 정보를 나타내는 선택적인 요소이다.

이러한 git 메시지 컨벤션을 따르면 코드 변경 사항을 추적하기 쉽고, 프로젝트에 기여하는 사람들 간에 이해하기 쉬운 공통된 언어를 사용할 수 있다.

commit type

Git 메시지 컨벤션에서 사용되는 대표적인 커밋 타입들은 다음과 같다.

feat: 새로운 기능을 추가할 때 사용 fix: 버그를 수정할 때 사용 docs: 문서를 수정할 때 사용 style: 코드 포맷팅, 세미콜론 누락 등의 코드 변경이 없이 스타일만 변경했을 때 사용 refactor: 코드 리팩토링을 했을 때 사용 test: 테스트 코드를 추가하거나 수정했을 때 사용 chore: 빌드 업무나 패키지 매니저를 설정할 때 사용 이 외에도 perf(성능 개선), revert(이전 커밋을 되돌릴 때), build(빌드 관련 파일 수정), ci(CI 관련 설정 수정), init(초기화) 등 다양한 타입이 있다.

각 커밋 타입은 대개 _첫 단어_로 표시되며, 이를 통해 다른 사용자들이 커밋의 내용을 빠르게 파악할 수 있다. 예를 들어, feat 커밋 타입은 새로운 기능을 추가한 경우에 사용되므로, 다른 사용자들은 해당 커밋이 어떤 기능을 추가했는지 빠르게 파악할 수 있다.

예시

feat: Add new feature to the dashboard page

This commit adds a new feature to the dashboard page that allows users to filter their data by date range. 
The date range filter is implemented using a date picker component from the UI library.

Fixes #123

위의 예제에서 feat은 커밋의 타입(type)을 나타내며, "Add new feature to the dashboard page"는 커밋의 간단한 설명(description)이다. 커밋 메시지의 본문(body)에는 해당 변경 사항에 대한 자세한 설명이 포함되어 있다. 또한 커밋 메시지의 마지막 부분인 Fixes #123은 해당 커밋이 이슈 #123을 해결한다는 것을 나타내는 footer 이다.

이러한 커밋 메시지를 사용하면 프로젝트의 이력(history)을 추적하고 관리하기 쉬워져서, 코드 변경 내역을 더욱 효율적으로 추적할 수 있다.

1. appication.properties - 데이터 베이스 접속 설정

# 데이터 베이스 접속 설정
server.port=8080
spring.datasource.hikari.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.hikari.jdbc-url=jdbc:mysql://58.239.58.243:3306/java505_team5_final
spring.datasource.hikari.username=java505_team5
spring.datasource.hikari.password=java505_team5_1234
spring.datasource.hikari.connection-test-query=SELECT 1

mybatis.configuration.map-underscore-to-camel-case=true

2. build.gradle 에서 mybatis, mySQL Driver 주석 풀기 - 재로드

3. DatabaseConfiguration.java 생성

• DatabaseConfiguration.java

  package com.bitc.securitytest.configuration;
  

import com.zaxxer.hikari.HikariConfig; import com.zaxxer.hikari.HikariDataSource; import lombok.RequiredArgsConstructor; import org.apache.ibatis.session.SqlSessionFactory; import org.mybatis.spring.SqlSessionFactoryBean; import org.mybatis.spring.SqlSessionTemplate; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.context.ApplicationContext; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.PropertySource;

import javax.sql.DataSource;

@Configuration @RequiredArgsConstructor @PropertySource("classpath:/application.properties") public class DatabaseConfiguration {

private final ApplicationContext appContext;

@Bean @ConfigurationProperties(prefix = "spring.datasource.hikari") public HikariConfig hikariConfig() { return new HikariConfig(); }

@Bean public DataSource dataSource() throws Exception { DataSource dataSource = new HikariDataSource(hikariConfig()); System.out.println(dataSource.toString()); return dataSource; }

@Bean public SqlSessionFactory sqlSessionFactory(DataSource dataSource) throws Exception { SqlSessionFactoryBean ssfb = new SqlSessionFactoryBean(); ssfb.setDataSource(dataSource); ssfb.setMapperLocations(appContext.getResources("classpath:/sql/*/sql-.xml")); ssfb.setConfiguration(mybatisConfig());

return ssfb.getObject();

}

@Bean public SqlSessionTemplate sqlSessionTemplate(SqlSessionFactory ssf) { return new SqlSessionTemplate(ssf); }

@Bean @ConfigurationProperties(prefix = "mybatis.configuration") public org.apache.ibatis.session.Configuration mybatisConfig() { return new org.apache.ibatis.session.Configuration(); } }

![](https://velog.velcdn.com/images/i_like_monday/post/27ec1b81-342c-479d-86d0-eeedf10123eb/image.png)
![](https://velog.velcdn.com/images/i_like_monday/post/c10b5d57-a2f8-4990-a236-82caa18bbbfb/image.png)

---

### dto 패키지 생성 - dto 파일 생성
- ClubMemberDto.java
```java
package com.bitc.securitytest.dto;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.HashSet;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class ClubMemberDto {
  private String email;
  private String password;
  private String name;
  private boolean fromSocial;
  private Set<ClubMemberRole> roleSet = new HashSet<>();

  public void addMemberRole(ClubMemberRole clubMemberRole) {
    roleSet.add(clubMemberRole);
  }
}

• dto/ClubAuthMemberDto User 상속받아서 사용

@Setter
@Getter
@ToString
public class ClubAuthMemberDto extends User{

}

↓

package com.bitc.securitytest.dto;

import lombok.Data;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.userdetails.User;

import java.util.Collection;

@Setter
@Getter
@ToString
public class ClubAuthMemberDto extends User {
  private String email;
  private String name;
  private boolean fromSocial;

  public ClubAuthMemberDto(String username, String password, boolean fromSocial, Collection<? extends GrantedAuthority> auth) {
    super(username, password, auth);
    this.email = username;
    this.fromSocial = fromSocial;
  }

}

• dto/ClubMemberRole.java
• *class ====> enum 으로 수정!!**

  package com.bitc.securitytest.dto;
  

// class -> enum public enum ClubMemberRole { ADMIN, USER, MANAGER }

mapper/ClubMEmberMapper.java 생성 (인터페이스)
```java
package com.bitc.securitytest.mapper;

import com.bitc.securitytest.dto.ClubMemberDto;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.Optional;

@Mapper
public interface ClubMEmberMapper {
  public Optional<ClubMemberDto> findByEmail(@Param("email") String email, @Param("social") boolean social);
}

service/ClubUserDetailsService.java 생성 implements UserDetailsService

• private final ClubMEmberMapper clubMEmberMapper; alt+Enter -> 메서드 구현

  package com.bitc.securitytest.service;
  

import com.bitc.securitytest.dto.ClubMemberDto; import com.bitc.securitytest.dto.ClubMemberRole; import com.bitc.securitytest.mapper.ClubMEmberMapper; import lombok.RequiredArgsConstructor; import org.springframework.security.core.authority.SimpleGrantedAuthority; import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.core.userdetails.UserDetailsService; import org.springframework.security.core.userdetails.UsernameNotFoundException; import org.springframework.stereotype.Service;

import java.util.Optional; import java.util.stream.Collectors;

@Service @RequiredArgsConstructor public class ClubUserDetailsService implements UserDetailsService {

private final ClubMEmberMapper clubMEmberMapper;

@Override public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {

Optional<ClubMemberDto> result = clubMEmberMapper.findByEmail(username, false);

if (result.isEmpty()) {
  throw new UsernameNotFoundException("이메일 및 비밀번호를 확인하세요.");
}
ClubMemberDto member = result.get();
member.addMemberRole(ClubMemberRole.USER);

ClubAuthMemberDto clubAuthMemberDto = new ClubAuthMemberDto(
    member.getEmail(),
    member.getPassword(),
    member.isFromSocial(),
    member.getRoleSet().stream().map(role -> new SimpleGrantedAuthority("ROLE_" + role.name())).collect(Collectors.toSet())
);

clubAuthMember.setName(member.getName());
clubAuthMember.setFromSocial(member.isFromSocial());


return clubAuthMember;

} }

---

resources/sql 경로 생성
- sql/sql-member.xml 생성
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.bitc.securitytest.mapper.ClubMEmberMapper">
    <select id="findByEmail" parameterType="map" resultType="com.bitc.securitytest.dto.ClubMemberDto">
        SELECT *
        FROM club_member
        WHERE email = #{email}
          AND from_social = #{social}
    </select>
</mapper>

주석 추가

ClubAuthMemberDto.java

package com.bitc.securitytest.dto;

import lombok.Data;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.userdetails.User;

import java.util.Collection;


// User 클래스를 [상속]받아 인증과 관련된 정보르 저장하는 DTO
// User 클래스 : 스프링 시큐리티에서 관리하는 사용자 정보 클래스
@Setter
@Getter
@ToString
public class ClubAuthMemberDto extends User {

  // User 클래스에서 제공하는 username, password, authorities 사용해야 함
  // username : 스프링 시큐리티에서 사용하는 사용자 ID
  // password : 스프링 시큐리티에서 사용하는 사용자 PW
  // authorities : 스프링 시큐리티에서 사용하는 사용자 권한

  private String email; // 사용자 id 로 사용되는 변수
  private String name; // 사용자 이름
  private boolean fromSocial;

  public ClubAuthMemberDto(String username, String password, boolean fromSocial, Collection<? extends GrantedAuthority> auth) {

    // 객체 생성 시 매개변수로 받은 사용자 id와 비밀번호, 인증 권한을 부모 클래스의 생성자를 실행하여 데이터를 저장함
    super(username, password, auth);  // 부모인 User 에 데이터 넘기기 -> 자식 클래스에서 사용가능

    // User 클래스에서 사용자 id는 username 변수이므로 해당 변수를 사용자 id 역할을 하는 email 변수에 저장
    this.email = username;
    this.fromSocial = fromSocial;
  }
}

• ClubMemberDto.java

  package com.bitc.securitytest.dto;
  
  

import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;

import java.util.HashSet; import java.util.Set;

// 데이터 베이스의 정보를 가져오기 위한 클래스

@AllArgsConstructor @NoArgsConstructor @Data public class ClubMemberDto { private String email; // 해당 DB 에서 id 의 역할을 하는 컬럼 private String password; private String name; private boolean fromSocial;

// 사용자의 권한을 저장하는 변수 // 만약 DB에 컬럼이 따로 존재 시, 일반 String 타입으로 사용해도 됨 private Set roleSet = new HashSet<>();

// 사용자 권한을 추가하기 위한 메서드일뿐 // 만약 데이터 베이스에 컬럼이 따로 존재 시, 해당 메서드는 필요 없음 public void addMemberRole(ClubMemberRole clubMemberRole) { roleSet.add(clubMemberRole); } }

- ClubMemberRole.jvav
```java
package com.bitc.securitytest.dto;

// 사용자의 권한을 지정해 놓은 것만 사용하도록 enum 타입으로 설정
public enum ClubMemberRole {
  ADMIN, USER, MANAGER
}

• ClubUserDetailsService.java

  package com.bitc.securitytest.service;
  

import com.bitc.securitytest.dto.ClubAuthMemberDto; import com.bitc.securitytest.dto.ClubMemberDto; import com.bitc.securitytest.dto.ClubMemberRole; import com.bitc.securitytest.mapper.ClubMEmberMapper; import lombok.RequiredArgsConstructor; import org.springframework.security.core.authority.SimpleGrantedAuthority; import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.core.userdetails.UserDetailsService; import org.springframework.security.core.userdetails.UsernameNotFoundException; import org.springframework.stereotype.Service;

import java.util.Optional; import java.util.stream.Collectors;

// UserDetailsService 사용자 정보를 데이터 베이스에서 가져올 경우 UserDetailsService 를 상속받아 loadUserByUsername() 메서드를 구현해야 함 @Service @RequiredArgsConstructor public class ClubUserDetailsService implements UserDetailsService {

private final ClubMEmberMapper clubMEmberMapper;

// DB 에서 사용자 정보를 가져올 경우 반드시 UserDetailsService 의 loadUserByUsername() 메서드를 구현해야 함 // loadUserByUsername() 메서드는 UserDetails 인터페이스를 구현한 클래스객체를 반환해야 함 // UserDetails 인터페이스를 상속받아 구현한 클래스의 객체를 스프링 시큐리티에서 확인하여 인증된 사용자인지 아닌지를 판단함 // 사용자가 로그인 페이지에서 로그인 시, 스프링 시큐리티가 먼저 데이터를 받아서 loadUserByUsername() 메서드에 사용자 id 를 매개변수로 사용해서 실행 @Override public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {

// Mybatis 의 mapper 를 이용하여 사용자 정보를 가져옴
// Optional : DB 사용 시, 데이터 조회 후 데이터가 null 이 들어올 경우 오류가 발생할 수 있는 부분을 안전하게 사용하기 위한 데이터 타입(제네릭)
Optional<ClubMemberDto> result = clubMEmberMapper.findByEmail(username, false);

// DB에 해당 사용자 정보가 있는지 확인
if (result.isEmpty()) {
  throw new UsernameNotFoundException("이메일 및 비밀번호를 확인하세요.");
}
// Optional 타입에 저장된 정보를 가져옴
ClubMemberDto member = result.get();  // 전체 데이터 가져오기

// ↓ 데이터베이스에 등급 권한 정보 컬럼이 있으면 필요없는 내용
// (사용자 정보에 사용 등급 권한 설정)
member.addMemberRole(ClubMemberRole.USER);

// 로그인 인증 정보를 가지고 있는 ClubAuthMemberDto 클래스 타입의 객체 생성
// 매개변수로 DB 에서 가져온 정보를 넘겨서 사용자가 입력한 사용자 id를 가지고 있는 로그인 인증된 객체가 생성됨
ClubAuthMemberDto clubAuthMember = new ClubAuthMemberDto(
    member.getEmail(),
    member.getPassword(),
    member.isFromSocial(),
    // 스프링 시큐리티에서 사용하는 권한 정보는 모두 "ROLE_권한" 형태로 되어 있음
    // map(매개변수 role -> 인증정보 신규생성 (new SimpleGrantedAuthority))
    member.getRoleSet().stream().map(role -> new SimpleGrantedAuthority("ROLE_" + role.name())).collect(Collectors.toSet())
);

clubAuthMember.setName(member.getName());
clubAuthMember.setFromSocial(member.isFromSocial());


// 로그인 인증 정보를 가지고 있는 객체를 반환 시 스프링 시큐리티가 처리해 줌
return clubAuthMember;

} }

---

스프링 공식 사이트 https://spring.io/projects/spring-boot#support

스프링 버전 수정

build.gradle에서 2.7.7 -> 2.6.14 로 버전 수정하기

초기설정

처음에 실행하면 오류나는 것 : DB연결문제 -> 아래 코드대로 build.gradle 주석처리

스프링 시큐리티

https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-security dependency 추가

// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-security
    implementation 'org.springframework.boot:spring-boot-starter-security'

localhost:8080/login

id : user, pw : 콘솔에 출력된 security password

로그인 성공 후 다른 페이지를 볼 수 있음

로그아웃 : localhost:8080/logout

configuration

스프링 시큐리티를 사용하기 위해서는 configuration 을 하나 만들어야 한다.

2.7.x 버전부터는 사용법이 조금 달라짐.

WebSecurityConfigurerAdapter 상속

스프링 시큐리티 설정을 위해서 WebSecurityConfigurerAdapter 클래스를 상속받아 사용함 (2.6.x 버전까지)

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    ...
}

비밀번호 암호화

스프링 시큐리티에서는 반드시 비밀번호를 암호화해서 사용해야 함 BCryptPasswordEncoder 클래스를 사용하여 비밀번호를 암호화 함 @Bean 추가

  @Bean
  PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
  }

HttpSecurity 클래스

스프링 시큐리티를 사용하는 웹 페이지에 접속할 경우 필요한 설정을 할 수 있음 인증과 인가에 관련된 API 를 제공하는 클래스이다.

기능

필요한 설정을 진행

authorizeRequests() : 요청에 대한 보안 설정을 시작하는 메서드 authorizeHttpRequests() : http 요청에 대한 보안 설정을 시작하는 메서드 ★ antMatchers(url) : 지정한 주소에 대한 url 주소에 대한 설정 ★ permitAll() : 지정한 url 에 대해서 사용 인가 ★ hasRole(권한등급) : 지정한 등급의 사용자만 지정한 url 에 대하여 사용 인가 ★ hasAnyRole(권한등급) : 지정한 url 에 대하여 지정한 등급 중 하나 이상을 가진 사용자만 접근 가능 isAnonymous() : 익명 사용자만 접근 isRememberMe() : Remember Me 인증을 통해서 접근 시에만 인가 isFullyAuthenticated() : Remember Me 가 아닌 일반적인 인증 방법으로 로그인 시에만 접근 denyAll() : 접근 불가 principal() : 인증된 사용자의 사용자 정보 반환(UserDetails 인터페이스를 구현한 클래스의 객체) (잘 안씀) authentication() : 인증된 사용자의 인증 정보 반환(Authentication** 인터페이스를 구현한 클래스의 객체) (잘 안씀) formLogin() : 기본 스프링 시큐리티 로그인 페이지 사용

로그인 페이지 사용 시 사용할 수 있는 추가 옵션

loginPage(url) : 사용자 정의 로그인 페이지 지정 defaultSuccessUrl(url) : 로그인 성공 후 이동할 페이지 지정 failureUrl(url) : 로그인 실패 후 이동할 페이지 지정 usernameParameter(ID) : ID 파라미터명 설정 passwordParameter(PW) : 비밀번호 파라미터명 설정 loginProcessingUrl(url) : 로그인 Form Action Url 지정 successHandler(loginSuccessHandler()) : 로그인 성공 후 동작할 내용 설정 failureHandler(loginFailureHandler()) : 로그인 실패 후 동작할 내용 설정 logout() : 로그아웃 기능 활성화, 기본적으로 로그아웃 페이지는 POST 방식으로만 동작함

로그아웃 페이지 사용 시 사용할 수 있는 추가 옵션

logoutUrl(url) : 로그아웃 처리 페이지 지정 logoutSuccessUrl(url) : 로그아웃 성공 시 이동할 페이지 지정 deleteCookies("JSESSIONID", "remember-me") : 로그아웃 시 쿠키 삭제 addLogoutHandler(addLogoutHandler()) : 로그아웃 시 동작할 내용 설정 logoutSuccessHandler(logoutSuccessHandler()) : 로그아웃 성공 시 동작할 내용 설정

securityConfig.java

package com.bitc.securitytest.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;


// 스프링 시큐리티 설정을 위해서 WebSecurityConfigurerAdapter 클래스를 상속받아 사용함 (2.6.x 버전까지)
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

  // 스프링 시큐리티에서는 반드시 비밀번호를 암호화해서 사용해야 함
  // BCryptPasswordEncoder 클래스를 사용하여 비밀번호를 암호화 함
  @Bean
  PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
  }

  // HttpSecurity 클래스 : 스프링 시큐리티를 사용하는 웹 페이지에 접속할 경우 필요한 설정을 할 수 있음
  // 인증과 인가에 관련된 API 를 제공하는 클래스

  @Override
  protected void configure(HttpSecurity http) throws Exception {
    // 필요한 설정을 진행
    // authorizeRequests() : 요청에 대한 보안 설정을 시작하는 메서드
    // authorizeHttpRequests() : http 요청에 대한 보안 설정을 시작하는 메서드
    //★ antMatchers(url) : 지정한 주소에 대한 url 주소에 대한 설정
    //★ permitAll() : 지정한 url 에 대해서 사용 인가
    //★ hasRole(권한등급) : 지정한 등급의 사용자만 지정한 url 에 대하여 사용 인가
    //★ hasAnyRole(권한등급) : 지정한 url 에 대하여 지정한 등급 중 하나 이상을 가진 사용자만 접근 가능
    // isAnonymous() : 익명 사용자만 접근
    // isRememberMe() : Remember Me 인증을 통해서 접근 시에만 인가
    // isFullyAuthenticated() : Remember Me 가 아닌 일반적인 인증 방법으로 로그인 시에만 접근
    // denyAll() : 접근 불가
    // principal() : 인증된 사용자의 사용자 정보 반환(UserDetails 인터페이스를 구현한 클래스의 객체) (잘 안씀)
    // authentication() : 인증된 사용자의 인증 정보 반환(Authentication** 인터페이스를 구현한 클래스의 객체) (잘 안씀)
    http.authorizeRequests()
        // 보안인증 시작 → "sec/all" 경로에 대해서는 인증 open 하겠다.
        .antMatchers("/sec/all").permitAll() // 여기까지 쓰면 모든 페이지 접근 가능
//        .antMatchers("/sec/member").hasRole("USER")  // 여기까지 쓰면 member 접속 안됨, all 은 정상적으로 뜸, login/logout 안됨
        .antMatchers("/sec/member").hasAnyRole("ADMIN", "USER")
        .antMatchers("/sec/admin").hasRole("ADMIN");  // http.logout(); 이후 추가 코드

    // formLogin() : 기본 스프링 시큐리티 로그인 페이지 사용
    // 로그인 페이지 사용 시 사용할 수 있는 추가 옵션
    // loginPage(url) : 사용자 정의 로그인 페이지 지정
    // defaultSuccessUrl(url) : 로그인 성공 후 이동할 페이지 지정
    // failureUrl(url) : 로그인 실패 후 이동할 페이지 지정
    // usernameParameter(ID) : ID 파라미터명 설정
    // passwordParameter(PW) : 비밀번호 파라미터명 설정
    // loginProcessingUrl(url) : 로그인 Form Action Url 지정
    // successHandler(loginSuccessHandler()) : 로그인 성공 후 동작할 내용 설정
    // failureHandler(loginFailureHandler()) : 로그인 실패 후 동작할 내용 설정
    http.formLogin();
    // logout() : 로그아웃 기능 활성화, 기본적으로 로그아웃 페이지는 POST 방식으로만 동작함
    // 로그아웃 페이지 사용 시 사용할 수 있는 추가 옵션
    // logoutUrl(url) : 로그아웃 처리 페이지 지정
    // logoutSuccessUrl(url) : 로그아웃 성공 시 이동할 페이지 지정
    // deleteCookies("JSESSIONID", "remember-me") : 로그아웃 시 쿠키 삭제
    // addLogoutHandler(addLogoutHandler()) : 로그아웃 시 동작할 내용 설정
    // logoutSuccessHandler(logoutSuccessHandler()) : 로그아웃 성공 시 동작할 내용 설정
    http.logout();
    // 실행 -> sec/member 접속 시 바로 /login 페이지로 이동됨
  }

  @Override
  protected void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth.inMemoryAuthentication().withUser("user1").password(passwordEncoder().encode("1111")).roles("USER");
    auth.inMemoryAuthentication().withUser("admin").password(passwordEncoder().encode("1111")).roles("ADMIN");
  }
}

지금은 리액트 프로젝트와 스프링 프로젝트를 별도로 만들어서 연동했지만 실제 배포할때는 그렇게 하지 않는다. 그럼 어떻게 하는지?

1. 스프링 프로젝트 생성

테스트용이라 종속성은 Spring Web만 추가해준다.

package com.bitc.springserver.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
public class TestController {

  @RequestMapping("test")
  public List<String> test() throws Exception {
    List<String> result = new ArrayList<>();
    result.add("안녕하세요");
    result.add("리액트 연동 테스트 입니다.");

    return result;
  }
}

여기까지 기본 서버 생성 완료.

서버 배포 하는법

2. 스프링 프로젝트의 터미널에서 리액트 프로젝트 생성

여기서 frontend는 새로 생성될 리액트 프로젝트명임 (터미널에서 안쓰고 인텔리제이에서 [파일 - 새 프로젝트 생성] 해줘도 됨)

리액트 폴더 생성됨!

콘솔창에 cd frontend -> cd start

리액트 서버 실행 완료

리액트에 Test.jsx 생성 Test.jsx

// Test.jsx

import React from "react";

function Test(props) {
  return (
    <div>
      <h3>스프링 프로젝트 안에서 동작하는 리액트</h3>
    </div>
  );
}

export default Test;

확인완료

axios 설치

Test.jsx

// Test.jsx

import React, {useEffect, useState} from "react";
import axios from "axios";

function Test(props) {
  // state data
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8080/test')
      .then((req) => {
        // 지역변수 data
        const {data} = req;
        console.log(data);
      })
      .catch((err) => {
        console.log('통신 시 오류가 발생했습니다.')
      });
  }, []);

  return (
    <div>
      <h3>스프링 프로젝트 안에서 동작하는 리액트</h3>
      <ul>
        {
          data.map((item, index) => {
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    </div>
  );
}

export default Test;

이대로 실행하면 CORS 에러 발생한다.

pakage.json -> "proxy": "http://localhost:8080" 코드 추가

axios.get('/test') 만 남겨놓음

에러 사라지고 정상적으로 배열이 반환됨

Test 컨트롤러

package com.bitc.springserver.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
public class TestController {

  @RequestMapping("test")
  public List<String> test() throws Exception {
    List<String> result = new ArrayList<>();
    result.add("안녕하세요");
    result.add("리액트 연동 테스트 입니다.");

    return result;
  }
}

useEffect에 setData(data); 추가

useEffect(() => {
    axios.get('/test')
      .then((req) => {
        // 지역변수 data
        const {data} = req;
        setData(data);
      })
      .catch((err) => {
        console.log('통신 시 오류가 발생했습니다.')
      });
  }, []);

하지만 이렇게 하면 cmd 창에서도 실행 해줘야하고, 스프링 프로젝트에서도 실행 해줘야해서 불편함

build.gradle 코드 추가

////////////////// 추가된 내용 ///////////////////////
// 리액트 프로젝트 폴더를 변수에 저장
def frontendDir = "$projectDir/frontend"

sourceSets {
  main {
    resources {
      srcDirs = ["$projectDir/src/main/resources"]
    }
  }
}

processResources {
  dependsOn "copyReactBuildFiles"
}

task installReact(type: Exec) {
  workingDir "$frontendDir"
  inputs.dir "$frontendDir"
  group = BasePlugin.BUILD_GROUP
  if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
    commandLine "npm.cmd", "audit", "fix"
    commandLine "npm.cmd", "install"
  }
  else {
    commandLine "npm", "audit", "fix"
    commandLine "npm", "install"
  }
}

task buildReact(type: Exec) {
  dependsOn "installReact"
  workingDir "$frontendDir"
  inputs.dir "$frontendDir"
  group = BasePlugin.BUILD_GROUP
  if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
    commandLine "npm.cmd", "run-script", "build"
  }
  else {
    commandLine "npm", "run-script", "build"
  }
}

task copyReactBuildFiles(type: Copy) {
  dependsOn "buildReact"
  from "$frontendDir/build"
  into "$buildDir/resources/main/static"
}

tasks.bootJar {
  dependsOn "copyReactBuildFiles"

코드 추가 후 bootJar 더블클릭 -> jar 파일 업데이트 됨(생성시간 확인) build.gradle 에서 해당부분 0.0.2 로 이름 바꾼후 다시 더블클릭 하면 0.0.2 버전 새로 생김

cmd창에서 새로 만든 0.0.2 버전 실행(gradle 적용 후 버전)

기존에 돌아가던 localhost:3000 에서는 안돌아가고 localhost:8080 에서 리액트가 동작이 됨

axios 방식 쓰고싶으면 스프링 프로젝트의 컨트롤러에 @RestController 붙여줘야함

• restful 방식의 주소 형태로 구성되는 파라미터
• 기존 url 뒤에 / 와 : 파라미터명을 사용하여 데이터를 전달하는 방식
• rest 방식에서 많이 사용함
• 연결된 컴포넌트에서 useParams 훅을 사용해야 함
• 사용법 : 기존 url/:파라미터1/:파라미터2

  <Route path={url/:test1/:test2} element={<url/>} />

쿼리스트링

• 기존의 get 방식으로 웹 브라우저의 주소에 파라미터를 함께 전달하는 방식 <Route /> 컴포넌트의 path에 변경이 없음.
• 지정된 컴포넌트에서 몇가지 옵션 사항을 사용할 수 있음
• 옵션 :
  • pathname : 쿼리 스트링을 제외한 현재 주소의 경로
  • search : 맨앞의 ? 문자를 포함한 쿼리 스트링 값
  • hash : 주소의 # 문자열 뒤의 값 (구형 브라우저에서만 사용-익스플로러)
  • state : 페이지 이동 시 임의로 추가할 상태 값
  • key : location 객체의 고유 값
• useLocation(), useSearchParams() 훅을 사용하여 데이터를 가져올 수 있음
  • useLocation() 훅을 사용하여 데이터를 가져오면 원하는 파라미터 값을 가져오기 위해 직접 파싱을 진행해야 함
  • useSearchParams() 훅을 사용하여 데이터를 가져오면 파라미터 데이터만 따로 가져올 수 있음
  • 사용법 : 기존 url?파라미터1=값1&파라미터2=값2
• useNavigate() : Link 컴포넌트를 사용하지 않고 다른 페이지로 이동하는 훅
  • 사용법 :

    const navigate = useNavigate();

    • navigate(-1) : History 를 사용하여 앞 페이지로 이동, 숫자를 음수로 입력 시 해당 뒤로 이동이고, 양수로 입력 시 앞으로 이동
    • navigate('/url') : 지정한 url 로 이동

예시

App7.jsx

<Route path={"board/:boardIdx"} element={<Board />}/>
<Route path={"board2"} element={<Board2/>} />

Board1.jsx

//Board.jsx
import React from "react";
import {useParams} from "react-router-dom";

function Board(props){
    const boardSelect = useParams();
    return(
        <div>
            <h2>글번호 : {boardSelect.boardIdx}</h2>
        </div>
    )
}

export default Board;

Board2.jsx

// Board2.jsx

import React from "react";
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";

function Board2(props) {
    const param1 = useLocation();
    const [param2, setParam2] = useSearchParams();
    const navi = useNavigate();

    const goBack = () => {
        navi(-1);
    }

    const goBoard = () => {
        navi('/Board/100')
    }

    return (
        <div className={"container"}>

            <p>{param1.search}</p>
            <p>{param2.get("val1")}</p>
            <p>{param2.get("val2")}</p>
            <button onClick={goBack} className={"btn btn-secondary"}>뒤로 이동</button>
            <button onClick={goBoard} className={"btn btn-primary"}>Board 페이지로 이동</button>
        </div>
    );
}

export default Board2;

액시오스

비동기 통신을 쉽게 해줌 설치법 : https://axios-http.com/kr/docs/intro

파일 생성

App8.jsx folder6 folder6/AxiosTest.jsx

영화진흥원 openAPI

https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do

http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101

기본 Axios 사용법(JSON)

axios

node.js 에서 비동기 통신을 하기 위한 라이브러리, promise 를 사용함 axios 는 rest 방식을 지원함

• GET 방식으로 서버에 데이터를 요청함

  get(url, config)

• POST 방식으로 서버에 데이터를 전달

  post(url, data[, config])

• PUT 방식으로 서버에 데이터 전달

  put(url, data[, config])

• DELETE 방식으로 데이터 전달

  delete(url, data[, config]

• axios 객체 생성 시 설정 정보를 변경할 수 있음

  options(url, config)

then() : 정상적으로 통신이 성공했을 경우 실행 catch() : 통신이 실패했을 경우 실행

async/await 와 함께 사용 시 then(), catch() 는 필요할 경우 나중에 호출할 수 있음 async/await 와 함께 사용 시 예외처리를 try/catch 로 처리함

응답 객체 : 요청에 대한 응답 객체가 json 방식으로 전달됨 data{} : 서버에서 제공한 데이터 json 타입 status : 서버와의 통신 응답 신호, 200 : ok, 300 : redirect, 400 : 리소스 없음, 500 : 서버 내부 오류 statusText : 서버와의 응답 메시지 headers{} : 서버에서 응답한 헤더 정보 config{} : 서버에 요청 시 axios 의 설정 정보 request{} : 응답을 생성한 요청

• 적용법 : npm install axios : 사용할 프로젝트 axios 설치 import axios from 'axios'; : 사용할 컴포넌트에서 axios import

• axios 사용법 1

    axios.get(url)
    .then(function(req) {
        성공 시 실행할 소스;
    })
    .catch(function(err) {
        실패 시 실행할 소스;
    })

• axios 사용법 2

    axios({
        method: 'get|post|put|delete',
        url: 'url',
        data: {
            param1: 'data',
            param2: 'data'
        },
    });

• axios 사용법 3

    axios.post(url, {
        param1: 'data1',
        param2: 'data2'
    })
    .then(function(req) {
        성공 시 실행할 소스;
    })
    .catch(function(err) {
        실패 시 실행할 소스;
    });

AxiosTest.jsx

// AxiosTest.jsx

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

function AxiosTest(props) {
    const value = 11;
    useEffect(() => {
        axios.get('http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230109')
            .then((req) => {
                alert("통신성공");
                console.log(req);
                console.log(req.data);
                const list = req.data.boxOfficeResult.dailyBoxOfficeList;

                for (let i = 0; i < list.length; i++) {
                    let str = `순번 : ${list[i].rnum}
                    순위 : ${list[i].rank}
                    제목 : ${list[i].movieNm}
                    개봉일 : ${list[i].openDt}
                    관람객 : ${list[i].audiCnt}`
                    console.log(str + '\n');
                }
            })
            .catch((err) => {
                alert("통신실패");
            });
    });
    return (
        <div>

        </div>
    );
}

export default AxiosTest;

axios 문제 1

버튼 클릭 시 axios 통신을 통해서 데이터를 가져와서 화면의 table 에 출력하는 컴포넌트를 작성하세요 state 사용.( 화면이 업데이트 되니까), 배열로 들어오니까 map() 사용.

DailyBoxOffice.jsx

// DailyBoxOffice.jsx

import React from "react";
import axios from "axios";

// 문제 1. 버튼 클릭 시 axios 통신을 통해서 데이터를 가져와서 화면의 table 에 출력하는 컴포넌트를 작성하세요
// state 사용.( 화면이 업데이트 되니까), 배열로 들어오니까 map() 사용.
function DailyBoxOffice(props) {

  const loadBoxOffice = () => {
    axios.get('http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230109')
      .then((req) => {
        const boxOffice = req.data.boxOfficeResult.dailyBoxOfficeList;
        console.log(boxOffice);
      })
      .catch((err) => {
        console.log('통신 시 오류가 발생하였습니다.');
      });
  }


  return (
    <div className={"container"}>
      <div className={"row"}>
        <div className={"col-sm-8 mx-auto"}>
          <table className={"table table-striped table-hover"}>
            <thead>
            <tr>
              <th>순위</th>
              <th>제목</th>
              <th>개봉일</th>
              <th>당일 관람객</th>
              <th>누적 관람객</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
          </table>
          <hr/>
          <div className={'my-3 d-flex justify-content-end'}>
            <button className={'btn btn-outline-primary btn-sm'} onClick={loadBoxOffice}>영화 순위 조회</button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DailyBoxOffice;

해답

DailyBoxOffice.jsx

// DailyBoxOffice.jsx

import React, {useState} from "react";
import axios from "axios";
import BoardItem from "../folder1/BoardItem";

// 문제 1. 버튼 클릭 시 axios 통신을 통해서 데이터를 가져와서 화면의 table 에 출력하는 컴포넌트를 작성하세요
// state 사용.( 화면이 업데이트 되니까), 배열로 들어오니까 map() 사용.
function DailyBoxOffice(props) {
  // boxOffice 를 state 로 설정. 주의: 초기값을 빈 배열로 넣어줘야함
  const [boxOffice, setBoxOffice] = useState([]);

  const loadBoxOffice = () => {
    axios.get('http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230109')
      .then((req) => {
        const DailyBoxOffice = req.data.boxOfficeResult.dailyBoxOfficeList;

        setBoxOffice(DailyBoxOffice);
        console.log(DailyBoxOffice);
      })
      .catch((err) => {
        console.log('통신 시 오류가 발생하였습니다.');
      });
  }


  return (
    <div className={"container"}>
      <div className={"row"}>
        <div className={"col-sm-8 mx-auto"}>
          <table className={"table table-striped table-hover"}>
            <thead>
            <tr>
              <th>순위</th>
              <th>제목</th>
              <th>개봉일</th>
              <th>당일 관람객</th>
              <th>누적 관람객</th>
            </tr>
            </thead>
            <tbody>
            {
              boxOffice.map((item) => {
                console.log(item);
                return (
                  <tr key={item.rnum}>
                    <td>{item.rank}</td>
                    <td>{item.movieNm}</td>
                    <td>{item.openDt}</td>
                    <td>{item.audiCnt}</td>
                    <td>{item.audiAcc}</td>
                  </tr>
                );
              })
            }
            </tbody>
          </table>
          <hr/>
          <div className={'my-3 d-flex justify-content-end'}>
            <button className={'btn btn-outline-primary btn-sm'} onClick={loadBoxOffice}>영화 순위 조회</button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DailyBoxOffice;

Async, Await

기본 사용 방법

async / await : 비동기 처리를 조금 더 쉽게 하기 위해서 개발됨 기본적으로 promise 를 사용함

사용법 :

async function 함수명(매개변수) {
        const 변수명 = await_promise_를_사용하는 함수();
        console.log(변수명);
    }

AsyncAwait.jsx 생성

// AsyncAwait.jsx

import React from "react";
import axios from "axios";

function AsyncAwait(props) {
    const fetchItems = () => {
        return new Promise((resolve, reject) => {
            const items = [1, 2, 3];
            resolve(items);
        });
    }

    // 프로미스 사용 시 비동기 처리 방법
    const logItem1 = () => {
        fetchItems()
            .then((item) => {
                console.log(item);
            })
            .catch((err) => {
                console.log(err);
            });
    }

    // async / await 사용 시 비동기 처리 방법
    const logItem2 = async () => {
        const resultItems = await fetchItems();
        // ↓ 필요없으면 안써도됨
        // resultItems.then(() => {
        //
        // })
        //     .catch(() => {
        //
        //     });
        console.log(resultItems);
    }


    const getData = async () => {
        const {data} = await axios.get('http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230109');
        console.log(data.boxOfficeResult.dailyBoxOfficeList);
    }

    return (
        <div>
            <button className={'btn btn-primary'} onClick={logItem1}>프로미스 사용</button>
            <button className={'btn btn-success'} onClick={logItem2}>async/await 사용</button>
            <button className={'btn btn-success'} onClick={getData}>axios와 함께 사용</button>
        </div>
    );
}

export default AsyncAwait;

async, await 써주면 then, catch 안써도 됨 코드가 훨씬 간결해진다. 사용하기도 편함!

응용 1

영화 순위 데이터 가져오는 버튼도 async, await 방식으로 만들어보자 DailyBoxOffice.jsx => asyncBoxOffice 함수

// DailyBoxOffice.jsx

import React, {useState} from "react";
import axios from "axios";

function DailyBoxOffice(props) {
  // boxOffice 를 state 로 설정. 주의: 초기값을 빈 배열로 넣어줘야함. 만약 '' (빈 문자열)형태로 넣으면 아래에서 map 함수가 동작하지 않음
  const [boxOffice, setBoxOffice] = useState([]);

  const loadBoxOffice = () => {
    axios.get('http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230109')
      .then((req) => {
        const DailyBoxOffice = req.data.boxOfficeResult.dailyBoxOfficeList;

        setBoxOffice(DailyBoxOffice);
        console.log(DailyBoxOffice);
      })
      .catch((err) => {
        console.log('통신 시 오류가 발생하였습니다.');
      });
  }

  const asyncBoxOffice = async () => {
    const {data} = await axios.get('http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230109');
    const DailyBoxOffice = data.boxOfficeResult.dailyBoxOfficeList;
    setBoxOffice(DailyBoxOffice);
  }


  return (
    <div className={"container"}>
      <div className={"row"}>
        <div className={"col-sm-8 mx-auto"}>
          <table className={"table table-striped table-hover"}>
            <thead>
            <tr>
              <th>순위</th>
              <th>제목</th>
              <th>개봉일</th>
              <th>당일 관람객</th>
              <th>누적 관람객</th>
            </tr>
            </thead>
            <tbody>
            {
              boxOffice.map((item) => {
                console.log(item);
                return (
                  <tr key={item.rnum}>
                    <td>{item.rank}</td>
                    <td>{item.movieNm}</td>
                    <td>{item.openDt}</td>
                    <td>{item.audiCnt}</td>
                    <td>{item.audiAcc}</td>
                  </tr>
                );
              })
            }
            </tbody>
          </table>
          <hr/>
          <div className={'my-3 d-flex justify-content-end'}>
            <button className={'btn btn-outline-primary btn-sm'} onClick={loadBoxOffice}>영화 순위 조회</button>
            <button className={'btn btn-outline-primary btn-sm'} onClick={asyncBoxOffice}>영화 순위 조회(async/await 이용)</button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DailyBoxOffice;

AxiosRestServer.jsx 파일 생성

//AxiosRestServer.jsx
// spring과 데이터 주고받기
import React from "react";
import axios from "axios";
// 버튼을 매개로 요청 서버(get, post, put, delete)
function AxiosRestServer(props){

  const sendDataGet = () => {
    axios.get("http://localhost:8080/async/sendDataGet", {params: {idx: 300}})
      .then((req) => {
        console.log('Get 방식으로 통신 성공');
        console.log(req); //데이터 넘어오는지 확인
      })
      .catch((err) => {
        console.log('Get 방식 통신 오류');
      });
  }
  const sendDataPost = () => {
    axios.post("http://localhost:8080/async/sendDataPost", null, {params: {id: "id", pw: "pw"}})
      .then((req) => {
        console.log('post 방식으로 통신 성공');
        console.log(req);
      })
      .catch((err) => {
        console.log('post 방식 통신 오류');
      });
  }
  const sendDataPut = () => {
    axios.put("http://localhost:8080/async/sendDataPut", null, {params: {idx: 100}})
      .then((req) => {
        console.log('Put 방식으로 통신 성공');
        console.log(req);
      })
      .catch((err) => {
        console.log('Put 방식 통신 오류');
      });
  }

  const sendDataDelete = () => {
    axios.delete("http://localhost:8080/async/sendDataDelete", {params: {idx: 200}})
      .then((req) => {
        console.log('delete 방식으로 통신 성공');
        console.log(req);
      })
      .catch((err) => {
        console.log('delete 방식 통신 오류');
      });
  }



  return(
    <div className={"container mt-5 p-5"}>
      <h1>Axios를 사용한 비동기 통신</h1>
      <div className={"row"}>
        <div className={"col-sm-8 mx-auto"}>
          <div>

          </div>
          <div className={"my-3 d-flex justify-content-center"}>
            <button className = {"btn btn-primary me-3"} onClick={sendDataGet}>get 방식</button>
            <button className={"btn btn-success me-3"} onClick={sendDataPost}>post 방식</button>
            <button className={"btn btn-info me-3"} onClick={sendDataPut}>put 방식</button>
            <button className={"btn btn-danger"} onClick={sendDataDelete}>delete 방식</button>
          </div>
        </div>
      </div>
    </div>
  )
}
export default AxiosRestServer;

스프링 파일 참고

AsyncController.java

package com.bitc.asynctestserveer.controller;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;

@CrossOrigin(origins = {"http://localhost:3000", "http://localhost:4000"})
@RestController
public class AsyncController {

  @RequestMapping()
  public String index() {return "index 페이지";}

//    @CrossOrigin(origins = "http://localhost:3000")
  @RequestMapping(value = "/async/data1", method = RequestMethod.POST)
  public Object data1() {
    return "success";
  }

  @RequestMapping(value = "/async/sendDataGet", method = RequestMethod.GET)
  public Object sendDataGet() throws Exception {
  Map<String, String> result = new HashMap<>();
  result.put("result", "success");
  result.put("data", "");

  return result;
}

@RequestMapping(value = "/async/sendDataPost", method = RequestMethod.POST)
public Object sendDataPost(@RequestParam("id") String id, @RequestParam("pw") String pw) throws Exception {
  Map<String, Object> user = new HashMap<>();
  user.put("id", "test1");
  user.put("pw", "pw1234");

  Map<String, Object> result = new HashMap<>();
  result.put("result", "success");
  result.put("data", user);

  return result;
}

@RequestMapping(value = "/async/sendDataPut", method = RequestMethod.PUT)
public Object sendDataPut(@RequestParam("idx") int idx) throws Exception {
  Map<String, Object> result = new HashMap<>();
  result.put("result", "success");

  return result;
}

@RequestMapping(value = "/async/sendDataDelete", method = RequestMethod.DELETE)
public Object sendDataDelete(@RequestParam("idx") int idx) throws Exception {
  Map<String, Object> result = new HashMap<>();
  result.put("result", "success");

  return result;
}
}

CORS 오류

CORS 오류 : Cross Origin resource sharing 의 줄임말, 동일한 주소 내에서만 리소스를 공유할 수 있음. 스프링에서는 CORS 허용을 위해서 @CrossOrigin 어노테이션을 사용하여 처리함 @CrossOrigin 어노테이션을 사용하면 지정한 도메인에 대해서 접근을 허용함 @CrossOrigin 어노테이션은 메소드, 클래스, configuration 에 설정할 수 있음 메소드에 사용 시 지정한 메소드만 접근을 허용 클래스에 사용 시 지정한 컨트롤러에 대해서만 접근을 허용 configurer 에 사용 시 모든 곳에 접근을 허용함 옵션으로 origins 에 접근할 서버의 주소를 입력함

이를 해결하기 위해서는 세 가지 방법이 있다.

1. 메인 컨트롤러에 @CrossOrigin 어노테이션으로 접근허용 url을 추가해주면 하위의 소스들에 추가 조치 없이 접근이 가능.

   @CrossOrigin(origins = {"http://localhost:3000", "http://localhost:4000"})
   @RestController
   public class AsyncController {
    실행내용
   }

2. 메인 컨트롤러 하위의 소스에 개별적으로 @CrossOrigin 어노테이션을 추가해주면 좀 더 디테일하게 접근을 제한해줄수 있다. 아래의 코드대로라면 "/async/data1" 에만 http://localhost:3000 에서 접근이 가능하다.

   @RestController
   public class AsyncController {
   
   @CrossOrigin(origins = "http://localhost:3000")
   @RequestMapping(value = "/async/data1", method = RequestMethod.POST)
   public Object data1() {
    return "success";
   }
   
   @RequestMapping(value = "/async/sendDataPut", method = RequestMethod.PUT)
   public Object sendDataPut(@RequestParam("idx") int idx) throws Exception {
    Map<String, Object> result = new HashMap<>();
    result.put("result", "success");
   
    return result;
   }
   }

3. configuration 으로 설정해주는 방법 3-1. @Configuration 어노테이션 추가 3-2. WebMvcConfigurer 상속 implements WebMvcConfigurer 3-3. @Override : CorsRegistry

   @Override
    public void addCorsMappings(CorsRegistry registry) {
   
    }

   3-4. addMapping() 을 이용해 접근 권한 확인(경로) 추가후 allowedOrigins(url) 을 이용해 접근 허용할 외부 url 지정(여러개 가능) 두개는 . 으로 연결시키기

   registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000", "http://localhost:4000");

   결과

   package com.bitc.asynctestserveer.configuration;
   

import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration public class WebMvcConfiguration implements WebMvcConfigurer {

@Override
public void addCorsMappings(CorsRegistry registry) {

// addMapping() : 지정한 패턴에 맞는 페이지에 대해서 접근 권한 확인 // allowedOrigins(url) : 접근 허용할 외부 url registry.addMapping("/**") .allowedOrigins("http://localhost:3000", "http://localhost:4000");

}

}

![](https://velog.velcdn.com/images/i_like_monday/post/80b74fb1-84f7-4537-9423-13fed6a5f3b7/image.png)![](https://velog.velcdn.com/images/i_like_monday/post/8b7eeeb1-1748-4b00-b2b6-ee73df87d2d9/image.png)

state

• 현재 컴포넌트의 상태를 나타내는 객체, 현재 컴포넌트에서 변경 가능한 객체, state 는 직접적인 수정이 불가능함(화면 렌더링과 관련이 있음)
• setState() : state 의 값을 변경하는 함수

리액트 생명주기

컴포넌트가 생성되고 내용이 변경되고 컴포넌트가 삭제되는 상태

• componentDidMount : 컴포넌트가 생성되고 화면에 렌더링 된 이후 실행되는 함수
• componentDidUpdate : 컴포넌트의 상태가 변경된 후 실행되는 함수, props 변경(=부모가 주는 값 변경), setState()함수 호출, forceUpdate()를 통한 강제 업데이트 후 동작함
• componentWillUnmount : 부모 컴포넌트에서 더이상 해당 컴포넌트를 사용하지 않아 삭제된 후 실행

folder3/LinkButton.js

// folder3/LinkButton.js

import React from "react";

class LinkButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      linked: false,
    }

    this.setState({
        linked: true,
      });
  }
}

timer 예제

folder3/Notification.jsx

// folder3/Notification.jsx
import React from "react";

const styles = {
  wrapper: {
    margin: 8,
    padding: 8,
    display: "flex",
    flexDirection: "row",
    border: "1px solid grey",
    borderRadius: 16,
  },
  messageText: {
    color: "black",
    fontSize: 16,
  },
};

class Notification extends React.Component {
  constructor(props) {
    super(props);

    this.state = {}
  }

  render() {
    return (
      <div style={styles.wrapper}>
        <span style={styles.messageText}>
          {this.props.message}
        </span>
      </div>
    )
  }

}

export default Notification;

folder3/NotificationList.jsx

// folder3/NotificationList.jsx

import React from "react";
import Notification from "./Notification";

// 서버에서 전송되어야 할 데이터, 통신 모듈이 없기 때문에 임의로 만들어준 데이터
const msgData = [
  {id: 1, message: "안녕하세요. 오늘 일정입니다."},
  {id: 2, message: "점심 식사 시간입니다."},
  {id: 3, message: "이제 곧 미팅이 시작됩니다."},
];

// 자바스크립트 타이머 객체 정보를 저장할 변수
let timer;

// 클래스 컴포넌트 사용
class NotificationList extends React.Component {

  // 클래스 컴포넌트의 생성자
  constructor(props) {
    super(props);

    // state 객체 선언, 클래스(객체)의 멤버 변수로 선언
    this.state = {
      // 메시지를 저장할 배열
      notification: [],
    };
  }

  // 컴포넌트가 마운트된 후 실행되는 생명주기 함수
  componentDidMount() {
    // object 타입을 사용한 확장표현식. 현재는 비어있음. 타이머가 돌면서 값 들어갈 예정
    const { notification } = this.state;

    // 타이머를 사용하여 지정된 시간을 간격으로 반복 실행 (1000 = 1초)
    timer = setInterval(() => {

      // 첫번째 : 0 < 3 (true)
      // 두번째 : 1 < 3 (true)
      // 지연 변수인 배열 notification 크기가 전연 변수인 배열 msgData 의 크기보다 작을 경우 실행되는 코드
      if (notification.length < msgData.length) {
        const index = notification.length;

        // msgData[0] 값 push
        // msgData[1] 값 push
        notification.push(msgData[index]);

        // setState() 함수를 사용하여 state 객체의 notification 을 방금 업데이트한 값으로 수정
        this.setState({
          // 전역변수로 선언된 notification : 변수로 선언한 notification
          notification: notification,
        });
      }
      else {
        // timer 삭제
        clearInterval(timer);
      }
      // 1초 후 다시 실행
    }, 1000);
  }
  // 화면을 생성(렌더링)하는 함수
  render() {
    return (
      <div>
        {/* map : ES6 버전에서 추가된 배열 관련 함수, 지정한 배열의 크기만큼 반복하고 결과를 배열로 반환하는 함수 */}
        {this.state.notification.map((item) => {
          return <Notification key={item.id} message = {item.message} />;
        })}
      </div>
    );
  }
}

export default NotificationList;

strict

• strictMode : 자바스크립트의 문법을 엄격하게 확인한다는 의미
• React.strictMode : 배포 버전에는 제외되고 개발 버전에서만 동작하는 엄격 모드, 몇 가지 함수를 중복 실행하여 잘못된 것이 없는지 개발자에게 확인하도록 함(생략가능)

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import App2 from "./App2";
import App3 from "./App3";
import App4 from "./App4";
import App5 from "./App5";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  // strictMode : 자바스크립트의 문법을 엄격하게 확인한다는 의미
  // React.strictMode : 배포 버전에는 제외되고 개발 버전에서만 동작하는 엄격 모드, 몇 가지 함수를 중복 실행하여 잘못된 것이 없는지 개발자에게 확인하도록 함(생략가능)
  <React.StrictMode>
  {/*   <App />*/}
  {/*   <App2 />*/}
  {/*   <App3 />*/}
  {/*   <App4 />*/}
    <App5 />
  </React.StrictMode>
);


reportWebVitals();

setState()

countButton.jsx

// folder3/CountButton.jsx : setState() 익히기

import React from "react";
import Button from "react-bootstrap/Button";
import {logDOM} from "@testing-library/react";

class CountButton extends React.Component {
  constructor(props) {
    super(props);

    // state 객체 생성
    this.state = {
      count: 0,
    }

    // 객체 멤버 변수 count 선언
    this.count = this.state.count;
  }

  // 메서드 2개 생성
  countUp = () => {
    console.log("이전 this.count : " + this.count);
    this.count = this.count + 1

    // setState 함수를 실행해야만 state 의 값이 수정이 되고, state 의 값이 수정되면 render 함수가 재실행되면서 화면을 다시 그려줌
    this.setState({
      count: this.count
    });
    console.log("+ 사용 후 this.count : " + this.count);
  };
  countDown = () => {
    console.log("이전 this.count : " + this.count);
    this.count = this.count - 1
    this.setState({
      count: this.count
    });
    console.log("- 사용 후 this.count : " + this.count);
  };


  render() {
    return (
      <div>
        <label htmlFor="" className={"form-label"}>count : <span>{this.count}</span></label><br/>
        <Button variant={"primary"} onClick={this.countUp} > + </Button>
        <Button variant={"danger"} onClick={this.countDown}> - </Button>
      </div>
    );
  }
}

export default CountButton;

hooks

기존의 존재하는 기능을 추가로 함께 사용하도록 하는 것, state 와 리액트 생명주기 기능을 원하는 시점에 실행할 수 있도록 하는 기능 훅을 사용 시 미리 해당 함수를 import 해서 사용해야 함

• useState : state 객체를 함수 컴포넌트에서 사용할 수 있도록 하는 기능
• useEffect : useState() 와 함께 가장 많이 사용되는 훅, 리액트 생명주기 함수인 componentDidMount, componentDidUpdate, componentWillUnmount 의 기능을 하나로 합한 기능
• useMemo : 재 렌더링 시 연산량이 높은 작업을 반복하는 것을 피할 수 있게 하는 기능 (거의 안씀)
• useCallback : useMemo 와 비슷한 기능, 값이 아닌 함수를 반환함 (거의 안씀)
• useRef : 지정한 컴포넌트에 접근할 수 있는 객체 (거의 안씀)

useState

클래스 컴포넌트에 존재하는 state 객체를 함수 컴포넌트에서 사용할 수 있도록 함

• 사용법

  const[변수명, set함수명] = useState(초기값);

  변수명 : state 로 지정할 지역변수명 set함수명 : state 로 지정된 변수명에 접두사 set 을 붙여서 사용, 카멜명명법 사용 useState(초기값) : 확장표현식을 통해서 지정한 변수를 state 객체로 설정함, 초기값은 state 로 설정된 변수의 초기값을 말함 state 로 지정할 변수가 여러개일 경우 useState() 를 변수의 수 만큼 실행해야 함

useEffect

클래스 컴포넌트에 존재하는 생명주기 함수를 사용할 수 있도록 함 사용법

useEffect(이펙트함수, 의존성배열);

이펙트함수(= 콜백 함수)

이펙트 함수는 기본적으로 컴포넌트가 처음 렌더링된 후 데이터 업데이트에 의한 재렌더링 시 실행됨 이펙트 함수를 마운트, 언마운트 시 각각 1번씩만 실행하고자 할 경우 의존성 배열에 빈 배열을 사용(componentDidMount, componentWillUnmount 기능 수행)

의존성 배열

콜백 함수인 이펙트 함수가 의존하고 있는 배열, 해당 의존성 배열 안에 있는 변수 중 하나라도 값이 변경되면 실행 의존성 배열이 없을 경우 화면이 재 렌더링 된 이후에 실행(componentDidUpdate 기능 수행)

Hook 의 규칙 :

1. Hook은 무조건 최상위 레벨에서만 호출 (if, for 문 내부에서 훅을 호출하면 안됨)
2. Hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 함
3. 함수 컴포넌트에서만 Hook을 사용할 수 있음 일반적인 자바스크립트 함수에서 Hook을 호출하면 안됨

커스텀 훅

리액트에서 제공하는 훅이 아닌 사용자가 필요에 의해서 생성하여 사용하는 훅 이름에 접두사로 use 를 사용하고, 함수 내부에서 다른 훅을 호출하는 단순 자바스크립트 함수 파라미터 및 반환값을 사용자가 직접 지정할 수 있음 중복되는 로직을 커스텀 훅으로 설정하여 재사용하기 위함 이름의 접두사로 use 를 사용하지 않을 경우 함수 내부에서 훅을 사용하는지 판단할 수 없음

folder3/CountButton2.jsx

// folder3/CountButton2.jsx : hooks 익히기

// useState() 훅을 사용하기 위해서 미리 import
import React, {useState, useEffect} from "react";

// 함수 컴포넌트 사용
function CountButton2(props) {
  // 지역변수
  // let count = 0;

  // useState 를 통해서 state 객체에 추가함
  const [count, setCount] = useState(0);

  // [deps] 값 안줬으면 컴포넌트 DidMount 될때마다 동작, [deps] 값을 [count]로 줬으면 count 값이 변경될때마다 동작
  // useEffect 를 사용하여 componentDidMount, componentDidUpdate 를 구현함
  useEffect(() => {
    document.title = `총 ${count}회 클릭했습니다.`
  }/*[count]*/);


  // 함수 선언
  const countUp = () => {
    // count++; <- 지역변수 사용했을때 코드.(주석처리)

    setCount(count + 1);

    console.log(`count++ : ${count}`);
  }
  const countDown = () => {
    // count--; <- 지역변수 사용했을때 코드.(주석처리)

    // setCount(count - 1);

    // 콜백함수의 형태도 사용 가능
    setCount(() => {
      return count - 1;
    });

    console.log(`count-- : ${count}`);
  }

  return (
    <div>
      <label htmlFor="" className={"form-label"}>count : <span>{count}</span></label><br/>
      <button className={"btn btn-outline-primary"} onClick={countUp}> + </button>
      <button className={"btn btn-outline-danger"} onClick={countDown}> - </button>
    </div>
  );
}

export default CountButton2;

커스텀 훅

이름에 use 를 접두사로 사용 매개변수, 반환값을 사용자 마음대로 설정 내부에서 훅을 사용한 함수이며, 소스코드 재활용을 위해서 사용함 props 가 아닌 initValue 인 이유 : 커스텀 훅이라서

folder3/UseCounter.jsx

// folder3/UseCounter.jsx : 커스텀 훅


import React, {useState} from "react";

// 커스텀 훅
// 이름에 use 를 접두사로 사용
// 매개변수, 반환값을 사용자 마음대로 설정
// 내부에서 훅을 사용한 함수이며, 소스코드 재활용을 위해서 사용함
// props 가 아닌 initValue 인 이유 : 커스텀 훅이라서

// 커스텀 훅으로 설정
// 매개변수를 마음대로 설정함
function UseCounter(initValue) {

  // state 사용을 위해서 useState 설정을 걸어줌
  const [count, setCount] = useState(initValue);

  // 함수 실행 시 state 를 수정하기 위함 setCount 를 실행
  const increaseCount = () => {
    // 자바스크립트에서 지원하는 수학 클래스의 max 함수를 사용하여 0 이하의 값을 사용할 수 없도록 제약을 걸어놓음
    setCount((count) => {return count + 1});
  }

  const decreaseCount = () => {
    setCount((count) => Math.max(count - 1, 0));
  }
  // math 사용한 코드와 동일
  // setCount((count) => {
  //   count--;
  //   if (count < 0) {
  //     count = 0;
  //   }
  //   return count;
  // });
  return[count, increaseCount, decreaseCount];
}

export default UseCounter;

Accomodate.jsx

// folder3/Accommodate.jsx : 커스텀 훅

import React, {useState, useEffect} from "react";
// 커스텀 훅 (useCounter)
import useCounter from "./UseCounter";


const MAX_CAPACITY = 10; // 최대값


function Accommodate(props) {
  // state 를 사용하기 위해 useState() 를 설정
  const [isFull, setIsFull] = useState(false);

  // 원래 코드 :
  // const[count, setCount] = useState(0); -> 하위에 함수 만들어주고....
  // 해당 컴포넌트 내부에서 생성해야 할 state 객체 및 setState 를 커스텀 훅을 통해서 생성함
  // 커스텀 훅을 사용했기 때문에 재활용이 가능함
  const [count, increaseCount, decreaseCount] = useCounter(0);

  // 리액트 생명주기 함수를 사용하기 위해서 useEffect 를 설정함
  // 의존성 배열이 없을 겨우 componentDidMount, componentWillUnmount 를 실행하는 것과 같은 효과
  useEffect(() => {
    console.log("====================");
    console.log("useEffect() is called");
    console.log(`isFull : ${isFull}`);
  }, []);

  // 의존성 배열에 count 를 설정하여 count 값이 수정되면 componentDidUpdate 를 실행하는 것과 같은 효과 발생
  useEffect(() => {
    setIsFull(count >= MAX_CAPACITY);
    console.log("현재 count값 : " + count);
  }, [count]);

  return (
    <div>
      {/* 현재 state 로 설정된 count 의 값을 출력 */}
      <p>{`총 ${count}명 수용했습니다.`}</p>
      {/* 커스텀 훅을 통해서 만들어진 사용자 입장/퇴장 함수를 버튼에 등록 */}
      <button className={"btn btn-warning"} onClick={increaseCount} disabled={isFull}>입장</button>
      <button className={"btn btn-info"} onClick={decreaseCount}>퇴장</button>
      {/* isFull 이 true 면 뒤에거 확인(실행), isFull 이 false 라면 && 기호 뒤에는 아예 읽지도 않음 = 렌더링자체가 안됨 */}
      {isFull && <p style={{color: "red"}}>정원이 가득찼습니다.</p>}
    </div>
  )

}

export default Accommodate;

문제1

숫자 2개를 입력받아 계산 기호 버튼에 따라서 결과를 출력하는 리액트 컴포넌트를 작성하세요

• input 태그를 통해서 숫자를 입력(태그이름 : num1, num2, result)
• 버튼 5개 ( + - * / = )
  • 컴포넌트 이름 : Calulator.jsx
• useState 총 3개 사용 (함수 컴포넌트로 작성)

folder/Calculator.jsx

// folder/Calculator.jsx

/*
문제1) 숫자 2개를 입력받아 계산 기호 버튼에 따라서 결과를 출력하는 리액트 컴포넌트를 작성하세요
- input 태그를 통해서 숫자를 입력(태그이름 : num1, num2, result)
- 버튼 5개 ( + - * / = )
  - 컴포넌트 이름 : Calulator.jsx
- useState 총 3개 사용 (함수 컴포넌트로 작성)
*/

import React, {useState} from "react";

let calResult = 0;
function Calculator(props) {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  const [result, setResult] = useState(0);

  const plus = () => {
    const number1 = parseInt(num1);
    const number2 = parseInt(num2);
    calResult = number1 + number2;
  }
  const minus = () => {
    const number1 = parseInt(num1);
    const number2 = parseInt(num2);
    calResult = number1 - number2;
  }
  const multiply = () => {
    const number1 = parseInt(num1);
    const number2 = parseInt(num2);
    calResult = number1 * number2;
  }
  const division = () => {
    const number1 = parseInt(num1);
    const number2 = parseInt(num2);
    calResult = number1 / number2;
  }

  const equal = () => {
    setResult(calResult);
  }
  return (
    <div>
      <hr/>
      <div className={"my-3 text-center"}>
        <span>숫자1 </span><input type="text" value={num1} onChange={(e) => (setNum1(parseInt(e.target.value)))}/>
        <span className={"ms-3"}>숫자2 </span><input type="text" value={num2} onChange={(e) => (setNum2(parseInt(e.target.value)))}/>
      </div>
      <div className={"text-center"}>
        <button onClick={plus} className={"btn btn-info me-5"}> + </button>
        <button onClick={minus} className={"btn btn-info me-5"}> - </button>
        <button onClick={multiply} className={"btn btn-info me-5"}> * </button>
        <button onClick={division} className={"btn btn-info me-5"}> / </button>
        <button onClick={equal} className={"btn btn-success"}> = </button>
      </div>
      <div className={"text-center mt-4"}>
      <span>결과 = </span><input type="text" value={result}/>
      </div>
    </div>
  );
}

export default Calculator;

Event

리액트는 html 과 같은 이벤트를 가지고 있음 카멜명명법을 사용하므로 onclick="sum()" => onClick={sum} 으로 변경되어 사용

• 매개변수 전달 시 이벤트 부분에 화살표 콜백함수를 사용 onClick={() => sum(10)}
• 이벤트 사용 시 이벤트 핸들러도 매개변수로 전달이 가능함 onClick={(event) => sum(10, event)}

folder3/Events.jsx

//folder3/Events.jsx

import React from "react";

function Events() {

  // 기본 함수를 클릭이벤트와 연동
  const click1 = () => alert("일반 클릭 이벤트");

  // 매개변수가 있는 함수를 클릭이벤트와 연동
  const click2 = (item) => alert(`매개변수 값 : ${item}, \n매개변수가 있는 이벤트`);

  // 매개변수로 이벤트 핸들러(= 이벤트 객체)를 사용하는 함수를 클릭이벤트아 연동
  const click3 = (item, event) => {
    alert(`매개변수와 event 객체가 있는 클릭 이벤트
매개변수 값 : ${item}, 이벤트 객체 : ${event.type}`);
  }


  return (
    <div>
      <button type={"button"} className={"btn btn-primary"} onClick={click1}>일반 클릭 이벤트</button>
      <button type={"button"} className={"btn btn-success"} onClick={() => click2(100)}>매개변수가 있는 클릭 이벤트</button>
      <button type={"button"} className={"btn btn-info"} onClick={(event) => click3(200,event)}>event 객체가 있는 클릭 이벤트</button>
    </div>
  );
}

export default Events;

confirmButton

folder/ConfirmButon.jsx

// folder/ConfirmButon.jsx

import React, {useState} from "react";

function ConfirmButton(props) {
  const [isConfirmed, setIsConfirmed] = useState(false);
  const handleConfirm = () => {
    setIsConfirmed((prevConfirmed) => !isConfirmed);
    setTimeout(() => {
      setIsConfirmed(false);
    }, 1000)
  };

  return (
    <div>
     <button type={"button"} className={"btn btn-primary"} onClick={handleConfirm} disabled={isConfirmed}>
       {isConfirmed ? "확인 완료" : "확인 하기"}
     </button>
    </div>
  );
}

export default ConfirmButton;

• 클릭 전
• 클릭 후
• 1초 후

App5.jsx

// App5.jsx

import React from "react";
import NotificationList from "./folder3/NotificationList";
import CountButton from "./folder3/CountButton";
import CountButton2 from "./folder3/CountButton2";
import Accommodate from "./folder3/Accommodate";
import Calculator from "./folder3/Calculator";
import Events from "./folder3/Events";
import ConfirmButton from "./folder3/ConfirmButton";

function App5() {
  return (
    <div className={"container"}>
      <NotificationList/>
      <CountButton/>
      <CountButton2/>
      <Accommodate/>
      <Calculator/>
      <br/>
      <Events/>
      <br/>
      <ConfirmButton/>
    </div>
  );
}

export default App5;

2.7.0 버전 리액트 부트스트랩을 원래는 다운로드 받아서 써야 하는데 지금껏 사용해온 부트스트랩 방식과 너무 달라서 익히는데 시간이 걸림 -> 부트스트랩 홈페이지에 있는 코드 붙여넣으면 사용하던 방식과 유사하게 쓸 수 있음 https://getbootstrap.com/

• index.html

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <title>React App</title>

• App.js

  import logo from './logo.svg';
  import './App.css';
  

function App() { return (

<button type={"button"}>기본 버튼 <button type={"button"} className={"btn btn-primary"}>부트스트랩 적용 버튼

Edit src/App.js and save to reload.

Learn React

</div>

); }

export default App;

![](https://velog.velcdn.com/images/i_like_monday/post/107112f5-400c-4c4a-b105-77d854e2f501/image.png)

>리액트 부트스트랩을 사용하고 싶다면 터미널창에서 현재 프로젝트까지 경로 설정 후 명령어 쓰기(node.js 는 폴더를 기반으로 위치를 지정하기 때문)
`npm install react-bootstrap bootstrap`
![](https://velog.velcdn.com/images/i_like_monday/post/1e3e1e93-29d3-4639-8d43-0b0d3154637b/image.png)
App.js
```js
import Button from "react-bootstrap/Button";

위와 같이 필요한 기능만 import 해서 사용 (사용법은 리액트 공식문서(https://ko.reactjs.org/)에서 확인)

<button type={"button"}>기본 버튼</button>
<button type={"button"} className={"btn btn-primary"}>부트스트랩 적용 버튼</button>
<Button type={"button"} variant={"success"}>react용 부트스트랩 적용 버튼</Button>

---

문법

JSX

자바스크립트 + html/xml, 하나의 파일에 자바스크립트와 html 을 동시에 작성

컴포넌트

1. 함수형 컴포넌트 : 현재 많이 사용되는 방식, 사용이 간편함 (클래스형 컴포넌트의 기능을 100% 대체할 수 있음), 자바스크립트 함수를 작성하는 방식
2. 클래스형 컴포넌트 : 기존에 많이 사용되던 방식, React.Component 를 상속받아 구현함, 컴포넌트 구성요소, 리액트 생명주기를 모두 포함하고 있음

• 리액트를 구성하는 최소 UI 단위, 데이터(props)를 입력받아 view(state)상태에 따라 화면을 출력하는 함수
• 컴포넌트의 이름은 항상 대문자로 시작 (리액트는 소문자로 시작하는 컴포넌트를 html 태그로 인식함 -> html 태그는 <button>, 리액트 컴포넌트는 <Button>)
• UI 를 재사용 가능한 개별적인 여러 조각으로 나누어서 화면 구현

props

컴포넌트간의 데이터를 주고 받기 위한 JS 객체, properties 의 줄임말, 읽기 전용, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 시 주로 사용

state

현재 컴포넌트의 상태를 표시하는 객체, setState() 를 통해서 데이터를 수정, 데이터 수정 시 화면에 재렌더링됨

hooks

리액트 16.8버전에서 추가된 기능, 상태 변경 및 리액트 생명주기에 관련된 함수를 사용할 수 있게 해주는 기능, 리액트 hooks 를 사용하면 클래스 컴포넌트를 사용할 필요가 없음

컨텍스트

데이터 전달 객체, 컴포넌트 간의 데이터 전달 시 props 를 사용하면 순차적으로 데이터를 전달함, 컨텍스트는 위치에 상관없이 데이터를 바로 전달할 수 있음

전체 화면 내부에 메인화면이 있고 그 내부에 작은화면 A, B 로 나눠진다면 전체에서 B로 데이터를 바로 전달하는것이 불가능함

전체에서 메인으로 보내고, 메인에서 B로 보내야 함(순차적으로)

이것이 간단한 화면에서는 문제가 되지 않지만 화면이 복잡해지면 계속해서 함수를 만들어줘야함(사용하지 않는 화면(ex: main) 에서도)

이것을 쉽게 해주는것이 컨텍스트이다. 전체에서 컨텍스트로 -> 컨텍스트에서 바로 B로

react-router

각 페이지의 경로를 구성하는 라이브러리.

리액트는 싱글 페이지이기 때문에 화면이 하나밖에 없음. 내부 컨텐츠만 바뀌면서 움직일 뿐. (= 리액트 라우터) 클릭을 하면 다른 페이지가 열린것처럼 보이지만 사실은 내부에서 컨텐츠가 움직이고 사라지고 보이게 된 것

---

JSX 문법

1. 반드시 1개의 부모 요소가 다른 요소를 감싸는 형태로 구성해야 함(부모 요소가 하나이기만 하면 <div>가 아니라 <p> 태그도 부모요소가 될 수 있음

2. 자바스크립트 표현식 사용 가능

• 2-1. { } 안에 자바스크립트를 사용할 수 있음

  • App.js

    function App() {
    let num1 = 10;
    return (
    <div className="App">
     <button type={"button"}>기본 버튼</button>
     <button type={"button"} className={"btn btn-primary"}>부트스트랩 적용 버튼</button>
     <Button type={"button"} variant={"success"}>react용 부트스트랩 적용 버튼</Button>
    
     <p>{num1 + 10}</p>

  • 2-2 if 문은 표현식이 아니기 때문에 JSX 에서 사용할 수 없음 (대신에 삼항연산자를 사용해야 함) { } 표현식 내에서 자바스크립트의 if 문을 사용할 수 없으므로 외부에서 미리 계산

    • App.js

      function App() {
      let num1 = 10;
      const flag = false;
      let result;
      

  // {} 표현식 내에서 자바스크립트의 if 문을 사용할 수 없으므로 외부에서 미리 계산 if (flag) { result =

  결과가 true
  } else { result =
  결과가 false
  } return (
  기본 버튼 부트스트랩 적용 버튼 react용 부트스트랩 적용 버튼

  <p>{num1 + 10}</p>
  <br/><hr/>
  {/* if 쓰면 바로 에러남! 사용하고 싶으면 삼항연산자 사용하기*/}
  {/*{if (flag) {*/}
  {/*  */}
  {/*}}*/}
  {/* if 문 사용할 수 없어서 삼항연산자 사용함*/}
  <div>{flag === true ? 100 : 10}</div>
  <div>{result}</div>

  
  3. html 속성을 <u>카멜명명법</u>으로 사용
      `font-size` -> `fontSize` 로 사용함
      `class` -> `className` 으로 사용
  4. JSX 문법은 html 태그 사용 시, 반드시 시작 태그와 끝 태그를 모두 입력해야 함
       축약 형식으로 시작 태그 끝에 / 를 사용하는 방식도 상관없음

---

컴포넌트

클래스 컴포넌트

1. 모든 컴포넌트는 React 를 import 해서 사용함
2. 클래스 컴포넌트는 React.Component 상속받아 클래스를 생성
3. 클래스 컴포넌트를 export default 로 설정해줘야 외부에서 사용이 가능함

• ClassComponent.jsx

  import React from "react";
  

class ClassComponent extends React.Component {

}

export default ClassComponent;

4. 클래스 컴포넌트에는 render() 메소드가 존재함, render() 메소드에서 jsx 문법을 사용함
5. 클래스 컴포넌트는 리액트 생명주기 메소드를 사용할 수 있음
6. 생성자(constructor) 사용가능, 상태 표현을 위한  state 를 설정(없으면 안써도 됨)
- ClassComponent.jsx : 기본형
```jsx
import React from "react";

class ClassComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    return (
      <div></div>
    );
  }

  componentDidMount() {
  }
}

export default ClassComponent;

---

함수 컴포넌트 (훨씬 사용이 간단!)

1. 모든 컴포넌트는 React 를 import 해서 사용함
2. 함수 컴포넌트는 그냥 함수 생성
3. 함수 컴포넌트를 export default 로 설정해줘야 외부에서 사용이 가능함
4. 함수 컴포넌트에서는 return 에서 jsx 문법을 사용함

• FunctionComponent.jsx

  import React from "react";
  

function FunctionComponent(props) { return (

함수 컴포넌트 사용

); }

export default FunctionComponent;

5. state 변경 및 생명주기에 관련된 함수를 사용하기 위해서 hooks 를 사용함 
 `import {useState} from "react";` 
```js
import React, {useState} from "react";

---

App.js의 return (...) 내부에 코드 추가

<ClassComponent/>
<FunctionComponent/>

---

화면 그려보기 실습

App2.jsx 파일 생성

• App2.jsx 기본형 만들기

  // App2.jsx
  import React from "react";
  

function App2() { return (

</div>

); }

export default App2;

Index.js 의 `<App/>` 주석처리 후 `<App2/>` 추가
```js
// Index.js
root.render(
  <React.StrictMode>
    {/*<App />*/}
    <App2 />
  </React.StrictMode>
);

화면 열어보면 빈 화면, F12로 확인해보면 root 내부의 <div> 태그가 비어있는것 확인 가능

App2.jsx : 기본 페이지 만들기

// App2.jsx
// App2.jsx
import React from "react";

// object 타입
const styles = {
  fakeImg: {
    height: 200,
    backgroundColor: "#aaa",
  },
};

function App2() {
  return (
    <div>
      <div className={"p-5 bg-primary text-white text-center"}>
        <h1>컴포넌트 연습용 부트스트랩 기본 페이지 만들기 1</h1>
        <p>반응형 웹이 지원하는 페이지임</p>
      </div>

      <nav className={"navbar navbar-expand-sm bg-dark navbar-dark"}>
        <div className={"container-fluid"}>
          <ul className={"navbar-nav"}>
            <li className={"nav-item"}>
              <a className={"nav-link active"} href={"#"}>Active</a>
            </li>
            <li className={"nav-item"}>
              <a className={"nav-link"} href={"#"}>Link</a>
            </li>
            <li className={"nav-item"}>
              <a className={"nav-link"} href={"#"}>Link</a>
            </li>
            <li className={"nav-item"}>
              <a className={"nav-link disabled"} href={"#"}>Disabled</a>
            </li>
          </ul>
        </div>
      </nav>

      <div className={"container mt-5"}>
        <div className={"row"}>
          <div className={"col-sm-4"}>
            <h2>About Me</h2>
            <h5>Photo of me:</h5>
            <div style={styles.fakeImg}>Fake Image</div>
            <p>아무 노래나 일단 틀어~~</p>
            <ul className={"nav nav-pills flex-column"}>
              <li className={"nav-item"}>
                <a className={"nav-link active"} href="#">Active</a>
              </li>
              <li className={"nav-item"}>
                <a className="nav-link" href={"#"}>Link</a>
              </li>
              <li className={"nav-item"}>
                <a className="nav-link" href={"#"}>Link</a>
              </li>
              <li className={"nav-item"}>
                <a className="nav-link disabled" href={"#"}>Disabled</a>
              </li>
            </ul>
            <hr className={"d-sm-none"}/>
          </div>
          <div className={"col-sm-8"}>
            <h2>제목 부분</h2>
            <h5>부제목 부분, 2023-01-03</h5>
            <div style={styles.fakeImg}></div>
            <p>점심 먹고 싶다 배고프다</p>
            <p>리액트 수업 듣는 중... 오전 11:14</p>

            <h2>제목 부분</h2>
            <h5>부제목 부분, 2023-01-03</h5>
            <div style={styles.fakeImg}></div>
            <p>점심 먹고 싶다 배고프다222</p>
            <p>리액트 수업 듣는 중... 오전 11:15</p>
          </div>
        </div>
      </div>
      <div className={"mt-5 p-4 bg-dark text-white text-center"}>
        <p>Footer</p>
      </div>
    </div>
  );
}


export default App2;

---

• Contents.jsx 기본 코드

  // Contents.jsx
  import React from "react";
  

function Contents() { return (

</div>

); }

export default Contents;

---

### 화면 조각내기 - 1 

- App2.jsx
```jsx
// App2.jsx
import React from "react";
import Contents from "./Contents";
import Footer from "./Footer";
import Header from "./Header";
import Navigate from "./Navigate";
import LinkList from "./LinkList";
import Info from "./Info";

// object 타입
const styles = {
  fakeImg: {
    height: 200,
    backgroundColor: "#aaa",
  },
};

function App2() {
  return (
    <div>
      <Header/>
      {/* ------------------- Header.jsx 로 이동 ------------------------*/}
      {/*<div className={"p-5 bg-primary text-white text-center"}>*/}
      {/*  <h1>컴포넌트 연습용 부트스트랩 기본 페이지 만들기 1</h1>*/}
      {/*  <p>반응형 웹이 지원하는 페이지임</p>*/}
      {/*</div>*/}

      <Navigate/>
      {/*------------------- Navigate.jsx 로 이동 ------------------------*/}
      {/*<nav className={"navbar navbar-expand-sm bg-dark navbar-dark"}>*/}
      {/*  <div className={"container-fluid"}>*/}
      {/*    <ul className={"navbar-nav"}>*/}
      {/*      <li className={"nav-item"}>*/}
      {/*        <a className={"nav-link active"} href={"#"}>Active</a>*/}
      {/*      </li>*/}
      {/*      <li className={"nav-item"}>*/}
      {/*        <a className={"nav-link"} href={"#"}>Link</a>*/}
      {/*      </li>*/}
      {/*      <li className={"nav-item"}>*/}
      {/*        <a className={"nav-link"} href={"#"}>Link</a>*/}
      {/*      </li>*/}
      {/*      <li className={"nav-item"}>*/}
      {/*        <a className={"nav-link disabled"} href={"#"}>Disabled</a>*/}
      {/*      </li>*/}
      {/*    </ul>*/}
      {/*  </div>*/}
      {/*</nav>*/}

      <div className={"container mt-5"}>
        <div className={"row"}>
          <div className={"col-sm-4"}>
            <Info/>
            {/* ----------------------- Info.jsx 로 이동 -----------------------*/}
            {/*<h2>About Me</h2>*/}
            {/*<h5>Photo of me:</h5>*/}
            {/*<div style={styles.fakeImg}>Fake Image</div>*/}
            {/*<p>아무 노래나 일단 틀어~~</p>*/}

            <LinkList/>
            {/* ----------------------- LinkList.jsx 로 이동 -----------------------*/}
            {/*<ul className={"nav nav-pills flex-column"}>*/}
            {/*  <li className={"nav-item"}>*/}
            {/*    <a className={"nav-link active"} href="#">Active</a>*/}
            {/*  </li>*/}
            {/*  <li className={"nav-item"}>*/}
            {/*    <a className="nav-link" href={"#"}>Link</a>*/}
            {/*  </li>*/}
            {/*  <li className={"nav-item"}>*/}
            {/*    <a className="nav-link" href={"#"}>Link</a>*/}
            {/*  </li>*/}
            {/*  <li className={"nav-item"}>*/}
            {/*    <a className="nav-link disabled" href={"#"}>Disabled</a>*/}
            {/*  </li>*/}
            {/*</ul>*/}
            <hr className={"d-sm-none"}/>
          </div>
          <div className={"col-sm-8"}>
            <Contents/>
            {/*------------Contents.jsx 로 이동----------------*/}
            {/*<h2>제목 부분</h2>*/}
            {/*<h5>부제목 부분, 2023-01-03</h5>*/}
            {/*<div style={styles.fakeImg}></div>*/}
            {/*<p>점심 먹고 싶다 배고프다</p>*/}
            {/*<p>리액트 수업 듣는 중... 오전 11:14</p>*/}

            <Contents/>
            {/*------------Contents.jsx 로 이동----------------*/}
            {/*<h2>제목 부분</h2>*/}
            {/*<h5>부제목 부분, 2023-01-03</h5>*/}
            {/*<div style={styles.fakeImg}></div>*/}
            {/*<p>점심 먹고 싶다 배고프다</p>*/}
            {/*<p>리액트 수업 듣는 중... 오전 11:14</p>*/}
          </div>
        </div>
      </div>

      <Footer/>
      {/*------------Footer.jsx 로 이동----------------*/}
      {/*<div className={"mt-5 p-4 bg-dark text-white text-center"}>*/}
      {/*  <p>Footer</p>*/}
      {/*</div>*/}
    </div>
  );
}


export default App2;

• navigate.jsx

  // Navigate.jsx
  

import React from "react";

function Navigate() { return(

<nav className={"navbar navbar-expand-sm bg-dark navbar-dark"}> <div className={"container-fluid"}> <ul className={"navbar-nav"}> <li className={"nav-item"}> <a className={"nav-link active"} href={"#"}>Active <li className={"nav-item"}> <a className={"nav-link"} href={"#"}>Link <li className={"nav-item"}> <a className={"nav-link"} href={"#"}>Link <li className={"nav-item"}> <a className={"nav-link disabled"} href={"#"}>Disabled

); }

export default Navigate;

- Info.jsx
```js
// Info.jsx

import React from "react";

const styles = {
  fakeImg: {
    height: 200,
    backgroundColor: "#aaa",
  },
};

function Info() {
  return (
    <div>
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div style={styles.fakeImg}>Fake Image</div>
      <p>아무 노래나 일단 틀어~~</p>
    </div>
  );
}

export default Info;

• LinkList.jsx

  // LinkList.jsx
  import React from "react";
  

function LinkList() { return (

<ul className={"nav nav-pills flex-column"}> <li className={"nav-item"}> <a className={"nav-link active"} href="#">Active <li className={"nav-item"}> <a className="nav-link" href={"#"}>Link <li className={"nav-item"}> <a className="nav-link" href={"#"}>Link <li className={"nav-item"}> <a className="nav-link disabled" href={"#"}>Disabled

); }

export default LinkList;

- Contents.jsx
```jsx
// Contents.jsx
import React from "react";
// object 타입
const styles = {
  fakeImg: {
    height: 200,
    backgroundColor: "#aaa",
  },
};

function Contents() {
  return (
    <div>
      <h2>제목 부분</h2>
      <h5>부제목 부분, 2023-01-03</h5>
      <div style={styles.fakeImg}></div>
      <p>점심 먹고 싶다 배고프다</p>
      <p>리액트 수업 듣는 중... 오전 11:14</p>
    </div>
  );
}

export default Contents;

• Header.jsx

  // Header.jsx
  

import React from "react";

function Header() { return(

<div className={"p-5 bg-primary text-white text-center"}>

컴포넌트 연습용 부트스트랩 기본 페이지 만들기 1

반응형 웹이 지원하는 페이지임

); }

export default Header;

- Footer.jsx
```jsx
// Footer.jsx

import React from "react";

function Footer() {
  return(
      <div className={"mt-5 p-4 bg-dark text-white text-center"}>
        <p>Footer</p>
      </div>
  );
}

export default Footer;

---

props

자바스크립트 컴포넌트 간의 데이터 전달을 위해서 사용하는 자바스크립트 객체, 읽기 전용 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 시 사용 부모 컴포넌트에서 자식 컴포넌트를 호출하여 사용 시 속성을 사용하여 데이터를 전달 부모 컴포넌트에서 사용한 속성명이 자식 컴포넌트의 props 객체에 담겨서 전달이 됨 해당 속성명을 자식 컴포넌트에서 그대로 사용함

• App3.jsx

  import React from "react";
  import ProfileList from "./folder1/ProfileList";
  

function App3() { return(

); }

export default App3;

- folder1/Profile.js
```js
// folder1/Profile.jsx

import React from "react";

function Profile(props) {
  return (
    <div className={"border rounded-2 px-3 m-4"}>
      <div className={"my-3"}>
        <label for={"user-id"} className={"form-label"}>아이디 : </label>
        <input type={"text"} id={"user-id"} className={"form-control"} value={props.userId}/>
      </div>
      <div className={"my-3"}>
        <label for={"user-name"} className={"form-label"}>이름 : </label>
        <input type={"text"} id={"user-name"} className={"form-control"} value={props.userName}/>
      </div>
      <div className={"my-3"}>
        <label for={"user-tel"} className={"form-label"}>전화번호 : </label>
        <input type={"tel"} id={"user-tel"} className={"form-control"} value={props.userTel}/>
      </div>
      <div className={"my-3"}>
        <label for={"user-email"} className={"form-label"}>이메일 : </label>
        <input type={"email"} id={"user-email"} className={"form-control"} value={props.userEmail}/>
      </div>
    </div>
  );
}

export default Profile;

• folder2/ProfileList.jsx

  // folder1/ProfileList.jsx
  

import React from "react"; import Profile from "./Profile";

/* props : 자바스크립트 컴포넌트 간의 데이터 전달을 위해서 사용하는 자바스크립트 객체, 읽기 전용 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 시 사용 부모 컴포넌트에서 자식 컴포넌트를 호출하여 사용 시 속성을 사용하여 데이터를 전달 부모 컴포넌트에서 사용한 속성명이 자식 컴포넌트의 props 객체에 담겨서 전달이 됨 해당 속성명을 자식 컴포넌트에서 그대로 사용함 */

function ProfileList() { return ( <div className={"row"}> <div className={"col-sm-6 mx-auto"}> <Profile userId={"test1"} userName={"테스터1"} userTel={"01012345678"} userEmail={"test1@bitc.co.kr"}/>

export default ProfileList;

![](https://velog.velcdn.com/images/i_like_monday/post/deb4089f-0ae0-4d6f-adc3-ae74f22a783c/image.png)


값을 변경하고싶다면 자바스크립트 변수 생성해서 사용
```js
  let data = props;
  let userTel = props.userTel;
  let userEmail = props.userEmail;

• Profile.js

  // folder1/Profile.jsx
  

import React from "react";

// function Profile({userId, userName, userTel, userEmail}) {...} 로도 사용 가능(확장표현식) // 확장표현식 : 대입 연산자 오른쪽의 데이터를 연산자 왼쪽의 변수에 저장 시 () {} 에 표시된 이름에 대입 function Profile(props) { let data = props; let userTel = props.userTel; let userEmail = props.userEmail;

return ( <div className={"border rounded-2 px-3 m-4"}> <div className={"my-3"}> <label for={"user-id"} className={"form-label"}>아이디 : <input type={"text"} id={"user-id"} className={"form-control"} value={data.userId}/> <div className={"my-3"}> <label for={"user-name"} className={"form-label"}>이름 : <input type={"text"} id={"user-name"} className={"form-control"} value={data.userName}/> <div className={"my-3"}> <label for={"user-tel"} className={"form-label"}>전화번호 : <input type={"tel"} id={"user-tel"} className={"form-control"} value={userTel}/> <div className={"my-3"}> <label for={"user-email"} className={"form-label"}>이메일 : <input type={"email"} id={"user-email"} className={"form-control"} value={userEmail}/> ); }

export default Profile;

- ProfileList.jsx
```js
// folder1/ProfileList.jsx

import React from "react";
import Profile from "./Profile";

/*
props : 자바스크립트 컴포넌트 간의 데이터 전달을 위해서 사용하는 자바스크립트 객체, 읽기 전용
        부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 시 사용
        부모 컴포넌트에서 자식 컴포넌트를 호출하여 사용 시 속성을 사용하여 데이터를 전달
        부모 컴포넌트에서 사용한 속성명이 자식 컴포넌트의 props 객체에 담겨서 전달이 됨
        해당 속성명을 자식 컴포넌트에서 그대로 사용함
*/

function ProfileList() {
  return (
    <div className={"row"}>
      <div className={"col-sm-6 mx-auto"}>
        <Profile userId={"test1"} userName={"테스터1"} userTel={"01012345678"} userEmail={"test1@bitc.co.kr"}/>
        <Profile userId={"test2"} userName={"테스터2"} userTel={"01098765432"} userEmail={"test2@bitc.co.kr"}/>
      </div>
    </div>
  );
}

export default ProfileList;

props 이용해서 게시판 만들어보기

App3.jsx

import React from "react";
import ProfileList from "./folder1/ProfileList";
import BoardList from "./folder1/BoardList";

function App3() {
  return(
    <div>
      <ProfileList />
      <br/>
      <BoardList/>
    </div>
  );
}

export default App3;

BoardList.jsx

// folder/BoardList.jsx

import React from "react";
import BoardItem from "./BoardItem";

const boardItemList = [
  {boardIdx: 100}, {boardTitle: "게시판 100번 글 제목"}, {boardUserId: "test1"}, {boardCreateDate: "2023-01-03 12:40:40"},
  {boardIdx: 101}, {boardTitle: "게시판 101번 글 제목"}, {boardUserId: "test2"}, {boardCreateDate: "2023-01-03 12:41:40"},
  {boardIdx: 102}, {boardTitle: "게시판 102번 글 제목"}, {boardUserId: "test3"}, {boardCreateDate: "2023-01-03 12:42:40"},
]


function BoardList() {
  return (
    <div className={"container mx-auto"}>
      <table className={"table table-hover table-striped"}>
        <thead>
          <tr>
            <th>글 번호</th>
            <th>글 제목</th>
            <th>사용자</th>
            <th>등록 시간</th>
          </tr>
        </thead>
        <tbody>
          <BoardItem idx={"100"} title={"테스트 제목100"} userId={"test1"} createDt={"2023-01-03 12:50:00"}/>
          <BoardItem idx={"101"} title={"테스트 제목101"} userId={"test2"} createDt={"2023-01-04 12:50:00"}/>
          <BoardItem idx={"102"} title={"테스트 제목102"} userId={"test3"} createDt={"2023-01-05 12:50:00"}/>
        </tbody>
      </table>
    </div>
  );
}

export default BoardList;

BoardItem.jsx

// folder/BoardItem.jsx

import React from "react";

function BoardItem({idx, title, userId, createDt}) {
  return(
    <tr>
      <td>{idx}</td>
      <td>{title}</td>
      <td>{userId}</td>
      <td>{createDt}</td>
    </tr>
  );
}

export default BoardItem;

기본적인 것 완성

• BoardList.jsx

  // folder/BoardList.jsx
  

import React from "react"; import BoardItem from "./BoardItem";

const boardItemList = [ {boardIdx: 100, boardTitle: "게시판 100번 글 제목", boardUserId: "test1", boardCreateDate: "2023-01-03 12:40:40"}, {boardIdx: 101, boardTitle: "게시판 101번 글 제목", boardUserId: "test2", boardCreateDate: "2023-01-03 12:41:40"}, {boardIdx: 102, boardTitle: "게시판 102번 글 제목", boardUserId: "test3", boardCreateDate: "2023-01-03 12:42:40"}, ]

function BoardList() { // boardItemList.map((item) => { // return // }); return ( <div className={"container mx-auto"}> <table className={"table table-hover table-striped"}> 글 번호 글 제목 사용자 등록 시간 {/* ----------------------- 아래 코드 주석 -> 위 코드로 바꿔서 줄일 수 있음! ----------------------- /} {/<BoardItem idx={"100"} title={"테스트 제목100"} userId={"test1"} createDt={"2023-01-03 12:50:00"}/>/} {/<BoardItem idx={"101"} title={"테스트 제목101"} userId={"test2"} createDt={"2023-01-04 12:50:00"}/>/} {/<BoardItem idx={"102"} title={"테스트 제목102"} userId={"test3"} createDt={"2023-01-05 12:50:00"}/>*/}

      {boardItemList.map(
        (item) => {
          return <BoardItem idx={item.boardIdx} title={item.boardTitle} userId={item.boardUserId} createDt={item.boardCreateDate}/>
        })}
    </tbody>
  </table>
  <BoardItem/>
</div>

); }

export default BoardList;

---

### 사이트 따라 만들기
https://www.w3schools.com/w3css/tryw3css_templates_gourmet_catering.htm
https://www.w3schools.com/w3css/tryw3css_templates_gourmet_catering.htm

프로젝트 생성

java505_react_test2

리액트 공식 홈페이지(Docs) 문서 : https://ko.reactjs.org/docs/getting-started.html 자습서 : https://ko.reactjs.org/tutorial/tutorial.html

JSX : 클래스형/함수형 두가지가 있다. 현재는 대부분 함수형을 사용함! (쉽고 편하다)

Potato.jsx 파일 생성

import React from "react";

function Potato() {
  return (
    <h3>I LOVE POTATO</h3>
  );
}

export default Potato;

React에서의 가상돔 개념 https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

Key 에러메세지 해결

const foodList = [
  {
    id : 1,
    name: "명란구이",
    image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjAzMjlfMjY0%2FMDAxNjQ4NDg2ODg0ODU1.-FRGEeH6bSjWmCQFcNs4R1Q9LourkkzdhePYtuaFNtkg.oswpp9T0mq36Y4SzZoMdKK-jdeWvxUkJmku5F7EDjj8g.JPEG.shorty_%2FIMG_5551.jpg&type=a340",
  },
  {
    id : 2,
    name: "스지전골",
    image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjEwMjBfMjAy%2FMDAxNjY2MjYzNTA0MTU0._Kjn-tBFmMvbUWZPzD5ZhGXyIhAsFrytrYwIB1wMwkUg.pw7tmJ716ZKS6X6Tsmo-BsWRRMr11LnCv9fWjkbgc4og.JPEG.yeslhong%2FIMG_2835.jpg&type=sc960_832"
  },
  {
    id : 3,
    name: "햄버거",
    image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjEyMDRfMjg5%2FMDAxNjcwMTU1MzEwMTky.kp-QjbGuXA8-ypXo7SNodq01L0f_TqP6C1u9nt6wO7gg.aGwN6d1_SaeK21S6Vfy3obRDwH_NvpjBqqM7nsB5xsIg.JPEG.ssaounara%2F1670155306339.jpg&type=sc960_832"
  }
];

위와 같이 id값 추가해주고

function renderFood(dish) {
  return (
    <Food key={dish.id} name={dish.name} pic={dish.image} />
  );
}

key={dish.id}도 추가해주면 에러 메세지 사라짐

prop-type

터미널에서 다운로드

• App.js

  function Food({name, pic, rating}) {
  console.log(name);
  return (
    <div>
      <h3>I LOVE {name}</h3>
      <h4>점수 : {rating}</h4>
      <img src={pic} alt="..."/>
      <p>-----------------------------------------------------------------------------------------------------------</p>
    </div>
  );
  }

  raing의 타입을 검사 하기 -> import 먼저
• App.js

  import PropTypes from "prop-types";

export 바로 윗줄 (코드의 마지막쯤)

• App.js

  // 매개변수로 사용되는 데이터를 체크
  // 매개변수의 이름까지 체크할 수 있음
  // isRequired : 해당 부분이 반드시 필요하다는 의미, 없으면 오류 발생
  Food.propTypes = {
  name: PropTypes.string.isRequired, // 값 안들어오면 오류체크 하라는 뜻
  pic: PropTypes.string.isRequired,
  rating: PropTypes.string.isRequired
  }

데이터형이 잘못들어갔을때 이렇게 오류 확인이 가능함

코드 수정 rating: PropTypes.string.isRequired → rating: PropTypes.number.isRequired

• App.js

  // 매개변수로 사용되는 데이터를 체크
  // 매개변수의 이름까지 체크할 수 있음
  // isRequired : 해당 부분이 반드시 필요하다는 의미, 없으면 오류 발생
  Food.propTypes = {
  name: PropTypes.string.isRequired, // 값 안들어오면 오류체크 하라는 뜻
  pic: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired
  }

• App2.jsx

  // App2.jsx
  import React from "react";
  

// 클래스 타입의 컴포넌트(잘 사용 안하지만 개념은 이해하자) class App2 extends React.Component { render() { return(

export default App2;

- index.jsx import
```jsx
import App2 from './App2';

• index.jsx 코드 추가

  root.render(
  <React.StrictMode>
    {/* 시작 태그와 끝 태그는 jsx 문법에서 무조건 !!! 있어야 한다.*/}
    {/* <App />  ==  <App></App> */}
    {/* jsx 문법에서 화면을 렌더링 하기 위한 태그의 이름은 반드시 첫글자가 대문자이어야 함 */}
    {/* 대문자를 사용하는 이유는 일반적으로 html 태그를 모두 소문자로 사용하기 때문에
        일반 html 태그인지 jsx 문법으로 생성된 태그인지를 구분하기 위함*/}
    <App />
    <br/><hr/><br/>
    <App2/>    <---!!!!!!!!!
  </React.StrictMode>
  );

  

클래스 컴포넌트

• App2.jsx

  // App2.jsx
  import React from "react";
  

// 클래스 타입의 컴포넌트(잘 사용 안하지만 개념은 이해하자) // 클래스 컴포넌트는 React.Component 를 상속받아 사용함 class App2 extends React.Component { // state : 현재 컴포넌트에서 사용하는 상태 값 // props 는 부모 컴포넌트에서 전달되는 값이지만 state 는 현재 컴포넌트에서만 사용되는 값으로, 수정 가능함(읽기전용 X) // state 의 값이 변경되면 리액트는 화면을 다시 렌더링 함. // state의 값을 직접적으로 변경하는 것은 불가능, setState() 함수를 사용하여 값을 수정 state = { count: 0, }

plus = () => { this.setState({count: this.state.count + 1}); console.log('plus'); }

minus = () => { console.log('minus'); this.setState({count: this.state.count - 1}); }

// render() : 클래스 컴포넌트에서 화면을 렌더링하기 위한 메소드 // render 은 함수 컴포넌트와 사용 방법이 동일함 render() { return(

export default App2;

- ![](https://velog.velcdn.com/images/i_like_monday/post/230a036e-565b-4bb7-870d-2ded7faf4ec4/image.png)

---

## 리액트의 생명주기
참고 : https://velog.io/@zezeg2/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%81%B4%EB%9E%98%EC%8A%A4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0

#### constructor( ) 함수

#### componentDidMount( ) 함수

#### componentDidUpdate( ) 함수

#### componentWillUnmount( ) 함수


### ComponentDidMount( ) 예제
- App2.jsx 코드 추가
```jsx
constructor(props) {
    super(props);
    console.log("생성자 실행");
  }

  componentDidMount() {
    console.log("컴포넌트 생성 완료");
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("컴포넌트 업데이트 완료")
  }

  componentWillUnmount() {
    console.log("컴포넌트 제거 완료")
  }

위코드만 써놓고 실행하면

경로 및 파일 생성

• Notification.jsx

  // Notification.jsx
  import React from "react";
  

const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid gray', borderRadius: 16 },

messageText: { color: 'black', fontSize: 16 }, }

class Notification extends React.Component {

constructor(props) { super(props);

this.state = {};

}

render() { return (

export default Notification;

- NotificationList.jsx (기본형)
```jsx
// NotificationList.jsx

import React from "react";
import Notification from "./Notification";

const reservedNotifications = [
  {message: '안녕하세요, 오늘 일정 알려드립니다.'},
  {message: '오후 수업 시간입니다.'},
  {message: '이제 곧 쉬는 시간입니다.'}
];

var timer;

class NotificationList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      notifications: [],
    };
  }

  render() {
    return (
      <div>

      </div>
    );
  }

  componentDidMount() {

  }
}

export default NotificationList;

• NotificationList.jsx (수정)

  // NotificationList.jsx
  

import React from "react"; import Notification from "./Notification"; import {func} from "prop-types"; import notification from "./Notification";

const reservedNotifications = [ {message: '안녕하세요, 오늘 일정 알려드립니다.'}, {message: '오후 수업 시간입니다.'}, {message: '이제 곧 쉬는 시간입니다.'} ];

var timer;

class NotificationList extends React.Component { constructor(props) { super(props);

this.state = {
  notifications: [],
};

}

render() { return (

componentDidMount() { const {notifications} = this.state;

timer = setInterval(() => {
  if (notifications.length < reservedNotifications.length) {
    const index = notifications.length;
    notifications.push(reservedNotifications[index]);

    this.setState({
      notifications: notifications,
      });
  }
  else {
    clearInterval(timer);
  }
}, 2000);

} }

export default NotificationList;

index.js 로 가서 바로 사용
- index.js
```js
root.render(
  <React.StrictMode>
    <App2/>
    <NotificationList/>    <----!!!!!!!!!
    <br/><hr/><br/>
    <App />

  </React.StrictMode>
);

// NotificationList.jsx

import React from "react";
import Notification from "./Notification";
import notification from "./Notification";

// 댓글 데이터 생성
const reservedNotifications = [
  {id: 1, message: '안녕하세요, 오늘 일정 알려드립니다.'},
  {id: 2, message: '오후 수업 시간입니다.'},
  {id: 3, message: '이제 곧 쉬는 시간입니다.'}
];

// 자바스크립트 타이머 객체 정보를 저장하는 변수 : 2가지(setTimer, setInterval)
// setTimeout : 1회용 타이머, 지정된 시간 이후에 1번 동작, 실행 시 타이머 정보를 반환, 타이머 삭제 시 clearTimeout() 을 사용
// setInterval : 지정된 시간마다 동작하는 타이머, 실행 시 타이머 정보를 반환, 타이머 삭제시 clearInterval() 을 사용
let timer;

class NotificationList extends React.Component {
  constructor(props) {
    super(props);

    // 현재 컴포넌트의 상태인 notifications 선언( == notifications 이 빈 배열 타입의 멤버변수가 됨)
    this.state = {
      // 빈 배열 타입인 state 가 생성됨
      notifications: [],
    };
  }

  // 화면에 처음 그려질 내용
  render() {
    return (
      <div>
        {
          // state 의 notifications 배열을 가지고 화면을 그려줌
          // notifications 배열의 기본값이 비었기 때문에 화면에 아무것도 그리지 않음(F5 누르면 아무것도 없다가 나중에 생기는 이유임)
          this.state.notifications.map((item) => {
            return <Notification key={item.id} message={item.message} />;
          })
        }
      </div>
    );
  }

  // render() 함수 실행 후 동작
  componentDidMount() {
    // object 타입의 '확장 표현식'을 통해서 변수 notifications 에 state 가 가지고 있는 notifications 의 데이터를 대입함
    // 확장표현식 : const/let [변수명1, 2, 3, ...] = [원본_배열] → 변수1, 변수2, 변수3, ... 생성
    // object형 확장표현식 : const/let {키이름과같은변수명_1, _2, _3, ...} = {object 타입} → 키 이름과 동일한 변수명에 값이 대입이 됨
    // 여기서 state 자체가 { } 로 감싸져있기때문에 object 타입이고, notifications 가 키이름임.
    const {notifications} = this.state; // == const notifications = this.state.notifications;
    // state 의 notifications 의 데이터가 비어있음 -------> length : 0

    // 타이머를 사용하여 지정된 시간마다 동작하도록 설정함
    timer = setInterval(() => {
      if (notifications.length < reservedNotifications.length) {  // 0 < 3
        const index = notifications.length;
        // 배열 notifications 에 데이터 추가
        notifications.push(reservedNotifications[index]);

        // state 의 상태 수정
        this.setState({
          // this.state 에 있는 notifications 에 현재 componentDidMount 안에 있는 지역변수 notifications 의 데이터를 저장
          notifications: notifications, // 키(←state 의 notifications) : 실제데이터(←componentDidMount() 안의 배열 notifications[...])
          });
      }
      else {
        clearInterval(timer);
      }
    }, 2000);
  }
}

export default NotificationList;

ES6 문법

확장 표현식

ES6 버전에서 추가된 object 타입의 사용 방식

ES5 버전

• Destructuring.js

  // Destructuring.js
  

console.log('----- ES5 -----'); var x = 0; var y = 0; var obj = {x: x, y: y}; console.log(obj);

var randomKeyString = 'other'; var combined = {};

combined['one' + randomKeyString] = 'some value'; console.log(combined);

- ![](https://velog.velcdn.com/images/i_like_monday/post/e2545178-60d4-411b-8c0b-b2840cd335f4/image.png)

#### ES6 버전
- Destructuring.js
```js
console.log('\n----- ES6 -----');
var x = x;
var y = y;
// object 생성 시 키값을 설정하지 않으면 변수명이 키값으로 설정됨
var obj = {x, y}; // ES5) x --> 키이름, 변수명
console.log(obj);

// object 타입 생성 시 대입 연산자 오른쪽에서 바로 키와 값을 설정하여 object 타입에 데이터를 추가하는 것이 가능
var randomKeyString = 'other';
var combined = {['one' + randomKeyString]: 'some value'};
console.log(combined);

ES5 버전

• Destructuring.js

  console.log('\n----- ES5 -----');
  var obj2 = {
  methodA: function () { console.log('A');},
  methodB: function () { return 0;}
  };
  console.log(obj2);
  obj2.methodA();
  obj2.methodB();

• 

ES6 버전

데이터 집어넣을때 익명함수 안써도 되고 멤버 메서드 쓰듯 바로 쓰면 됨

• Destructuring.js

  console.log('\n----- ES6 -----');
  

var obj2 = { methodA() { console.log('A');}, methodB() { return 0;} }

- ![](https://velog.velcdn.com/images/i_like_monday/post/7c2dd8ed-923f-4746-828e-66cdf9713557/image.png)

---

### 구조분해할당
#### ES5
- Destructuring.js
```js
console.log('\n----- 구조분해할당 -----');

console.log('\n----- ES5 -----');
var list = [0, 1];
var item1 = list[0];
var item2 = list[1];
var item3 = list[2] || -1;
console.log(item1); // 0
console.log(item2); // 1
console.log(item3); // -1

// 데이터 스왑시 임시변수(tmp) 필요
var temp = item2;
item2 = item1;
item1 = temp;
console.log(item1); // 1
console.log(item2); // 0

var obj = {
  key1: 'one',
  key2: 'two'
};

var key1 = obj.key1;
var key2 = obj.key2;
var key3 = obj.key3 || 'default key3 value';
var newKey1 = key1;
console.log(key1);  // one
console.log(key2);  // two
console.log(key3);  // default key3 value
console.log(newKey1); // one

ES6

• Destructuring.js

  var list = [0, 1];
  // 대입 연산자 왼쪽에 [] 를 사용하여 그 안에 배열을 쓰듯이 변수명을 입력하면
  // 대입연산자 오른쪽의 데이터를 하나씩 꺼내어 내입 연산자 왼쪽의 변수명에 각각 저장됨
  var [item1, item2, item3 = 1] = list; // = var [item1, item2, item3 = 1] = [0, 1]
  console.log(item1); // 0
  console.log(item2); // 1
  console.log(item3); // 1
  

// 확장 표현식을 사용하여 임시 변수 없이 2개의 변ㅅ누의 값을 서로 변경함 [item2, item1] = [item1, item2]; console.log(item1); // 1 console.log(item2); // 0

// 배열의 확장 표현식과 동일하게 object 타입에서도 사용이 가능함 // 대입 연산자 왼쪽에 {} 을 사용하고 변수명을 입력하면, 대입 연산자 오른쪽의 object 타입의 키와 같은 변수명에 데이터를 저장함 // 키 이름 생략 시, 변수명을 키 이름으로 사용하는 법칙 때문임 // : <- 기호를 사용 시 새로운 변수명으로 적용 // = <- 기호를 사용 시 기본값으로 설정 var {key1: newKey1, key2, key3 = 'default key3 value'} = obj; // obj = { key1: 'one', key2: 'two'} console.log(newKey1); // one console.log(key2); // two console.log(key3); // default key3 value

var [item, ...otherItems] = [0, 1, 2]; console.log(item); // 0 console.log(otherItems); // [1, 2]

var {key1, ...others} = {key1: 'one', key2: 'two'}; console.log(key1); // one console.log(others); // {key2: 'two'}

- ![](https://velog.velcdn.com/images/i_like_monday/post/75f668f1-23c7-4c6d-8151-e7d77624a5d2/image.png)

---

## 클래스
자바의 클래스보다는 간소화 된 방식이지만 ES6 부터는 자바스크립트에서도 Class 키워드를 지원함
`constructor(매개변수)` : 자바스크립트 클래스의 생성자, 자바스크립트의 생성자는 이름을 지정할 수 없음
`extends`: 자바스크립트의 클래스도 상속을 지원함
- Class.js
```js
// Class.js

// 클래스 선언
class Shape {

  // 정적 멤버, 클래스명.정적멤버명 으로 사용
  static create(x, y) {
    return new Shape(x, y);
  }

  // 멤버변수 선언 - let, const 등 안붙여도 되는 이유 : 여기서 name 은 '키' 이다!
  name = 'Shape';

  // 생성자, 이름은 constructor 로 고정임
  // 생성자에서 this.변수명 을 입력 시, 멤버 변수가 선언됨
  constructor(x, y) { // 데이터타입은 안써도 자동으로 인식함(자바스크립트의 장점)
    this.move(x, y);  // this : 객체 자기 자신을 의미함
  }

  move(x, y) {  // 키 이름 안써도 됨 사실은 move(x: x, y: y)
    this.x = x;
    this.y = y;
  }

  area() {
    return 0;
  }
}

var s = new Shape(10, 20);
s.area();
s.move(100, 200);
console.log(s.name);
console.log(s.x);
console.log(s.y);

var s1 = Shape.create(0, 0);
s1.area();
s1.move(10, 20);
console.log(s1.name);
console.log(s1.x);
console.log(s1.y);

// 상속(extends)
class Circle extends Shape {

  constructor(x, y, radius) {
    // 부모
    super(x, y);
    // 멤버변수 생성
    this.radius = radius;
  }

  area() {
    if (this.radius === 0) {
      return super.area();
    }
    return this.radius * this.radius;  // 10 * 10
  }
}

var c = new Circle(0, 0, 10);
console.log(c.area());  // 100

배열 함수

• ES6에서 배열 관련 함수가 추가됨(forEach(), map())

• forEach() 와 map() 은 반환값이 있냐 없냐의 차이만 있다.

• forEach() : 지정한 배열의 요소에 callBack으로 지정한 함수의 내용을 실햄하는 함수, 반환값이 없음

  • 사용법 :

    배열명.forEach(콜백함수(현재값이 저장될 변수, 현재 index, 현재 배열 내용) {
    실행할 소스코드
    })

• map() : forEach 와 같이 지정한 배열의 요소에 callBack으로 지정한 함수의 내용을 실행하고 그 결과값을 배열로 반환하는 함수

  • 사용법 :

    배열명.map(콜백함수(현재값이 저장될 변수, 현재 index, 현재 배열 내용) {
      실행할 소스코드
      return 반환값
    })

    forEach( )

• ArrayMethod.js

  const fruits = ['사과', '배', '복숭아'];
  console.log('원본 배열 : ' + fruits); // 사과,배,복숭아
  

// 기존 방식 console.log('\n----- for문 사용 시 -----'); for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); // 사과 // 배 // 복숭아 }

console.log('\n----- for ~ in 문 사용 시 -----'); for (const item in fruits) { // 값이 아니라 key 를 넣기때문에 item을 넣어줘야함 console.log(fruits[item]) // 사과 // 배 // 복숭아 }

// forEach() 사용 방식 console.log('\n----- forEach 문 사용 시 -----'); fruits.forEach(function (item) { console.log(item); // 사과 // 배 // 복숭아 })

console.log('\n----- forEach 문 매개변수 여러개 -----'); fruits.forEach(function (item, index){ console.log(index : ${index}, value: ${item}); // index : 0, value: 사과 // index : 1, value: 배 // index : 2, value: 복숭아 })

// 현재 배열 내용 값 넣기 예시 fruits.forEach(function (item, index, arrName) { console.log(current array : ${arrName}, index : ${index}, value : ${item}); // current array : 사과,배,복숭아, index : 0, value : 사과 // current array : 사과,배,복숭아, index : 1, value : 배 // current array : 사과,배,복숭아, index : 2, value : 복숭아 });

- ![](https://velog.velcdn.com/images/i_like_monday/post/6d819f52-5203-4628-9c7b-e19374367f4a/image.png)


### map( )
```js
console.log('\n----- map 사용 -----\n');
const numbers = [4, 9, 16, 25];
console.log(`원본 배열 : `);
console.log(numbers); // [ 4, 9, 16, 25 ]

let data = numbers.map(function (item) {
  console.log(`현재 값 : ${item}`);  // 4 9 16 25
  return item * 2;
});

console.log(`map 사용 후 데이터 :`);
console.log(data);  //[ 8, 18, 32, 50 ]


console.log('\n----- map() 에서 매개변수 여러개 -----\n');

data = numbers.map(function (item, index) {
  console.log(`index : ${index}, value : ${item}`);
  // index : 0, value : 4
  // index : 1, value : 9
  // index : 2, value : 16
  // index : 3, value : 25

  return item * 2;
});
console.log('map 사용 후 데이터 : ');
console.log(data);  // [ 8, 18, 32, 50 ]

data = numbers.map(function (item, index, current) {
  console.log(`current array : ${current}, index : ${index}, value : ${item}`);
  // current array : 4,9,16,25, index : 0, value : 4
  // current array : 4,9,16,25, index : 1, value : 9
  // current array : 4,9,16,25, index : 2, value : 16
  // current array : 4,9,16,25, index : 3, value : 25

  return item * 2;
});
console.log('map 사용 후 데이터 : ');
console.log(data);  // [ 8, 18, 32, 50 ]

화살표 함수

• 화살표 함수 : ES6 버전부터 사용되는 함수를 선언하는 새로운 방식 ES5 버전의 익명함수를 사용하여 함수를 생성하는 방식에서 변경되어 function 키워드를 생략_하고, 매개변수와 코드블럭 사이에 => 기호를 사용하는 방식 소스코드가 반환값 **_한 줄** 일 경우 코드블럭을 생략할 수 있음 매개변수가 1개 인 경우, 매개변수의 괄호를 생략할 수 있음

• 사용법 1 :

  변수명 = (매개변수1, 매개변수2, ...) => {
   실행할 소스코드
   return 반환값
  }

• 사용법 2 : 리턴 키워드, 중괄호 생략

  변수명 = (매개변수1, 매개변수2, ...) => 반환값;

• 사용법 3 : 매개변수가 1개일때 소괄호까지 생략

  변수명 = 매개변수 => 반환값;

• 사용법 4 : 매개변수가 없을때 () 로 대체함

  변수명 = () => 반환값;

• ArrowFunction.js

  // 기존 함수 선언 방식 1
  function es5Func1(a, b) {
  console.log(a + b);
  return a + b;
  }
  

// 기존 함수 선언 방식 2 var es5Func2 = function (a, b) { console.log(a + b); return a + b; }

es5Func1(10, 20); // 30 es5Func2(100, 200); // 300 let data = es5Func1(10, 20) // 30 console.log(data); // 30 data = es5Func2(100, 200); // 300 console.log(data); // 300

console.log('\n----- es6 방식 -----') // 화살표 함수 선언 const es6Func1 = (a, b) => { console.log(a + b); return a + b; }

data = es6Func1(10, 20); // 30 console.log(리턴 받은 값 : ${data}); // 30

// 생략 방법 1 // 생략 전 const es6Func22 = (a, b) => { return a + b } // --> 생략 후 const es6Func2 = (a, b) => a + b; data = es6Func2(100, 200); console.log(리턴 받은 값 : ${data}); // 300

const es6Func3 = (a, b) => console.log(a + b); es6Func3(10, 20);

// 매개변수가 1개일때 : 소괄호도 생략가능 const es6Func4 = (a) => a * 2; data = es6Func4(10); console.log(리턴 받은 값 : ${data});

const es6Func5 = a => a * 2; data = es6Func5(10); console.log(리턴 받은 값 : ${data});

// 매개변수가 없을때 : = => 와 같이 아예 생략은 안되고 = () => 와 같이 사용 const es6Func6 = () => console.log('esFunc5() 실행'); es6Func6();

---

## 모듈(export, import)

- 하나의 자바스크립트 파일에서 다른 자바스크립트의 내용을 사용하기 위한 방식.
자바스크립트는 원래 html 을 지원하기 위해서 개발된 언어였기 때문에 html 문서 내에서 `<script></script>` 또는 `<script src='파일경로'> </script>` 형태로 다른 자바스크립트의 내용을 사용했음.

- 자바스크립트가 발전하면서 자바스크립트를 단순히 웹에서만 사용하는 것이 아니게 되어,
외부 자바스크립트 내용을 사용하기 위한 방법이 여러가지로 개발됨.

- ES6 버전부터 export, import 를 지원함.
자바스크립트 파일 하나하나를 모듈이라고 함.
하나의 모듈에는 하나의 export default 가 존재함.


- html 문서 내에서 import 를 사용하고자 할 경우 `<script type="module">`  을 사용하여 해당 파일이 모듈을 사용한다는 것을 알려줘야 함
 ```js
<script type="module" src="파일경로><script>

• node.js 가 ES6 버전이 나오기 이전부터 모듈화 시스템을 사용하고 있었음. node.js 가 기본적으로 사용하던 방식이 CommonJS 방식의 모듈 시스템을 사용하고 있었음 ES6 가 발표되면서 [ import/export ] 를 지원하게 됨. 기본 방식은 CommonJS 으로 사용되고 ES6 방식으로 사용하려면 확장자를 .mjs 로 변경하여 사용하던지, package.json 파일에 type: "module" 을 추가하여 설정을 해야 함.

• export : 변수, 함수, 클래스를 다른 자바스크립트 파일에서 사용할 수 있도록 설정 사용법 :

  export 함수명;  // <-- 함수명이라고 썼지만 변수/함수 모두 사용 가능
  export {함수명1, 함수명2, ...};
  export default 함수명;

• import : 다른 자바스크립트 파일이 제공하는 변수, 함수, 클래스를 불러와서 사용하도록 설정 사용법 : ↓↓ 일반 export 로 지정된 것을 불러올 때 ↓↓

  import {함수명1, 함수명2, ...} from 파일경로; // <-- 함수명이라고 썼지만 변수/함수 모두 사용 가능

  ↓↓ export default 로 지정된 것을 불러올 때 ↓↓

  import 함수명 from 파일경로;

• export, import 하는 파일 모두 확장자명을 .js가 아니라 .mjs로 수정해야 한다.

• 

• 터미널에서 실행할때도 파일명 끝에 .mjs 붙여줘야 정상적으로 실행이 됨

• 파일생성(설정방법 2가지) : MyMod1.mjs, MyMod2.mjs 파일생성(사용) : ModuleUse.mjs 방법1(MyMod1) : 외부로 출력하고자 하는 변수 및 함수, 클래스에 export 를 접두사로 붙임 방법2(MyMod2) : _*변수, 함수, 클래스를 기존에 사용하듯이 다 선언하고, 파일의 끝에서 export 를 *_진행 방법2를 보편적으로 사용함

• MyMod1.mjs

  // MyMod1.mjs
  

// export 로 설정 방법은 두 가지. // export 로 설정하는 방법 1 // 외부로 출력하고자 하는 변수 및 함수, 클래스에 export 를 접두사로 붙임

export const name = '아이유'; export const gender = '여성'; export const job = '가수';

export const getInfo = () => console.log(이름 : ${name}, 성별 : ${gender}, 직업 : ${job});

- MyMode2.mjs
```js
// MyMod2.mjs

// export 로 설정하는 방법 2
// 변수, 함수, 클래스를 기존에 사용하듯이 다 선언하고, 파일의 끝에서 export 를 진행

const num1 = 10;
const num2 = 20;

const sum = () => num1 + num2;

const sub = () => num1 - num2;

export {num1, num2, sum};
export default sub;

• ModuleUse.js

  // ModuleUse.mjs
  

import {name, job, gender, getInfo} from "./MyMod1.mjs"; import {num1, num2, sum} from "./MyMod2.mjs"; import sub from "./MyMod2.mjs";

console.log(name); // 아이유 console.log(gender); // 여성 console.log(job); // 가수 getInfo(); // 이름 : 아이유, 성별 : 여성, 직업 : 가수

console.log(첫번째 숫자 : ${num1} + 두번째 숫자 : ${num2}의 값 : ${sum()}); // 첫번째 숫자 : 10 + 두번째 숫자 : 20의 값 : 30 console.log(sub() 실행 : ${sub()}); // -10

- ![](https://velog.velcdn.com/images/i_like_monday/post/72efb0d7-ed3b-4d2b-8669-783a9bb8186c/image.png)



---

## Promise (비동기 처리)
- Promise : 자바스크립트에서 <u>비동기 함수의 동기 처리</u>를 하기 위해서 사용하는 객체
자바스크립트는 기본적으로 `1 쓰레드` `비동기 처리` 방식을 사용하고 있음 (특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.)
자바스크립트에서 순차적으로 실행을 하고 싶을 경우 `콜백 함수`를 이용하여야 함
순차적으로 실행할 것이 많아지게 되면 `콜백지옥`이라고 불리는 형태가 만들어지게 됨
<u>프로미스는 이러한 콜백 지옥을 해결하기 위해서 사용하는 객체</u>임

- promise 에는 `pending`, `fulfilled`, `rejected` 3가지 <u>**상태**</u>가 존재함
   - < 상태정보는 실제로 쓰는것은 아니고 상태정보일 뿐임 >
`pending` : <u>대기 상태</u>, 비동기 함수가 실행되고, 아직 처리가 완료되지 않은 상태
`fulfilled` : <u>완료 상태</u>, 비동기 함수가 실행된 후 정상적으로 처리가 완료된 상태
`rejected` : <u>거부 상태</u>, 비동기 함수가 실행된 후 오류가 발생한 상태

- promise 에는 실행 시 콜백함수가 실행되고, 해당 콜백함수의 매개변수로 `resolve()`, `reject()` 이라는 함수를 제공함
   - `resolve(매개변수)` : 프로미스 실행 후 fulfilled 상태일 경우 실행하는 함수로 나중에 `then()` 함수를 제공함
   - `reject(매개변수)` : 프로미스 실행 후 rejected 상태일 경우 실행하는 함수로 나중에 `catch()` 함수를 제공함

- 프로미스에는 완료 및 오류처리를 위해서 `then()`, `catch()` 함수를 제공하고 있음
`then(매개변수)` : 비동기 함수 실행이 <u>완료</u>된 후 실행되는 함수
`catch(매개변수)` : 비동기 함수 실행이 <u>거부</u>된 후 실행되는 함수

- 사용법
   - 선언 :
 ```js
function 프로미스를 사용할 함수명(매개변수) {
   return new Promise(function(resolve, reject) {
       비동기 통신 소스...
       비동기 통신 결과에 따라 resolve(), reject();
   });
}

• 실행 :

  프로미스를 사용한 함수명()
  .then(function(매개변수) {
    성공 시 실행할 내용
  })
  .catch(function(매개변수) {
    실패 시 실행할 내용
  });

자바스크립트의 이벤트 처리 방식 참고 : https://manbalboy.github.io/front/javascript01.html
V8에서 한줄씩 실행을 하다가 이벤트를 만나면 이벤트Queue에 넘기고 V8은 다시 실행해야되는 코드로 돌아가서 그 다음 줄 부터 하나씩 실행함
이벤트 Queue 에서는 먼저 들어온것부터 Event Loop 돌림 워크 쓰레드에서 실행 후 결과를 이벤트 큐로 다시 보냄 -> 이벤트 큐가 다시 실행 -> 끝나면 이벤트 처리가 완전히 끝냈을때 실행하는 부분에 알려줌 (= 콜백) ajax에서의 success: function() <- function 이 콜백함수임 이것이 비동기 처리임
단점은 콜백지옥이 생김 https://velog.io/@seul06/JavaScript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5
이것을 해결하고자 만들어진 것이 promise 이다.

• 프로미스 사용 전 준비 jquery 추가 : 터미널에 npm install jquery 입력

App.js

import './App.css';
import {getData, getData1} from "./es6/Promise";

function App() {
  getData();

  return (
    <div className="App">

    </div>
  );
}

export default App;

• Promise.js

  // import
  import React from "react";
  import $ from 'jquery';
  

// 프로미스 객체를 사용할 함수 function getData() { // 콜백함수 resolve, reject return new Promise(function (resolve, reject) { const data = 100; // resolve 를 실행하게되면 .then ~ 부분이 실행이 되고, reject 를 실행하게 되면 .catch ~ 부분이 실행이 됨 resolve(data); // reject(data); }); }

getData() .then(function (data) { console.log(프로미스 사용 반환값 : ${data}); }) .catch(function (err) { console.log(프로미스 사용 오류 시 출력 : ${err}) });

const getData1 = function () { return new Promise(function (resolve, reject) { $.ajax({ url: 'http://localhost:8080/async/data1', type: 'post', success: function (data) { console.log('통신 성공'); resolve(data); }, error: function () { reject('오류 발생!'); } }); }); };

// export 선언 export {getData, getData1};

- App.js에 코드 추가
```js
  getData1()
    .then(function (data) {
      console.log(data);
    })
    .catch(function (err) {
      console.log(err);
    });

• ajax를 실행하기 위한 서버 생성

• port 번호가 서로 다를때 생기는 오류 서버 또는 리액트 에서 옵션을 하나 더 넣어야 함 @CrossOrigin(origins = "http://localhost:3000") 어노테이션 추가

  @CrossOrigin(origins = "http://localhost:3000")
  @ResponseBody
  @RequestMapping(value = "/async/data1", method = RequestMethod.POST)
  public String asyncData1() {
    return "서버와 통신 성공";
  }

자바스크립트 비동기 처리와 콜백 함수 쉽게 이해하기 https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 Promise 쉽게 이해하기 https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

• 리액트 개발툴 설치 필수 크롬 웹스토어 - 확장프로그램 : React Developer Tools 설치 실행화면

1. node.js가 필요하다. (yarn 이라는 것도 있으나 요즘은 node.js를 많이 쓰는 추세)

   • 1-1. NVM 설치 (NVM : node.js 버전 매니저 - 워낙 node.js 업데이트가 빨라서...)
   • 1-2. node.js 최신버전(정확하게는 LTS버전) 설치

2. React 프로젝트 생성

   • 2-1. create - react - app 툴 사용(node.js를 설치하면 자동으로 설치되는 툴)

3. JS ES6 버전

   • 3-1. React는 자바스크립트 ES6 버전에 대한 이해도가 있어야 사용이 가능함.

현재 설치된 NVM 버전 확인

NVM lts버전 설치/업데이트

https://github.com/coreybutler/nvm-windows

여기까지 하면 node.js 사용 준비 완료.

프로젝트 폴더 잡기 react_test1 프로젝트 생성 위 코드에서 로딩이 다 끝난 후 입력 완료되면 아래와같이 웹 페이지 새로 뜸 Ctrl + C 두세번 누르면 벗어날 수 있음

인텔리제이에서 리액트 프로젝트 생성

구성편집에 npm이 안잡혀있다면

새 구성 추가 -> npm -> 이름:아무거나(리액트 동작) -> 명령어: run -> pakage.json은 잡혀있으면 그대로 쓰면 되고, 아니면 pakage.json이 있는 폴더를 찾아서 해당 폴더 지정해주면됨(프로젝트 폴더 내에 있음) -> 스크립트: start -> 나머지는 자동으로 불러온거 쓰면 됨 서버 실행해보면 처음에는 느리게 뜨지만 두번째 실행부터는 빨리 뜸

기본 구조

index.html은 거의 건들지 않고 index.js, app.js를 주로 만진다

ES6 이론

• index.html 에서 <html lang="ko"> en -> ko로 수정

• src - es6 경로 추가 - TemplateString.js 파일 생성

ES5 방식

• TemplateString.js

  // TemplateString.js
  

// ES6 에서 새로 추가된 문자열 사용 방식 // (백틱) 기호 안에 문자열을 입력하는 방식 // 안에 ${변수명} 을 사용하여 변수의 내용을 바로 출력하는 것이 가능 // ${ } 내부에서 간단한 연산도 가능함

// 기존 console.log('-----ES5 버전 -----'); var string1 = '안녕하세요'; var string2 = '반갑습니다.';

var greeting = string1 + ' ' + string2; console.log(greeting);

var product = {name: '도서', price: '4200원'}; var message = '제품 ' + product.name + '의 가격은 ' + product.price + '입니다.'; console.log(message);

var multiLine = '문자열1\n문자열2'; console.log(multiLine);

var value1 = 1; var value2 = 2; var boolValue = false; var operator1 = '곱셈값은 ' + value1 * value2 + '입니다.'; console.log(operator1); var operator2 = '불리언 값은 ' + (boolValue ? '참' : '거짓') + '입니다.'; console.log(operator2);

- 인텔리제이에서 터미널 실행
![](https://velog.velcdn.com/images/i_like_monday/post/d2950126-5267-4c6d-bfb7-04ec02b2ed87/image.png)

---
### ES6 방식
ES6 에서 새로 추가된 문자열 사용 방식
`` ` ` `` (백틱) 기호 안에 문자열을 입력하는 방식
`` ` ` `` 안에 `${변수명}` 을 사용하여 변수의 내용을 바로 출력하는 것이 가능
`${ }` 내부에서 간단한 연산도 가능함
- TemplateString.js
```js
console.log('----- ES6 버전 -----')

var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = `${string1} ${string2}`;
console.log(greeting);

var product = {name: '도서', price: '4200원'};
var message = `제품 ${product.name}의 가격은 ${product.price}`;
console.log(message);

var multiLine = `문자열1
문자열2`;
console.log(multiLine);

var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1 * value2}입니다.`
console.log(operator1);
var operator2 = `불리언 값은 ${boolValue ? '참' : '거짓'}입니다.`
console.log(operator2);

• 인텔리제이에서 터미널 실행

변수

Variables.js (변수)

ES6 에서 let, const 키워드가 추가됨

• var : ES5 버전까지 자바스크립트에서 변수를 선언하는 유일한 방식

  • var 변수의 문제점 1 ) 변수의 스코프(범위)가 함수를 기준으로 하고 있음

• for 문 / if 문 / switch ~ case 내에서 선언한 변수라도 해당 코드블럭을 벗어나서 사용이 가능함

  • var 변수의 문제점 2 ) 중복 선언이 가능함

• let : ES6에서 추가된 변수 선언 방식

  • 변수의 스코프가 코드 블럭( { } )을 기준으로 함

  • for 문 / if 문 / switch ~ case 의 코드블럭 내에서 선언된 변수는 해당 코드 블럭을 벗어나면 메모리에서 삭제됨

  • 중복 선언이 불가능함(자바의 변수선언 방식과 유사)

• const : ES6에서 추가된 상수 선언 방식

  • 변수의 스코프가 코드 블럭( { } ) 을 기준으로 함

  • for 문 / if 문 / switch ~ case 의 코드블럭 내에서 선언된 변수는 해당 코드 블럭을 벗어나면 메모리에서 삭제됨

  • 중복 선언이 불가능함
  • 지정된 변수의 데이터 수정이 불가능함
  • const 로 선언된 변수에 배열, object 와 같은 데이터를 저장했을 경우, 해당 배열 및 object 의 요소의 데이터를 변경할 수 있음

• Variable.js

  // Variables.js (변수)
  

// const는 상수이기 때문에 값을 직접 수정하고자 하면 오류 발생 const num = 1; console.log(num); // 상수이기때문에 처음 선언한 이후 다시 데이터를 넣으면 오류 발생 // num = 100;

const str = '문자'; console.log(str); // 상수이기때문에 처음 선언한 이후 다시 데이터를 넣으면 오류 발생 // str = '변경된 문자';

const arr = []; console.log(arr); // 상수로 선언된 배열이라도 배열의 요소의 값을 수정하는 것은 문제가 없음 arr[0] = 10; // 배열에 요소를 추가하는 append 함수 사용 시 오류남 // arr.append(30);

const arr1 = [1, 2, 3]; console.log(arr1); // 배열에 요소를 추가하는 append 함수 사용 시 오류남 // arr1.append(4);

// 상수로 선언된 배열이라도 배열의 요소의 값을 수정하는 것은 문제가 없음 arr1[0] = 100; arr1[1] = 200; arr1[2] = 300; console.log(arr1);

// object 타입에 데이터 추가 시 오류 발생 const obj = {}; // obj = {name: '이름'};

// object 가 가지고 있는 요소의 내용을 수정하는 것은 문제가 없음

const obj1 = {num: 1, name: '아이유'}; console.log(obj1); obj1.num = 10; obj1.name = '유재석'; console.log(obj1);

console.log('\n\n');

// const 로 생성한 배열 혹은 object 에 내장 함수 사용 시 데이터 추가, 삭제가 가능함 // 하지만 무결성 제약조건을 위반하게 되므로 사용하지 않아야 함 const arr2 = []; console.log(arr2); arr2.push(1); console.log(arr2); arr2.splice(0, 0, 0); console.log(arr2); arr2.pop(); console.log(arr2);

const obj2 = {}; console.log(obj2); obj2['name'] = '아이유'; console.log(obj2); Object.assign(obj2, {name: '유재석'}); console.log(obj2); delete obj2.name; console.log(obj2);

console.log('\n\n');

// const 사용 시 내용을 수정하고자 하면 새로운 const 변수를 선언하고 데이터를 입력하는 방식으로 사용 const num1 = 1; const num2 = num1 * 3;

const str1 = '문자'; const str2 = str1 + '추가';

const arr3 = []; const arr4 = arr3.concat(1); console.log(arr3); console.log(arr4);

const arr5 = [...arr4, 2, 3]; console.log(arr5);

// slice : 잘라내는데 원본은 그대로 두고 잘라낸 배열만 새로 만들어 반환해줌 const arr6 = arr5.slice(0, 1); console.log(arr5); console.log(arr6);

// 전개연산법 : '[first, ...arr7]' 이 하나의 변수명이 됨, 뒤의 arr5는 배열 or Object // arr5의 첫 값은 first라는 변수에 들어가고 나머지 값은 arr7에 들어감 const [first, ...arr7] = arr5; console.log(first); console.log(arr7);

const obj3 = {name: '아이유', age: 30}; const obj4 = {...obj3, name: '유재석'}; const {name, ...obj5} = obj4; console.log(obj3); // {name: 아이유, age: 30} console.log(obj4); // {name: 유재석, age: 30} console.log(name); // 유재석 console.log(obj5); // {age: 30}

---

### 전개연산법(1)
- 배열에서 전개연산자 사용하기
- 전개 연산자 ( ... )
  나열형 자료를 추출하거나 연결할 때 사용
  배열, 객체, 변수명 앞에 ... 기호를 사용하여 사용
  배열 객체 함 수 인자 표현식( [ ] ) 안에서만 동작함
- SpreadOperator1.js
```js
// SpreadOperator1.js

console.log('----- ES5 -----');

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];

var combined = [array1[0], array1[1], array2[0], array2[1]];
// 배열의 각 요소를 하나씩 추출하여 새로운 배열에 대입
console.log(combined);

// array1 배열에 concat으로 array2 배열 붙이기
var combined = array1.concat(array2);
console.log(combined);

// 빈 배열에 concat 으로 배열 2개 붙이기
var combined = [].concat(array1, array2);
console.log(combined);

console.log(array1);  // [ 'one', 'two' ]
var first = array1[0];
var second = array1[1];
// array1의 2번 index의 값이 없으면 기본적으로 false가 뜨지만 || 연산자를 넣어서 기본값 설정을 해주면 false일때 empty가 출력됨
var three = array1[2] || 'empty';
console.log(first);   // one
console.log(second);  // two
console.log(three);   // empty

console.log('----- ES6 -----');

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];

// array1이 가진 모든것, array2가 가진 모든것 을 집어넣어서 하나의 배열로 생성
var combined = [...array1, ...array2];
console.log(combined); // [ 'one', 'two', 'three', 'four' ]

// array1의 첫번째, 두번째, 세번째 요소가 각각 first, second, three 라는 변수에 들어감
// 하지만 array1에는 세번째 요소가 없으므로 '= empty' 로 기본값 설정해준 empty 가 들어감
// ...others는 남아있는 데이터 모두를 의미하지만 현재 배열에서는 남은것이 없으므로 빈 배열이 others라는 변수에 들어감
var [first, second, three = 'empty', ...others] =array1;
console.log(first); // one
console.log(second);  // two
console.log(three); // empty
console.log(others);  // []

// 잘못 사용한 예
// var wrongArr = ...array1; <- 대괄호( [] ) 안에서만 전개연산자 사용할 수 있음!

// 전개연산자를 이용한 데이터 스와핑 간략화
var [first, second] = [second, first];

// 데이터 스와핑의 기존 방식(매우 번거로움!)
var first = 10;
var second = 20;
var tmp = 0;

tmp = first;
first = second;
second = tmp;

전개연산법(2)

Object 타입에서 전개 연산자 사용하기

• SpreadOperator2.js

  // SpreadOperator2.js
  // Object 타입에서 전개 연산자 사용하기
  

console.log('----- ES5 -----');

var objOne = {one: 1, two: 2, other: 0}; var objTwo = {three: 3, four: 4, other: -1};

var combined = { one: objOne.one, two: objOne.two, three: objTwo.three, four: objTwo.four }; console.log(combined); // { one: 1, two: 2, three: 3, four: 4 }

// assign() 함수를 이용하여 object 타입의 변수를 하나로 합함 // 첫번째 매개변수는 합쳐질 대상, 두번째와 세번째 매개변수는 첫번째 매개변수에 합함 // 동일한 키를 사용한 데이터가 있을 경우 '뒤쪽'에 나오는 키의 값으로 합쳐짐 var combined = Object.assign({}, objOne, objTwo); console.log(combined); // { one: 1, two: 2, other: -1, three: 3, four: 4 }

// 위에 있는 함수와 매개변수의 순서가 다르기 때문에 결과도 달라짐 var combined = Object.assign({}, objTwo, objOne); console.log(combined); // { three: 3, four: 4, other: 0, one: 1, two: 2 }

var others = Object.assign({}, combined); console.log(others); // { three: 3, four: 4, other: 0, one: 1, two: 2 }

delete others.other; console.log(others); // { three: 3, four: 4, one: 1, two: 2 }

console.log('\n----- ES6 -----\n');

var combined = { ...objOne, ...objTwo}; console.log(combined); // { one: 1, two: 2, other: -1, three: 3, four: 4 }

var combined = { ...objTwo, ...objOne}; console.log(combined); // { three: 3, four: 4, other: 0, one: 1, two: 2 }

var {other, ...others} = combined; console.log(other); // 0 console.log(others); // { three: 3, four: 4, one: 1, two: 2 } ```

페이징 처리

페이징 처리를 위해 백데이터 넣기

들여쓰기, commit 전 enter 2번 주의

from pybo import db
from pybo.models import Question
from datetime import datetime


for i in range(300):
    q = Question(subject='테스트 데이터입니다:[%03d]' % i, content='내용무', create_date=datetime.now())
    db.session.add(q)
db.session.commit()

↓ 백데이터 생성됨

페이징 처리는 보안이 필요없기 때문에 Get방식으로 넘어가면 됨

question_views.py

@bp.route('/list')
def _list():
    # 페이징 처리를 위해 추가한 코드 1 ↓
    page = request.args.get('page', type=int, default=1)    # 페이징

    # question_list = "select * from question order by id desc" (sql)
    question_list = Question.query.order_by(Question.create_date.desc())

    # 페이징 처리를 위해 추가한 코드 2 ↓
    question_list = question_list.paginate(page=page, per_page=10)   # 페이징

    return render_template('question/question_list.html', question_list=question_list)

페이징 처리의 원리

total : 735 page per : 10 block per : 15 total page : 735 / 10 -> 73.5 -> 절상 : 74 -> 74페이지까지 있어야 함 total Block : 74 / 15 -> 4.93 -> 절상 : 5 -> 마지막 블럭은 5개 있어야 함 now page : 1(default)

mySQL = limit 사용 limit 0, 10 : 시작번호 0부터 10개 (1페이지) limit 10, 10 : 10 : 시작번호 10부터 10개(2페이지) limit 20, 10 : 시작번호 20부터 10개 (3페이지)

이중 for문을 돌려서 jsp에서 뿌려주면 됨

datetime format

__init__.py filter.py question_detail.html

DB : 테이블 생성

• models.py 코드추가

  class User(db.Model):
  id = db.Column(db.Integer, primary_key=True)
  username = db.Column(db.String(150), unique=True, nullable=False)
  password = db.Column(db.String(200), nullable=False)
  email = db.Column(db.String(150), unique=True, nullable=False)

• 테이블 update

• forms.py import 추가

  from flask_wtf import FlaskForm
  from wtforms import StringField, TextAreaField, PasswordField, EmailField
  from wtforms.validators import DataRequired, Length, EqualTo, Email

• forms.py 코드 추가

  class UserCreateForm(FlaskForm):
  username = StringField('사용자이름', validators=[DataRequired(), Length(min=3, max=25)])
  password1 = PasswordField('비밀번호', validators=[DataRequired(), EqualTo('password2', '비밀번호가 일치하지 않습니다.')])
  password2 = PasswordField('비밀번호확인', validators=[DataRequired])
  email = EmailField('이메일', validators=[DataRequired(), Email()])

• pip install validator

• views/auth_views.py 생성

  # views/auth_views.py : 인증 및 인가 기능
  

from flask import Blueprint, url_for, render_template, flash, request from werkzeug.security import generate_password_hash from werkzeug.utils import redirect

from pybo import db from pybo.forms import UserCreateForm from pybo.models import User

bp = Blueprint('auth', name, url_prefix='/auth')

@bp.route('/signup/', methods=('POST', 'GET')) def signup(): form = UserCreateForm() if request.method == 'POST' and form.validate_on_submit(): # db에서 username을 검색해서 첫번째 레코드를 출력, user = User.query.filter_by(username=form.username.data).first() # 만약 데이터가 없다면 if not user: # hash 값으로 저장 : 암호화 user = User(username=form.username.data, password=generate_password_hash(form.password1.data), email=form.email.data) db.session.add(user) db.session.commit() return redirect(url_for('main.index')) else: flash('이미 존재하는 사람입니다.') return render_template('auth/signup.html', form=form)

- __init__.py 코드 추가
1. auth_views
2. app.register_blueprint(auth_views.bp)
```py
from .views import main_views, question_views, answer_views, **auth_views**
    app.register_blueprint(main_views.bp)
    app.register_blueprint(question_views.bp)
    app.register_blueprint(answer_views.bp)
    **app.register_blueprint(auth_views.bp)**

• navbar.html 코드 수정 href="#" → href="{{ url_for('auth.signup') }}"

  <a class="nav-link" href="{{ url_for('auth.signup') }}">계정생성</a>

장고(Django)란?

플라스크(Flask)란?

플라스크(Flask)는 파이썬으로 작성된 마이크로 웹 프레임워크의 하나로, Werkzeug 툴킷과 Jinja2 템플릿 엔진에 기반을 둔다. BSD 라이선스이다.
플라스크의 최신 안정판은 2017년 5월 기준으로 1.1.1이다.[2] 플라스크 프레임워크를 사용하는 애플리케이션에는 핀터레스트,[3] 링크드인,[4] 플라스크 자체를 위한 공동체 웹 페이지를 포함한다.
플라스크는 특별한 도구나 라이브러리가 필요 없기 때문에 마이크로 프레임워크라 부른다. 데이터베이스 추상화 계층, 양식 유효성 확인, 기타 기존의 서드파티 라이브러리가 공통 기능을 제공하는 구성 요소가 없다. 그러나 플라스크는 플라스 자체에서 구현된 것처럼 애플리케이션 기능을 추가할 수 있는 확장 기능을 지원한다. 확장 기능은 객체 관계 매퍼, 양식 유효성 확인, 업로드 관리, 다양한 개방형 인증 기술, 여러 공통 프레임워크 관련 도구들을 위해 존재한다. 확장 기능들은 코어 플라스크 프로그램에 비해 훨씬 더 정기적으로 업데이트된다.

예시

from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
    return "Hello World!"
if __name__ == "__main__":
    app.run()

파이썬 버전확인, 가상환경 설정하기

• 환경변수 설정

• bat 파일 생성

  C:\users\admin\myproject

  해당 코드 콘솔창에 쳐주면 자동으로 path 인식해서 가상환경으로 들어감
• 실행완료화면

파이참 -> open -> [project - myproject]

• myproject 영역에서는 코딩만 진행
• 파이썬 가상실행환경 [vens - myproject - Scripts] 를 이용해서 서버 실행

main.py -> pybo.py 이름변경

플라스크 run오류

계속 cmd창에서 flask run 입력시 오류가 나서 전체 경로를 넣어서 run 해줘야했다. C:\venvs\myproject\Scripts\python -m flask run

최종 경로 확인

init.py

  # __init__.py

from flask import Flask

def create_app():
  app = Flask(__name__)

  from .views import main_views
  app.register_blueprint(main_views.bp)

  return app

main_views.py

  # main_views.py

from flask import Blueprint

bp = Blueprint('main', __name__, url_prefix='/')

@bp.route('/')
def index():
    return 'Hello, index'

@bp.route('/hello')
def hello_pybo():
    return 'Hello, 하이부~~~'

sql-lite 설치

https://sqlitebrowser.org/dl/

플라스크 ORM 라이브러리 사용하기

ORM, FLASK (myproject) C:\projects\myproject>C:\venvs\myproject\Scripts\python -m pip install flask-migrate (myproject) C:\projects\myproject>C:\venvs\myproject\Scripts\python -m flask db init

init.py

  # __init__.py

from flask import Flask
from flask_migrate import Migrate
from flask_sqlalchemy import SQLAlchemy

import config

db = SQLAlchemy()
migrate = Migrate()

def create_app():
  app = Flask(__name__)
  app.config.from_object(config)

  #ORM
  db.init_app(app)
  migrate.init_app(app, db)

  from .views import main_views
  app.register_blueprint(main_views.bp)

  return app

config.py

  # myproject/config.py
# DB 연동에 대한 파일

import os

BASE_DIR = os.path.dirname(__file__)
SQLALCHEMY_DATABASE_URI = 'sqlite:///{}'.format(os.path.join(BASE_DIR, 'pybo.db'))
SQLALCHEMY_TRACK_MODIFICATIONS = False

int.py

 # __init__.py

from flask import Flask
from flask_migrate import Migrate
from flask_sqlalchemy import SQLAlchemy

import config

db = SQLAlchemy()
migrate = Migrate()

def create_app():
  app = Flask(__name__)
  app.config.from_object(config)

  #ORM
  db.init_app(app)
  migrate.init_app(app, db)
  from . import models

  from .views import main_views
  app.register_blueprint(main_views.bp)

  return app

-> mysql lite 열어보면

C:\venvs\myproject\Scripts\python -m flask shell

컬럼 데이터 변경

flask run

main_views.py

  # main_views.py

from flask import Blueprint, render_template
from pybo.models import Question

bp = Blueprint('main', __name__, url_prefix='/')

@bp.route('/')
def index():
    # 원래는
    # question_list = 'select * from question order by id desc'
    question_list = Question.query.order_by(Question.create_date.desc())
    return render_template('question/question_list.html', question_list=question_list)

@bp.route('/hello')
def hello_pybo():
    return 'Hello, 하이부~~~'

question_list.html

  <!-- question_list.html -->

<!-- 타임리프의 확장자는 HTML -->
{% if question_list %}
    <ul>
        {% for question in question_list %}
            <li><a href="/detail/{{ question.id }}">{{ question.subject }}</a></li>
        {% endfor%}
    </ul>
{% else %}
    <p>질문이 없습니다.</p>
{% endif %}