이제 첫 리포트를 생성해보자~!! 작업일지 리포트는 테이블형태(엑셀)로 작성하고 엑셀과 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..
갑자기 회사에서 리엑트를 만지게 될 수도 있다는 말을 들었다. 개발을 다 진행하는게 아니라 내가 하는건 이미 개발 진행중인 프로젝트에 탑승해, HTML 및 CSS 를 건드는 일정도 인데, 리액트에 대한 이해가 없는 상태에서 진행 할 수 없을 거 같아 살짝 발 담군 내용을 적어 볼까 한다. 리엑트를 시작해야하는데, node.js 가 다행히 Vue 공부한다고 설치가 되어 있었다. 터미널에 npx create-react-app blog Vue는 Vue create 프로젝트명 React는 create-react-app 프로젝트명 으로 시작한다. 시작하게 되면 구조는 뷰랑 같다. 다만 src 내 폴더 내용물이 좀 다르다. 내가 주로 작업할 곳은 App.js 이다. react는 js 파일을 통해서 작업을 진행한다...
Components 등록 //3. AppHeader 컴포넌트 HTML 입력. Props : 루트 컴포넌트 에서 하위 컴포넌트로 데이터 보낼때 app.vue //2. v-bind:"작명**(관리 편의성을 위해 데이터랑 같이)"="str(보낼 데이터)" // v-bind:str="str" => :str="str" 하위 컴포넌트(ex: AppHeader.vue) {{str}} **//4. 데이터 사용** send
