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/
여기가 진짜 지리게 설명 잘한다. 번역해서 보자.
// 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의 연동 방법은 다음과 같습니다:
- Firebase Hosting 설정:
- Firebase 콘솔에서 새로운 프로젝트를 생성하고 Hosting 서비스를 활성화합니다.
- Firebase CLI(Command Line Interface)를 통해 프로젝트를 초기화하고 배포 설정을 구성합니다.
- GitHub 저장소 연결:
- Firebase 콘솔에서 Hosting 탭에 들어가 GitHub 연동 옵션을 선택합니다.
- 사용자의 GitHub 계정과 프로젝트를 연결합니다.
- 자동 배포 설정:
- 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
이칸다.
'data lab' 카테고리의 다른 글
구글 플레이 개발자 계정 만들기 (0) | 2024.07.05 |
---|---|
react native - Expo 우당탕탕 입문 1 (1) | 2024.07.05 |
리액트 props 에 쓰이는 삼항 조건 연산자 (0) | 2024.06.24 |
1RM 앱 만들며 리액트 공부시작~~ (0) | 2024.06.23 |
python 파이썬 조건문 if 문 (0) | 2024.03.22 |