Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soozynn/class-schedule-engall
https://github.com/soozynn/class-schedule-engall
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/soozynn/class-schedule-engall
- Owner: soozynn
- Created: 2022-07-20T06:52:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-20T07:00:21.000Z (over 2 years ago)
- Last Synced: 2024-11-08T02:52:43.647Z (about 2 months ago)
- Language: JavaScript
- Size: 349 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 실행방법
```
git clone https://github.com/engall-recruit/frontend_jsj.git
npm install
```
설치 후,
```
npm start
```
http://localhost:3000 을 실행시켜주세요.
# 사용한 기술과 선택한 이유
```
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-redux": "^8.0.2",
"styled-components": "^5.3.5",
"@reduxjs/toolkit": "^1.8.3",
"uuid": "^8.3.2",
"redux-persist": "^6.0.0",
```
- styled-components
props를 사용하여 style을 컴포넌트에 맞춰 유동적이게 적용할 수 있는 점을 좋아하기에 선택하게 되었습니다. 자체 스타일을 포함하기에 작은 컴포넌트를 잘 만들어 놓는다면 이외의 여러 프로젝트에서도 쉽게 재사용할 수 있는 이점과 이 외에도 글로벌 스타일을 주어 전체적으로 통일된 스타일 또한 적용할 수 있는 이점이 있어 해당 기술을 선택하게 되었습니다.
- uuid
키 값을 설정해주기 위해 uuid를 사용하면 고유한 값을 고민할 필요없이 편리하게 값을 지정해줄 수 있어 사용하게 되었습니다. 또 해당 schedule을 찾을 때 좀 더 수월하게 id 값을 찾기 위해 사용해주었습니다.
- @reduxjs/toolkit
redux-toolkit의 사용법과 편리성에 대해 직접적으로 느껴보지 못하였다가 이번 과제를 통해 redux와 redux-toolkit에 어떠한 차이가 있는지, 또 직접 하나씩 세팅해보면서 toolkit의 편리성에 대해 공부해보기 위해 사용하게 되었습니다.
- redux-persist
새로고침 또는 페이지를 나가게 될 경우 모든 값이 사라지기 때문에 이를 로컬 스토리지를 사용하여 상태 값을 유지하고자 하였습니다. 하지만 로컬 스토리지에 저장해주기 위해서는 스토어에 들어있는 각각의 상태를 매번 setItem 혹은 getItem과 같이 반복적인 코드를 작성해야하는데 이는 가독성에도 좋지않고 비효율적이라고 판단하여 이를 해결하기 위해 해당 라이브러리를 채택하게 되었습니다.
# Challenge
달력을 구현하는 것에 있어 타 라이브러리를 편하게 사용할 수도 있었겠지만, 작게 쪼개진 작은 컴포넌트(Day)로 만들어 이를 재사용성있게 Week Calendar로 만들어보는 것 또한 저에게 많은 공부가 될 수 있을 것이라 생각하여 캘린더를 직접 만들어보게 되었습니다.
이 외에도 이전에는 사용해보지 않은 redux-toolkit과 redux-persist 라이브러리를 사용하여 과제 요구사항을 구현해보았습니다.
## 구현된 기능 및 구현되지 않은 기능
- 기본 요구사항 clear
[구현되지 않은 기능]
- 추가 기능 중 반응형 웹, 스케줄 부분 수정하기, 테스트 코드, 풀스택 등
## 고려한 엣지 케이스 및 아직 처리하지 못한 엣지 케이스
[고려한 엣지 케이스]
- 동일한 스케줄은 동일한 border 색으로 분리하기
[아직 처리하지 못했거나 진행 중인 엣지 케이스]
- 스케줄 부분 삭제하기
## 시간이 더 있다면 구현하고 싶은 내용과 이를 어떻게 구현할 수 있는지 대략적으로 설명
시간이 더 있다면, x mark 클릭 시 해당 스케줄을 전체 삭제하는 것이 아닌 요일 별로 선택하여 삭제가 가능하도록 하는 케이스도 추가적으로 더 구현해보고 싶습니다.
이를 구현하기 위해 현재 생각하기로는 분기를 나누어 전체 삭제를 할 것인지 선택한 요일만 삭제할 것인지 유저가 선택하게 만든 뒤, scheduleSlice 내에서 분기별로 action을 호출하여 삭제를 원하는 요일의 repeat 배열 안에서 해당 요일을 제거하는 방법을 생각하였습니다. 또 이외에 평일, 주말만 선택하는 항목이 있어 버튼을 하나하나 누르지 않고도 편하게 스케줄을 추가할 수 있는 부분 또한 만들면 좋을 것 같다고 생각하였습니다.
## About
최근에 감기 몸살로 사전 과제에 더욱 시간을 투자하지 못한 것이 가장 아쉬웠습니다.🥲
또 현재 컴포넌트에서 state 값을 핸들링 해주는 것이 옳은지, 성능 최적화에 대해 생각해보지 못한 점, 불필요하고 복잡하게 코드를 작성한 점 등등 아쉬운 부분이 많아 이후 추가적으로 작성한 코드를 더 개선해보려고 합니다. 테스트 케이스도 추가적으로 업로드하도록 하겠습니다. 감사합니다.
## 개선필요부분
현재는 start time을 기점으로 스케줄 예약이 가능하게 해놓았기에 끝나는 시간 이내에 겹치는 스케줄에 대한 엣지 처리를 하지 못하였어서 이를 추가적으로 수정 예정입니다.
## 배포사이트
https://cheery-muffin-4d9bb0.netlify.app