[TIL] DAY11 리액트 - 테일윈드 스타트

[TIL] 2023-03-30 DAY11

리액트

세팅

• 설치 명령어(dapp이라는 폴더에 생성)

npx create-react-app dapp

• 리액트 스타트 명령어

npm run start

-> dapp/package.json의
"scripts": {
"start": "react-scripts start",
을 실행한 것과 같음

• 초기 세팅
  dapp/src에 있는 css파일 삭제, 로고 파일 삭제 후 index.js에 있는 css import삭제.
  그리고 App.js에 있는 내용 세팅

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

• 테일윈드 세팅(create-react 기준)
  https://tailwindcss.com/docs/guides/create-react-app
  -> 4번 한 후에 아래 코드를 src/index.js에 붙여넣기

import "./index.css";

기능

App.jsx, index.css 작업

• 작업 깃헙 : https://github.com/dowoo303/new-dapp-repository

테일윈드 라이브러리에 저장된 css를 className 통해 불러올 수 있음

<div className="max-w-screen-xl mx-auto h-full flex justify-between items-center">

.
index.css에서 함수를 만들어서 반복되는 css를 줄일 수 있음

@layer components {
  .btn-style {
    @apply px-2 py-1 rounded-md text-white cursor-pointer;
  }
}

Git

• git 설치 및 원격 저장소 연결
  git --version
  git init
  git remote add origin <원격 저장소 주소>
  git remote -v
  git remote remove origin
  git 컨트롤
  git add
  git status
  git commit
  git branch -M <브랜치명>
  git push
  git log --all --decorate --oneline --graph

• 브랜치 관리
  git branch <브랜치명>
  git checkout <브랜치명>
  Git & GitHub 3
  git checkout -b <브랜치명>
  git switch <브랜치명>
  git branch -a
  git remote update
  git fetch origin
  git merge <브랜치명>
  git branch -d <브랜치명>

• git pull = git fetch + git merge
  git checkout <브랜치명>
  git rebase main
  git rebase --abort
  이미 공개 저장소에 Push 한 커밋을 Rebase 하지 말 것
  git pull origin <브랜치명>

• git Clone
  git clone <주소> <폴더명>

• 주의사항
  협업 시 개인 브랜치에서
  git remote update →
  git pull origin main →
  git checkout -b <브랜치명> →
  작업 시작 →
  git pull origin main 후 push 습관화 중요
  Git & GitHub 4
  git <명령어> -h
  git --help
  https://git-scm.com/book/ko/v2/시작하기-CLI