All Day Tired

VScode에서 NodeJS 디버깅 하는 법

yu.dev — Sun, 25 Jan 2026 19:32:25 +0900

노드 공부 중인데 디버깅하는 법을 기록할 겸 작성

1. launch.json 파일 만들기

노드 세팅을 했다면

숫자 순서대로 Run and Debug 클릭 > create a launch.json file. 클릭 > Node.js 클릭

2. launch.json 파일 설정해주기

Add Configuration 클릭 > Node.js: Attach to Process 클릭 > launch.json 저장

3. Attach by Process ID 확인

lauch.json 파일을 저장했으면 Attach by Process ID가 추가된 것을 확인할 수 있다.

Attach by Process ID를 선택한 상태에서 node 또는 nodemon으로 서버 실행

4. 서버를 실행 했으면 F5를 눌러서 디버깅을 시작한다.

F5를 누르면 디버깅 할 process를 선택할 수 있고 실행할 process를 클릭하면 디버깅을 할 수 있다.

(저기에 있는 node app.js를 보통 클릭함)

그러면 브레이크 포인터를 찍으면서 디버깅을 할 수 있다.

서버가 꺼졌다 켜지면 디버깅 모드도 꺼지기때문에 다시 F5를 눌러서 디버깅을 시작해줘야한다.

(nodemon 사용시 저장할때마다 서버가 재시작되므로 저장하고나서 F5를 눌러서 디버깅을 시작해주자)

동기와 비동기

yu.dev — Mon, 8 Dec 2025 21:42:52 +0900

~~난 왜... 동기와 비동기가 참 이해가 안될까...~~

동기

코드를 위에서부터 아래로 순차적으로 실행

식당이 있는데 주인장 한 명 밖에 없음

그러면 손님 여러 명이 와도 주인장 1명만 일하니까

첫번째 손님 주문 받고 첫번째 손님 요리하고 첫번째 손님 음식 나가고

두번쨰 손님 주문 받고 두번째 손님 요리하고 두번째 손님 음식 나가고

...

이렇게 순차적 일을 진행할 수 밖에 없음. 이것이 동기

그림으로 표현하면 아래와 같다

비동기

코드가 동시에 일을 처리할 수 있음

식당이 있는데 주인장 한 명이랑 직원 2명이 있음

그러면 손님 여러 명이 오면

첫번째 손님이 직원1한테 주문 받는 동시에 두번째 손님이 직원2한테 주문 받고

주인장이 첫번째 손님 요리하고 직원1이 첫번째 손님 음식 나가고

주인장이 두번째 손님 요리하고 직원2가 두번째 손님 음식 나가고

...

이렇게 직원1,2가 동시에 일하는 구간이 생기게 됨. 이것이 비동기

그림으로 표현하면 아래와 같다

코드로 생각해보자면

console.log(1);

function a(){
	API 호출 ajax
}

function callback(){
	a함수 callback 함수
    console.log(3);
}

console.log(2);

만약 이 코드가 무조건 동기적으로 처리된다고 생각하면

1 이 출력되고

API 호출을 하고 서버에서 응답을 받아서 callback 함수가 실행(시간이 꽤 걸릴 것임)되어서 3이 출력

2 가 출력되어서

이 1 -> 3 -> 2 순서로 출력된다.

하지만 비동기 처리가 된다면

1 이 출력되고

API 호출을 하고 서버에서 응답을 받아서 callback 함수가 실행하는데 시간이 오래 걸리니까 2가 먼저 출력

그리고 callback함수가 실행이 완료되어서 3 이 출력되어서

1 -> 2 -> 3 순서로 출력된다.

동기와 비동기의 큰 차이는 동시 처리이다.

그래서 프론트에서 API호출할 때 서버로부터 응답을 받아오는 시간까지 마냥 화면이 멈춰있지 않고 다른일을 할 수 있다.(가령... 뭐 다른 버튼들을 클릭을 할 수 있다던가... 그런 일...?)

이래서 API호출을 비동기로 한다.

까먹지 말자...

리액트 쿼리(react query)

yu.dev — Sun, 2 Nov 2025 21:25:29 +0900

리액트 상태는 크게 3가지로 구분된다.

1. 지역: useState로 관리

2. 전역: store로 상태관리

3. 서버: API통신할때 필요한 상태

