[채팅 기능 구현하기] 원어민 표현 stand up "서버를 구동하라 라는 표현"

2개 창 열어서 
backend: npm start
frontend: npm run dev

 

 

put it on VS Code in that project stand up a node.js server라는 영어문장에서 stand up이라는 뜻이 뭐야? 

"Stand up"은 영어에서 프로젝트나 서비스를 시작하거나 가동하는 것을 나타내는 구어적인 표현입니다. "Put it on VS Code in that project stand up a Node.js server"라는 문장에서 "stand up a Node.js server"는 Node.js 서버를 시작하거나 가동하라는 의미입니다. 즉, 해당 프로젝트에서 Node.js 서버를 실행하도록 하는 것을 나타내는 표현입니다.
 
 
to open up this folder on vs code you can do 

code space period
code . 
이렇게 검색어 치면 된다. 
 
 
to initialize a node. js project run "npm init"
아 이말이구나 
 
now within backend we have a package.json which will describe our node.js server with metadata
 
메타데이터(Metadata)
메타데이터(Metadata)는 일반적으로 데이터에 관한 구조화된 데이터
 
 
What we need to do is install some npm dependencies to make this node.js server work. 
 
so npm install express which is an HTTP framwork for running node servers cores so that we can call this server from antwhere else on the internet and axios so that we can make API calls to chatengine.io more on that later. 
 
 
 
터미널에 그러면 npm install express cors axios 
 
the last thing that we'll need to install is something called nodemon
which runs our node.js server in development mode so run npm install dash dash save Dash Dev and then nodemon
 
터미널에 그러면  npm install --save-dev nodemon
 
 "start": "nodemon index.js" 이 부분처럼 수정 

{

  "name": "backend",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "start": "nodemon index.js"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "axios": "^1.5.1",

    "cors": "^2.8.5",

    "express": "^4.18.2"

  },

  "devDependencies": {

    "nodemon": "^3.0.1"

  }

}

 
we'll get a copy and paste some boilerplate node code right now
 
request.rest file 만들고
recommend installing the rest client 다운 
 
 

 

 
채팅 방 구현하기 프로젝트 영상: https://www.youtube.com/watch?v=Fzv-rgwcFKk

 
참고 블로그: https://blog.chatengine.io/fullstack-chat/nodejs-reactjs

Build a scalable chat app with ExpressJS, ReactJS, and ChatEngine.io

 
 
https://chatengine.io/

https://chatengine.io/

 
 
all users in our chat engine project can chat with one another through their apis and platform
 
 

const express = require("express");

const cors = require("cors");

const app = express();

app.use(express.json());

app.use(cors({ origin: true }));

app.post("/authenticate", async (req, res) => {

  const { username } = req.body;

  431728da-1d64-49c4-aa1f-7c5e717b8689

  return res.json({ username: username, secret: "sha256..." });

});

app.listen(3001);

사이트로 정보 얻을 수 있다.
 
 
Chat Engine
 

what we're going to do it put this API call in a try catch block 

"call in"은 특정 상황에서 특별한 조치를 취하거나 처리하기 위해 어떤 것을 호출하거나 사용하는 것을 나타내는 표현입니다. 여기서 "call in"은 "put this API call in a try-catch block"이라는 문장에서 사용되고 있는데, 이것은 "이 API 호출을 try-catch 블록에 넣다"라고 번역할 수 있습니다.
 

 

axios 개념에 대해서 설명해줘.. axios는 외부랑 연결하는 통로를 만들어주는거야?

네, 맞습니다. Axios는 외부 서버 또는 API와 통신하기 위한 JavaScript 라이브러리로, 주로 HTTP 요청을 보내고 응답을 받는 데 사용됩니다. Axios는 다음과 같은 주요 역할을 수행합니다:

HTTP 요청 보내기: Axios는 다양한 HTTP 요청 메서드(GET, POST, PUT, DELETE 등)를 사용하여 외부 서버로 요청을 보내는 데 도움을 줍니다. 이를 통해 데이터를 가져오거나 업데이트하고, 서버와 상호작용할 수 있습니다.

