[이승환] 기능구현 챌린지 #8
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Tmdghks7305
style: 안쓰는 코드 삭제
Tmdghks7305
dmswn1004
approved these changes
May 18, 2024
There was a problem hiding this comment.
승환 님!
정말 열심히 고민하고 구현하신 게 잘 보이는 코드였어요!
일단, 가장 신기하게 봤던 점은 SVG를 컴포넌트로 만들어서 재사용성을 높인 부분이었어요. 저는 이렇게 만들어 볼 생각을 한 번도 못해봤는데 이렇게도 할 수 있구나라는 생각이 들었습니다.
상수화 파일을 만들어서 관리하신 것도 좋네요!
스토리북 코드도 잘 작성해 주시고 추가로 CD까지 추가하셨더라고요,,,,👍 저도 해봐야겠네요!!
그런데 커스텀으로 작성하신 queryClient 파일을 main에서 사용하면 더 좋을 것 같아요.
과제 진행하느라 고생 많으셨습니다!!😀
Comment on lines
+1
to
+13
| export const DEBOUNCE_LIMIT_TIME = 500; | ||
|
|
||
| export const ARROW_UP = "ArrowUp"; | ||
| export const ARROW_DOWN = "ArrowDown"; | ||
| export const ENTER = "Enter"; | ||
|
|
||
| export const BANNER_TITLE = "국내 모든 임상시험 검색하고\n온라인으로 참여하기"; | ||
|
|
||
| export const NO_RESULT_MESSAGE = "현재 모집 중인 임상시험이 없습니다."; | ||
| export const NO_RESULT_MESSAGE_DESCRIPTION = `원하시는 결과가 없나요?\n아래 ‘임상시험 소식받기’를 통해 간단한 정보만 입력해주시면 해당 조건에 맞는\n새로운 임상시험이 등록 되었을 때 빠르게 알려드리겠습니다.`; | ||
|
|
||
| export const NO_FAVORITES_MESSAGE = "즐겨찾기에 등록된 임상시험이 없습니다."; | ||
| export const NO_FAVORITES_MESSAGE_DESCRIPTION = `원하시는 결과가 없나요?\n아래 ‘임상시험 소식받기’를 통해 간단한 정보만 입력해주시면 해당 조건에 맞는\n새로운 임상시험이 등록 되었을 때 빠르게 알려드리겠습니다.`; |
There was a problem hiding this comment.
상수화할 때,
export const DEBOUNCE_LIMIT_TIME = 500; 이렇게도 좋지만
export const MESSAGE = Object.freeze({
DEBOUNCE_LIMIT_TIME: 500,
});이렇게 Object.freeze를 사용해도 좋을 것 같네요!
Member
Author
There was a problem hiding this comment.
감사합니다. 생각못했는데 적용해볼게요 ! : )
dmswn1004
reviewed
May 18, 2024
| margin-left: 40px; | ||
| margin-top: -72px; | ||
| box-shadow: 0 0 1px rgba(255, 255, 255, 0); | ||
| backface-visibility: hidden; |
Member
Author
There was a problem hiding this comment.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
설계의 방향성
유지보수와 확장성을 고려한 컴포넌트 설계하기 ex) 합성 컴포넌트, props getter패턴 등 사용
비즈니스 로직과 뷰 로직을 분리해 재사용과 관심사 분리 및 추상화 잘 시키기
고민사항
컴포넌트 재사용을 할 수 있으면 무조건 하면 좋은지
컴포넌트를 재사용 할 수록 코드의 복잡도가 늘어나서 힘들었어요.
마음편하게 컴포넌트를 여러개 만드는 것도 방법이라고 생각하는데 기준이 있을까요?
비즈니스 로직과 뷰 로직을 커스텀 훅을 사용해 어떤 기준으로 얼마나 분리해야하는지
문제는 컴포넌트가 많아지면서 많은 곳에서 상태를 관리해야 했었고 상위에 있는 커스텀 훅에서 로직을 작성해 내려줘야했는데 그거 때문에
depth가 깊어졌어요.
해결 방법은 컴포넌트마다 커스텀 훅을 작성해 해결할 수 있다고 생각합니다. 근데 커스텀 훅을 부담없이 1회성으로 많이 만들어도 될까요?
추가로 모든 비즈니스 로직을 관심사의 분리를 위해 커스텀 훅안에서 작성해야할까요? 밖에다 작성하는 기준과 예시가 궁금합니다.
브라우저 저장소 (로컬,세션,캐시) 스토리지중에 결과리스트,최근 검색리스트를 어디에 저장할지
리드미 링크:https://github.com/Leeseunghwan7305/Infinite_Challenge_FE