[4주차] 김서연 과제 제출합니다. #14
Conversation
There was a problem hiding this comment.
좋은 코드 감사합니다!
전반적으로 잘 짜여진 코드였다고 생각하고, 추후 세션 때 컴포넌트 트리 로직, 파일 분리 관련하여 같이 이야기해보면 좀 더 좋은 협업이 가능할 것 같습니다!
추가적으로 질문 사항이 있어서 몇 가지만 미리 적어놓겠습니다! (4주차 과제 관련 X)
- 제가 주변 지인들에게 여쭤봤을때 next.js 사용하면 tailwindCSS 많이 쓴다고 하더라고요. 저도 물론 tailwindCSS + styled-components 같이 쓰고 있는데 (styled-components가 메인임) 추후 과제나 프로젝트 때 tailwindCSS로 통일해서 사용하시는 거 어떻게 생각하시나요?
- comment에도 적어놓긴 했었던 거 같은데, redux랑 zustand 중에서 어떤 라이브러리가 더 편하신가요? 이정도의 프로젝트에서는 주로 zustand 사용하는 게 더 가볍고 러닝커브도 낮다고 해서 해당 부분도 궁금합니다!
There was a problem hiding this comment.
이렇게 아이콘+글자 까지 한 번에 svg로 바꾸는 대신
아이콘만 svg 파일로 사용해서 간격이나 폰트, 글귀 같은 건 코드로 짜면 추후 유지보수에 더 용이할 것 같습니다!
There was a problem hiding this comment.
이렇게 Large, Small 파일 두 개 저장하는 것도 좋지만 확장성, 가독성 고려했을 때 ProfileDarkGrey 파일 하나만 만들어서 width, height로 크기 조절해도 괜찮을 것 같습니다!
There was a problem hiding this comment.
정확히 디자인이 어떻게 되어있는지는 모르지만, 이렇게 색깔 입혀져 있는 경우 fill="currentColor" 속성이나 css color 사용해서 색상 변경할 수 있으면 더 좋을 것 같습니다!
There was a problem hiding this comment.
ToggleDown 파일 하나만 두고 rotation해서 사용하면 더 좋을 것 같습니다!
react-messenger-21th/src/App.css
Outdated
| if (!currentChatRoom) return <p>채팅방을 선택하세요.</p>; | ||
|
|
||
| // 메시지를 날짜 & 시간 기준으로 그룹화 | ||
| const groupMessages = () => { |
There was a problem hiding this comment.
react에 Array.reduce()라는 메소드가 있는데 이거 한 번 적용해보시는 것도 좋을 것 같습니다!
There was a problem hiding this comment.
제가 코드 봤을 때는 reaction 닫는 로직이 없는 거 같은데, 해당 로직도 추가할 수 있으면 더 멋진 코드가 될 것 같습니다!
There was a problem hiding this comment.
별개로 저도 이런 감정표현 추가할까말까 고민하다가 안 했는데, 이런 식으로 구현할 수도 있겠네요!
| textareaRef.current.style.height = `${ | ||
| textareaRef.current.scrollHeight > 52 | ||
| ? 52 | ||
| : textareaRef.current.scrollHeight |
There was a problem hiding this comment.
Math.min(textareaRef.current.scrollHeight, 52) 삼항연산자 대신 이거처럼 간단한 min 함수 사용해도 좋을 거 같습니다!
| {/* 현재 선택된 채팅방 메시지에 대해 */} | ||
| <s.UpperBarContainer> | ||
| <s.LeftGroup> | ||
| <PrevButton onClick={handleBack} /> |
There was a problem hiding this comment.
이런 버튼에는 cursor: pointer; 추가하면 좀 더 UX에 도움이 될 것 같습니다!
| // 고정된 채팅방 관리 | ||
| const [pinnedRooms, setPinnedRooms] = useState<string[]>(() => { | ||
| // 로컬스토리지에서 불러오기 | ||
| const stored = localStorage.getItem('pinnedRooms'); |
There was a problem hiding this comment.
이런 방식도 좋지만, 제가 생각했을 때는 chatRoom 인자로 isPinned 추가하는 게 유지보수 측면에서 더 좋은 코드가 될 것 같습니다!
🚀 배포 링크
Messenger
💡 느낀 점
❓ Key Questions
1️⃣ React Router의 동적 라우팅(Dynamic Routing)이란?
동적 라우팅(Dynamic Routing)
동적 라우팅을 사용하는 이유
✅ 정적 라우팅의 단점
→ 정적 라우팅은 라우터 컴포넌트에서 사용할 경로와 해당 경로로 접속 시 보여줄 컴포넌트를 미리 정의한다.
→ 따라서 여러 상세페이지, 내용들이 있다면 경로를 미리 설정하는 방식은 같은 컴포넌트를 여러 번 만들어야 한다는 점에서 매우 비효율적이다.
✅ 동적 라우팅
→ 동적 라우팅은 URL 형태를 미리 정의하지 않고 일부를 변수처럼 바꿔가며 콘텐츠를 다르게 보여주는 라우팅 방식이다.
→ 같은 컴포넌트를 공유하면서, id와 같은 내부 데이터에 따라 다른 내용을 보여주므로 같은 컴포넌트를 여러 개 만들 필요가 없다.
2️⃣ 네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법
📌 UX/UI 디자인 전략
🔹로딩 상태 시각화
→ 스피너, Skeleton UI, shimmer 효과 등
🔹콘텐츠 우선순위 로딩
→ Lazy Loading으로 아래 이미지, 리스트는 지연 로드 등
📌 기술적 최적화 전략
**🔹프리패칭 & 캐싱 **
→ 마우스 hover 시 다음 페이지를 프리패치, 브라우저 캐 등
**🔹코드 스플리팅 **
→ React.lazy, Suspense
3️⃣ React에서 useState, useReducer 지역 상태 관리 vs. Context API 및 전역 상태 관리 라이브러리의 차이점
📌 useState, useReducer 지역 상태 관리
📌 Context API 간단한 전역 상태 공유
🔹 Context API는 자주 업데이트 할 필요가 없는 데이터에 사용
📌 전역 상태 관리 라이브러리
사용범위: 앱 전체 상태 관리에 최적화
장점: 구조화, 미들웨어 지원, 디버깅 도구 제공
단점: 설정이 복잡할 수 있음
Redux Toolkit: 가장 널리 쓰이고, 미들웨어 연동에 용이
Zustand: 심플하고 성능이 좋으며, 커스텀 훅 기반
Recoil: React에 자연스럽게 통합되며, 비동기 지원 성능 우수