비동기 작업 처리: Axios는 기본적으로 비동기적으로 요청을 처리하며, Promises 또는 async/await를 사용하여 비동기 작업을 쉽게 처리할 수 있습니다. 이것은 웹 애플리케이션에서 서버와의 통신을 기다리지 않고 계속 작업을 수행할 수 있도록 해줍니다.

요청과 응답 관리: Axios는 요청과 응답을 관리하고, 요청 헤더, 요청 본문, 응답 상태 및 데이터를 다루는 데 도움을 줍니다.

오류 처리: Axios는 오류 처리를 위한 기능도 제공합니다. 서버에서 오류 응답을 수신하거나 네트워크 문제로 인한 오류를 처리할 수 있습니다.

요청 취소: Axios는 요청을 취소하는 기능도 제공합니다. 특히 사용자가 페이지를 이동하거나 다른 동작을 수행하는 동안 요청을 취소할 수 있는 유용한 기능입니다.

헤더 설정: Axios를 사용하여 요청 헤더를 설정하고 사용자 인증 정보 또는 사용자 정의 헤더를 추가할 수 있습니다.

요청 중단 및 타임아웃 설정: Axios를 사용하여 요청을 중단하거나 요청에 대한 타임아웃을 설정할 수 있습니다.

Axios는 웹 개발에서 매우 일반적으로 사용되며, 웹 애플리케이션에서 외부 서버 또는 API와의 통신을 단순화하고 효율적으로 처리하기 위한 강력한 도구입니다. 이를 통해 데이터를 가져오고 업데이트하며 웹 애플리케이션과 외부 서비스 간에 데이터를 교환할 수 있습니다.
 
 
아니요, post 함수는 JavaScript의 내장 함수가 아닙니다. 이것은 Express.js와 같은 웹 프레임워크에서 제공하는 함수입니다.

Express.js는 Node.js 기반의 웹 프레임워크로, HTTP 요청을 처리하고 웹 애플리케이션을 구축하는 데 사용됩니다. app.post()는 Express.js에서 제공하는 메서드로, 웹 애플리케이션에서 HTTP POST 요청을 처리하는 핸들러 함수를 정의하는 데 사용됩니다.

req와 res는 Express.js에서 정의된 요청 객체와 응답 객체입니다. 이러한 객체를 사용하여 클라이언트에서 서버로 데이터를 보내고, 서버에서 클라이언트로 응답을 보내는 데 사용됩니다.

즉, app.post("/authenticate", async (req, res) => { ... });는 Express.js 애플리케이션에서 "/authenticate" 경로로 오는 HTTP POST 요청을 처리하는 핸들러를 정의하는 것이며, 이 핸들러는 요청 객체(req)와 응답 객체(res)를 사용하여 클라이언트와 서버 간의 상호작용을 수행합니다.
 
we also need to set some headers to authenticate this API call just the private key (객체안에 또 객체)
 

const express = require("express");

const cors = require("cors");

const app = express();

app.use(express.json());

app.use(cors({ origin: true }));

app.post("/authenticate", async (req, res) => {

  const { username } = req.body;

  try {

    const r = await axios.put(

        'https://api.chatengine.io/users/',

        {username: username, secret: username, first_name: username},

        {headers: {"private-key":  "431728da-1d64-49c4-aa1f-7c5e717b8689"}}

    )

    return res.status.status(r.status).json(r.data);

  } catch (e) {

    return res.status.status(e.response.status).json(e.response.data);

  }

});

app.listen(3001);

 

 

{

  "name": "backend",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "start": "nodemon index.js"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "axios": "^1.5.1",

    "cors": "^2.8.5",

    "express": "^4.18.2"

  },

  "devDependencies": {

    "nodemon": "^3.0.1"

  }

}

 

