결과 이런저런 시도를 하는 중이라 디자인은 크게 건들지 않고 있다. 결과 설명 우선은 ● 버튼을 임시로 모달창이 나오게 하려 했는데, 클릭 후 이벤트를 어떤식으로 넘겨줘야 할지 고민 중이다. 제목을 적고 확인을 누르면 타이머 밑에 시간이 저장되고 무엇을 하며 시간을 보냈는지 기록하도록 할 것이다. 저장은 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..

최종 결과 타이머의 시작, 정지, 리셋 기능을 만들었고 정상 작동 중이다. 현재 상황 어제 React Hook 사용이 익숙하지 않다는 것을 뼈저리게 느끼고 Hook 공식 문서를 읽으며 이해하고자 노력했다. 공식문서를 읽는 횟수가 늘어날수록 점점 이해하는 것이 느껴지기 시작했고 읽기 전보다는 조금 더 성장했다고 느껴진다. 지금까지 타이머와 타이머의 시작 버튼을 눌렀을 때 시작되는 것까지 만들었기 때문에 오늘 정지와 리셋 버튼을 만들려고 시도해보았다. 추가적으로 시작 버튼이 중복으로 눌릴 경우 setInterval이 반복해서 작동하는 오류를 수정하려 했다. 설명 updateTimer 함수가 화면에 보이는 타이머의 시간을 변경하는 함수이다. 블로그를 참고하여 시작, 정지, 리셋 기능이 가능한 1초에 1씩 증가..