프로젝트 개요

Flatiron School Bootcamp 커리큘럼의 Javascript 모듈에 대한 프로젝트 요구 사항을 충족하기 위해 새로운 단일 페이지 앱을 방금 마무리했습니다. 저는 Vanilla Javascript 프런트엔드에 JSON을 제공하기 위해 Rails API 백엔드가 있는 서평 애플리케이션을 만들었습니다.

백엔드

부트캠프의 대부분을 객체 지향 Ruby로 코딩한 후, Rails에서 API를 만드는 것은 꽤 즐거웠습니다. 새롭다고 느낀 것은 첫 번째 API 전용 Rails 앱을 만드는 것이었습니다. 나는 active_model_serializers gem, ActiveRecord 및 Rails 컨트롤러를 활용하여 프런트엔드에 데이터를 제공했습니다.

내 책 리소스의 예는 다음과 같습니다.

create_table "books", force: :cascade do |t|
    t.string "title"
    t.string "author"
    t.string "genre"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
end

프런트 엔드까지 데이터를 제공하는 데 가장 유연하게 사용할 수 있도록 직렬 변환기를 사용했습니다.

class BookSerializer < ActiveModel::Serializer
  attributes :id, :title, :author, :genre
  has_many :reviews
end

프런트엔드의 요청을 처리하기 위해 몇 가지 일반적인 편안한 컨트롤러 작업을 만들었지만 모든 데이터가 JSON을 통해 렌더링되고 있습니다.

class Api::V1::ReviewsController < ApplicationController
    before_action :set_review, only: [:show, :destroy]

        def index
            reviews = Review.all
            render json: @reviews
        end

        def show
            render json: @review
          end

        def create
            book = Book.find(params[:book_id])
            @review = book.reviews.build(review_params)

            if @review.save
                render json: @review, status: :created
            else
                render json: @review.errors, status: :unprocessable_entity
            end
        end


        def destroy
            @review.destroy
        end


        private

        def set_review
            @review = Review.find(params[:id])
        end

        def review_params
            params.require(:review).permit(:book_id, :body)
        end
    end

프런트엔드

이 앱의 프런트엔드에서 작업하면서 지식 격차를 발견하고 객체 지향 Javascript에 대해 더 많이 배울 수 있었습니다. Javascript 클래스로 작업하기 위해 방향을 전환하는 데 필요한 몇 가지 사항이 있습니다. Static 키워드는 빈 배열에 할당한 클래스 범위 변수(allBooks)를 만드는 데 도움이 됩니다. 다음으로 Javascript에는 속성을 가져와서 클래스의 새 인스턴스에 할당하는 방법을 제공하는 클래스용 생성자 함수가 있습니다. 이 예에서 마지막으로 This 키워드를 확인할 수 있습니다. This 키워드는 개체 지향 Javascript에서 컨텍스트를 참조하는 방법을 제공합니다. 이 경우 새 책 인스턴스를 참조하는 경우입니다.

자바스크립트 책 클래스:

class Book {
    static allBooks = [];

    constructor({id, title, author = "unknown", genre = "uncategorized", reviews = [] }) {
        this.id = id
        this.title = title
        this.author = author
        this.genre = genre
        this.reviews = reviews

        Book.allBooks.push(this)
    }
}

프로젝트를 확인하세요

시간을 내어 웹 개발에 대해 더 많이 배우는 여정에 대해 읽어주셔서 감사합니다. 내 Rails/Javascript 웹 앱을 확인하는 데 관심이 있는 경우 아래 링크를 확인하고 웹 개발 학습 경험에 대한 의견을 자유롭게 남겨주세요.

Click Here to view the Moby App

행복한 코딩,

테리 위협