꾸매코딩

결과 저장한 데이터를 수정하고 삭제할 수 있도록 만들었다. Firebase DB에서 “실시간”으로 업데이트하기 때문에 바로 변경됨 CRUD의 기능이 완성되었다. 아이디에 고유 id 값과 DB의 id 값을 비교하여 자신의 데이터만 불러온다. CSS 내용 우선은 배치와 아이콘만 적용해 주었다. [Times.css] .times--container { width: 500px; display: grid; grid-template-columns: 400px 100px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 10px; padding: 10px 0px; font-size: 18px; } .times--container input { width: 3..

결과 FireBase의 Authentication (인증) 기능을 이용하여 로그인 창을 구현하였다. Google 아이디와 Github 아이디로 로그인 가능하도록 설정했다. SetTimer.js 내용이 너무 길어져 Modal창 부분을 따로 components로 분리했다. 오류 SetTimer.js를 분할하는 과정에서 생긴 오류 갑자기 사이트에 렉이 걸리기 시작했고, console.log()로 출력해보니 끊임없이 랜더링 되고 있었다. 생각 1. 분할하는 과정에서 props를 setDbTime={setDbTime} setState로 설정해주어서 그렇다고 생각함 → 검색해본 결과 이렇게 사용해도 상관없음, 따로 만들어서 실행해보니 이상 없음 2. 랜더링 관련 문제이니 useEffect() Hook과 관련 있을 ..

결과 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 이름으로 저장하면 절대 경..

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