리액트쿼리는 특히 서버상태관리를 하는데 유용한 라이브러리이다.

그러면 리액트쿼리를 사용하기위해 기본세팅하는 방법을 알아보자.

1. react query 설치(버전 5로 설치함)

npm i @tanstack/react-query

2. index.js 또는 main.jsx에서 import 해주고 기본 세팅하기

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'//import를 해주고

const queryClient = new QueryClient();//QueryClient 인스턴스를 생성해주고
createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>//<App>을 QueryClientProvider로 감싸준다
    <App />
  </QueryClientProvider>,
)

3. Devtool을 설치. 이걸 설치하는 이유는 리액트쿼리를 사용하면서 캐시 상태를 보기위한 목적이다.

npm i @tanstack/react-query-devtools

4. index.js 또는 main.jsx에 Devtool import 해주기

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

5. index.js 또는 main.jsx에 Devtool 세팅하기

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient();
createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools initialIsOpen={false} />//QueryClientProvider 안에 넣어주기
  </QueryClientProvider>,
)

여기까지가 아주 기본적으로 리액트쿼리를 사용하기위한 기본 세팅이다.

리액트 쿼리는 서버 상태를 관리해주는 라이브러리이니까 API를 호출을 해줘야한다.

fetch로도 할 수 있지만 axios라는 좋은게 있으니 이걸로 API를 호출할 것이다.

1. axios 설치

npm i axios

2. 리액트 쿼리에서 제공하는 대표적인 훅인 useQuery를 사용, 디폴트로 useQuery 훅은 컴포넌트 들어오자마자 실행되는데 나는 어떤 이벤트 뒤에 실행하고 싶다! 하고싶을땐 따로 설정이 필요

import { useQuery } from '@tanstack/react-query'//import 해주고

.
.
.

const {data, isLoading, isError, error} = useQuery({//data: API호출해서 받아온 data, isLoading: 로딩중인지 아닌지 상태값(로딩중이면 true, 아니면 false), isError: 에러가 난 상태값, error: 에러가 났다면 에러 정보가 들어가있는 에러 객체(에러 메세지 등등)
	queryKey: ['todos'], 
	queryFn: getTodos,
	retry: 2
});
//useQuery는 객체 하나를 매개변수로 받는다.(버전 5여서 그런데 다른 버전에서는 매개변수가 3개임)
//첫번째 key는 queryKey로 API 호출하는 이름으로 생각하면 된다. 유니크한 이름이여야 함.
//두번째 key는 queryFn으로 함수이다. API를 호출하는 로직의 함수가 들어감. 이렇게 2개까지가 가장 기본적으로 꼭 들어가야하는 것들
//세번째 key는 retry로 API 호출에 실패했을때 다시 시도하는 횟수이다. 디폴트로 설정해주지 않으면 3번임

const getTodos = () => {
	...//API 호출하는 로직
};

보통 useQuery는 따로 js파일을 만들어서 커스텀훅으로 관리하는 경우가 많다.

위에처럼 쓰면 UI부분과 로직부분이 합쳐져 있어 관리하기가 까다롭다.

그럼 이렇게 API 호출하려고 리액트쿼리를 쓰냐?

아니! 리액트 쿼리를 쓰는 진짜 이유는 캐시관리를 해주기 때문
캐시는 임시 저장 공간으로 API를 호출해서 가져온 데이터를 캐시라는 임시저장공간에 잠깐만 가지고 있어 하면서 저장
리액트 쿼리는 모든 데이터를 이 캐시에 저장시켜줌
그래서 이런 경험이 있을 것이다.
어디 사이트를 갔는데 처음 들어갔을 때 데이터 로딩이 되고 두번째로 들어갔을때(데이터가 동일하다는 가정) 로딩 없이 바로 데이터가 나오는 경우!
이 경우가 바로 캐시에서 데이터를 꺼내온 경우이다.
그렇다면 캐시에 데이터가 있으면 API 호출을 안하냐? 그건 아니다.
일단 우선적으로 캐시에 있는 데이터를 뿌려주고 뒤에서는 API를 호출하고 다시 데이터를 가져와서 가져온 데이터를 다시 캐시에 넣어주고 이런 작업을 하고 있다.

