[4주차] 정성훈 과제 제출합니다. #12
Conversation
There was a problem hiding this comment.
타입선언은 assets폴더보다는 따로 types/ 폴더를 만들어서 안에 배치하는 것이 더 좋아보입니다.
There was a problem hiding this comment.
아래에 있는 top_navigation.svg가 있는데 다시 다운 받은 이유가 궁금합니다. 또한, 친구텍스트, 친구추가 아이콘, 알림아이콘, 설정아이콘 각각 다운받아서 top_navbar컴포넌트를 만들어서 사용하는것이 아이콘에 각각 동작을 추가한다던가, 너비조정, 높이 조정등에 좋지 않을까 생각이 듭니다.
There was a problem hiding this comment.
불필요한 asset은 지우는게 좋아보입니다.
There was a problem hiding this comment.
다같이 프로젝트 협업할 때, 이미 다운받은 에셋을 파일명만 보고 알 수 있도록하는 것이 페어 개발자에게 배려라고 생각합니다. 이렇게 파일명 고려없이 다운받으면 가독성이 떨어지지 않을까 싶습니다.
| path="/chat/:roomId" | ||
| element={<ChatRoom rooms={rooms} me={me} setRooms={setRooms} />} | ||
| /> | ||
| {/* <ChatRoom room={dummyRoom} me={me} /> */} |
There was a problem hiding this comment.
사용안하는 코드는 삭제를 하는 것이 더 좋아보입니다.
| const prevMsg = messages[index - 1]; | ||
| const showDate = | ||
| !prevMsg || | ||
| new Date(prevMsg.timestamp).toDateString() !== date.toDateString(); | ||
| const month = (date.getMonth() + 1).toString().padStart(2, '0'); | ||
| const day = date.getDate().toString().padStart(2, '0'); | ||
| const weekdays = ['일', '월', '화', '수', '목', '금', '토']; | ||
| const weekday = weekdays[date.getDay()]; | ||
| const dateStr = `${month}월 ${day}일 (${weekday})`; | ||
|
|
||
| let hours = date.getHours(); | ||
| const minutes = date.getMinutes().toString().padStart(2, '0'); | ||
| const period = hours < 12 ? '오전' : '오후'; | ||
| hours = hours % 12 || 12; | ||
| const timeStr = `${period} ${hours}:${minutes}`; |
There was a problem hiding this comment.
이러한 유틸코드들은 utils/dateUtil.ts utils/formatTime.ts와 같이 파일을 분리하는 것이 더 좋아보입니다.
| onKeyDown={(e) => { | ||
| if (e.key === 'Enter' && !e.shiftKey) { | ||
| e.preventDefault(); | ||
| sendMessage(inputValue); | ||
| } | ||
| }} |
There was a problem hiding this comment.
isComposing인 경우에 대해서, 이전 주차때 다뤘던거 같은데 리팩토링이 안되어있는 것 같아서 해주셔야할 것 같습니다.
2025-10-26.5.41.32.mov
지금 textArea부분 placeholder부분이 움직이는 현상이 있어서 이부분 수정해주셔야할 것 같습니다.
2025-10-26.5.31.53.mov
There was a problem hiding this comment.
isComposing 부분 관련 링크 같이 첨부해드립니당
| }); | ||
|
|
||
| return ( | ||
| <div className="relative bg-white w-[375px] h-[728px]"> |
There was a problem hiding this comment.
레이아웃관련된 코드는 다른 페이지에서도 사용되는 것으로 보이는데 따로 분리해서 레이아웃선언하는게 더 좋아보여요
There was a problem hiding this comment.
전체 화면의 경우 h-[728px]로 고정되어있어서 높이가 이거에 비해 작은 스크린에서는 넘쳐보이는데 h-screen과 같은 속성으로 수정하는게 더 좋아보입니다. 또한 화면이 지금 왼쪽끝으로 치우쳐져있어서 화면 가운데로 배치하는게 더 좋아보입니다.
| {msg.sender.name} | ||
| </div> | ||
| )} | ||
| <div className="bg-[rgba(255,255,255,1)] rounded-[12px] box-border break-words text-[14px] leading-[1.5] p-[8px] mr-[5px] "> |
There was a problem hiding this comment.
rgba랑 16진수 선언이랑 다 섞여있어보이는데, global.css에서 선언한 방식으로 text선언, 색상선언하는것이 더 좋아보입니다.
There was a problem hiding this comment.
현재 104px와 60px의 프로필 이미지가 있는 것 같은데, 같은 이미지일 경우, 하나만 다운 받고 크기 조절 속성을 사용해도 좋을 것 같습니다 !!
There was a problem hiding this comment.
아이콘만 따로 이미지로 사용하고, 그 외 문자는 직접 파일에 입력하여 조정하는 것이 후에 수정할 때 더 편리할 것 같습니다:)
There was a problem hiding this comment.
interface 한 곳에 다 모아놓으셔서 가독성 좋은 것 같습니다 :)
There was a problem hiding this comment.
페이지 내에서 한 번에 모든 것을 구현하는 것 보다, 컴포넌트별로 조금 나누는 것이 후에 유지보수나 가독성에 더 좋을 것 같습니다!!
There was a problem hiding this comment.
최신메시지의 방이 위로 정렬되게끔 하면서, 몇 분/시간/일 전에 보냈는지 나타나지는 부분 인상 깊습니다 !
| onKeyDown={(e) => { | ||
| if (e.key === 'Enter' && !e.shiftKey) { | ||
| e.preventDefault(); | ||
| sendMessage(inputValue); | ||
| } | ||
| }} |
There was a problem hiding this comment.
isComposing 부분 관련 링크 같이 첨부해드립니당
| {selectedUser && ( | ||
| <ProfileModal | ||
| user={selectedUser} | ||
| isOpen={!!selectedUser} |
There was a problem hiding this comment.
이 부분 왜 굳이 !!를 썼는지 몰랐는데 타입이 boolean으로 확실해지네요!! 새롭게 알게 되었습니다 :)
3 participants
배포링크
피그마
느낀점
저번 과제 때, 디자인 시스템을 구축하지 않고 진행했었다. tailwindCSS에 익숙하지 않기도 했고, v4와 v3를 혼동해서 사용하기도 해 굉장히 불편했었다. 그래서 이번에는 tailwindCSS에 대해 좀 더 자세히 공부했고, 미리 사용할 것들을 정의한 뒤 작업을 했다. 조금 더 익숙해지니 확실히 많이 편했다.
그런데 theme variable을 정의할 때, tailwind에서 기본적으로 제공하는 색상을 내가 원하는 색으로 바꾸려 하니 적용이 안돼서 애를 먹었다.
@theme { --color-*:initial; --color-gray-100: #121212;}이런 식으로 기존 변수를 초기화하고 하려니 그대로여서,
@theme {--color-gr-100: #121212;}이렇게 사용했다. 왜 그랬는지 좀 더 찾아봐야 할 것 같다.
Review Questions
React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?
웹 앱에서 클라이언트의 요청에 따라 경로를 동적으로 처리하는 라우팅 방식.
예를 들어 정적 라우팅의 경우 미리 사용할 경로를 하드코딩으로 모두 정의해둡니다.
<Route path="/comment" element={<Comment/>}/><Route path="/comment/2" element={<첫 댓글/>}/><Route path="/comment/3" element={<두번째 댓글/>}/>만약 댓글이 끝없이 늘어난다면, 정적 라우팅일 경우 끝없이 많은 경로를 미리 만들어야 합니다.
하지만 동적 라우팅의 경우엔
<Route path="/comment/:id" element={<Comment/>}/>이렇게 작성할 경우 :id를 매개변수처럼 활용해 다양한 페이지를 보여준다.
네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법은 무엇인가요?
네트워크 속도가 느릴 경우엔, 여러 요소들을 로딩하는 데 많은 시간이 걸리고, 그 동안 페이지에 아무것도 보이지 않으면 사용자는 금방 이탈하거나, 집중을 잃게 됩니다. 그래서 스켈레톤 UI나 로딩 스피너 같은 것들을 이용합니다.
로딩 스피너는 이미지나 동영상 같은 무거운 요소들을 불러오는 동안 빙글빙글 돌아가며 사용자에게 약간의 재미를 제공하고 현재 로딩이 진행중이라는 사실을 전해줍니다.
스켈레톤 UI의 경우, 컨텐츠를 다 불러오기 전, 임시로 뼈대 형태의 인터페이스를 보여줘 사용자에게 현재 로딩중인 컨텐츠가 이러한 형태로 제공될 것이라는 정보를 제공해 더 나은 경험을 제공합니다.
기술적 최적화에는 리소스 최적화, 캐싱 같은 방법을 활용할 수 있습니다.
일단 가장 중요한 것은 네트워크가 느리더라도 리소스를 빠르게 클라이언트로 다운로드 할 수 있게, 고효율 포맷을 사용해 이미지나 영상의 용량을 줄이고, 코드 스플리팅을 통해 처음에는 꼭 필요한 코드만 로드 할 수 있도록 하는 등 리소스 최적화를 하는 게 중요합니다. 또한 자주 사용하는 자원의 경우 캐싱을 통해 재다운로드를 방지해 더 빠르게 동작하도록 할 수 있습니다.
React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.
지역 상태 관리와 전역 상태 관리의 가장 큰 차이점은, 지역 상태 관리의 경우 컴포넌트 내부에서만 유효한 지역 상태를 관리하는 것이고, 전역 상태 관리의 경우 prop drilling 없이 여러 컴포넌트에서 상태를 공유할 수 있습니다.