1RM 만들며 리액트 공부 2

SSR - 서버사이드 렌더링 - 렌더링을 서버에서 해주는거래. SPA 말고, 페이지 여러개로 하는 전통적인 html 방식?

CSR - 클라인트 사이드 렌더링 - 옹

 

1. usestate 훅의 기본구조

const [stateVariable, setStateFunction] = useState(initialState);

 

여기서, 변수 선언을 하는 const와 usestate말고는 다 내가 정해주는 변수, 함수명이다. 상태값을 저장하는 변수와, 상태값을 업데이트하는 함수를 선언해준다. 

 

sateVariable은 내가 선언해준 변수명, setStateFunction은 내가 선언해준 함수명이다. 그리고 저 initialState는 count의 초기값일거다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

이걸 해줄려면

import React, { useState } from 'react';

맨위에다 이놈을 넣어줘야한다.

2. CSS-in-JS 공부 성공!!!

npm install styled-components

CSS-in-JS 라이브러리 쓸려면 얘를 깔아줘야한다

import styled from 'styled-components';

사용할 때 위와같이 임포트 해주고, 실 사용예시는 아래와 같다.

import styled from 'styled-components';

const StyledComponent = styled.elementType`
  background-color: ${props => props.primary ? 'navy' : 'gray'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 10px;
  border: none;
  border-radius: 3px;

  &:hover {
    background-color: ${props => props.primary ? 'blue' : 'lightgray'};
  }
`;

function App() {
  return <StyledComponent>Click me!</StyledComponent>;
}

 

여기서 styled.elementType이라 함은, styled.div styled.a styled.h1 처럼, 기존 html 태그 네임을 적어주면 된다. 

3. props 공부하기

 

• 기본 개념:
  • props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다.
  • props는 읽기 전용입니다. 자식 컴포넌트는 전달받은 props를 변경할 수 없습니다.
• 구조:
  • 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때는 자식 컴포넌트를 JSX 태그로 사용하고, 속성 형태로 데이터를 전달합니다.
  • 자식 컴포넌트는 함수 인수로 props를 받아 사용합니다

---

부모 컴포넌트 (밑의 코드 박스) - imprt받은 애가 부모네

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="Alice" age={30} />
    </div>
  );
}

export default ParentComponent;

 

 

자식 컴포넌트 (밑의 코드박스)

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

 

props를 쓸 때 기본구조. 음 근데 굳이 화살표를 써야하나? 위처럼 함수 선언식으로 해도되고, 밑처럼 표현식으로 해도되나봐

const ComponentName = (props) => {
  // 컴포넌트의 로직 구현
  // props 객체에 접근하여 필요한 데이터 사용
  return (
    // JSX 템플릿 반환
  );
}

 

---

또다른 뤼튼의 예시.

https://www.freecodecamp.org/korean/news/how-to-use-props-in-react/

리액트에서 Props 사용하는 방법

여기가 진짜 지리게 설명 잘한다. 번역해서 보자.

// Button.js
import React from 'react';

const Button = (props) => {
  const { label, onClick } = props;

  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

 

// App.js
import React, { useState } from 'react';
import Button from './Button';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <Button label="Increment" onClick={handleClick} />
    </div>
  );
};

export default App;

---

 

기록 페이지에서 달력 구현하는 js 기본 문법한다음에, 상단바랑 하단바 그대로 두고 overflow로 스크롤해서 화면 내리는 거 해봐야겠다. 이것도 버블이랑 비슷할라

 

map함수가 뭔지 궁금하다. 그 x:y 이 자료형도 알아보자. 딕셔너리? 파이썬이잖아

4. 리액트 React Router 라이브러리와 Link 컴포넌트

 

---

중간 코드리뷰

//UnderBar.js
import React, { useState } from 'react';
import './UnderBar.css';
import { Link } from "react-router-dom";

function UnderBar() {
  // 활성 링크 상태를 저장하는 state
  const [activeNav, setActiveNav] = useState(0);

  return (
    <nav className="under-bar">
      <div>
        <Link to="/" className={activeNav === 1 ? "nav-link active" : "nav-link"} onClick={() => setActiveNav(1)}>
          <i className="fa-solid fa-house"></i>
        </Link>
      </div>
      <div>
        <Link to="/workout" className={activeNav === 2 ? "nav-link active" : "nav-link"} onClick={() => setActiveNav(2)}>
          <i className="fa-solid fa-dumbbell"></i>
        </Link>
      </div>
      <div>
        <Link to="/record" className={activeNav === 3 ? "nav-link active" : "nav-link"} onClick={() => setActiveNav(3)}>
          <i className="fa-regular fa-file"></i>
        </Link>
      </div>
      <div>
        <Link to="/routine" className={activeNav === 4 ? "nav-link active" : "nav-link"} onClick={() => setActiveNav(4)}>
          <i className="fa-solid fa-repeat"></i>
        </Link>
      </div>
    </nav>
  );
}

export default UnderBar;

 

여기서, 리액트의 react router 라이브러리의 link 컴포넌트를 이용해, 하단의 아이콘들을 누르면 해당하는 페이지로 contents-box 내에서 바꾸게 해준거고, usestate를 통해, 각각의 아이콘에 onClick 이벤트를 걸어줘서 각 1,2,3,4의 값이 할당되게 만들어놨고, 삼항연산자를 이용해서, 각 usestate의 변수 값이 1,2,3,4,일때와 아닐 때, className을 다르게 해줘서, 정해둔 '불빛들어온 css' , '불빛 꺼진 css'로 이동시켰다. 완전히 이해했다.

 

