Fresh Find 애플리케이션은 자바스크립트를 사용하여 프런트엔드 데이터를 렌더링하고 Rails API를 사용하여 백엔드 데이터를 관리하는 웹 애플리케이션입니다.

농부 여러분, 다음 Farmer's Market이 돌아오면 Fresh Find 응용 프로그램을 사용하여 재고를 추적하십시오!
선택한 이름을 사용하여 "생산 목록"을 만든 다음 목록에 항목을 추가하기만 하면 됩니다.

Flatiron School의 소프트웨어 엔지니어링 과정 프로젝트 4의 경우 백엔드와 함께 프론트엔드에 대해 두 개의 별도 리포지토리를 사용하기로 결정했습니다. 이렇게 하면 Heroku와 같은 배포 사이트에서 호스팅 문제를 피할 수 있습니다. 이것은 또한 localhost:3000에서 실행되는 Rails 서버와 브라우저에서 실행되는 프론트엔드 자바스크립트 및 HTML/CSS를 사용하여 백엔드와 프론트엔드를 동시에 실행할 수 있게 해줍니다. 이것은 브라우저에서 콘솔을 사용하고 언제든지 Rails 콘솔로 들어갈 수 있기 때문에 더 빠른 오류 처리를 허용했습니다. Rails API를 설정할 때  - api 플래그를 이렇게 사용해야 했습니다.

rails new fresh-find-backend - api

이 - api 플래그는 Ruby on Rails를 사용하여 API 전용 애플리케이션을 생성하도록 합니다.

이 프로젝트는 AJAX 및 JavaScript를 사용하여 Farmer's Market 항목에 대한 정보가 포함된 데이터베이스에 액세스하기 위해 Rails 백엔드에 가져오기 요청을 합니다. JavaScript를 사용하여 DOM을 변경했습니다. 자바스크립트는 강력하고 많은 것을 할 수 있습니다. 이 JavaScript 프로젝트를 사용하려면 앱이 Rails API 백엔드와 함께 Javascript 프런트엔드를 사용해야 합니다. 클라이언트/서버 상호 작용은 JSON 형식으로 비동기식으로 처리되어야 합니다. Rails 백엔드에는 has-many 관계가 있는 리소스가 있어야 하고 AJAX 호출이 3개 이상 있어야 합니다(Create, Read, Update 및 Delete 중 2개 이상). 이것은 JavaScript와 Rails를 모두 결합하는 과정에서 단연코 가장 힘든 부분이었습니다.

내 JS + Rails API 프로젝트는 Farmer's Market 공급업체의 꿈입니다. 내 앱을 사용하면 공급업체가 다가오는 Farmer's Market 방문에서 판매할 항목 목록을 만들어 인벤토리를 추적할 수 있습니다. 개체 모델 관계는 목록에 많은 항목이 있습니다.

웹 프로그래밍의 세 가지 기둥

JS 이벤트 인식, DOM 조작 및 서버와 통신합니다. 이 모든 기둥이 처음에는 이해하기 어려웠지만 끈기 있게 이 기둥을 배울 수 있었습니다.
내 응용 프로그램에는 아래와 같이 List 및 Item의 두 가지 클래스가 있습니다.

class List { 
 static listNames = []
 
 constructor(list){
 this.id = list.id
 this.name = list.attributes.name
 this.items = list.attributes.items
 List.listNames.push(this)
 }
}

class Item {
 constructor(item) {
 this.id = item.id
 this.list_id = item.list_id
 this.content = item.content
 this.li = document.createElement('li')
 }

백엔드가 프론트엔드에 연결되었는지 확인

프론트엔드 디렉토리를 백엔드 디렉토리에 연결하려면 JavaScript 프론트엔드에서 Rails API 백엔드로 가져오기 요청을 사용해야 했습니다. 내 끝점으로 http://localhost:3000/lists 사용. 다음 GET 가져오기 요청을 사용하여 애플리케이션의 프런트 엔드를 백엔드에 연결합니다.

static getLists() {
 fetch(listsURL)
 .then(resp => resp.json())
 .then(lists => {
 for(let list of lists) {
 let newList = new List(list.data)
 }
 this.renderLists()
 })
 }

이것은 또한 JavaScript의 정적 메서드의 예입니다. 백엔드 서버에서 받은 데이터로 DOM 조작을 처리하고 이 데이터를 HTML로 렌더링할 수 있습니다.

내 클래스에는 DOM 조작을 엄격하게 처리하는 함수가 포함되어 있습니다. 일부 기능은 서버 통신을 처리합니다. 일부 기능은 다른 기능에 '도우미' 기능을 제공할 수 있습니다. 이것은 모두 "Separation of Concerns"의 프로그래밍 만트라와 연결됩니다. 웹 대신 객체 지향을 사용하면 코드를 셀 모음으로 생각할 수 있습니다. 이 셀은 서로 분리되어 있으며 정보, 변수와 같은 데이터 비트, 해당 데이터와 직접 관련된 동작, 기능을 포함할 수 있습니다.

정적 메서드 - OOJS

정적 메서드는 클래스 수준 메서드이므로 클래스의 인스턴스에서 호출할 수 없으며 클래스 자체에서만 호출할 수 있습니다. 이들은 관련 메서드 집합을 캡슐화하지만 인스턴스로 만들 필요가 없는 '유틸리티' 클래스 - 클래스에서 자주 사용됩니다.

class StaticMethod {
 static methodName() {
 console.log("My method is static!");
 }
}

Flatiron School의 네 번째 소프트웨어 엔지니어링 프로젝트에서 이 글을 읽고 JavaScript와 Rails에 대해 배웠기를 바랍니다. 이것은 JavaScript와 Rails를 모두 결합하는 과정에서 단연코 가장 힘든 부분이었습니다. JavaScript에서 클래스를 활용하고 JSON 형식을 처리하는 방법에 대해 많이 배웠습니다.

소스 코드https://github.com/ameerrah9/Fresh-Find-Frontend

행복한 코딩!