Java/Spring

Spring boot #5

DGeon 2023. 5. 18. 09:12
  • 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); } }
  • 정리