결과 Firebase를 이용하여 타이머의 현재시간과 메모를 저장하고, 불러와서 타이머 밑에 출력해주고 있다. Firebase Firebase에 시간, 메모를 저장해서 불러와주었다. 우선은 타이머 시간과, 적은 내용, 작성된 시간을 저장해주고 있다. Firebase (파이어베이스)란 무엇인가? [용어 정리] Firebase (파이어베이스)란 무엇인가? Firebase 란 Android, iOS, 웹, C++, Unity에서 앱을 빌드하고 출시하는 데 도움이 되는 자세한 설명서와 플랫폼 간 SDK(Software Development Kit, 소프트웨어 개발 키트)를 제공합니다. [공식 홈페이지] < 정리.. shin1303.tistory.com [ Create ] - 코드 길이가 길어서 해당 부분만 작성하..

결과 이런저런 시도를 하는 중이라 디자인은 크게 건들지 않고 있다. 결과 설명 우선은 ● 버튼을 임시로 모달창이 나오게 하려 했는데, 클릭 후 이벤트를 어떤식으로 넘겨줘야 할지 고민 중이다. 제목을 적고 확인을 누르면 타이머 밑에 시간이 저장되고 무엇을 하며 시간을 보냈는지 기록하도록 할 것이다. 저장은 Firebase에 Firestore 기능을 이용할 예정이다. 최종적으로 시간을 기록하다가 ■ 버튼을 눌렀을 때 Firestore에 저장이 되고 화면에 출력되는 것이다. jsconfig 절대 경로 [ jsconfig.json ] { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 위 코드를 jsconfig.json 이름으로 저장하면 절대 경..

추가 상단에 NavBar를 만들었고, Router를 통해 경로 지정을 해주었다. 변경 타이머 빈 공간에 0을 조건식으로 작성했었다. {currentHours < 10 ? `0${currentHours}` : currentHours}:{ currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes}:{ currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds} 이러한 방식은 시간을 저장하게 되었을 때 중복이 되고, 불편할 것이라 생각하여 ES7의 padStart를 사용하였다. setCurrentHours(String(hours).padStart(2, '0')) setCurrentSeconds(String(sec..

Firebase 란 Android, iOS, 웹, C++, Unity에서 앱을 빌드하고 출시하는 데 도움이 되는 자세한 설명서와 플랫폼 간 SDK(Software Development Kit, 소프트웨어 개발 키트)를 제공합니다. [공식 홈페이지] 주로 염두하는 대상은 안드로이드(Android)와 iOS이다. 웹(Web) 기반의 개발, 플러터(Flutter), 유니티(Unity), C++ 환경에 대한 지원도 점점 늘려가고 있다. 구글(Google)이 소유하고 있는 모바일 애플리케이션 개발 플랫폼 백엔드 기능을 클라우드 서비스 형태로 제공 서버리스(Serverless) 애플리케이션 개발이 가능 서버리스(Serverless) 서버가 존재하지만, 사용자가 신경 쓸 필요가 없다. 아래의 기능을 신경..

AWS 란 AWS(amazone web service) 아마존에서 운영하는 Cloud Computing Platform 백엔드 인프라와 플랫폼을 구성 200개가 넘는 기능의 서비스 제공 Cloud Computing Platform 이란 IT 리소스를 인터넷을 통해 필요시 바로(on-demand) 제공하고 사용한 만큼만 비용을 지불하는 것을 말합니다. [wikipedia] 네트워크 기반 서비스 제공 제공업체의 방대한 컴퓨팅 시스템을 조건하에 일정 금액을 지불하고 사용 인터넷이 되는 환경이라면 어느 곳이든 사용 가능 AWS 서비스의 장점 가장 성숙한 클라우드 서비스 제공사 언어 및 운영체제에 구애받지 않는 플랫폼 광범위한 서비스 및 파트너 생태계를 갖춘 시스템 가상 환경에서 잘 실행되는 사례 AWS 서비스의..

최종 결과 기존 타이머에 약간의 CSS를 적용시켰다. 아이콘은 FontAwesome에서 가져와 사용하였다. React에서 Font Awesome 사용 - 오류 JSX상에서 기존 HTML처럼 Font Awesome의 CDN키를 적용하니 아래와 같은 오류가 발생하였다. Warning: Invalid DOM property `crossorigin`. Did you mean `crossOrigin`? → JSX는 CamelCase를 사용하기 때문에 위와 같은 오류가 나온다고 생각한다. 관련 패키지 설치 Font Awesome의 SVG 기반 아이콘 활성화시키기 위한 패키지 npm i @fortawesome/fontawesome-svg-core Font Awesome에서 제공되는 Solid, Regular, Lig..