JS-레일 프로젝트

( https://github.com/RoUchiha/flatiron-phase-4-portfolio-project )

이 프로젝트는 이전 Phase 3 프로젝트의 연장선처럼 느껴졌고, 내가 배운 모든 것이 내 기반을 구축하는 방법을 보여주었습니다. 전반적으로 이 프로젝트는 실제 웹 사이트가 작동하고 사용자와 상호 작용하는 방식을 모방하기 때문에 현재 코딩 지식을 가장 잘 구현했다고 생각합니다.

이 4단계 포트폴리오 프로젝트를 위해 사용자가 운동을 만들고 운동에 추가할 수 있는 운동 플래너를 만들기로 결정했습니다. "운동"은 실제로 일주일 중 7일이므로 사용자는 운동을 계획한 요일에 운동을 추가합니다. 각 운동에는 이름, 범주(저항, 유산소 또는 미용 체조), 세트(저항 또는 미용 체조인 경우) 및 거리(유산소인 경우)가 있습니다. 새 운동이 생성될 때마다 페이지를 새로고침하지 않고 적절한 날짜에 추가됩니다. 운동이 운동에 추가되면 사용자가 원하는 경우 운동을 삭제할 수 있는 버튼이 있습니다.



이 프로젝트의 백엔드 설정은 내가 Rails에 대해 잘 알고 있기 때문에 가장 쉬운 부분이었고 Rails를 API로 사용하면 작성해야 할 뷰가 없기 때문에 코딩도 줄었습니다. 우리가 매일 방문하는 데 익숙한 사이트와 같은 강력한 사이트에 관해서는 아직 배워야 할 것이 얼마나 많은지 겸손해지기 전에는 원래 더 복잡한 프로젝트를 염두에 두고 있었습니다.
모델과 컨트롤러를 생성한 후 시리얼라이저를 만들고 내가 생성한 시드 데이터에 대해 localhost를 확인했고 모든 것이 내가 원하는 대로 되었기 때문에 결국 프런트엔드 작업으로 전환했습니다.

class ExerciseSerializer < ActiveModel::Serializer

    attributes :id, :name, :category, :sets, :distance, :workout_id

end

class WorkoutSerializer < ActiveModel::Serializer

    attributes :date, :name, :id, :exercises
    has_many :exercises

end

이 프로젝트에서 제가 주로 겪었던 어려움은 코딩이 어려웠기 때문이 아니라 Rails에서 생각하는 데 너무 익숙했고 JavaScript가 여전히 새로운 언어이기 때문에 프런트엔드를 설정하는 데 있었습니다. 프로젝트를 진행하는 방법에 대한 아이디어가 있고 사용하려는 방법이나 기능이 JS에 존재하지 않고 수동으로 작성해야 한다는 것을 깨달았습니다. 이 때문에 저는 Rails에서 내 코드에 대해 생각한 다음 해당 Rails 코드가 JavaScript로 어떻게 보이는지 검색하고 테스트하는 데 많은 시간을 보냈습니다. Canvas 수업 하단에 있는 리소스 링크는 이 작업에 매우 도움이 되었으며 모든 학생들이 방문할 것을 적극 권장합니다. 가져오기 요청과 같은 것은 표준 패턴을 따르기 때문에 예상보다 쉬웠고 대부분의 메서드는 내가 구현한 두 클래스 간에 동일했습니다. 예전에 'initialize' 메서드를 연상시키는 'constructor'와 같이 Ruby/Rails에서 배운 개념과 유사한 JS 개념도 몇 가지 있었습니다. 두 언어 사이의 유사점을 찾는 것은 내가 해야 할 일과 그것을 하는 방법을 이해하는 데 정말 도움이 되었습니다. JS 클래스와 메서드를 설정한 후 웹사이트를 설정하기 위해 일부 HTML을 코딩했고 원하는 기본 구조와 모든 기능이 제대로 작동했습니다.

class WorkoutServices {
    constructor(baseURL) {
        this.baseURL = baseURL; 
    };

    getWorkouts() {
        fetch(this.baseURL) 
        .then(resp => resp.json()) 
        .then (json => {
            json.forEach(workout => {
                const workouts = new Workout(workout);
                workouts.renderWorkout();
            });
        });
    }

class Workout {
    constructor({name, date, exercises, id}) {
        this.name = name;
        this.date = date;
        this.exercises = exercises;
        this.id = id;
    };

    renderWorkout() {
        const workoutAll = document.getElementById("workouts-container");
        workoutAll.classList.add("workout");

        const workoutName = document.createElement("h2");
        workoutName.innerHTML = this.name + "'s workout";
        workoutName.name = this.name;
        workoutName.classList.add(`workout-data`);

        workoutName.id = `workout-${this.id}`;

        workoutAll.appendChild(workoutName);

        const exerciseList = this.renderExercises(); 
        workoutName.appendChild(exerciseList);
    };

    renderExercises() {
        const exercises = this.exercises;
        const list = document.createElement("ul");

        exercises.forEach(exercise => { 
            const newExercise = new Exercise(exercise); 

            console.log(exercise, "exercise");

            const nameList = newExercise.renderExercise();

            list.appendChild(nameList);
        });
        return list;
    };
}

놀랍게도 이 프로젝트에서 가장 즐거웠던 부분은 CSS 스타일링 부분이었습니다. 다른 요소에 어떤 속성을 할당할 수 있는지 확인한 다음 해당 변경 사항이 웹 사이트에 반영되는 것을 보는 것이 즐거웠습니다. 나는 프로젝트의 핵심 기능에서 벗어나고 싶지 않았기 때문에 모든 것을 매우 기본적으로 유지했습니다. 보기에 조금 더 매력적으로 만들었습니다. 개발자 콘솔(F12)을 사용하여 어떤 요소가 어떤 요소이고 어떻게 스타일을 지정하고 싶은지 확인했습니다. 각 운동과 운동 양식 주위에 테두리를 두어 모든 텍스트가 더 체계적으로 보이고 보기에 덜 부담스럽게 보이도록 했습니다.

대체로 이 프로젝트는 풀스택 웹 개발자에게 기대되는 훌륭한 학습 경험이었으며 앞으로 더 크고 더 나은 웹사이트를 만들 수 있도록 백엔드 및 프런트엔드 개발 기술을 더욱 강화할 수 있기를 바랍니다.