이 앱은 "Help Me"라고 하며 누군가가 정신 건강 위기를 겪고 있을 때 주로 신뢰할 수 있는 사람들로 구성된 선별된 서클에 보내는 "SOS"(조난 신호)로 설계되었습니다. 목표는 사적인 대화와 사용자의 감정 범위를 보여주는 시스템으로 사용자 주위에 신뢰할 수 있는 커뮤니티를 구축하는 것입니다.

개발 6일차

5일차가 끝날 무렵 프로젝트 파트너인 Miguel Hernandez의 풀 리퀘스트 추천을 완료했습니다. 6일 차는 TailwindCSS를 사용하여 배경 이미지의 스타일을 지정하고 풀 요청을 다시 제출하는 데 중점을 둡니다. 그날 후반에 우리는 프론트엔드 개발의 다음 단계, DigitalOcean에 배포하는 방법 및 백엔드 서버 구현에 대해 논의하기 위한 가상 회의를 가졌습니다.

TailwindCSS 구성 파일에 배경 이미지 추가

이것을 어렵게 만든 것은 일반적으로 일반 CSS를 사용하는 배경 이미지에 어려움을 겪기 때문입니다. TailWindCSS에서 그라데이션이 아닌 배경을 사용하려면 먼저 이미지를 tailwind.config.json 파일로 가져와야 합니다. 다음은 그들의 documentation에서 발췌한 것입니다.

// tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        backgroundImage: theme => ({
         'hero-pattern': "url('/img/hero-pattern.svg')",
         'footer-texture': "url('/img/footer-texture.png')",
        })
      }
    }
  }

배경 이미지로 모든 화면 스타일 변경

실제 과제는 크기, 반복 및 위치와 같은 CSS 배경 속성의 조합이 각 반응형 화면 크기에 대해 작동하는 것을 찾는 것이었습니다. 모바일 보기의 조합이 데스크톱 보기 또는 태블릿 보기에서 작동하지 않았습니다.

TailwindCSS에 대해 배운 것

나는 내가 가진 이 배움의 경험을 전하고 싶다. TailwindCSS 반응형 디자인 유틸리티를 사용하는 경우 일반(모바일) 및 추가 중단점에 대해 코딩해야 합니다. 예를 들면 다음과 같습니다.

모바일에서는 배경 이미지를 표시하지만 태블릿이나 더 큰 화면 크기에서는 표시하지 않음

<section class="bg-hero-pattern bg-cover sm:bg-none">...</section>

모바일 및 더 큰 화면 크기에서 배경 이미지를 표시하지만 반복되지 않고 포함됩니다.

<section class="bg-hero-pattern bg-cover lg:bg-contain lg:bg-no-repeat">...</section>

가상 회의 요약

이번 해커톤에서는 MVP로 슬림다운 버전의 앱에 집중할 계획입니다. 아이디어는 개념 증명을 보여주고 가장 중요한 기능만 구현하는 것입니다.

내 끌어오기 요청이 승인되고 병합되었습니다. 응!!!!!!!!!!!!!!!

DigitalOcean 앱 플랫폼에 앱을 배포하려는 초기 시도가 실패했습니다. Miguel이 이 문제를 조사하고 문제를 해결할 것입니다.

사용자의 민감한 정보 처리에 대한 멋진 토론입니다.

MVP 및 향후 버전에 대한 앱의 특정 기능을 지원하는 데 사용할 수 있는 오픈 소스 리소스에 대해 논의했습니다.

나의 새로운 행진 순서는 와이어 프레임을 기반으로 앱 커뮤니케이션 페이지를 구축하는 것입니다.

팀 프로젝트에서 작업하는 모든 사람을 위한 팁을 공유하고 싶습니다. 모든 사람이 같은 페이지에 있고 잠재적인 문제를 식별/공유할 수 있도록 정기적인 회의 일정을 잡습니다. 더 좋은 것은 예상되는 의제를 갖는 것이므로 회의가 상상할 수 있는 모든 것에 관한 것은 아닙니다.

무엇 향후 계획

첫 번째 업무 순서는 통신 페이지 와이어프레임을 여러 콘텐츠 페이지에서 사용할 수 있는 구성 요소로 나누는 것입니다. 그런 다음 더미 데이터를 앱 전체에서 공유할 표준 데이터 형식으로 구성합니다. 계획이 도움이 된다면 하루 만에 콘텐츠 페이지를 빠르게 구축할 수 있습니다. 행운을 빌어요!!!!!

7일차 분석 블로그 게시물을 기대해주세요!!!