이번 공부 기록 작성 할 때
GPT가 알려준 내용 복붙하지 않고 나의 말로 쓰기
과제 시작할 때
-
로컬 저장소 만들기
git clone <주소> -
branch 만들고 시작하기
git branch -c <브랜치명> -
패키지 설치 및 개발 환경 설정
npm create vite@latest . //현재 폴더에 설치
react인지, ts/js인지 등 설정
prettierrc 파일 생성
vercel 이용해서 배포 할 때 주의할 점
프로젝트 생성 후 추가적으로 설정해야함
-
source 브랜치 변경
project의 settings->environments->productions
main에서 자기가 원하는 branch명으로 변경해야함!
이후 save누르고 마무리. -
권한 요청해야한다는 화면이 뜰 때
프로젝트의 settings에서 검색창에 Vercel Authentication를 치고 Disabled로 설정을 바꾸고 save눌러주면 된다.
✅react+ tailwind CSS 개발 환경 설정 🍃
- react 프로젝트 폴더와 파일들 설치
npm create vite@latest <프로젝트 폴더 명>
cd <프로젝트 폴더 명>
또는
git clone <git hub repo 주소>
npm create vite@latest . //현재 폴더에 설치한다
cd <프로젝트 폴더 명>생성 과정에서 React + TypeScript 선택해야한다.
- tailwind CSS 설치
npm install tailwindcss @tailwindcss/vite
터미널에 치면 설치가 된다
gpt가 알려준 npx tailwindcss init -p ->tailwind.config.js 수정하는 방식은 오류가 나서 https://tailwindcss.com/docs/installation/using-vite
공식 문서에 나와 있는 설치 방법을 참고했다.
GPT한테 물어보니까 tailwind v4 이상 부터는 수동으로 tailwind.config.js파일을 만들라고 한다.
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})
vite.config.ts파일을 위처럼 수정해준다. 나는 react 뒤에 이어서 써서 수정해줬다.
-
css 파일에서 import 해주기
@import "tailwindcss"; -
테스트 해보기
App.tsx에 아래 예시처럼 테스트해 볼 코드를 작성해준다.
<div className="flex h-screen items-center justify-center bg-blue-100">
<h1 className="text-3xl font-bold text-blue-600">
Hello React + Tailwind + TS 🚀
</h1>
</div>npm run dev를 쳐서 창을 연다.
✅prettier 설정
vscode의 extensions에서 prettier를 설치하면 로컬에서만 적용 됨
npm install -D prettier 프로젝트에 설치되어 팀원 모두가 같은 규칙을 적용할 수 있음
프로젝트에 설치 및 설정 하는 법
-
prettier 설치
npm install -D prettier -
루트 폴더에 .prettierrc 파일 생성
설정 예시
{
"singleQuote": true,
"semi": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100
}✅프로젝트 파일 구조
src/
├─ assets/ # 이미지, 아이콘, 폰트 등
├─ components/ # 재사용 가능한 컴포넌트
│ ├─ Button/
│ │ ├─ Button.tsx
│ │ ├─ Button.styles.ts (또는 Button.css)
│ │ └─ index.ts
│ ├─ Header/
│ │ ├─ Header.tsx
│ │ └─ index.ts
│ └─ ...
├─ pages/ # 페이지 단위 컴포넌트
│ ├─ Home.tsx
│ ├─ About.tsx
│ └─ ...
├─ hooks/ # 커스텀 훅
├─ context/ # Context API 관련
├─ utils/ # 유틸 함수
├─ App.tsx
└─ main.tsx
component 단위로 나눌 때는 src/components
page단위로 나눌 때는 src/pages로 나누면 된다
main.tsx
App.tsx
index.html: main.tsx를 렌더링
main.tsx: 앱의 시작점, App.tsx 렌더링 함
index.css(main.css): 전역 스타일, tailwind를 import함
App.tsx: 실제 화면 UI의 시작점, 화면구성, 컴포넌트를 포함
App.css: 특정 컴포넌트 스타일
✏️공부 내용
채팅창에서 채팅 전송하면 스크롤 끝으로 이동
채팅 공감 기능
1. span과 p 태그의 차이점
p태그는 문단 단위
span 태그는 p태그보다 작은 단위의 태그, 문장 정도로 생각하면 된다.
2. px단위를 rem단위로 사용하는 법
[값px]를 쓰면 자동으로 rem단위로 변환하여 적용된다.
3. function FriendList() vs const FriendList: React.FC = () => {}
4. .tsx vs .ts
ts 파일: 일반적인 type script파일
tsx 파일: react jsx 문법이 포함된 파일
tailwind CSS 각종 효과
- flex items-center //세로 가운데 정렬
- justify-between //양쪽 끝으로 정렬
3.items-center → 세로 가운데 정렬
4.justify-center → 가로 가운데 정렬
justify - start / end /center
items - start /end/center
img는 자식 요소를 가지지 못함
sticky
fixed
text-xs //글자크기
font-extralight //글자
word-break break-all