useQuery를 사용하면 이렇게 알아서 데이터를 캐시관리를 해준다.
캐시 저장 시간도 useQuery로 설정해줄수있는데
gcTime으로 설정해줄 수 있다.(버전 5에서 gcTime, 그 이하버전은 cacheTime)
캐시는 주기적으로 비워주는것도 중요. 메모리차지를 하기때문이다.

Zustand로 리액트 상태관리

yu.dev — Wed, 29 Oct 2025 23:14:22 +0900

코딩알려주는 누나 강의를 듣고 쓰는 글입니다.

Zutand는 상태관리를 위해 만들어진 라이브러리다.

상태관리가 필요한 이유는 이미 간단히 포스팅 해두었다.

리액트 redux 상태관리

코딩알려주는 누나 강의를 보고 쓰는 글입니다. 리액트를 사용하면서 문제점이 있다.이렇게 부모에서 자식으로만 state가 전달된다는 문제!이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리

yj-dev.tistory.com

근데 확실히 Zustand 쓰는게 편하긴 한듯...

Zustand를 사용하는 방법은 아래와 같다.

1. Zustand를 설치한다.

npm install zustand

2. store를 만들자. src > stores > personStore.js 파일을 만들어준다.

3. Store.js에 create를 import해준다. state를 저장해주는 store를 만들어주는 것이 create

import {create} from "zustand"

const personStore = create (() => ({
person: [] //사용하는 state를 써주고 초기화까지 시켜준다.
}));

export default personStore;

4. store에 있는 state를 사용해보자

import personStore from './stores/personStore'

.
.
.

const {person} = personStore();//personStore에 있는 state인 person을 가져옴

5. 함수를 store에 만들어보자.

import {create} from "zustand"

const personStore = create ((set) => ({//set은 state를 set해주기위해 zustand가 제공해준 함수
  person: [],
  addPerson: (name, age) => set((state) => ({//매개변수가 있으면 (name, age) 같이 매개변수를 넣어주면 된다.
    person: [...state.person, {name: name, age: age}]
  }))
}));

export default personStore;

6. store에 있는 함수를 사용해보자

import personStore from './stores/personStore'

.
.
.

const {addPerson} = personStore();
addPerson('아무개', 20);

리액트 redux 상태관리

yu.dev — Wed, 29 Oct 2025 23:08:55 +0900

코딩알려주는 누나 강의를 보고 쓰는 글입니다.

리액트를 사용하면서 문제점이 있다.

이렇게 부모에서 자식으로만 state가 전달된다는 문제!

이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리하기도 힘들어지는데

이것을 해결하는 것이 상태관리!

store라는 공간에 state들을 넣어주어서 어느 컴포넌트든 사용할 수 있게 해주는 것!

이러한 상태관리를 도와주는 것이 바로 redux이다.

redux는 라이브러리로 구조는 아래와 같다.

Reducer는 단순히 함수로 그 아래에는 if문이나 switch문으로 action의 type들이 나열되어서 각각 하는 기능을 구현한 것이다.

Action은 type과 payload로 이루어진 객체로 type은 액션의 이름, payload는 매개변수라고 생각하면 된다.

redux를 사용하기 위한 기본세팅과 간단한 예제로 알아보자.

1. 터미널 열어서 redux와 react-redux 설치

npm i redux react-redux

2. index.js 또는 main.jsx에 <App>을 <Provider>로 감싸주기. 왜냐하면 store를 제공해주기 위해서, Provider는 항상 기본적으로 들어가는 props가 store다!

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Provider } from 'react-redux'

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>,
)

3. store파일 만들어주기. src > redux > store.js 이렇게 만들어줌

4. store를 만드는 함수인 createStore를 import해주고 store를 만들어준다.

import { createStore } from "redux"

let store = createStore(reducer);

5. 행동지침이 있을 reducer파일을 만들어준다. src > redux > reducer > reducer.js 이렇게 만들어줌

6. reducer는 state와 action을 가진 함수이다.

let initialState = {};//state 초기값을 넣어줄 애들

function reducer(state = initialState, action){

}

export default reducer;

7. ruducer을 export했으니 store.js에서 import 해주고 export 해준다.

import { createStore } from "redux"
import reducer from "./reducer/reducer";

let store = createStore(reducer);

export default store;

8. store를 export했으니 다시 index.js 또는 main.jsx에서 store를 import 해주자

import store from './redux/store.js'

