[4주차] 조성아 과제 제출합니다. #17
Conversation
only1Ksy
left a comment
only1Ksy
left a comment
There was a problem hiding this comment.
안녕하세요, 성아 님! 이번 주차 과제도 수고 많으셨습니당 👍👏
src/App.tsx
Outdated
| import Statusbar from '@/components/Statusbar'; | ||
| import FriendProfile from '@/pages/friendList/profile/FriendProfile'; | ||
|
|
||
| function AppLayout({ children }: { children: React.ReactNode }) { |
| return ( | ||
| <nav className="border-light-gray space-between fixed bottom-0 left-1/2 z-900 flex h-[65px] w-full max-w-[375px] -translate-x-1/2 items-center justify-around border-t bg-white"> | ||
| <div className="flex w-[46px] flex-col items-center justify-center border-0 bg-transparent"> | ||
| <Link to="/friendList"> |
There was a problem hiding this comment.
현재 아이콘/텍스트 구성이 반복되는 형태로 보이는데, 이는 배열 + map 렌더링으로 리팩토링하시면 유지보수에 더욱 효과적일 것 같습니당!
| right={ | ||
| <div className="flex cursor-pointer gap-4"> | ||
| <button onClick={() => alert('준비중입니다.')}> | ||
| <img src={searchIcon} alt="search" /> |
There was a problem hiding this comment.
위에서 활용하셨던 것처럼, Icon svg 파일들을 컴포넌트화 해서 사용하시면 좋을 것 같습니다!
| prevLengthRef.current = messages.length; | ||
| }, [messages]); | ||
|
|
||
| const getFormattedDate = (date = new Date()) => |
There was a problem hiding this comment.
이 컴포넌트와 MyProfile 컴포넌트는 같은 틀 안에서 사용되는 데이터만 다른 것 같아요! 데이터를 주입해 사용할 수 있는 구조로 리팩토링하면 중복되는 코드를 줄일 수 있을 것 같습니당
Wannys26
left a comment
Wannys26
left a comment
There was a problem hiding this comment.
코드 잘 봤습니다! 이번 과제도 수고하셨고, 시험 치느라 고생많으셨습니다!
다음주도 좋은 코드 기대하겠습니다!
| return { chatRooms: sortChatRooms(updated) }; | ||
| }), | ||
|
|
||
| setCurrentRoom: (roomId) => { |
There was a problem hiding this comment.
messages라는 단일 배열 안에 메시지, 좋아요 등등이 모두 저장되어있고, setCurrentRoom을 통해서 채팅방에서 보낸 메시지, 좋아요 등을 저장하는거 같은데,
지금 chatRoom1에서 채팅을 하다가 2로 넘어가는 상황이 발생하면, setCurrentRoom이라는 함수를 통해서 chatRoom1에서 발생한 메시지, 좋아요 내역들이 전부 삭제되는 거 같습니다!
addMessage나 toggleLike 함수에서 messages 단일 배열에 모두 저장하기 보다는, chatRoom id 별로 구분해서 저장하고 채팅방을 이동하면 불러오는 식으로 수정하면 좋을 거 같습니다!
| > | ||
| <img src={profile} alt="프로필 이미지" className="h-[65px] w-[65px]" /> | ||
| <div> | ||
| <div className="text-2xl font-semibold">정해인</div> |
There was a problem hiding this comment.
여기 하드 코딩 하기보다는, 작성하신 JSON 파일에서 불러오는 방식으로 수정하면 좋을거 같습니다!
|
|
||
| export default function FriendListSection() { | ||
| // 이미지 매핑 객체 | ||
| const images: Record<string, string> = { |
There was a problem hiding this comment.
data/ProfileImages.ts에 이미 images 매핑하는 함수가 있으니, 이거 그대로 사용하시는게 좋을거 같습니다!
| import ProfileCard from './ProfileBox'; | ||
|
|
||
| // 이미지 매핑 | ||
| const images: Record<string, string> = { |
There was a problem hiding this comment.
data/ProfileImages.ts에 이미 images 매핑하는 함수가 있으니, 이거 그대로 사용하시는게 좋을거 같습니다!
| }); | ||
| }, | ||
|
|
||
| addMessage: (message) => { |
There was a problem hiding this comment.
채팅방에서 채팅을 보내도 채팅 목록 페이지에서 최신 메시지가 업데이트 되지 않는거 같습니다! 메시지를 보낼 때마다, 최근에 보낸 메시지가 업데이트 되도록 수정해야 될거 같습니다
|
|
||
| {/* 오늘 메시지 */} | ||
| {todayMessages.map((msg, idx) => { | ||
| const sender = users.find((u) => u.id === msg.sender); |
There was a problem hiding this comment.
const sender = users.find((u)는 매 유저를 순회해야 하기에 유저가 많이 늘어나면 시간이 오래 걸릴 것 같습니다. 매핑을 사용하는 것도 괜찮아 보입니다
Added layout section explaining the structure and optimization of the application.
4 participants
🔗배포주소
✨결과 화면
🎨디자이너 피드백 반영 사항
✅지난 과제 이후 구현 기능
👍개발 측면에서 개선 사항
Review Questions
1. React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?
정적으로 미리 정의된 경로만 사용하는 것이 아니라, 사용자의 행동이나 서버 데이터에 따라 라우트를 결정하는 것이다.
예를 들어, 내가 프로필을 클릭하면 프로필 페이지로 이동하는 것을 말한다.
2. 네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법은 무엇인가요?
UI/UX 디자인 전략:
로딩 상태 표시: 스켈레톤 화면, 스피너, 로딩 바 등으로 사용자에게 진행 상황 제공
점진적 로딩(Progressive Loading): 중요한 콘텐츠부터 먼저 보여주기
기술적 최적화 방법:
코드 스플리팅(Code Splitting): React의 React.lazy, Suspense 사용하여 필요한 컴포넌트만 로딩
이미지 최적화: WebP, AVIF 포맷, Lazy Loading, CDN 활용
네트워크 요청 최소화: API 합치기, GraphQL 사용, 캐싱 전략 적용
3. React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.
지역 상태 관리: useState와 useReducer
useState
용도: 단순하고 독립적인 컴포넌트 상태를 관리할 때 사용
특징: 간단한 boolean, string, number, 객체 상태 관리
상태 업데이트 시 해당 컴포넌트만 리렌더링
useReducer
용도: 상태 전환 로직이 복잡하거나 여러 액션이 있을 때
특징: 상태와 상태 변경 로직을 분리 → 가독성 ↑
여러 액션을 한 곳에서 관리 가능
Context API
용도: 컴포넌트 트리 전체에서 전역적으로 상태 공유가 필요할 때
특징: createContext + Provider를 사용해 트리 전체에 상태 제공
useContext로 어디서든 접근 가능
전역 상태 관리 라이브러리 (예: Redux, Zustand, Recoil)
용도: 대규모 앱에서 복잡한 전역 상태 관리
특징: 상태, 액션, 사이드 이펙트 관리가 명확
특정 컴포넌트만 선택적으로 구독 → 불필요한 리렌더 방지
미들웨어 지원 → 비동기 처리, 로깅, 캐싱 용이