응답 형식 확인: 서버에서 반환한 응답의 형식을 확인하세요. axios는 HTTP 응답을 사용하여 응답 객체를 생성하는데, 이 응답 객체는 정의된 status 속성을 가져야 합니다. 서버에서 응답 객체를 올바르게 구성하고 status 속성을 포함하도록 수정해야 할 수 있습니다.

 
계속 에러파티여서 한시간을 거의 날렸는데 그 이유가 axios import 안해서 그런것;;
 
에러 내용:

D:\personal\nodejs-reactjs-chat\backend\index.js:19
    return res.status(e.response.status).json(e.response.data);
                                 ^

TypeError: Cannot read properties of undefined (reading 'status')
    at D:\personal\nodejs-reactjs-chat\backend\index.js:19:34
    at Layer.handle [as handle_request] (D:\personal\nodejs-reactjs-chat\backend\node_modules\express\lib\router\layer.js:95:5)
    at next (D:\personal\nodejs-reactjs-chat\backend\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (D:\personal\nodejs-reactjs-chat\backend\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle [as handle_request] (D:\personal\nodejs-reactjs-chat\backend\node_modules\express\lib\router\layer.js:95:5)
    at D:\personal\nodejs-reactjs-chat\backend\node_modules\express\lib\router\index.js:284:15
    at Function.process_params (D:\personal\nodejs-reactjs-chat\backend\node_modules\express\lib\router\index.js:346:12)    at next (D:\personal\nodejs-reactjs-chat\backend\node_modules\express\lib\router\index.js:280:10)
    at cors (D:\personal\nodejs-reactjs-chat\backend\node_modules\cors\lib\index.js:188:7)
    at D:\personal\nodejs-reactjs-chat\backend\node_modules\cors\lib\index.js:224:17
[nodemon] app crashed - waiting for file changes before starting...



const axios = require('axios');
 

 
 

const express = require("express");

const cors = require("cors");

const axios = require('axios');

const app = express();

app.use(express.json());

app.use(cors({ origin: true }));

app.post("/authenticate", async (req, res) => {

  const { username } = req.body;

  try {

    const r = await axios.put(

        'https://api.chatengine.io/users/',

        {username: username, secret: username, first_name: username},

        {headers: {"private-key": "431728da-1d64-49c4-aa1f-7c5e717b8689"}}

    )

    return res.status(r.status).json(r.data);

  } catch (e) {

    return res.status(e.response.status).json(e.response.data);

  }

});

app.listen(3001);

 
axios.put는 Axios라는 JavaScript 라이브러리를 사용하여 HTTP PUT 요청을 보내는 함수입니다. Axios는 웹 요청을 간편하게 만들어주는 라이브러리로, 서버와의 통신에 사용됩니다.
여기서는 axios.put 함수를 사용하여 PUT 메서드로 API 엔드포인트인 'https://api.chatengine.io/users/'에 데이터를 전송하는 예제 코드입니다. 코드의 각 부분을 설명하겠습니다:

1. axios.put: Axios 라이브러리의 put 메서드를 호출합니다. 이 메서드는 PUT HTTP 요청을 보내는 역할을 합니다.
2. 첫 번째 매개변수 'https://api.chatengine.io/users/'는 PUT 요청을 보낼 URL입니다. 이 URL은 ChatEngine API의 'users' 엔드포인트로 이동하게 됩니다.
3. 두 번째 매개변수는 PUT 요청 본문 데이터를 나타냅니다. 여기서는 객체 형태로 표현되며, {username: username, secret: username, first_name: username}와 같은 데이터가 전송됩니다. 이 데이터는 API 서버로 전송되고, 서버에서는 이 데이터를 처리합니다.
4. 세 번째 매개변수 {headers: {"private-key": "431728da-1d64-49c4-aa1f-7c5e717b8689"}는 요청 헤더에 추가할 헤더 정보를 정의합니다. 여기서는 "private-key"라는 헤더를 사용하여 API 키 값을 전달하고 있습니다. 이 키는 API 서버에서 요청의 인증 및 권한 확인에 사용됩니다.

요약하면, 이 코드는 Axios를 사용하여 'https://api.chatengine.io/users/'로 PUT 요청을 보내고, 요청 본문에 사용자 정보를 담아 API 서버에 데이터를 업데이트하려는 것으로 보입니다. 이때 "private-key" 헤더를 사용하여 인증을 수행합니다.

 
 
백엔드 끝 
 
터미널 2개 연다는 뜻
 

프론트엔드 시작 
 

 
 

와 front, backend 둘다 node.js 서버 각각 따로 설치하네?
 

 
in main.js we actually want to disable react strict mode
because it doesn't play well with websockets which are needed for chat
apps and we'll also remove index.css and let's remove that file actually from the project
 
npm run dev 으로 실행시키라는데?
 
노드가 각각 있어도 frontend 들어간 후 npm run dev
 

 
 
let's add the API call to our authentication page so that when a user
completes that form they actually get logged into our node.js server
 
what we're going to have to do is stop
running the front end project in the npm
install axios
and what we'll need to do is import this
dependency at the top of the auth page
file
 
Vite 개발 서버를 터미널에서 멈추려면 보통 Ctrl + C (혹은 macOS에서는 Command + C)를 누르면 됩니다. 이 명령은 현재 실행 중인 프로세스를 종료하는 일반적인 방법입니다. 따라서 개발 서버를 종료하려면 터미널에서 해당 명령을 실행하면 됩니다.
 
AuthPage.js에 이걸 import
 

import axios from 'axios'

 
once we actually submit this form what
we need to do is make the axios call
a post request to our node.js server so
http
localhost
3001 slash authenticate
and of course we need to put in the
correct data for our request which in
this case is username
colon value
once that's done
we can trigger dot then because it's a
promise
and we can call that on auth callback
with the response.data
as our object and we want to override
the secret with the value that we passed
in
so Secret
and once we do that we're done now if
any error occurs
let's just take the error and console
log it for now
and we're done
so let's rerun this
front end project
 
제출 버튼을 실제로 누르면 우리가 해야 할 일은 Axios를 사용하여 Node.js 서버로 POST 요청을 보내는 것입니다. 이 요청은 "http://localhost:3001/authenticate" 주소로 가야 합니다. 물론 요청에 올바른 데이터를 포함해야 하는데, 이 경우에는 "username: [값]" 형식의 데이터를 사용해야 합니다.
요청이 완료되면, 이것은 Promise이기 때문에 .then()을 사용할 수 있습니다. .then() 안에서는 응답 데이터를 가지고 "authCallback"을 호출해야 합니다. 이때 "authCallback"은 응답 데이터의 객체를 받아야 하며, "secret" 값을 전달한 값으로 덮어씌워야 합니다.
만약 어떤 오류가 발생하면, 그 오류를 콘솔에 출력하도록 하고, 이러한 과정이 끝나게 됩니다. 이제 이 프론트엔드 프로젝트를 다시 실행하면 됩니다.
 

import axios from 'axios'

const AuthPage = (props) => {

    const onSubmit = (e) => {

      e.preventDefault();

      const { value } = e.target[0];

      axios.post('http://localhost:3001/authenticate',

      {username:value}

      )

      .then(r => props.onAuth({...r.data, secret: value}))

      .catch(e=> console.log('error', e))

      props.onAuth({ username: value, secret: value });

    };

 

    return (

      <div className="background">

        <form onSubmit={onSubmit} className="form-card">

          <div className="form-title">Welcome 👋</div>

 

          <div className="form-subtitle">Set a username to get started</div>

 

          <div className="auth">

            <div className="auth-label">Username</div>

            <input className="auth-input" name="username" />

            <button className="auth-button" type="submit">

              Enter

            </button>

          </div>

        </form>

      </div>

    );

  };

 

  export default AuthPage;

 
이 코드는 React 컴포넌트인 AuthPage에서 사용자가 어떤 행동을 취할 때 실행되는 함수인 onSubmit 함수를 정의합니다. 이 함수는 주로 폼(form)이 제출(submit)될 때 호출되며, 다음과 같은 작업을 수행합니다:

e.preventDefault();: 이 부분은 이벤트 객체 e를 사용하여 기본 폼 제출 동작을 막습니다. 기본 동작을 막지 않으면 페이지가 다시 로드됩니다.

const { value } = e.target[0];: 이 부분은 폼 요소의 값을 가져오는 방법입니다. e.target[0]은 폼의 첫 번째 요소(이 경우에는 입력(input) 필드)를 선택하고 그 값(value)를 가져옵니다.

axios.post('http://localhost:3001/authenticate', {username:value}): 이 부분은 Axios를 사용하여 POST 요청을 보내는 부분입니다. 이 요청은 "http://localhost:3001/authenticate" 주소로 보내지며, 요청 바디(body)에는 객체 { username: value }가 포함됩니다. 이렇게 서버로 데이터를 전송합니다.

.then(r => props.onAuth({...r.data, secret: value})): 이 부분은 Axios가 서버 응답을 받았을 때 실행되는 코드입니다. 응답 데이터 r.data를 가져와서 props.onAuth 함수를 호출합니다. 그리고 응답 데이터에 추가로 secret 값을 포함하여 onAuth 함수에 전달합니다. 이것은 사용자를 인증하고 응답 데이터를 처리하는 부분입니다.

.catch(e => console.log('error', e)): 이 부분은 만약 요청이 실패할 경우 실행되는 코드입니다. 에러 메시지를 콘솔에 출력합니다.

props.onAuth({ username: value, secret: value });: 이 부분은 Axios 요청 이후에, 응답 처리와 상관없이 실행됩니다. 사용자 데이터와 secret 값을 포함한 객체를 props.onAuth 함수에 전달합니다.

요약하면, 이 코드는 사용자가 폼을 제출할 때 서버로 데이터를 보내고, 서버에서 응답을 받으면 응답 데이터를 처리하고 사용자 정보를 업데이트합니다. 만약 에러가 발생하면 콘솔에 에러를 출력합니다.
 
const { value } = e.target[0];: 이 부분은 폼 요소의 값을 가져오는 방법입니다.  여기서 target이 뭐 어떤거야? 무조건 있는데 target 배열이 있는거야?


e.target은 이벤트 객체의 속성 중 하나로, 이 이벤트를 발생시킨 HTML 요소를 가리킵니다. 일반적으로 폼 제출(submit) 이벤트에서 이벤트 객체의 target은 폼 엘리먼트 자체를 가리킵니다. target은 항상 존재하며, 해당 이벤트와 연관된 HTML 엘리먼트를 참조합니다.

e.target[0]은 폼 내의 첫 번째(form's first) 요소를 선택하려는 것입니다. HTML 폼 요소들은 일반적으로 배열 형태로 저장되며, 각 요소는 폼 내에서 순서대로 번호가 매겨집니다. 예를 들어, 폼 내에서 첫 번째 요소는 0번 인덱스를 가지고 있습니다.

따라서 const { value } = e.target[0]; 코드는 폼의 첫 번째 입력(input) 요소의 값을 가져오는 것입니다. 이 코드는 e.target을 통해 폼을 참조하고, 그 폼 내에서 0번 인덱스에 해당하는 요소(일반적으로 첫 번째 입력 필드)의 값을 value 변수에 할당합니다.
 
const { value } = e.target[0]; 코드는 JavaScript 코드로, 웹 페이지의 소스 코드에서는 직접 찾을 수 없습니다. 이 코드는 JavaScript 이벤트 핸들러 내에서 실행됩니다. 따라서 웹 페이지의 HTML 소스 코드에서는 이 코드를 직접 검색할 수 없습니다.

이 코드는 JavaScript 파일이나 <script> 태그 내에 포함되어 있어야 하며, 이벤트 핸들러 함수 내에서 실행됩니다. 이벤트 핸들러는 주로 HTML 요소의 이벤트(예: 폼 제출, 클릭 등)과 관련된 작업을 처리하는 JavaScript 코드를 담고 있습니다.

따라서 코드를 찾기 위해서는 해당 이벤트 핸들러가 어떤 이벤트와 HTML 요소와 관련이 있는지를 알고, 그에 따라 해당 요소를 검색해야 합니다. 이벤트 핸들러의 정확한 위치 및 어떤 이벤트에 의해 호출되는지에 따라서 소스 코드를 찾아낼 수 있을 것입니다.

https://www.npmjs.com/package/react-chat-engine-advanced?activeTab=readme

react-chat-engine-advanced

npm i react-chat-engine-advanced
 
설명이 다 있어 메소드에 관한거
 

 
<div style={{height: '100vh'}}>} 문법은 React에서 CSS 스타일을 지정하는 방식입니다. 중괄호를 두 번 사용하는 이유는 JavaScript 객체를 나타내기 위한 것입니다.
React에서 스타일을 지정할 때, 스타일 객체를 사용해야 합니다. 따라서 중괄호를 사용하여 스타일 객체를 생성하고, 그 안에 스타일 속성과 값을 설정합니다. 중괄호를 두 번 사용하는 이유는 첫 번째 중괄호가 JSX의 중괄호이고, 두 번째 중괄호가 JavaScript 객체를 생성하기 위한 중괄호입니다.
예를 들어, <div style={{height: '100vh'}}>}에서 첫 번째 중괄호는 JSX 내에서 JavaScript 코드를 넣기 위한 것이고, 두 번째 중괄호는 스타일 객체를 생성하고 그 안에 height 스타일 속성을 설정합니다.
<div style={height: '100vh'}>와 같이 중괄호를 한 번만 사용하면 JavaScript 객체가 아닌 일반 문자열로 간주되기 때문에 오류가 발생합니다. React는 스타일을 JavaScript 객체로 받아들이기 때문에 중괄호를 두 번 사용하여 스타일 객체를 만들어야 합니다.


중괄호를 두 번 사용하여 스타일을 설정하는 것이 React의 스타일 적용 규칙입니다

 

 

import {MultiChatSocket, MultiChatWindow, useMultiChatLogic} from 'react-chat-engine-advanced'

const ChatsPage = (props) => {

    const chatProps = useMultiChatLogic(

'e06e4eca-a0e7-4f23-b095-feeab9ba6a42', props.user.username, props.user.secret);

    return (

        <div style={{height: '100vh'}}>

            <MultiChatSocket {...chatProps}/>

            <MultiChatWindow {...chatProps} style={{height: '100%'}}/>

        </div>

    )

}

export default ChatsPage;

 

100vh는 "Viewport Height"의 약어로, 현재 보이는 브라우저 창의 높이를 의미합니다. 브라우저 창의 높이에 상대적인 크기를 설정할 때 주로 사용됩니다.

예를 들어, height: 100vh; 스타일은 현재 보이는 브라우저 창의 높이와 동일한 높이를 가진 요소를 만듭니다. 이것은 반응형 디자인에서 매우 유용하게 사용됩니다. 페이지나 컴포넌트가 화면에 꽉 차게 하거나, 뷰포트 높이에 상대적으로 크기를 조정하려는 경우에 자주 사용됩니다.

 

App.jsx

 

import { useState } from "react";

import "./App.css";

import AuthPage from "./AuthPage";

import ChatsPage from "./ChatsPage";

function App() {

  const [user, setUser] = useState(undefined);

  if (!user) {

    return <AuthPage onAuth={(user) => setUser(user)} />;

  } else {

    return <ChatsPage user={user} />;

  }

}

export default App;

 

정확한 지적을 주셔서 감사합니다. onAuth는 정확하게 함수가 아니라, AuthPage 컴포넌트에 전달되는 props(property)입니다. AuthPage 컴포넌트는 onAuth라는 props를 받아서 사용자가 인증을 완료하면 해당 함수를 호출합니다.

따라서 onAuth는 AuthPage 컴포넌트에서 정의된 것이 아니라, App 컴포넌트에서 AuthPage를 렌더링할 때 이를 props로 전달한 것입니다. 이렇게 함수를 props로 전달하여 자식 컴포넌트에서 사용할 수 있습니다.

조건문을 사용하여 user 상태가 undefined인지 확인합니다. 만약 user가 undefined라면, 사용자가 아직 인증되지 않았으므로 <AuthPage> 컴포넌트가 렌더링됩니다. <AuthPage> 컴포넌트에는 onAuth props가 전달되는데, 이 props는 사용자가 인증을 완료하면 setUser 함수를 호출하여 사용자 상태를 업데이트한다고 했잖아 그러면 App.jsx 파일에서 만드는거야? '

올바르게 이해하셨습니다. onAuth 함수와 setUser 함수는 App.jsx 파일 내에서 정의되어야 합니다. 이러한 함수들을 정의하는 위치는 해당 파일 내에 있어야 합니다. 여기에서 onAuth 함수는 사용자가 인증을 완료할 때 호출되고, 그 결과로 setUser 함수를 사용하여 사용자 상태를 업데이트합니다.

onAuth 함수 및 setUser 함수는 App.jsx 파일 내에서 정의되거나, 필요한 경우 해당 파일 내의 다른 컴포넌트에서 가져와 사용할 수 있습니다. 보통 onAuth 함수는 사용자 인증 프로세스를 관리하고 사용자 데이터를 설정하며, setUser 함수는 이 데이터를 user 상태에 저장하는 데 사용됩니다.

 

cors 모듈

 

CORS (Cross-Origin Resource Sharing) 모듈은 웹 애플리케이션의 보안 정책을 적용하며, 웹 페이지나 애플리케이션에서 다른 도메인의 리소스에 접근할 수 있는 권한을 관리하는 중요한 보안 기능을 제공합니다. CORS 모듈은 주로 다음과 같은 역할을 합니다:

다중 도메인 간 요청 처리 (Cross-Origin Requests Handling): 웹 브라우저 보안 정책으로 인해, 브라우저에서는 같은 출처 (Same-Origin) 정책을 따릅니다. 이것은 웹 페이지가 다른 도메인에서 호스팅된 리소스에 직접적으로 접근하는 것을 제한합니다. CORS 모듈은 이 보안 정책을 우회하고 다른 도메인의 API 또는 리소스에 대한 요청을 처리할 수 있도록 해줍니다.

요청 헤더 처리 (Request Header Handling): CORS를 사용하면 요청 헤더에 특정 권한을 부여할 수 있습니다. 예를 들어, 인증 정보를 포함하는 요청, 특정 헤더를 사용하는 요청 등을 처리할 수 있습니다.

응답 헤더 설정 (Response Header Configuration): CORS 모듈은 서버에서 클라이언트로 보내는 응답 헤더를 설정할 수 있습니다. 이 헤더에는 요청을 허용하는 도메인, 허용된 메소드, 헤더 등이 포함됩니다.

사전 요청 처리 (Preflight Requests Handling): 브라우저는 실제 요청을 보내기 전에 사전 요청을 수행합니다. 이 사전 요청을 처리하여 실제 요청을 수락하거나 거부할 수 있습니다.

CORS 모듈은 주로 웹 API 서버에서 사용되며, 클라이언트 애플리케이션이 다른 도메인의 서버로 요청을 보낼 때 필요합니다. 보안 정책을 준수하면서도 다른 도메인 간 통신을 가능하게 해주므로, 웹 애플리케이션의 보안을 유지하면서 외부 리소스와 상호 작용할 수 있게 됩니다.