Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mkk00/wanted-pre-onboarding-challenge-fe-27
https://github.com/mkk00/wanted-pre-onboarding-challenge-fe-27
axios react react-router-v6 styled-components typescript vite zustand
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/mkk00/wanted-pre-onboarding-challenge-fe-27
- Owner: mkk00
- Created: 2024-10-18T13:34:21.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-10T09:16:11.000Z (9 days ago)
- Last Synced: 2024-11-10T10:21:21.078Z (9 days ago)
- Topics: axios, react, react-router-v6, styled-components, typescript, vite, zustand
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 원티드 프리온보딩 11월 사전과제
## install & start
- 개발 서버
```bash
npm install
npm run dev
```
- DB 서버 [🔗](https://github.com/starkoora/wanted-pre-onboarding-challenge-fe-1-api)
```bash
cd db-server
yarn start # localhost:8080
```
## test 계정
- id : `[email protected]`
- pw : `testtest`
## skill
   
  
## 디렉토리 구조
```bash
📂 my-todo
├─ 📂 src
│ ├─ 📂 api
│ ├─ 📂 components
│ │ ├─ 📂 auth
│ │ ├─ 📂 common
│ │ │ └─ 📄 Header.tsx
│ │ ├─ 📂 layout
│ │ └─ 📂 todo
│ │ │ └─ 📄 TodoDetail.tsx
│ ├─ 📂 hooks # 커스텀 훅
│ ├─ 📂 interfaces # 타입
│ ├─ 📂 pages # 페이지 컴포넌트
│ │ ├─ 📂 auth
│ │ │ ├─ 📄 Login.tsx
│ │ │ └─ 📄 Signup.tsx
│ │ └─ 📂 todo
│ │ │ └─ 📄 TodoList.tsx
│ ├─ 📂 regex # 유효성 검사
│ ├─ 📂 router
│ ├─ 📂 store # zustand store
│ ├─ 📂 styles # 전역 스타일
│ ├─ 📂 utils # 유틸 함수
│ └─ 📄 main.tsx # entry
```
## 레이아웃
- 로그인 & 회원가입(/auth/login, /auth/signup)
- Todo List & Detail(/, /todos)
## API 요청 및 인증 처리
### Axios `instance` 설정
- instance.ts 파일에서 axios 인스턴스를 생성
```javascript
const baseURL = 'http://localhost:8080'
const instance = axios.create({
baseURL: baseURL,
timeout: 15000,
headers: {
'Content-Type': 'application/json',
},
})
```
### `interceptors` 를 사용해 Authorization 헤더를 동적으로 추가
- API 호출 시마다 Authorization 헤더에 `Bearer ${토큰}` 형식으로 인증 정보를 전달
```javascript
instance.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
},
(error) => {
return Promise.reject(error)
},
)
```
### API 호출
API 요청 시 인증 정보를 자동으로 포함하여 각각의 엔드포인트에 요청
인터셉터를 통해 Authorization 헤더가 자동으로 추가되므로 별도로 처리할 필요가 없음
## useForm 커스텀 훅 사용
폼 이벤트 처리를 재사용 가능하고 일관성 있게 관리하기 위해 커스텀 훅을 사용
- 예) useTodoForm.ts
```javascript
export const useTodoForm = (initialValues: TodoProps, onSubmit: () => void) => {
const [values, setValues] = useState(initialValues)
const handleChange = (
e: ChangeEvent,
) => {
const { name, value } = e.target
setValues((prevValues) => ({
...prevValues,
[name]: value,
}))
}
const handleReset = () => {
setValues(initialValues)
}
const handleSubmit = (e: FormEvent) => {
e.preventDefault()
// onSubmit 실행 로직
}
return {
values,
setValues,
handleChange,
handleSubmit,
handleReset,
}
}
```