Ruby on Rails 및 React로 CRUD SPA 구축

내 React 프로젝트를 위해 Eat Here React App이라는 간단한 CRUD SPA를 만들었습니다. 이 앱을 통해 사용자는 전 세계에서 가장 특이한 레스토랑을 탐색할 수 있습니다. 모든 레스토랑을 읽는 것 외에도 사용자는 새로운 레스토랑을 추가하거나 그들 중 하나에 좋아요를 누르고 리뷰를 작성할 수 있습니다. 이름 기능으로 검색하는 것도 응용 프로그램에서 구현됩니다. 다음은 demo 비디오입니다.

Rails로 RESTful JSON API 구축

이 프로젝트에서는 백엔드 API 구성을 위해 Ruby on Rails 프레임워크를 계속 활용했습니다. 나는 두 개의 관련 모델을 설정했습니다: has_many 리뷰하는 식당 모델, belongs_to 식당에 대한 리뷰. 또한 데이터 유효성 검사를 위한 몇 가지before_validation 메서드를 정의했습니다. 다음은 Rails API를 단계별로 구축하는 기본 흐름입니다.

1단계 - 아래 명령줄을 사용하여 새 Rails API를 만듭니다. 끝에 API 플래그를 추가하는 것을 잊지 마십시오.rails new eat-here-rails-backend --api
2단계 - 두 모델의 속성 및 데이터 유형을 지정하고 rails g 리소스 명령을 활용하여 해당 모델, 컨트롤러, 데이터베이스 마이그레이션 테이블 및 경로를 생성합니다.rails g resource Restaurant name country image gif description addressrails g resource Review nickname comment restaurant:belongs_to
3단계 - 색인 정의, 표시, 생성, 업데이트 및 제거 작업을 수행하고 관련 컨트롤러 작업에서 데이터를 직렬화합니다.

4단계 - 모델 파일에서 필요한 유효성 검사 및 도우미 메서드를 정의합니다.

5단계 - CORS gem을 설치하고 CORS 파일을 활성화하여 서버가 허용할 출처를 지정할 수 있도록 하는 것을 잊지 마십시오.

다음은 GitHub의 백엔드repo입니다.

후크를 사용하여 React로 프런트엔드 앱 빌드

이것이 나의 첫 번째 React 프로젝트였기 때문에 코딩하기 전에 몇 가지 핵심 개념을 이해하는 데 많은 시간을 보냈습니다. 예를 들어 props & state, React 수명 주기, 가상 DOM, 제어되는 구성 요소, Redux 및 React-Redux 간의 차이입니다. 코드를 더 잘 구조화하고 리팩터링하는 데 도움이 되었습니다.

코딩 과정에서 가장 어려웠던 부분은 리액트 리덕스를 활용하여 스토어에서 상태를 읽는 방법과 액션을 디스패치하여 상태를 업데이트하는 방법이었습니다. react redux를 사용하는 기본 흐름은 다음과 같습니다. (1) 액션을 구축합니다. (2) 리듀서에 작업을 전달합니다. (3) 감속기는 상태를 반환합니다.

1. 스토어 생성

필요한 모든 종속성의 기본 설치를 완료할 때 첫 번째 단계는 전역 상태를 설정하는 것입니다. redux에서 제공하는 createStore 메서드를 호출하면 저장소 개체가 반환됩니다. 이 애플리케이션에 비동기 요청도 통합했기 때문에 redux thunk를 미들웨어로 사용하여 모든 비동기 작업을 처리했습니다.

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';


const store = createStore(rootReducer, compose(applyMiddleware(thunk), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()))

export default store

2. 감속기 정의

리듀서는 이전 상태를 첫 번째 인수로, 액션 객체를 두 번째 인수로 받아들이고 새로 업데이트된 상태를 반환하는 함수입니다. 감속기는 상태를 직접 변경하지 않습니다. 이전 상태를 대체하기 위해 완전히 새로운 상태를 반환합니다. 리듀서가 반환하는 것이 무엇이든 현재 상태가 됩니다. 기본 작업은 초기 상태를 반환합니다. 애플리케이션에 두 개의 리듀서를 생성했기 때문에 combineReducers() 함수를 사용하여 각 리듀서에 서로 다른 상태를 위임했습니다.

import { combineReducers } from 'redux';
import restaurantsReducer from './restaurantsReducer';
import reviewsReducer from  './reviewsReducer';

const rootReducer = combineReducers({
    restaurants: restaurantsReducer,
    reviews: reviewsReducer
})

export default rootReducer

아래에는 myrestaurantReducer의 코드 스니펫이 포함되어 있습니다.

const initState = {
    restaurants: [], 
    loading: false 
}

const restaurantsReducer = (state = initState, action) => {
    switch(action.type){
        case "LOADING":
            return {
                ...state,
                loading: true
            }

        case "ADD_RESTAURANT":
            return {
                ...state,
                restaurants: [...state.restaurants, action.payload]
            }

        case "FETCH_RESTAURANTS":
            return {
                ...state,
                restaurants: [...state.restaurants, ...action.payload],
                loading: false
            }

        case "UPDATE_RESTAURANT":
            const idx = state.restaurants.findIndex((restaurant) => restaurant.id === action.payload.id)
            const restaurant = action.payload
                    return {
                        ...state,
                        restaurants: [...state.restaurants.slice(0, idx), restaurant, ...state.restaurants.slice(idx + 1) ]
                    }

        default:
            return state    
    } 
}

export default restaurantsReducer

3. 모든 작업 정의

액션은 유형과 페이로드가 있는 객체입니다. 리듀서에 보내려는 객체/데이터로 페이로드를 상상할 수 있습니다. 또한 액션 생성자에서 가져오기 요청을 만들었기 때문에 썽크 미들웨어를 사용하여 액션 생성자로부터 함수를 반환하고 반환된 함수에 대한 인수로 dispatch를 전달할 수 있었습니다.

const baseUrl = "http://localhost:5000/restaurants"

export const addRestaurant = (restaurantObj) => {
    return {
        type: "ADD_RESTAURANT",
        payload: restaurantObj
    }
}

export const fetchRestaurants = () => {
     return (dispatch) => {
         dispatch({type: "LOADING"})

         fetch(baseUrl)
           .then(resp => resp.json())
           .then(data => {
               dispatch({
                   type: "FETCH_RESTAURANTS",
                   payload: data
               })
           })
     }     
}

export const createRestaurant = (restaurant) => {
    return (dispatch) => {
    const configObj = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body:JSON.stringify({restaurant})
    }
        fetch(baseUrl, configObj)
          .then(resp => resp.json())
          .then(restaurant => dispatch(addRestaurant(restaurant)))
    }
}

export const updateRestaurant = (newObject) => {
    return {
        type: "UPDATE_RESTAURANT",
        payload: newObject
    }
}

4. 관련 구성 요소의 상태 읽기 및 업데이트

이 프로젝트에서 반응 후크를 사용했기 때문에 저장소에 연결하기 위해 useSelector 후크를 가져오고 구성 요소의 상태를 읽고 업데이트하기 위해 useDispatch 및 useEffect 후크를 가져왔습니다.

GitHub에서 내 프런트엔드repo를 자유롭게 확인하세요.

추가 생각

추가 개발을 위해 이 프로젝트에 사용자 인증 시스템을 추가하고 싶습니다. 문제는 Redux와 Rails 모두에서 jwt 인증을 구현하는 방법입니다. 이 항목article에서 이 주제를 연구하고 코딩하기 시작합니다.