Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hyesuhong/wanted-pre-onboarding-frontend
2023 8월 원티드 프리온보딩 인턴십 사전 과제
https://github.com/hyesuhong/wanted-pre-onboarding-frontend
Last synced: 5 days ago
JSON representation
2023 8월 원티드 프리온보딩 인턴십 사전 과제
- Host: GitHub
- URL: https://github.com/hyesuhong/wanted-pre-onboarding-frontend
- Owner: hyesuhong
- Created: 2023-08-02T02:46:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-08T07:18:02.000Z (about 1 year ago)
- Last Synced: 2023-09-08T08:33:10.451Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://fancy-baklava-ed3ee5.netlify.app/
- Size: 1.29 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 2023 원티드 프리온보딩 프론트엔드 사전 과제
## 🧑💻 지원자 정보
- 이름: 홍혜수
---
## ▶️ 실행 방법
```shell
npm install & npm start
```
---
## 🖥️ 배포된 사이트
[👉 링크](https://fancy-baklava-ed3ee5.netlify.app/)
---
## 🛠️ 스택
### 언어
- 
### 라이브러리
- 
- 
- 
- Pretendard(Font)
## 🏗️ 프로젝트 구성
### 디렉토리
```
src
├─ components
│ └─ ui
├─ contexts
├─ hooks
├─ pages
├─ services
├─ storage
└─ styles
```
- **components**: `ui 컴포넌트`들을 모아둔 폴더입니다. 재사용 가능한 컴포넌트는 하위에 있는 ui 폴더에 넣어 구분했으며, 페이지에서 바로 넣을 수 있는 컴포넌트는 하위 폴더 없이 components 폴더 바로 아래에 위치합니다.
- **contexts**: `Context API`를 사용한 파일을 모아둡니다.
- **hooks**: `커스텀한 훅` 파일이 위치합니다.
- **pages**: 라우터에서 호출할 `페이지 컴포넌트`를 모은 폴더입니다.
- **services**: `서버와 소통`하는 부분을 담당하는 폴더입니다. constans 파일은 변하지 않는 url 등을 따로 분리하기 위해 만들었습니다.
- **storage**: `localStorage`의 사용을 담당합니다.
- **styles**: `글로벌한 CSS 스타일`을 모아둔 폴더입니다.
### 설계
- auth를 통해 받아온 토큰을 todo에서도 사용하기 때문에 Context API를 활용해 어느 컴포넌트에서든 토큰을 사용할 수 있도록 했습니다.
- axios를 사용하는 서비스 로직은 클래스를 통해 관리했습니다. 컴포넌트에서는 클래스의 함수만 호출하는 방식으로 분리했습니다.
## 🧐 고민한 부분
- sign in 과 sign up 페이지가 거의 동일한 방식에 사용하는 함수, 선언한 id 정도만 다르기 때문에, 하나의 페이지 컴포넌트에 url에 따라 다른 함수를 사용할까 싶었습니다.
- 혹시 모를 문제가 발생할 수도 있으니, 확실한 분리를 위해 페이지를 나눠서 작업하기로 결정했습니다.
## 😓 아쉬운 지점
- todo에서 CRUD를 더 정리했으면 좋을 것 같습니다. 코드가 너무 복잡해보입니다..
- sign에서 고민했던 것처럼 같은 페이지 컴포넌트를 사용하는 것을 더 고민해봤어야 할 것 같습니다.
- http request 부분을 각 요청마다 조건을 적는 것보다 method에 따라서 고정할 수도 있지 않았을까 싶습니다..
---
## 🔍 추가할 수 있는 사항
- [ ] sign out
- [ ] sign out, todo delete 등 알림이 필요한 경우 확인창 보여주기
- [ ] todo get, create, update 시 로딩 화면 보여주기
- [ ] outdated token 삭제하기