archive/Project

[MainProject] day 10 extra (5/13-5/14)

creatorAron 2023. 5. 15. 09:21

1. 게임등록 페이지 UI, 기능 절반완성(feat. antd)

2. 유효성 검사 문제 fix 후 PR에 커밋 추가

3. react-persist

4. github 2주차 issue 등록  

5. react-persist쪽지, 검색 기능 구현 시작

 

프로젝트 시작하면서 활용하기로 한 antd를 이제서야 활용하는게 참 비효율 적이지만... 지금이라도 제대로 활용해서 내가 맡은 기능을 얼른 완성하고 더 많은 기능들을 할 수 있도록 해보아야겠다. 또는 효율적으로 리펙토링을 하면서 클린코드를 작성하도록 해보자. 오늘 고생하면 월-금 일주일이 편해질 것이기 때문에 좀 더 집중해서 기능을 구현해보도록 하자. 특히, 유효성 검사를 성공적으로 fix하면 자신감이 많이 상승하고 실력도 늘어난 것이 체감될 것 같다. 혹시 문제를 스스로 해결하지못해도 굴하지 않고 바로 help 요청을 해서 오늘 안에 최대한 해결하도록 해보겠다..!!

#1 게임등록 페이지 UI, 기능

antd 공식홈페이지를 활용하여 사용할만한 Form, Input 컴포넌트들을 확인하고 antd 에서 import해서 게임등록 페이지의 UI를 빠르게 만들었다.

 

이런식으로 샘플을 가져와서 합쳐서 기본적인 틀을 먼저 제작해보자.

 

1차적으로 구성된 화면은 다음과 같다.

일단 현재 거슬리는 부분을 나열해보면,

1. 버튼과 icon의 색상 및 input 창 활성화 시 색상이 main color와 안맞음. sub color인 magenta,gold,brown 계열도 아님.

2. 반응형이 잘 안되거나 antd에서 설정해놓은 css 설정과 충돌되는 css 코드

 

antd를 사용하고자 생각하면서 다시 든 생각인데... 사실 scss를 적용하면서 antd나 bootstrap, MUI를 적용하는 것이 맞다. styled-component와는 호환성이 그렇게 좋지않다. scss와 CSS-in-JS를 동시에 적용하지 말라는 법은 없지만(내가 원티드 4월 프리온보딩 인턴십 과제에서 module.css와 styled-component를 동시에 사용한 끔찍한 혼종을 만들어 낸 것처럼) 그렇게 좋은 방식은 아니다. 일회성 프로젝트이고 과제라는 점에서 큰 상관이 없지만 내가 기업에서 일한다고 생각해보면 유지/보수 측면에서 최악인 방식이라고 생각된다. 내가 나가고 후임이 내가 만든 프로젝트를 맡는다고 생각하면... 아찔하다. css를 조금이라도 수정하려면 어떻게 해야할 지 파악하느라 시간이 엄청 소모될 것이다. 그리고 결국에는 css 적용방식을 통일해야 할 것이기 때문에 좋은 사용법이 아니다.

 

같은 맥락으로 antd도 역시... 적용해보고 개발자도구로 파악해보니 antd 컴포넌트에 이미 적용되고 있는 css 파일이 따로 있었다. 그 위에 스타일을 덮어씌우거나 해당 css 파일을 찾아서 초기화를 한다든지 해야하는데 아예 초기화를 하고 다시 스타일을 입힐거면 antd를 사용하는 의미가 없다. formData 보내는 버튼과 formData 제출 시 함수를 지정해주고 이런 방식이 사용하기 편해보여서 사용하는데 스타일은 하나도 사용안하고 그 기능만 이용할거라면 조금 수고스럽지만 사실 구글링해서 찾은 코드들을 넣어서 formData를 보내도록 하면 된다.

 

그래서 일단은 antd 컴포넌트를 최대한 스타일을 안 건드리고 원하는 UI가 나오도록 조정해보겠다. UI를 조정하고, formData를 보내는 로직만 잘 추가해주면 일단 완성된다. 페이지 중 가장 단시간에 완성하는 페이지가 아닐까... 생각한다. 

 

formData를 보내는 로직을 만들어서 api  요청을 했지만 서버가 닫혀있는지 아니면 뭔가 문제가 있는지 현재 다음과 같은 오류가 발생하여 태그를 추가하는 것만 내부적으로 추가하고 통신하는 부분은 월요일에 백엔드와 해보고 팀원들에게 formData 보내는 것에 대해 공유하면 팀의 작업이 매우 빨라질 것 같다. 

 

#2 유효성 검사 문제 fix

유효성 검사 문제를 픽스하는데 엄청난 에너지와 시간을 소모하다보니 3,4,5번 항목은 못하게 되었다. 중요하고도 사실 간단한 문제인데, custom hook을 사용하면서 굉장히 헷갈리는 부분이 생겼고 이 부분을 해결하지 못하면 custom hook을 쓰기도 두려워질 것 같았고 이해도도 굉장히 낮은 상태로 넘어갈 것 같아서 해결을 위해 노력을 많이 했다.

 

이후에도 많은 수정이 있었던.. 유효성검사 이후 게시물들에 그 과정이 담겨있다. 최종 결과물은 (... 링크 첨부 예정)

 

#3 react-persist

#4 github 2주차 issue 등록 및 1주차 issue 정리

 

완수 못한 부분들을 취소선으로 그어버리고 다음 포스팅을해서 헷갈릴 수도 있을 것 같다. 일단 10일차와 11일차 사이 주말은 여기까지..!!