CORS 환경에서 Session 이용하기

 

본 글은 수업시간에 프로젝트를 진행하는 교육생에게 도움을 주기 위해서 작성되었습니다.

 

 

글에 담긴 내용

• CORS 환경에서 Session 활용
• Front 앱 데이터 Context 활용

 

사용 기술

• React.js + Node.js(Express) + Axios

 

CORS 환경에서 Session 이용 설정

 

CORS(Cross-Origin Resource Sharing) 환경에서 Session 이 유지되기 위해서는 Back-End 설정 및 Front 설정이 되어야 한다.

 

back-end 설정

 

app.use(cors())

 

CORS 를 위해서는 위처럼 cors 모듈만 등록해도 정상적으로 서비스가 가능하다. 하지만 세션을 이용하기 위해서는 cors 를 등록하면서 추가적인 옵션이 설정되어야 한다.

 

app.use(cors({
  origin: "http://localhost:5173",//front 
  credentials: true,
}))

 

 

Front

Front 에서 서버의 session.id 를 cookie 로 유지하게 되는데 이 cookie 데이터가 CORS 환경에서 전달되게 하려면 ajax 통신시에 withCredentials: true 가 설정되어야 한다.

 

await axios.get('http://localhost:8000/test1/member',{ withCredentials: true })

 

Session 활용

 

CORS 환경에서 cookie 로 저장되는 session.id 만 잘 전달되면 세션 활용은 cookie-parser, express-session 모듈을 이용해 쉽게 작성이 가능하다.

 

cookie-parser, express-session 등록

 

const cookieParser = require('cookie-parser')
const session = require('express-session')
…………………
app.use(cookieParser('secret@1234'))
app.use(session({
  secret: 'secret@1234',
  resave: false,
  saveUninitialized: true,
  cookie: {
    httpOnly: true,
  }
}))

 

 

세션에 데이터 등록

 

req.session.loginId = resp.data.email

 

 

req.session.xxx = yyy

xxx 는 세션에 등록하고자 하는 데이터의 식별자이며 yyy 는 데이터이다.

 

req.session.loginId

 

 

세션 등록 식별자를 이용해 세션에 등록된 데이터를 획득해서 사용

 

Context API 활용, 데이터 이용

 

Redux 등을 이용해 조금 더 효율적으로 앱의 데이터를 컴포넌트들에게 공개할 수 있겠지만 여기서는 간단하게 Context API 활용방법을 이용한다.

 

Provider 준비

 

앱에서 유지하고자 하는 데이터가 선언되며 그 데이터를 변경할 수 있는 함수를 가지는 Provider 를 아래처럼 준비한다.

 

import React, { useState } from 'react'

const UserContext = React.createContext(null)

export const UserProvider = (props) => {
  const [user, setUser] = useState({email:'', name: ''})

  const addUser = (user) => {
    setUser(user)
  }

  const deleteUser = () => {
    setUser({id:'', name: ''})
  }

  const values = {
    state: {user},
    actions: {addUser, deleteUser}
  }
  return <UserContext.Provider value={values}>{props.children}</UserContext.Provider>
}

export default UserContext

 

 

Provider 등록

 

<UserProvider>
        <Header />
        …………………
</UserProvider>

 

준비한 Provider 를 위처럼 등록하면 하위 컴포넌트에서 Provider 의 Context 를 활용할 수 있다.

 

Context 이용

 

Context 는 useContext() 훅을 이용한다.

 

 

const value = useContext(UserContext)
----------------
let user = value.state.user
…………………….
value.actions.addUser(resp.data.data)