• 면접 준비
• 프로젝트 진행
  • 학교 찾기 버튼 누른 이후 모달 제작
  • 학교 open API 연동

공부를 하면 할수록 아는 것은 많아지지만, 다시 공부했던 내용을 공부할 때 나는 왜 이렇게 기억력이 안 좋은가? 처음에 이 내용에 대해서 공부할 때 더 깊게 파고들고 공부했어야 됐나? 이런 현타가 찾아온다. 모르는 것을 부끄러워하지 말고 더 깊게 고민하고 더 공부하자. 두 번 세 번 다시 봐서 내 것으로 만들면 된다.

---

어떻게 하면 재사용가능한 컴포넌트를 각각 다른 use case들에 맞도록 만들 수 있을까?

모달 컴포넌트 재사용할 수 있게 분리

계기

기존에는 Modal 컴포넌트의 재사용성을 고려하지 않고 설계.
따라서, Modal 컴포넌트 재사용이 불가능.

변화 과정

Modal ⇒ ModalLayout

ModalLayout의 너비는 동일하므로 고정하고, height를 props로 넘겨받아 높이 조절.

모달의 상태(열고, 닫기)는 useModalControl로 분리

ModalLayout이 필요한 컴포넌트에서 useModalControl hooks와 ModalLayout 컴포넌트를 사용.

ModalLayout 내부의 각각 다른 내용물은 children으로 넘겨받아 집어 넣기.

추가로 고민해야할 사항

닫기 버튼

닫기 버튼을 flot속성을 사용해서 css흐름에서 빠지게 제작했음 (기존)

모달 레이아웃이 필요한 컴포넌트들은 모두 닫기 버튼이 필요함 하지만 하나가 위치가 다름

생각

1. 닫기 버튼이 필요한 지 boolean값으로 넘겨받아 동적 렌더링?
2. 닫기 버튼을 아예 ModalLayout에서 제거?

얻은 점

컴포넌트를 설계할 때 처음부터 더 재사용성과 확장성을 고려해서 깊게 고민하고 코드를 짜자.

---

학교 검색 api

구현 과정

학교 이름 입력란 input에 입력 이후 submit event listen시 input에 value 값을 api url

1. 학교 이름 입력 input에 입력
   • input value 값은 state로 관리 [searchSchool, setSearchSchool]
2. 학교 이름 입력 form submit event 발생 시
   • data fetch
   • url 신청인자 SCHUL_NM=searchSchool
   • setSearchSchool(””) input value 값 초기화

Think

현재 이 구현과정은 프론트엔드에서 직접 open api로 data를 fetch하게 된다.

하지만, 신청인자로 넣어주는 SCHUL_NM을 백엔드 api url로 넘겨주어서 백엔드에서 open api로 해당 data를 fetch받아 다시 프론트로 넘겨주는 방식도 있을 것 같다.

첫 번째는 백엔드와 소통 없이 바로 접근, 두 번째는 백엔드와 소통 있음

뭐가 더 효율적인가?

현재는 확실하지 않지만 바로 url에 접근하고 data를 가공할 필요없이 넣어주면 돼서 백엔드와 소통 없는 총피셜 방법을 택했다. 필요없는 data도 fetch해서 state에 넣게 되는데

성능에 조금이라도 영향이 있을까?

백엔드에서 내가 필요한 SD_SCHUL_CODE, SCHUL_NM, LCTN_SC_NM 값들 말고 다른 키는 빼서 다시 프론트에게 주면은 프론트에는 data양이 더 적어지게 되어서 좋을 거 같다고 생각이 든다.

조사를 더 해서 이 부분에 대해서 수정해보도록 하겠다.