자바스크립트 Redux Toolkit을 활용한 채용 공고 추천 시스템

21 Sep 2023

redux

redux-toolkit

채용 공고 추천 시스템은 많은 사람들이 구직 중인 상황에서 적절한 채용 공고를 추천해주는 시스템입니다. 이를 구현하기 위해 자바스크립트와 Redux Toolkit을 활용할 수 있습니다. Redux Toolkit은 Redux 애플리케이션을 쉽게 구축하고 관리하는 데 도움을 주는 라이브러리입니다.

Redux Toolkit의 기본 개념

Redux Toolkit은 Redux의 노해를 줄여주고 개발자들이 더 효율적으로 코드를 작성할 수 있도록 도와줍니다. 다음은 Redux Toolkit의 몇 가지 주요 개념입니다.

Slice: Redux Toolkit에서 Slice는 Redux의 기능 중 하나로, 액션과 리듀서를 묶어 다루기 쉽게 만들어줍니다. Slice를 사용하면 더 적은 코드로 액션과 리듀서를 작성할 수 있습니다.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment(state) {
      state++;
    },
    decrement(state) {
      state--;
    },
  },
});

const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

AsyncThunk: 비동기 액션을 쉽게 다루도록 도와주는 Redux Toolkit의 기능입니다. API 호출과 같은 비동기 작업을 처리하는 데 유용합니다.

import { createAsyncThunk } from '@reduxjs/toolkit';
import { getAllJobs } from '../api';

export const fetchJobs = createAsyncThunk('jobs/fetchJobs', async () => {
  const response = await getAllJobs();
  return response.data;
});

configureStore: Redux 애플리케이션을 구성하는 데 도움을 주는 Redux Toolkit의 함수입니다. createStore 및 applyMiddleware와 유사한 역할을 합니다.

import { configureStore } from '@reduxjs/toolkit';
import jobsReducer from './jobsSlice';

const store = configureStore({
  reducer: {
    jobs: jobsReducer,
  },
});

채용 공고 추천 시스템에 Redux Toolkit 적용하기

Redux Toolkit 설치하기

먼저 프로젝트에 Redux Toolkit을 설치합니다.

npm install @reduxjs/toolkit

Slice 정의하기

Slice를 사용하여 채용 공고를 추천하는 기능을 구현할 수 있습니다. 추천된 채용 공고를 상태로 관리하고, 액션과 리듀서를 작성합니다.

import { createSlice } from '@reduxjs/toolkit';

const jobsSlice = createSlice({
  name: 'jobs',
  initialState: [],
  reducers: {
    addRecommendation(state, action) {
      state.push(action.payload);
    },
    clearRecommendations(state) {
      state = [];
    },
  },
});

export const { addRecommendation, clearRecommendations } = jobsSlice.actions;
export default jobsSlice.reducer;

AsyncThunk로 API 호출 처리하기

API를 호출하여 추천할 채용 공고 목록을 가져오기 위해 AsyncThunk를 사용합니다.

import { createAsyncThunk } from '@reduxjs/toolkit';
import { getRecommendedJobs } from '../api';

export const fetchRecommendedJobs = createAsyncThunk('jobs/fetchRecommendedJobs', async () => {
  const response = await getRecommendedJobs();
  return response.data;
});

Store 설정하기

Redux Toolkit의 configureStore 함수를 사용하여 스토어를 구성합니다.

import { configureStore } from '@reduxjs/toolkit';
import jobsReducer from './jobsSlice';

const store = configureStore({
  reducer: {
    jobs: jobsReducer,
  },
});

export default store;

컴포넌트에서 Redux 사용하기

Redux 공급자를 설정하고 추천된 채용 공고를 가져오는 예시 코드입니다.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchRecommendedJobs, clearRecommendations } from './store/jobsSlice';

const JobRecommendations = () => {
  const recommendations = useSelector((state) => state.jobs);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchRecommendedJobs());

    return () => {
      dispatch(clearRecommendations());
    };
  }, [dispatch]);

  return (
    <div>
      <h1>추천 채용 공고</h1>
      {recommendations.map((job) => (
        <div key={job.id}>
          <h3>{job.title}</h3>
          <p>{job.company}</p>
        </div>
      ))}
    </div>
  );
};

export default JobRecommendations;

마무리

Redux Toolkit은 자바스크립트를 사용하여 채용 공고 추천 시스템을 구현하는 데 큰 도움을 줄 수 있습니다. Slice, AsyncThunk, configureStore 등의 기능을 활용하여 Redux 애플리케이션을 더 효율적으로 만들 수 있습니다. 이를 통해 개발자는 더 짧은 시간 안에 안정적이고 유지보수 가능한 코드를 작성할 수 있습니다.

#redux #redux-toolkit