여기까지가 redux를 사용하기 위한 기본 세팅이다.
그렇다면 store의 값을 사용하고 변경하고 기타 등등 일을 하기위해서는 어떻게 할까?

먼저 store의 값을 저장하기 위한 방법, store에 만든 함수를 사용하는 방법
1. useDispatcher를 import 하고 사용해주자

import { useDispatch } from 'react-redux';

.
.
.

const dispatch = useDispatch();
dispatch({type: 'ADD_PERSEON', payload: {name:'아무개', age:20}}); //dispatch의 매개변수는 action이고 action은 type(액션이름)과 payload(액션에 넘겨주는 값)으로 이루어진 객체이다

2. 이렇게 던진 action은 reducer로 가서 추가해주자

let initialState = {
person: []
};//state 초기값을 넣어줄 애들

function reducer(state = initialState, action){
    switch(action.type){
        case 'ADD_PERSEON':
            return {...state, person:[...state.person, {name:action.payload.name, age:action.payload.age}]};
        default:
            return {...state};
}

이렇게 store의 state 값을 변경하거나 저장하거나 하는 일을 했다면 이 값을 사용하는건 어떻게 할까?
1. useSelector를 import 해주고 사용하기

import { useSelector } from 'react-redux'

.
.
.

const people = useSelector(state => state.person);

리액트 state, useState

yu.dev — Tue, 21 Oct 2025 22:31:23 +0900

코딩알려주는 누나 강의 듣고 정리한 글입니다.

state가 변하면 UI를 바꾼다

state 형태는 아래와 같다.

const [변수, setState] = useState(초기값);

state값을 변경하기 위해서는 setState 함수를 통해서 바꿔야한다

state가 바뀌면 UI가 랜더링 됨
그래서 setState 함수를 실행한다고 바로 실행되지 않고 비동기적으로 실행이 됨
setState 함수를 감싼 함수가 끝나야 setState가 실행된다

코드와 함께 설명하면

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0);
  
  const increase = () => {
  setCount(count + 1);//이 state는 increase 함수가 끝나야 count라는 state가 1 증가하므로 increase 함수안에서 count state를 사용하게 되면 이전 값이 들어가게 되는 문제 발생! 주의하자!
  };

  return (
    <div>
      <div>{count}</div>
      <button onClick='{increase}'></button>
    </div>
  )
}

export default App

리액트 pathVariable/쿼리파라미터 값 받기, redirect

yu.dev — Tue, 21 Oct 2025 22:10:09 +0900

코딩알려주는 누나 강의를 듣고 정리하는 글 입니다.

url을 넘길 때 많은 정보를 넘기곤 한다.

http://www.yj-dev.com/history 이런식으로 pathVariable로 history라는 정보를 넘기던가

http://www.yj-dev.com?id=1&num=23 이런식으로 쿼리파라미터로 id와 num이라는 정보를 넘기던가

먼저 pathVariable을 하려면 history같은 값은 변해야하는 값인데 Router에 어떻게 지정을 해줘야할까?

mport { useState } from 'react'
import './App.css'
import PageA from './page/PageA'
import { Routes, Route, Navigate } from 'react-router-dom'//import 필요!

function App() {

  return (
    <div>
      <Routes>
        <Route path='/pagea/:key' element={<PageA></PageA>}></Route>
      </Routes>
    </div>
  )
}

이렇게 콜론으로 지정하면 pathVariable이 된다.

여러개의 콜론을 지정하면 지정한 갯 수 만큼 pathVariable이 추가

그럼 이 pathVariable을 받아오려면 어떻게 해야할까?

이 때 필요한 것이 usePrams 훅이다.

import React from 'react'
import { useParams } from 'react-router-dom' //import 필요!

const ProductDetailpage = () => {
    const params = useParams();//이렇게 useParams 훅을 이용하면 콜론으로 넘긴 값이 객체로 전달! 만약 여러개의 파라미터를 담아서 보냈다면? 보낸 파라미터들이 객체(key-value 형태)로 다 가지고 옴!

  return (
    <div>
      <h1>useParams 이용해서 pathVariable 값 받기</h1>
    </div>
  )
}

만약 :id/:num/:cnt 이런식으로 3개의 pathVariable을 보냈다면 params에는

{
    id: yj,
    num: 3,
    cnt: 10
}

