티스토리 뷰
리액트
- React.js는 자바스크립트 라이브러리의 하나임.
- 사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발
- 싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능
- 2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램 닷컴에 적용
- 2013년 발표, 오픈소스화
리액트 시작
npx create-react-app my-app
타입스크립트를 사용
npx create-react-app todolist --template typescript
이런식으로 js파일이 tsx로 생성된다.
jsx문법
tsx파일은 html 컴포넌트를 사용할 수 있는 ts의 확장된 파일
function App() {
return (
<div>
<p>Hello React!</p>
</div>
);
}
css연동하기
//App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="container">
<h1 className = "test">Hello, react!</h1>
<p>반갑습니다!</p>
</div>
);
}
export default App;/*App.css*/
.container{
margin: auto;
justify-content: center;
align-items: center;
height: 100vh;
padding: auto;
background-color: #f0f0f0;
}
.test {
background-color: aqua;
font-size: 20px;
color :coral;
padding: auto;
}
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
변수 사용
let이나 const로 변수 선언 후 {}를 사용하여 변수사용
function App() {
let name = "리액트";
return (
<div className="container">
<h1 className = "test">Hello, {name}</h1>
<p>반갑습니다!</p>
</div>
);
}조건문 사용
function App() {
let name = "리액트";
return (
<div className="container">
<h1 className = "test">Hello, {
name ==='리액트' ? (<h1>리액트</h1>) : (<h1>리액트가 아님</h1>)
}</h1>
<p>반갑습니다!</p>
</div>
);
}>> 리액트가 아닐경우 let name = "리액"일 경우
css와 연결하지 않고 내부에서 스타일을 바꾸는 방법 1(인라인)
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let name = "리액트";
const style = {
backgroundColor: 'black',
color: 'white',
fontSize: '20px',
fontWeight: 'bold',
padding: '10px',
};
return (
<div style={style}>
{name === '리액트' ? (
<h1 style={style}>리액트</h1>
) : (
<h1 style={style}>리액트가 아님</h1>
)}
<p>반갑습니다!</p>
</div>
);
}
export default App;
css와 연결하지 않고 내부에서 스타일을 바꾸는 방법 2(인라인)
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let name = "리액트";
const style = {
};
return (
<div style={{
backgroundColor: 'black',
color: 'white',
fontSize: '20px',
fontWeight: 'bold',
padding: '10px',
}}>
{name === '리액트' ? (
<h1 style={style}>리액트</h1>
) : (
<h1 style={style}>리액트가 아님</h1>
)}
<p>반갑습니다!</p>
</div>
);
}
export default App;
주석 사용
{/* JSX 주석은 이렇게 작성합니다. */}
깃이 서브모듈로 들어가 있어서 뭔 짓을 해도 안고쳐졌다.
🔧 문제 요약
- 어제 git이 서브모듈(submodule) 형태로 프로젝트에 포함되어 있어서, 정상적으로 코드 복사/수정/추가가 안 됨.
✅ 해결 방법
- 서브모듈을 제거하고 해당 디렉토리를 일반 폴더로 다시 추가함으로써 문제 해결.
git submodule deinit -f 경로
git rm -f 경로
rm -rf .git/modules/경로이렇게 간단하게 정리됐지만 계속 어디선가 또 나오고 오류나고 커밋해도 안되고 해서 몇시간 내내 붙잡고 있었다.
너무 힘들어따..
## ✅ 전제 상황 요약
- 저장소: `choihyeonseo38/programmers_frontend`
- 중요 폴더: `React/`, `typescript/` (보존되어야 함)
- 작업 위치: `React/todo-list` 폴더
- 여러 `.tsx`, `.css` 파일 등을 수정하거나 새로 추가함
---
## ✅ 전체 Git 커밋/푸시 흐름 (폴더 단위)
터미널에서 프로젝트 루트 디렉터리에서 아래 순서대로 실행해줘 👇
---
### 1️⃣ 변경 사항 확인
```bash
git status
```
이렇게 나오면 돼:
```
Changes not staged for commit:
modified: React/todo-list/TodoList.tsx
new file: React/todo-list/Timer.tsx
...
```
---
### 2️⃣ `todo-list` 폴더 전체 스테이징
```bash
git add React/todo-list
```
👉 `React/todo-list/` 폴더 **내의 모든 변경된/추가된/삭제된 파일**이 추적됨
---
### 3️⃣ 커밋하기 (메시지 자유롭게 작성)
```bash
git commit -m "todo-list: 항목 삭제 기능 추가, Timer 컴포넌트 생성, 스타일 개선"
```
💡 커밋 메시지 예시:
- `"todo-list: 삭제 버튼 추가 및 입력창 버그 수정"`
- `"todo-list: Timer.tsx 추가 및 UI 정리"`
---
### 4️⃣ 푸시
```bash
git push origin main
```
※ `main`이 아니라 `master` 브랜치라면 그걸로 바꿔줘!
---
## 🔒 `typescript/` 폴더는 건드리지 않음?
전혀 안 건드립니다.
이 명령들은 `React/todo-list`만 다루기 때문에 **다른 폴더나 파일에 영향 없음!**
안심하고 진행해도 좋아 😊