12월 3일 TIL : 스프링 기초, 라우트, Automatic Batching

BE

1. 스프링 실행 포트 수정하기

스프링은 기본적으로 8080 포트에서 실행된다.

수정을 위해서는 application.properties 파일에 다음 설정을 추가한다.

// src/main/resources/application.properties

server.port=8081

2. 화이트리스트 페이지 대체하기

기본적으로 보여줄 페이지가 없다면 에러 페이지를 보여주게 된다.

/resources/static 폴더에 정적 HTML을 추가해 대체 페이지를 추가할 수 있다.

3. 라우트 설정하기

특정 경로와 페이지를 매핑하고 싶다면 다음과 같이 작성해 활용한다.

@Controller
public class TodoController {
    @GetMapping("/todo")
    public String todo() {
        return "todo"; // <---- /resources/templates 경로의 todo.html을 리턴한다.
    }
}

4. @GetMapping VS. @RequestMapping

@GetMapping 어노테이션

@GetMapping("/경로")
public string SomeController {
  return "SomeRoute"
}

• RequestMapping보다 깔끔하다.
• 이름에서 HTTP Method를 추론할 수 있어 직관적이다.
• 스프링 4.3 부터 등장했다.

@RequestMapping 어노테이션

@RequestMapping(value = "/경로", method = RequestMethod.GET)
public string SomeController {
  return "SomeRoute"
}

• 하나의 어노테이션으로 모든 메서드에 대응할 수 있어 유연하다.
• 스프링 초기 버전부터 존재했다.

---

FE

1. Automatic Batching

• 리액트 17까지는 이벤트 핸들러에 대해서만 배치 렌더링을 지원했다.

const handleInputChange = (e: Event) => {
  const value = e.target.value;
  setInput(value);
  setNickName(value);
}

// handleInputChange가 실행되면 한번만 리렌더가 일어난다.

즉, setTimeout, fetch 등 비동기 동작에서는 렌더링이 일괄로 처리되지 못했다.

fetch('/todo').then(() => {
  setTodo(); // 한 번 리렌더링됨.
  setUserState(); // 두 번 리렌더링됨.
});

=> 리액트 18부터는 이벤트 핸들러를 비롯한 비동기 동작들에서도 배치 렌더링을 지원한다.

그러나, 만약 배치 렌더링이 필요하지 않은 경우에는 flushSync 함수를 중간에 실행해준다.

예시 : 배치 렌더링

버튼을 누르면 state를 2번 업데이트하도록 작성한다.

import { useState } from "react";

function App() {
  const [state, setState] = useState(0);

  const handleClick = () => {
    setState((state) => state + 1);
    setState((state) => state + 1);

    // batch update로 인해 모든 상태 업데이트를 마친 뒤 리렌더링한다.
  };

  console.log(`State: ${state}`);

  return (
    <div>
      /* 버튼을 5회 클릭한다. */
      <button onClick={handleClick}>업데이트</button>
    </div>
  );
}

export default App;

클릭할 때마다 state가 2씩 증가하시만, 렌더링은 1회만 일어났다.

예시 : flushSync를 사용한 non-batch 렌더링

버튼을 누르면 state를 flushSync의 콜백 내에서 1번, flushSync 밖에서 1번 업데이트하도록 작성한다.

import { useState } from "react";
import { flushSync } from "react-dom";

function App() {
  const [state, setState] = useState(0);

  const handleClick = () => {
    flushSync(() => {
      setState((state) => state + 1);
    });
    // flushSync의 콜백에서 setState가 실행된 이후 리렌더가 일어난다.
    // 이 때, flushSync에 다수의 setState가 있어도 리렌더는 한번만 일어난다.
    // = 즉, flushSync가 일종의 리렌더 스코프를 제공함을 알 수 있다.

    setState((state) => state + 1);
    // setState가 실행된 이후 리렌더가 일어난다.
  };

  console.log(`State: ${state}`);

  return (
    <div>
      /* 버튼을 5회 클릭한다. */
      <button onClick={handleClick}>업데이트</button>
    </div>
  );
}

export default App;

클릭할 때마다 렌더링이 2회 일어나면서 state가 2씩 증가한다.