이런 식으로 객체가 담겨져 있다.

그럼 쿼리파라미터로 보낸 값은 어떻게 받아야할까?

useSearchParams 훅을 사용하면 된다.

import React from 'react'
import { useSearchParams } from 'react-router-dom'//import 필요!

const PageA = () => {
    let [query, setQuery] = useSearchParams();//useState와 비슷한 형태로 선언을 해준다
    console.log(query.get('q'));//그리고 넘어오는 쿼리파라미터 중 필요한 값의 key값을 get 해주면 그 값을 사용할 수 있다!
    
  return (
    <div>
      <h1>useSearchParams 훅으로 쿼리파라미터 값 받기</h1>
    </div>
  )
}

export default PageA

url이 http://www.yj-dev.com/q=123 이렇게 넘어왔다면 위에서 찍히는 console.log는 123이 된다.

마지막으로 redirect를 하기 위해서는 리액트 Router에서 제공하는 Navigate 컴포넌트를 이용한다.

여기서 주의할 것은 Navigate와 useNavigate 훅은 전혀 다른것이라는 것!

Navigate 사용은

import { Routes, Route, Navigate } from 'react-router-dom'
//위와 같이 import
//return 에서
<Navigate to='/pagea'></Navigate>;//Route의 path를 써주면 redirect가 된다

이렇게 해주면 redirect가 된다.

redirect가 많이 쓰이는 사용자만 보여야하는 페이지에 접근하려고 했을 때 로그인 페이지로 이동하도록 하는 경우 많이 쓰인다.

리액트 Router 쓰는 법

yu.dev — Tue, 21 Oct 2025 21:47:34 +0900

코딩알려주는 누나 강의를 들으면서 정리하는 글 입니다!

보통 웹사이트를 보면 여러 페이지를 이동하면서 사용하게 되는데 이 때 리액트에서 필요한 것이 Router

Router를 사용하기 위해서는 가장 먼저 리액트 프로젝트에 Router를 설치하는 것이다.

아래 명령어를 터미널에 치면 Router 6버전이 설치 된다.

npm install react-router-dom@6

그럼 진짜로 Router를 사용해주기 위해서는 main.jsx 파일에서 BrowserRouter를 사용해주자

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom' //import 필요!

createRoot(document.getElementById('root')).render(
  <StrictMode> //없애줘도 상관없긴 함
    <BrowserRouter> //BrowserRouter로 App을 감싸준다
      <App />
    </BrowserRouter>
  </StrictMode>,
)

그 후 App.jsx로 가서 진짜로 Router를 사용해보자

import { useState } from 'react'
import './App.css'
import PageA from './page/PageA'
import PageB from './page/PageB'
import { Routes, Route } from 'react-router-dom' //import 필요!

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <Routes> {/* Routes 사용 */}
        <Route path='/' element={<PageA></PageA>}></Route> {/* 실제로 갈 페이지를 Route 함! path는 주소값으로 url 끝에 오게됨, element는 실제 페이지 태그를 넣어준다! */}
        <Route path='/pageb' element={<PageB></PageB>}></Route> {/* 이 경우 url이 http://www.yj-dev.com/pageb 이런식으로 path값인 about이 주소 끝에 옴 */}
      </Routes>
    </div>
  )
}

export default App

이렇게 되면 주소창에 url이 http://yj-dev.com/ 인 경우 PageA가 보일 것이고 http://yj-dev.com/pageb 인 경우에는 PageB가 보이게 된다.

근데 항상 이렇게 주소창에 url을 칠 수 없으니 a태그나 버튼을 클릭했을 경우 페이지가 이동하는 것처럼 하는 방법은 무엇일까?

그것은 Link와 useNavigate 훅을 이용하는 것이다.

Link를 이용하기 위해서는 아래와 같이 import를 해주고

import { Link } from 'react-router-dom'

<Link to='/pageb'>b페이지로 이동합니다.</Link>

이렇게 사용하면 a태그처럼 링크가 걸려서 이동하게 된다. to는 Route에서 지정한 path값을 넣어주면 된다.

useNavigate 훅은 아래와 같이 사용한다. useNavigate는 보통 함수를 통해서 이동해야하는 경우 자주 쓰인다.

//useNavigate 사용하기
import React from 'react'
import { useNavigate } from 'react-router-dom';//import 필요!

