[4주차] 최서연 미션 제출합니다. #16
Conversation
There was a problem hiding this comment.
개발 시작하기 전에 네이밍 컨벤션 한번 더 맞춰보면 좋을 것 같아요! 저는 모든 정적 파일들은 kebab-case로 작성했는데 찾아보니까 SVG ReactComponent는 서연님처럼 PascalCase로 작성하는게 좋다고 하네요!
근데 또 vite-plugin-svgr 문서에서는 소문자로 쓰고 있네요..? 뭐든 상관 없으니 통일합시다,,
There was a problem hiding this comment.
아이콘, navbar, profile 이렇게 나눠서 svg를 저장하신거 같은데 그렇게 나눈 기준이 있을까요?
There was a problem hiding this comment.
navbar나 profile처럼 특정 부분에서만 쓰이는 부분은 묶어두고(명확하게 나뉘는 것들...) 나머지는 icon으로 빼놨습니다...ㅎㅎ
| import Send from '@/assets/images/icon/Send.svg?react'; | ||
| import Smile from '@/assets/images/icon/Smile.svg?react'; | ||
| import useMessageStore from '@/store/useMessageStore'; | ||
| import cn from '@/utils/cn'; |
There was a problem hiding this comment.
cn 유틸 새로 알게 됐어요! 찾아보니 조건부 클래스 관리에 유용한 것 같아요!
| const [inputText, setInputText] = useState<string>(''); | ||
|
|
||
| const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { | ||
| if (e.key === 'Enter' && !e.nativeEvent.isComposing) { |
There was a problem hiding this comment.
모바일 앱이지만 웹에서의 사용성도 고려해서 shift enter로 줄바꿈 가능하게 한 것 좋은 것 같아요!!
There was a problem hiding this comment.
@chaeyoungwon 채영님 피드백 반영...😄
| } | ||
| }; | ||
|
|
||
| const convertToBase64 = (file: File): Promise<string> => |
There was a problem hiding this comment.
convertToBase64를 별도 함수로 만들고 Promise로 래핑해 재사용성을 확보한 점이 좋은 것 같아요!
| newMessages.forEach((message) => storeMessage(message)); | ||
| }; | ||
|
|
||
| const handleSendFiles = async (files: File[]) => { |
There was a problem hiding this comment.
handleSendImages랑 handleSendFiles가 비슷한 것 같은데 하나로 합치는 것도 좋을 것 같습니다
There was a problem hiding this comment.
글로벌 레이아웃을 따로 빼서 컴포넌트로 정해놓으셨네요!! 통일성 있고 좋을 것 같아요ㅎㅎ
저는 글로벌 레이아웃 지정할 때 테일윈드 css 파일 사용해서 지정해놓았는데 그냥 컴포넌트로 따로 빼도 보기 좋을 것 같아요! 테일윈드 글로벌 css 지정은 확장성 있어서 좋고, 이 방법은 이름이 딱 정해져있어서 가독성이 좋은 방법일 것 같아요
| }; | ||
|
|
||
| return ( | ||
| <section className='flex flex-col p-4 bg-blue-0 gap-4'> |
There was a problem hiding this comment.
BirthdayProfileList랑 ProfileList랑 구조가 많이 비슷한 것 같은데 공통으로 뺄 수 있는건 빼도 좋을 것 같아요!
|
|
||
| interface ChatHeader { | ||
| title: string | undefined; | ||
| onClick: () => void; |
There was a problem hiding this comment.
전달 받는 함수가 어떤 역할을 하는지 조금 더 자세하게 명시해서 적어주시면 좋을 것 같아요!
There was a problem hiding this comment.
프로젝트 할 때는 좀 더 자세히 적어보도록 하겠습니다!
There was a problem hiding this comment.
사용이 간단하고 요즘 많이 쓰인다고 알고 있어서 사용했습니당
배포 링크
🔗 배포 링크
배운점 & 느낀점
지난번에 코드리뷰 받았던 부분들을 반영해서 리팩토링했습니다. zustand는 처음 사용해봐서 어려웠습니다. 잘못 사용한 부분이 있을 수도 있으니 발견하시면 알려주세요🥲 사진 전송, 파일 전송 구현하다가 파일 전송할 때 오류가 나서 확인해보니 localStorage 용량 초과로 인한 오류가 났습니다. localStorage 용량은 일반적으로 5MB~10MB라서 큰 파일 전송을 할 때 문제가 생겨 따로 에러 처리를 해주었습니다. 파일 다운로드 부분이 어려울 줄 알았는데 a 태그로 간단하게 구현할 수 있는걸 알게 되었습니다.
Key Questions
1. React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?
동적 라우팅(Dynamic Routing) 은 클라이언트의 요청에 따라 경로를 동적으로 처리하는 라우팅 방식이다. 사용자의 입력, 상태 변화, 다양한 조건에 따라 서버가 어떤 페이지나 리소스를 제공할지 결정한다. 정적 라우팅(Static Routing) 과 다르게, 실행 시점에 라우팅 규칙이 결정되는 특징이 있다. 정적 라우팅은 라우터 컴포넌트에서 사용할 경로와 해당 경로로 접속 시 보여줄 컴포넌트를 미리 정의한다. 상세 페이지의 모든 페이지를 정적으로 라우팅하는 것은 비효율적이므로, 동적 라우팅을 사용하여 URL 형태를 미리 정의하지 않고 특정 규칙에 부합한 URL이 있을 때 해당 엘리먼트를 보여준다.
react-router-dom을 활용하여 동적 라우팅을 구현할 수 있다.
useParams hook을 사용하여 path parameter의 값을 가져오고, path parmeter의 값이 바뀌면 컴포넌트를 리렌더링해준다.
2. 네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법은 무엇인가요?
디자인 전략으로는 스켈레톤 UI나 로딩 표시를 활용하여 사용자에게 페이지 로딩에 대한 정보를 제공할 수 있다. 기술적 최적화 측면에서는 이미지 및 동영상 압축, 캐싱, CDN 활용, 웹 폰트 최적화 등을 통해 로딩 속도를 개선할 수 있다. WebP 등의 이미지 포맷을 통해 파일 크기를 줄일 수 있다. 지연 로딩(Lazy Loading), 즉![]()
속성을 활용하여, 사용자가 스크롤로 해당 위치에 도달할 때 이미지를 로드한다.
3. React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.
지역 상태 관리
전역 상태 관리