Spring boot #5

• 3장 프론트엔드 개발
  • Node.js
    • 자바스크립트 런타임 환경
    • 구글 크롬의 v8 자바스크립트 엔진을 실행한다
  • npm
    • node.js의 패키지 관리 시스템이다
    • 터미널
      • npm version
        • 교재는 8.5.0 버전
      • mkdir test-project
      • cd test-project
      • npm init
      • npm install react
      • npm install
      • 프론트 엔드 어플리케이션 생성
      • 프론트쪽 폴더 생성 후
      • mkdir react-workspace
      • cd react-workspace
      • npx create-react-app todo-react-app
      • cd todo-react-app
      • npm start
      • localhost:3000 구동확인
      • npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
  • React.js
    • SPA라이브러리/프레임워크이다
      • 웹 페이지를 로딩하면 유저가 임의로 새로고침을 하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다
• 3.2장 프론트엔드 서비스 개발
  • useState
    • 상태를 리액트가 계속 추적하고, 상태가 변할 때 마다 함수를 다시 불러 새 상태가 화면에 나타나도록 다시 렌더링 해야 한다. 이때 리액트에게 이 오브젝트가 상태라고 알려주는 함수이다
    • 함수는 배열을 반환한다 첫 번째 값은 방금 상태로 지정한 오트젝트이고, 두 번째 값은 이 상태를 업데이트할 수 있는 함수이다
• 이벤트
  • onInputChange
    • 사용자가 인풋필드에 키를 하나 입력할 때마다 실행되며 인풋 필드에 담긴 문자열을 자바스크립트 오브젝트에 저장한다
  • onButtonClick
    • 사용자가 + 버튼을 마우스로 클릭할 때 실행되며 onInputChange에서 저장하고 있던 문자열을 리스트에 추가한다
  • enterEventKeyHandler
    • 사용자가 인풋필드상에서 Enter또는 Return키를 눌렀을때 실행되며 기능은 onButtonClick과 같
• 3.3장 서비스 통합
  • CORS
    • 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해주는 웹 보안 방침이다
    • 컴포넌트의 상태가 변하면 ReactDOM은 이를 감지하고 컴포넌트 함수를 다시 호출함으로써 변경된 부분의 HTML을 바꿔준다 HTML이 업데이트 되면 우리는 변경된 결과를 눈으로 확인할 수 있다. 화면에 보여주는 것을 렌더링이라고 한다
    • CORS를 위반하면 무한루프에 빠지게 되는데 이를 방지해주는 것이 useEffect()훅 이다
  • Fetch든 XMLHttpRequest든 본질적으로는 같은 기능을 한다
    • XMLHttpRequest를 사용하는 경우 콜백 함수 내에서 또 다른 HTTP 요청을 날리고 그 두 번째 요청을 위한 콜백을 또 정의하는 과정에서 코드는 굉장히 복잡해진다. 이렇게 콜백 내에서 다시 HTTP 요청을 하고, 다시 콜백을 정의하면서 코드가 복잡해지는 것을 콜백 지옥이라고 부른다
    • 콜백지옥을 피하기 위해선 Promise를 사용한다
      • Promise는 이 함수를 실행 후 Promise 오브젝에 명시된 사항들을 실행시키겠다는 약속이다
      • Promise는 세가지 상태가 있다.
        • Pending
          • 오퍼레이션이 끝나길 기다리는 상태
        • Fulfilled
        • Rejected
  • Fetch API
    • Fetch는 url을 매개변수로 받거나 url과 options을 매개변수로 받을 수 있다. Fetch함수는 Promise 오브젝트를 반환한다. then과 catch에 각각 onResolve, onReject, onError 콜백 함수를 전달해 응답을 처리할 수 있다.
• 백엔드와 프론트 엔드를 합치는 방법
  • 프론트엔드 프로젝트의 src디렉토리 안래에 api-config.js를 생성한다. 백엔드 서비스의 주소인 http://localhost/8080을 변수에 담고 현재 브라우저의 도메인이 localhost인 경우 로컬 호스트에서 동작하는 백엔드 애플리케이션을 사용한다
  • 코드
    • 프론트엔드 프로젝트 (api-config.js)
    • let backendHost; const hostname = window && window.location && window.location.hostname; if (hostname === "localhost") { backendHost = "<http://localhost:8080>"; } export const API_BASE_URL = `${backendHost}`;
    • 프론트엔드 프로젝트(service/ApiService.js)
    • import { API_BASE_URL } from "../api-config"; export function call(api, method, request) { let options = { headers: new Headers({ "Content-type": "application/json", }), url: API_BASE_URL + api, method: method, }; if (request) { options.body = JSON.stringify(request); } return fetch(options.url, options) .then((response) => { if (response.status === 200) { return response.json(); } }) .catch((error) => { console.log("http error"); console.log(error); }); }
    • 백엔드프로젝트(hello)(config/WebMvcConfig.java)
    • package com.ovmkas.hello.config; 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 WebMvcConfig implements WebMvcConfigurer { private final long MAX_AGE_SECS = 3600; @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("<http://localhost:3000>") .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(MAX_AGE_SECS); } }
• 정리