codestates / codestates/MUNADU-client
[Dev-Log] 5월 28, 29, 30일 금, 토, 일요일 / 김대성
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
### 오늘은 어떻게 프로젝트에 기여했나요?
* 한줄평 페이지 - 한줄평 CRUD 구현
* 요약 페이지 - 무술 정보, 리뷰 평점 평균 그래프 구현, 랜덤한 무술 추천 구현
* 데이터베이스 모델 - ondelete CASCADE 옵션
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
* 한줄평 페이지
1. 각각의 한줄평을 쓴 유저는 옵션 버튼을 누르고 수정과 삭제를 할 수 있게 되는데, 그 버튼 옆에 옵션 선택창이 딱 붙어 있도록 하는 스타일 설정이 힘들었다. -> 버튼 컴포넌트에 relative, 옵션 선택창에 absolute 옵션을 줌으로서 해결했다.
2. 버튼을 누르면 옵션 선택창이 열리고, 옵션 선택창에서 수정과 삭제 옵션을 선택하면 각각 수정 모달과 삭제 모달이 뜨는데, 리덕스로 Dispatch를 불러 서버와 통신하는 과정은 어렵지 않았으나, 옵션창이 열려있는 유무, 모달창이 열려있는 유무 등을 모두 스테이트과 관리하는 로직을 짜는 게 헷갈렸다. 현재는 isOpen, isUpdateOpen, isDeleteOpen 등으로 분리하여 onClick 이벤트에 상태를 변경하도록 했는데, 보다 간단한 방법이 있을 수 있을지 연구해보고 싶다.
* 요약 페이지
1. 무술 정보를 불러오는 것은 어렵지 않았으나, 그 불러온 무술의 정보들을 깔금하게 정리하는 스타일을 맞추기가 쉽지 않았다. 조금씩 엇나가고, 깔끔하게 정리가 잘 안되어있는데, 다 구현하고 나니까 새로운 방법이 생각이 나서 다음에 리팩토링을 하면서 정리하고 싶다.
2. 리뷰 평점 평균 그래프 구현, 그래프를 그리는 것 자체는 이미 mainpage를 만들 때 chart.js 라이브러리를 활용한 것을 모듈화했기 때문에 어렵지 않았으나, 평균을 구하는 과정에 생각이 조금 필요했다. 지금 각각의 리뷰에서 받은 평점을 map(), reduce() 메소드를 활용해 계산하는 방식으로 구현을 했는데, 중복 코드가 많은 것 같아 이 역시 나중에 손보고 싶다.
3. 랜덤한 무술을 추천하는 것은 현재 클라이언트에 저장되어 있는 json 파일을 바탕으로 구현하였다. 무술들의 정보가 담겨있는 배열에서 중복없이 무술의 아이디를 뽑아야 하는 과정을 생각하기가 힘들었으나, [Code Playground](https://im-developer.tistory.com/101)를 통해 구현했고, 그것을 랜더링하는 과정으로 구현했다.
* 데이터베이스 모델 오류 수정
1. Review 정보를 지울 때 지워지지 않는 오류가 있다는 것을 팀원에게 듣고 오류 내용을 살펴보니, 요약하자면 Review.id를 참조하고 있는 연결된 테이블 때문에 review를 지울 수 없다는 오류였다. (Review : Reviews_replies = 1 : M) 따라서, 참조된 테이블의 row가 지워질 경우 그것을 참조한 연결 테이블의 row도 함께 지워지도록 delete에 cascade 옵션을 주어야 하는데, 기본 sequelize에서는 비교적 간단하게 설정을 할 수 있었던 것에 반해 이번에는 sequelize-typescript라는 외부 라이브러리를 사용해서 원하는 옵션을 찾기가 힘들었다. 힘든 구글링 끝에 hasMany로 관계를 설정해 주는 부분에 onDelete: "CASCADE" 옵션을 주어야한다는 것을 찾아서 설정해주었는데, 데이터베이스가 변동이 없어서 결국, 라이브러리의 github repo를 가서 issue 창을 뒤졌다. 그 결과, hasMany 관계 설정 부분에 옵션을 주는 방식은 ForeignKey Column에 onDelete: "cascade" 옵션을 주는 방식으로 변경되었다는 것을 알게 되었다. 외부 라이브러리를 쓰는 것의 단점(?) 참조할 만한 공식 문서가 빈약하다는 점을 직접 느낄 수 있었다.
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] 마이페이지 UI 디자인
- [ ] 랜딩페이지 UI 디자인
- [ ] Advanced 기능 확인
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.