1RM 앱 만들며 리액트 공부시작~~

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부터 구현해보자

운동완료 누르면, 해당 완료일이 초록으로 칠해지게.

 

보통 달력 구현할 때 아래와 같이 많이들 한다고 한다.

1. 캘린더 라이브러리(react-calendar) + 날짜 라이브러리(moment.js, date-fns)
2. 캘린더 라이브러리(react-calendar)
3. 날짜 라이브러리(moment, date-fns)
4. 바닐라 자바스크립트

2번이 쉬워보이니까 2번으로간다

 

https://www.npmjs.com/package/react-calendar

어딘가에서 긁어온 react-calener 홈페이지