const PageB = () => {
    const navigate = useNavigate();//useNavigate 훅을 선언

    const goToHomepage = () => {
        navigate('/');//파라미터로 내가 가고싶은 주소를 넣는다! App.jsx에 Route의 path값을 넣으면 됨
    };

  return (
    <div>
      <button onClick={goToPageA}>a페이지로 갑니다.</button>//onClick 함수로 호출
    </div>
  )
}

export default PageB

MsSQL 문자열을 날짜 및/또는 시간으로 변환하지 못했습니다.

yu.dev — Thu, 24 Jul 2025 17:24:50 +0900

일 하는데 이딴 에러가 남...

내 경우에는 프로시저 호출하는데 데이터가 안 넘어와서 직접 mssm으로 조회해보는데 안됨...

그래서 프로시저 안에 쿼리 하나하나 실행하는데

문자열을 날짜 및/또는 시간으로 변환하지 못했습니다.

이딴 에러 뜸...

문제 쿼리는 UNION ALL 절인데

대략 쿼리를 쓰자면

DECLARE @TEMP TABLE
(
    ID VARCHAR(40)
    , EVENTTIME VARCHAR(MAX)
)

INSERT INTO @TEMP
SELECT ID
     , EVENTTIME
FROM SAMPLE1
;

SELECT ID
     , EVENTTIME
FROM SAMPLE2
UNION ALL
SELECT ID
     , EVENTTIME
FROM @TEMP

이런 형식의 쿼리였음.

근데 여기서 SAMPLE1에 EVENTTIME컬럼이 DATETIME 같은 날짜형식일 경우 저런 에러가 나서

CONVERT를 해줘야한다.

DECLARE @TEMP TABLE
(
    ID VARCHAR(40)
    , EVENTTIME VARCHAR(MAX)
)

INSERT INTO @TEMP
SELECT ID
     , CONVERT(CHAR(19), EVENTTIME, 120)
FROM SAMPLE1
;

SELECT ID
     , EVENTTIME
FROM SAMPLE2
UNION ALL
SELECT ID
     , EVENTTIME
FROM @TEMP

PRG, Redirect, Forward

yu.dev — Wed, 21 May 2025 23:06:29 +0900

강의 듣다가 오 이거 학원에서도 배웠는데 해서 정리 겸 작성

학원 다닌지도 벌써 3년이네...;;

홈페이지가 있으면 form을 작성해서 저장 버튼을 눌러 내가 작성한 데이터를 저장하는 기능이 반드시 있을 것이다.

쇼핑몰만 하더라도 Q&A 글을 작성하고 저장한다.

PRG가 아닌 경우

PRG를 안 쓴다면

Q&A글을 남길 때 저장을 누르고 해당 Q&A로 이동하게 되더라고 주소창을 본다면 '/add'로 남아있을 것이다.

이 상태에서 새로고침을 누르면 다시 입력했던 내용이 똑같이 또 저장되고, 또 저장되고, ... 반복...

이러한 상황을 피하기 위해 쓰는 것이 PRG(POST Redirect GET)

PRG인 경우

이것이 PRG 형태

다른 점이 있다면 Controller에서 글을 저장하고 서버에서 Redirect를 해준다는 것.

Redirect를 해주면 서버에서 클라이언트에게 다른 URL로 이동하라고 응답을 보내 주소창을 보면 다른 주소로 바뀌게 된다.

이렇게 되면 다른 URL로 페이지가 이동 되었기때문에 새로고침을 누르더라도 바뀐 URL로 호출하기 때문에 다시 저장이 되는 등 같은 문제가 없어짐!

되도록이면 개발할 때 저장/수정 하면 PRG패턴을 쓰도록 하자

View를 이동하는데는 Forward도 있는데 Forward와 Redirect를 비교하자면

Redirect vs Forward

	Redirect	Forward
방식	클라이언트에게 새 요청 지시(302 응답)	서버 내부에서 요청을 다른 리소스로 전달
URL 변경	O (주소창 바뀜)	X (주소창 그대로)
요청 객체 유지	X (원래 POST 요청 데이터는 사라짐, 새 요청은 GET으로 시작)	O (객체가 유지되기 때문에 새로고침을 하면 Q&A 글 작성한게 또 저장됨)
사용 목적	페이지 이동, 새 요청 유도	내부 자원 연결