2023.08.25 - [JS/React] - "나의 일지"프로젝트(5)_handsontable, 파이어스토어 데이터 베이스 "나의 일지"프로젝트(5)_handsontable, 파이어스토어 데이터 베이스 이제 첫 리포트를 생성해보자~!! 작업일지 리포트는 테이블형태(엑셀)로 작성하고 엑셀과 csv 파일로 내보내고 불러오게 가능하도록 구상을 했다. 마침 테이블 형태 관련해서 좋은 글과 좋은 라 aliencoding.tistory.com 리포트에 필요한 조건으로는 글 제목, 글 작성시간, 글 내용, 수정여부(false로 시작)가 꼭 필요하다 글 제목을 setDoc에 전달해줄려면 상태 저장을 위해 useState를 사용 기본 값은 "" 로 둔다 import React, { useState } from "rea..

이제 첫 리포트를 생성해보자~!! 작업일지 리포트는 테이블형태(엑셀)로 작성하고 엑셀과 csv 파일로 내보내고 불러오게 가능하도록 구상을 했다. 마침 테이블 형태 관련해서 좋은 글과 좋은 라이브러리를 찾게 되었다. https://handsontable.com/docs/react-data-grid/ React Data Grid - Documentation | Handsontable Handsontable documentation What is Handsontable? Handsontable (pronounced "hands-on-table") is a JavaScript data grid component that brings the well-known look and feel of spreadsheets..

먼저 리액드 라우팅을 위해 밑 라이브러리를 설치해주자 npm i react-router-dom 리액트 라우터를 사용하기 위해서는 당연하겠지만 라우팅으로 이동할 페이지들이 필요하다 미리 리포트를 쓰기위해 write, 보기 위한 view, 수정하기 위한 fix 라는 페이지들을 만들어 두었다 import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { RouterProvider, createBrowserRouter } from "react-router-dom"; import MainPage from "./pages/MainPage"; import Wr..

firebase로 로그인을 하기 위해서는 파이어베이스 Authentication항목에서 기능을 활성화 해주어야 한다. 사용자 인증을 도와주는 다양한 업체가 있고, 그중에 제일 기본적인 이메일/비밀번호를 선택하고 추가적으로 구글을 선택했다 import { initializeApp } from "firebase/app"; import { getAuth, signInWithPopup, GoogleAuthProvider, signOut, } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDom..

"나의 일지"프로젝트는 다음과 같이 페이지 구성을 계획했다 index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { RouterProvider, createBrowserRouter } from "react-router-dom"; import MainPage from "./pages/MainPage"; import ReportsPage from "./pages/ReportsPage"; import WritePage from "./pages/WritePage"; import LoginPage from "./pages/LoginPa..

1. react app 설치 npx create-react-app my-app cd my-app code . npm start 출처: https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 2. firebase 설치하기 npm install firebase 2-1 firebase 셋팅하기 firebase 코드를 리액트 앱 컴포넌트와 분리 해주기 위해, api폴더를 생성하고 하위에 firesbase.js 를 생성 // Import the functions you need from ..

What is Next.js? Next.js is a framework for building web applications. With Next.js, you can build user interfaces using React components. Then, Next.js provides additional structure, features, and optimizations for your application. With Next.js, you can build user interfaces using React components. Then, Next.js provides additional structure, features, and optimizations for your application. U..

import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( title: 'study', color: Colors.grey, home: loginPage(), ); } } class loginPage extends StatefulWidget { const loginPage({Key? key}) : super(key: key); @override State..