🏃🏻‍♂️플랫아이언 스쿨 2단계 프로젝트

소개

반응에 대한 찬가

React는 바닐라 JavaScript와 비교할 때 신선한 공기입니다.

React의 구성 요소 기반 구조와 프레임워크를 배우고 활용하면서 저는 Flatiron School 부트캠프에서 가장 강력한 힘을 얻었다고 느꼈습니다. JavaScript로 내가 알고 있는 것(내가 기억한다고 생각했던 것보다 더 많이!)을 확인하고 React의 힘을 활용하여 코딩을 더 발전시키는 것에 감사했습니다.

배경

문제 해결

저는 이 프로젝트에서 문제 해결에 초점을 맞춘 무언가를 하고 싶었습니다. 우리 그룹 구성원은 모두 활동적이었고 우리 중 두 명은 주자였습니다.

많은 API를 살펴본 후 우리는 도시의 현재 날씨를 가져온 다음 날씨와 관련된 다양한 조건에 대해 옷이 다 떨어지는 것을 제안하는 조건부 논리를 렌더링하는 앱을 만들기로 결정했습니다.

이 영감은 Runner's World 잡지에서 나온 몇 년 동안 냉장고에 있던 종이 한 장에서 나왔습니다. 어떻게 아날로그를 디지털로 만들 수 있을까요?

프로젝트

내가 가장 좋아하는 기여

이 프로젝트의 주요 초점 중 하나는 앱의 조건부 논리 및 출력을 렌더링하고 디자인하는 것이었습니다.

API 데이터를 활용하여(그리고 특히 "맑음", "거의 흐림"등의 내러티브에 대해 정확하게 렌더링된 것을 확인하기 위해 여러 도시를 파헤친 후) 내가 설정하려는 조건을 목표로 삼았습니다. 여기에는 다음 항목이 포함됩니다.

습도

온도

바람

조건/설명(강수량, 태양 및 운무와 관련됨)

다음은 습도에 대한 코드의 예입니다. 왜냐하면 중서부 지역의 모든 사람들은 습도가 외부에서 실제로 느끼는 더위를 망친다는 것을 알고 있기 때문입니다!

function humidityCard () {
    if (humidity <= 50 && humidity >= 64 && temp >= 60 && temp <= 79) {
            return "It's humid today. Consider wearing lighter, breathable clothing.";
        } else if (humidity <= 65 && humidity >= 74 && temp >= 80 && temp <= 89) {
            return "The humidity could affect your run today, making it feel much hotter. Drink lots of water and wear lighter, breathable clothing.";
        } else if (humidity <= 75 && temp >= 90) {
            return "It's going to be a really hot one today with additional humidity! Drink lots of water, wear breathable clothing, and consider even running on the treadmill inside today."
        } else {
            return
        }
}

이 렌더링을 사용하여 채워질 옷도 디자인했습니다. 다음은 날씨/의상 카드 중 하나의 앞면과 뒷면의 예입니다.




협업 및 프로젝트 관리

수많은 프로젝트를 관리하는 직업 경력을 갖게 된 것은 매우 운이 좋았습니다. 다음은 이에 대한 몇 가지 도구와 생각입니다. 경험이 팀에서 작동하는 방식에 모든 차이를 만들 것입니다.

- 트렐로
모든 것에 대한 사랑을 위해 하루를 시작할 때 목표를 설정하고, 하루 중반에 재평가하고, 하루가 끝날 때 논의하십시오.

우리는 이러한 목표가 정의된 장소를 공유하고 당면한 더 큰 작업을 달성하는 데 모두 기여할 수 있도록 함으로써 많은 시간과 스트레스를 절약했습니다. 의사 소통이 전부이며 Trello는 귀하가 의사 소통을 하고 있는지 확인하는 훌륭한 방법입니다.



- 그룹 코딩
막히면 산책을 하고 잠시 멈춘 다음 전체 팀으로 돌아와 큰 화면에서 문제를 해결하십시오. 우리는 이것을 여러 번 했고 절반의 시간 안에 무언가를 알아내는 데 큰 차이를 만들었습니다.

- 힘내
가능한 한 자주 git pull origin main을 사용하고, 밀고 있을 때 팀과 소통하세요.

병합 및 충돌을 함께 수행하여 동일한 코드로 작업하고 있는지 확인합니다. 이렇게 하면 결국 시간과 좌절을 줄일 수 있습니다.

사이드 노트

알다시피, 우리는 로그인을 가지고 놀면서 데이터에 연결했습니다. 이 데이터가 db.json 파일로 이동하는 동안 자체 데이터베이스를 구축하고 3단계 및 4단계에서 로그인으로 더 많은 작업을 수행하는 방법에 대해 자세히 알게 되어 기쁩니다.

결론

저는 이 프로젝트, 제 팀, 제가 만든 것을 자랑스럽게 생각하는 제 경험을 좋아했습니다. 계속해서 앱을 개선하기를 기대합니다.

이 프로젝트를 통해 나에게도 몇 가지 미래 목표가 있다는 것을 깨닫게 되었습니다. 부트스트랩을 배우고 어쩌면 최종 프로젝트를 설계하기 시작하여 Ruby로 전환할 때 React에 대해 알고 있는 것을 잃지 않도록 할 수도 있습니다.

자원

저장소를 복제하고 프로젝트here를 확인하십시오!