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 ..
갑자기 회사에서 리엑트를 만지게 될 수도 있다는 말을 들었다. 개발을 다 진행하는게 아니라 내가 하는건 이미 개발 진행중인 프로젝트에 탑승해, HTML 및 CSS 를 건드는 일정도 인데, 리액트에 대한 이해가 없는 상태에서 진행 할 수 없을 거 같아 살짝 발 담군 내용을 적어 볼까 한다. 리엑트를 시작해야하는데, node.js 가 다행히 Vue 공부한다고 설치가 되어 있었다. 터미널에 npx create-react-app blog Vue는 Vue create 프로젝트명 React는 create-react-app 프로젝트명 으로 시작한다. 시작하게 되면 구조는 뷰랑 같다. 다만 src 내 폴더 내용물이 좀 다르다. 내가 주로 작업할 곳은 App.js 이다. react는 js 파일을 통해서 작업을 진행한다...