그러면 props는 대체 어디쓰는거냐 이말이야. 생각해볼게,

 

같은 버튼 요소를 만들고, 다른 페이지에서 그걸 import해와서 활용할 때, ( 상단바?에는 활용을 못하겠고) 즉, contentsbox 안의 네개의 각기다른 페이지에서 내가 만들 다른 box 요소나 button 컴포넌트에서 활용할 수 있겠구나!

---

5. 스크롤 되게 만들기

 

 

web키트 기반의 브라우저 (크롬, 사파리)에서 스크롤 커스텀 하는 방법이다. css 원하는대로 아래와 같이 적용해주면 된다. 참 쉽죠?

.contents-box {
   /*다른 속성들*/
    /*overflow: hidden;  전체 페이지가 스크롤되지 않도록 설정인데, 얜 필요없음 */
    overflow-y: auto; /* 세로 스크롤이 가능하도록 설정 */   
}

.contents-box::-webkit-scrollbar {
    width: 5px; /* 스크롤바의 너비 설정 */
  }
  
  .contents-box::-webkit-scrollbar-track {
   display: none;
  }
  
  .contents-box::-webkit-scrollbar-thumb {
    background: rgb(160, 160, 160); /* 스크롤바 손잡이의 색상 설정 */
    border-radius: 10px;
  }
  
  .contents-box::-webkit-scrollbar-thumb:hover {
    background: #ffffff; /* 스크롤바 손잡이의 호버 시 색상 설정 */
  }

---

6. 배포하기

하다보니까 모바일로도 보고, 껍데기밖에 없지만 친구들한테 자랑하고 싶어졌다.

 

근데 그전에, 지금까지의 로컬 진행상황을 github에 올리고싶다.

cd your-project-directory
git init
git remote add origin https://github.com/jongwoo01/1rm.git
git add .
git commit -m "Initial commit"
git push -u origin master

이렇게 순서대로 해주면 올라간다.

 

github이랑 firebase 의 연관성🔽🔽

뭔가 github이랑 firebase랑 연동되는게 있어?

 

A. 맞습니다. GitHub과 Firebase는 서로 연동되어 사용할 수 있습니다. 이를 통해 GitHub에 저장된 프로젝트를 Firebase에 쉽게 배포할 수 있습니다.

GitHub과 Firebase의 연동 방법은 다음과 같습니다:

1. Firebase Hosting 설정:
   • Firebase 콘솔에서 새로운 프로젝트를 생성하고 Hosting 서비스를 활성화합니다.
   • Firebase CLI(Command Line Interface)를 통해 프로젝트를 초기화하고 배포 설정을 구성합니다.
2. GitHub 저장소 연결:
   • Firebase 콘솔에서 Hosting 탭에 들어가 GitHub 연동 옵션을 선택합니다.
   • 사용자의 GitHub 계정과 프로젝트를 연결합니다.
3. 자동 배포 설정:
   • GitHub 저장소에 새로운 커밋이 push되면 자동으로 Firebase Hosting에 배포되도록 설정할 수 있습니다.
   • 이를 통해 개발 과정에서 GitHub에 코드를 업데이트하면 Firebase 배포도 자동으로 이루어집니다.

이렇게 GitHub과 Firebase를 연동하면 개발 및 배포 워크플로우가 간소화됩니다. GitHub에 코드를 푸시하면 자동으로 Firebase에 배포되므로, 수동으로 배포할 필요가 없어집니다.

이를 통해 개발자는 코드 관리와 배포 작업에 소요되는 시간을 줄일 수 있으며, 더 효율적으로 프로젝트를 관리할 수 있습니다.

깃 커맨드

git init: 로컬 저장소 초기화
git add .: 모든 변경 파일 스테이징
git commit -m "message": 커밋 생성
git remote add origin URL: 원격 저장소 추가
git push -u origin branch: 원격 저장소로 푸시
git pull: 원격 저장소의 변경 사항 가져오기
git checkout -b branch-name: 새 브랜치 생성 및 전환

새 브랜치에 git add . 랑 git commit -m "message"로 스테이징 커밋 하고

git push -u origin new-feature-branch : 브랜치에 push하기
git merge branch-name : 완성됐을 경우에 브랜치 병합

 

firebase hosting진행해보자

npm install -g firebase-tools

firebase login
firebase init
realtime database, storage, hosting, hosting github를 선택했다.

npm run build

firebase deploy

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) jongwoo01/1rm

+  Created service account github-action-819297621 with Firebase Hosting admin permissions.
+  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_RM_APP_680AA.
i  You can manage your secrets at https://github.com/jongwoo01/1rm/settings/secrets.

? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm ci && npm run build

+  Created workflow file C:\code\1rm\.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? No

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i  Action required: Push any new workflow file(s) to your repo

=== Storage Setup

Error: Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Storage requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations

아 파베 계속 연동하려는데 오류 뜬다. 다음이시간에 계속.
막단계에서 계속
Error: Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Storage requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations

프로젝트의 위치 선택  |  Firebase 문서

이칸다.