1. node.js 와 npm (node.js package manager)을 깔아준다.
node.js는 웹 브라우저 외부에서 JavaScript를 실행할 수 있게 하는 오픈 소스, 크로스 플랫폼 런타임 환경이다. 주로 웹 브라우저 내에서 사용자 인터페이스와 상호작용을 구현하는 데 사용되었다. 하지만 Node.js의 등장으로 JavaScript는 서버 사이드 프로그래밍 언어로서의 역할을 확장하게 되었다.
npm은 Node.js 패키지 매니저(Node Package Manager)의 약자로, Node.js 언어로 개발된 모듈(라이브러리)들을 관리하는 데 사용되는 툴입니다. 이 도구는 JavaScript 개발자들에게 필수적이며, JavaScript 프로젝트의 의존성을 관리하고, 다양한 패키지를 쉽고 빠르게 설치하며, 패키지를 배포하는 기능을 제공합니다.
2. CRA
npx create-react-app my-app
위 명령어는 npm을 깔 때 같이 깔리는 npx 명령어로, 간단한 spa 를 만들 때 사용할 수 있는 리액트 앱 템플릿을 만들어주는 cli 명령어이다.
저걸 치면 my-app이라는 리액트 앱 템플릿이 깔린다.
node_modules 폴더 - 필요한 node.js 파일들과 라이브러리들이 들어있나보다
public - index.html, 이미지들을 포함한 정적파일들을 넣는다
src - 여기에 컴포넌트들을 만들어 넣는다.
package.json - 얘도 뭐 포함되는 node.js 라이브러리 규칙모음집 같은거다.
외 잡다구리 파일들이 깔린다.
3. 라이브러리 설치
npm install --save @fortawesome/fontawesome-free
폰트 어썸에서 받아온 폰트들 쓸건데 얘 안깔아주면 또 에러뜬다
import '@fortawesome/fontawesome-free/css/all.min.css';
이거 index.js에 넣어주자. 안그러면 안보인다. 와 이거 무슨 지피티4는 개어렵게 알려주는데 그냥 쟤만 index.js에 넣어주면된다
npm install react-router-dom
이거하면 라우팅 되겠지? 얘땜에 계속오류난다
4. 최상위 컴포넌트인 index.js에 라우팅 걸어주기
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
이중에 6번 줄 import랑 저 <BrowserRouter>태그를 추가해준거다. 라우팅할라고.
5. record에서 달력 구현부터 해보자. - 다음시간부터
4개의 페이지 중에, homepage은 내 1rm들만 일단 보여주고, 나중에 제일 확장 많이할거고, workoutpage랑 routinepage는 머리가 복잡하니까, 제일 간단해보이는 recordpage부터 구현해보자
운동완료 누르면, 해당 완료일이 초록으로 칠해지게.
보통 달력 구현할 때 아래와 같이 많이들 한다고 한다.
- 캘린더 라이브러리(react-calendar) + 날짜 라이브러리(moment.js, date-fns)
- 캘린더 라이브러리(react-calendar)
- 날짜 라이브러리(moment, date-fns)
- 바닐라 자바스크립트
2번이 쉬워보이니까 2번으로간다
https://www.npmjs.com/package/react-calendar
어딘가에서 긁어온 react-calener 홈페이지
'data lab' 카테고리의 다른 글
1RM 만들며 리액트 공부 2 (0) | 2024.06.24 |
---|---|
리액트 props 에 쓰이는 삼항 조건 연산자 (0) | 2024.06.24 |
python 파이썬 조건문 if 문 (0) | 2024.03.22 |
파이썬 기본 - list , dictionary 자료형 (2) | 2024.03.21 |
파이썬 dictionary 자료형 딕셔너리 (0) | 2024.03.21 |