[4주차] 김윤성 과제 제출합니다. #18
Conversation
| "react": "^19.1.1", | ||
| "react-dom": "^19.1.1", | ||
| "react-router-dom": "^7.9.3", | ||
| "tailwind-scrollbar-hide": "^4.0.0" |
There was a problem hiding this comment.
css property 조작을 통해서 커스텀 scrollbar-hide 클래스를 구현할 수 있습니다. 개인적으로 이런 플러그인 사용은 지양하시는 편이 좋을 거 같네요
There was a problem hiding this comment.
public 폴더랑 src 폴더 둘 다 json 파일이 존재하는 거 같습니다
There was a problem hiding this comment.
icons랑 data 이런 데이터/이미지 파일들은 public 폴더에 위치시키는 걸 추천드립니다
There was a problem hiding this comment.
현재 default/pressed svg 파일의 경우 fill property 변경으로 대체할 수 있습니다. 파일 저장을 최소한으로 하시는 것을 추천드립니다
There was a problem hiding this comment.
또한 현재 텍스트도 svg 파일 내에 저장했는데 이렇게 하시면 접근성/유지보수 측면에서 불리함이 있습니다. 가급적 벡터 기반 이미지만 svg 파일로 저장하시는 것을 추천드려요
There was a problem hiding this comment.
3주차 과제 피드백 보시면 fill="currentColor" 관련 내용이 있습니다.
There was a problem hiding this comment.
눈으로 보았을 때 (벡터 값까지는 보지 않았음) backArrow.svg 파일이랑 backward.svg 파일 차이가 없어보이는데 두 가지 파일 모두 저장한 이유가 있을까요?
더불어서 현재 벡터 기반 이미지 외에도 상하좌우로 여백이 있는 거 같은데, 이렇게 가져오시면 고정된 spacing 때문에 디스플레이 변화 시 UI가 망가지기 쉽습니다.
There was a problem hiding this comment.
이렇게 하시면 처음 시작 시간의 second 값에 따라서 갱신 과정에서 문제가 생깁니다
처음 랜더링 되었을 때 현재 시간 값을 계산해서 사용한 뒤 다음 갱신부터 1분 단위로 하는 게 더 적합한 세팅인 것 같네요 (e.g., 현재 14시 29분 30초 424' -> 처음 갱신은 29초 576' -> 다음부터는 1분)
There was a problem hiding this comment.
css 파일도 동일한 폴더 내에 배치하시는 것을 추천드립니다
| <div | ||
| className={`overflow-hidden transition-[max-height] ${ | ||
| open || isAlwaysOpen ? "block" : "hidden" | ||
| }`} |
There was a problem hiding this comment.
clsx 라이브러리 찾아보시고 사용하시는 것을 추천드립니다
| defaultIcon: MoreDefault, | ||
| pressedIcon: MorePressed, | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
이런 const 변수는 폴더 분리해서 사용하시면 더 좋을 거 같네요
There was a problem hiding this comment.
react context API 사용하신 거 같은데 zustand 같은 상태관리 라이브러리 사용하시는 것도 고려해보시면 좋을 거 같습니다. 더 가볍고 사용이 용이하니까요
|
과제하느라 고생하셨습니다~~!! 채팅방 페이지, 친구 프로필이 여러개라 다 만드느라 바빴을것같네요 시험기간에 고생하셨습니다~ |
There was a problem hiding this comment.
이렇게 같은 이미지지만 색상만 다른경우에 하나의 파일만 저장하고 색상을 다르게 출력하는 방법도 있는데 다음엔 이렇게도 해보는거 추천드려요!
There was a problem hiding this comment.
채팅을 보내도 안읽은 메세지 수가 안없어지고있습니다 이부분 코드가 작용안하고있는것같습니다
There was a problem hiding this comment.
드롭다운을 누르고 나온 친구 목록에서 친구 프로필을 보고 뒤로가기를 했을때 드롭다운이 내려가있는것이 유지되어있으면 좋을것같아요
| }; | ||
| export default function ChatsList() { | ||
| const { messages } = useMessages(); | ||
| useMinuteTick(); // 1분마다 재렌더 트리거 |
There was a problem hiding this comment.
1분마다 재렌더링되면 최대 59초까지 실제 시간과 오차가 발생할수 있으니 렌더링 주기를 더 짧게 해봐도 좋을것 같습니다
3 participants
구현화면
배포링크
피그마링크
느낀점
Review Questions
1. React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?
동적 라우팅(Dynamic Routing)이란, **경로(path)**의 일부를 변수처럼 설정해 url에 따라 다른 데이터를 가진 동일한 컴포넌트를 렌더링하는 방식이다.
(1) 리스트 → 상세 페이지 이동 : {/products/1, /products/2} 같은 상품 상세 페이지에서 사용한다.
(2) 채팅방 / 게시글 / 프로필 등 개별 데이터 렌더링 : URL마다 다른 id를 받아 동일한 컴포넌트 구조를 재사용하여 효율적이.
(3) RESTful 구조의 UI 설계 : 서버 API의 id 파라미터와 매칭되도록 URL 구조를 일관성 있게 유지한다. RESTful API와 연계가 쉬워 유지보수가 간편하다는 장점이 있다.
2. 네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법은 무엇인가요?
3. React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.
useState와 useReducer는 지역(Local) 상태 관리 컴포넌트 내부에서만 사용되는 상태를 관리할 때 사용한다. useState는 가장 기본적인 상태 관리 훅으로 단순한 상태(토글, 입력값, 카운터 등)에 적합하다. 반면 useReducer는 상태가 여러 필드로 구성되거나, 업데이트 로직이 복잡할 때 사용한다.
Context API는 여러 컴포넌트가 공통된 상태를 공유해야 할 때 사용한다. 주로 여러 컴포넌트가 같은 상태를 필요로 할 때, Props drilling을 피하기 위해 사용하며 부모 컴포넌트에서 만든 상태를 Provider로 하위에 공급한다. 하지만 값이 바뀔 때 지역 상태 관리에서는 해당 컴포넌트만 리렌더하는데 반해 전역 상태 관리에서는 구독 중인 모든 하위 컴포넌트가 리렌더링된다. 이는 컴포넌트 트리 내 여러 곳에서 필요한 공통 데이터 전달”에서는 적합하지만, 상태가 많아지면 비효율적이다.