[3주차] 제로 과제 제출합니다. #21
Conversation
minai621
left a comment
minai621
left a comment
There was a problem hiding this comment.
- svg 못쓰는건 유감입니다.
- Intl을 국제화 이외로 사용하는 것도 좋네요.
혹시나 RN에서 지원 안할 수도 있을까봐(브라우저 마다 다른 것 처럼!) 찾아봤는데 RN 살아있네요 .
https://reactnative.dev/docs/javascript-environment - axios를 사용하는 이유
인스턴스 사용이 매우 편리합니다.
baseUrl, default header 등 하나의 인스턴스를 싱글턴으로 관리할 수 있다는 장점이 있지만 커스텀하기 쉽지 않은 단점이 있어요.
class 직접 만들어서 싱글턴 인스턴스 만들고 fetch 함수 사용하는 것과 트레이드 오프를 비교하면 사실 axios를 사용하고 설정 부분은 분리해둔 다음에 필요한 부분에 fetch 함수를 구현에 같이 사용해서 함께 사용하는게 좋은 것 같습니다! - 리액트 쿼리 이슈?
queryFn에서 반환되는 promise에 타입을 정확히 명시하거나 타입 단언하면 해결되지 않을까요? 이건 뇌피셜입니다.
| return data; | ||
| }; | ||
|
|
||
| export const useGetMostPopularVideoList = () => { |
There was a problem hiding this comment.
api 폴더에 hooks가 같이 있으니까 어색하네요.
분리가 되는게 맞을 것 같아요!
There was a problem hiding this comment.
사실 보통 코드 짤 때에는 api와 hook을 분리했는데 이 프로젝트는 규모가 작아서 분리하면 오히려 연관된 코드가 잘 안 보인다고 판단하여 이렇게 구현하게 되었습니다. 다만 MJ 코드 참고해보니 인기 조회와 검색 조회를 한 파일에서 관리하던데, 다시 구현하게 된다면 그 코드처럼 둘을 합치고 둘의 hook을 분리해서 관리하도록 하겠습니다!
| container: { | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| height: '100%', |
There was a problem hiding this comment.
Error 컴포넌트는 flex:1로 사이징했는데 요기는 height:100%인 이유가 있을까요?
There was a problem hiding this comment.
error 컴포넌트에서 height을 100%로 주니 글씨가 제가 예상한 위치보다 아래에 위치하길래 flex를 사용하였습니다.
| const setSearch = useSearchStore(state => state.setSearch) | ||
| const setIsSearched = useSearchStore(state => state.setIsSearched) | ||
| const handleSearch = () => { | ||
| if (searchText.length === 0) { |
There was a problem hiding this comment.
.length를 사용하니 배열인지 문자열인지 (문자열이 문자 배열이겠지만) 헷갈렸어요.
텍스트답게 searchText === '' 이 좋지 않을까요?
빈 문자열 체크에 대한 숏컷들이 굉장히 많아서 찾아보면 좋을 것 같네용
!searchText도 가능합니다. ''는 falsy한 값이라서요. '' == false를 찍어보면 놀랍게 true가 나옵니다.
개인적으로 문자열임을 어필할 수 있게 === '' 를 선호합니다!
| return deleteSearch; | ||
| }, []); | ||
|
|
||
| if (isLoading) { |
There was a problem hiding this comment.
ActivityIndicator 컴포넌트를 사용하면 스피너를 보여줄 수 있어요.
| } | ||
|
|
||
| useEffect(() => { | ||
| return deleteSearch; |
There was a problem hiding this comment.
뭔가 고민을 많이 하게 되는 코드였어요..
변수인가? 함수인가? 클린업 함수로 기능을 하나? 함수에서 데이터를 반환하나? 등
클린업 함수는 따로 익명 함수로 감싸는게 좋은 것 같습니다!
There was a problem hiding this comment.
좀 더 일반적으로 코드 짜는 법 연구해도록 하겠습니다!
| setSelectedVideo(videoInfo); | ||
| } | ||
|
|
||
| const renderVideoOrImage = () => { |
There was a problem hiding this comment.
VideoItem이 생성될 때 마다 해당 함수가 같이 생성됩니다. Item 컴포넌트니까 여러 개 생성되겠죠?
useCallback으로 메모이제이션해도 되지만, 조건부 렌더링 사용하는게 일반적인 것 같습니다!
| export const windowHeight = Dimensions.get('window').height; | ||
| export const windowWidth = Dimensions.get('window').width; | ||
|
|
||
| export const mediaAspectRatio = 16 / 9; |
There was a problem hiding this comment.
이런 상수 변수는 upper snake case를 쓰는게 좋다고 합니다.
MEIDA_ASPECT_RATIO로!
|
친절한 답변 아주 감사합니다. |
3 participants
라이브러리 및 도구 사용
zustand와react query사용Stylesheet사용정보
svg sprite
이번에는 당근마켓 기술 블로그에서 아이콘을 컴포넌트로 만드는 새로운 방법을 찾았는데 아쉽게도 리액트 네이티브에서는 적용할 수 없다고 합니다. (MJ 피셜입니다)
지난 과제처럼 svg 형태가 단순하지 않을 때 쓰기 좋은 방법인 것 같습니다!
당근 마켓에서 svg sprite를 활용해서 만든 라이브러리 관련 아티클
조회수 정보 format
조회수를 n k, n 천 회처럼 format하는 JS 함수가 있길래 유용하게 사용하였습니다. 참고로 통화(화폐) 변경도 가능합니다!
관련 MDN 문서
RN 줄바꿈
혹시나 필요하신 분 계실까봐 공유해봅니다..
RN 줄바꿈
hook vs utility
지난 스터디에서 hook과 util을 분류하는 기준에 대해서 얘기 나왔었는데 며칠 전 읽은 아티클에 관련 이야기가 있어서 공유합니다.
아티클
요약 : 글쓴이는 특정 컴포넌트나 context에 종속되는 함수를 hook으로 빼고, 재사용성이 높은 함수를 util로 뺀다고 합니다.
고민 및 질문
api
❓axios 많이 쓰시는 것 같은데 axios를 사용하시는 이유가 뭔가요?
youtube api data
검색 결과와 인기 목록 조회가 return하는 data가 약간 다르던데
❔둘의 타입을 따로 만들어 관리하셨나요? 둘 타입을 통일시킬 수 있는 일종의 processor를 만드셨나요?
리액트 쿼리
❓리액트 쿼리로 요청을 처리할 때 select를 통해 data가 format된 data를 받을 수 있도록 처리하고 싶었는데 undefined라 format 함수를 동작시킬 수 없다는 에러가 발생했습니다. 현재는 data를 받은 쪽에서 처리하도록 변경해두었는데 혹시 왜 이랬는지 아는 분...?
후기