[4주차] 이채연 과제 제출합니다. #14
Conversation
There was a problem hiding this comment.
tailwind v4에서는 css 파일 내에서 utility class 선언이 가능합니다
There was a problem hiding this comment.
타입 선언 파일을 좀 더 세분화해서 분리해도 괜찮을 거 같아요 (e.g., chat.d.ts, message.d.ts, ...)
There was a problem hiding this comment.
폰트 크기를 px -> rem으로 바꾸시면 좀 더 다양한 디스플레이에 적합하게 동작할 것 같습니다
| import ReactDOM from 'react-dom/client'; | ||
| import './index.css'; | ||
| import App from './App'; | ||
| // 👇 실제 프로젝트의 Provider 이름/경로에 맞춰 주세요. |
There was a problem hiding this comment.
AI agent 사용하신 거 같은데 이런 주석은 지워주셔도 좋을 거 같네요
There was a problem hiding this comment.
아이콘 폴더 어떻게 구분할지 좀 더 생각해보시면 좋을 거 같네요
There was a problem hiding this comment.
추가적으로 json data나 icon 이미지 파일은 public 폴더에 저장하시고 path alias로 불러오시는 것을 추천드립니다
There was a problem hiding this comment.
이렇게 img 태그로 불러오시면 유지보수 / 확장성 등에서 제약이 존재합니다. svgr 사용하시는 것을 추천드립니다
There was a problem hiding this comment.
현재 시간이랑 동기화하는 건 좋은 거 같습니다. 그런데 refreshMs를 따로 정의한 이유가 있을까요?
+) 기본 30_000 인 이유도 궁금합니다
| el.style.height = `${Math.min(contentH, maxTextAreaHeight)}px`; | ||
| el.style.maxHeight = `${maxTextAreaHeight}px`; | ||
| el.style.overflowY = contentH > maxTextAreaHeight ? 'auto' : 'hidden'; | ||
| }; |
There was a problem hiding this comment.
px로 선언하시는 것 외에도 실제로 var(--spacing) 을 가지고 계산할 수도 있습니다
| 'text-caption-medium leading-none text-[color:var(--gray-500)]', | ||
| side === 'left' ? 'self-end pr-0' : 'self-end pl-0', | ||
| ].join(' ')} | ||
| > |
There was a problem hiding this comment.
앞서 말씀드렸듯이 clsx 라이브러리 사용하시면 좋을 거 같네요
Tutankhannun
left a comment
Tutankhannun
left a comment
There was a problem hiding this comment.
완성하시느라 수고하셨습니다~ 컴포넌트도 잘 나눠져 있어 유지보수 측면에서 좋아 보입니다.
There was a problem hiding this comment.
svg파일을 하나의 파일로 import하도록 해서 훨씬 효율적인 것 같습니다!
| {/* 배경 투명 - 부모의 배경색 상속 */} | ||
| <div | ||
| className="rounded-full" | ||
| style={{ |
There was a problem hiding this comment.
tailwind로 한번에 스타일을 정의해도 좋을 것 같아요.
| </span> | ||
| ) : null; | ||
|
|
||
| const marginTop = spacing === 'first' ? '' : spacing === 'different-user' ? 'mt-4' : 'mt-1'; |
There was a problem hiding this comment.
삼항연산자는 가독석이 떨어져서 다음과 같이 따로 정리하면 더 보기 좋을 것 같습니다.
const spacingClass = {
first: '',
'different-user': 'mt-4',
'same-user': 'mt-1',
}[spacing];
|
|
||
| // 하트 클릭 핸들러 추가 | ||
| const handleHeartClick = (e: React.MouseEvent) => { | ||
| e.stopPropagation(); // 이벤트 버블링 방지 |
There was a problem hiding this comment.
이벤트 버블링까지 잘 챙기셨네요. 다만 event.stopPropagation()은 상황에 따라 권장되지 않기도 해서 이 점 잘 유의하셔야 될 것 같습니다.
[참고자료]
| const [friendOpen, setFriendOpen] = useState(false); | ||
|
|
||
| // 비즈니스 친구 4명 | ||
| const businessFriends: Friend[] = Array.from({ length: 4 }, (_, i) => ({ |
There was a problem hiding this comment.
하드코딩으로 되어있는 부분은 data에 json파일 가져와서 items.length 활용하시면 간단하게 구현 할 수 있을 것 같습니다.
| theme: { | ||
| extend: { | ||
| // Pretendard를 기본 sans로 사용 | ||
| fontFamily: { |
There was a problem hiding this comment.
이모지를 사용할 때 일부 환경에서 네모(□)로 깨질 수 있어 emoji 폰트를 몇 개 추가하면 좋을 것 같아요.
3 participants
배포 링크
https://react-messenger-22nd-qksbsg75c-chaeyeons-projects-9268a0f8.vercel.app/
구현 화면
후기
수정을 요청받은 부분을 수정하려고 하는데 파일이 너무 많으니까 이거를 수정하려면 어느 파일을 봐야하는지 한참 찾아야했다. 컴포넌트를 너무 많이, 비효율적으로 나눈것 때문에 더 코드 찾는게 힘들었던것 같다. 더 많이 연습해보면 내가 효율적으로 관리할수 있게 컴포넌트 구분도 나만의 방식을 찾을수 있을 것 같다.
저번까지의 과제는 1회성이었고 혼자 했던 반면 이번에는 2번에 걸쳐 코드를 작성하고 피드백도 받고 수정하게 되면서 나만의 체계, 규칙,효율성이 얼마나 중요한지 알게되었다. 그리고 수정해보고 보완해볼 기회가 있어서 좋았다.
아이콘들이 색상 변경이 안되었는데![]()
태그를 이용하고잇어서 CSS color 로 색상 변경이 안되는 거였다. CSS filter 를 사용하니 해결되었다.
날짜 변경 아이콘이 12시 기준으로 생성되지 않아서 이거를 고쳐보려고 했는데 잘 안된다..
사전데이터 입력값이 적을때는 하드코딩을 하는게 더 빠르고 쉬웠는데 확실히 사전 입력값이 늘어나니까 데이터를 따로 저장하고 유동성있게 소프트코딩하는게 훨씬 좋은것 같다.
<구현 기능들>
Review Q
동적 라우팅(Dynamic Routing)이란 URL 경로의 파라미터에 따라 가변적으로 다른 컴포넌트나 데이터를 렌더링하는 방식입니다. 예를 들어 **
/user/:id**와 같이 경로에 변수(id)가 포함되면, id 값에 따라 해당 사용자 상세 페이지가 동적으로 보여집니다. 주로 아래와 같은 상황에서 사용됩니다:리스트에서 상세 페이지로 이동할 때(예: 게시글목록→특정 게시글 상세)
상품, 콘텐츠 등 데이터 기반 URL에서 매번 다른 내용을 보여줘야 하는 경우
정적 라우팅과 달리 사전에 특정 경로를 모두 정의하지 않아도 되며, 컴포넌트 재사용성과 효율적인 URL 관리에 강점이 있습니다.
로딩 상태 표시: 콘텐츠가 로드되기까지의 진행상황을 보여주는 스켈레톤 UI, 스피너 등으로 불확실성을 줄입니다.
캐싱 전략: 브라우저 캐싱, 서버 캐싱, CDN(Content Delivery Network)을 통해 반복 데이터 요청을 최소화합니다.
코드 및 리소스 최적화: HTML/CSS/JS 최소화, 이미지 압축 및 크기 최적화, 불필요한 요청/리소스 제거 등으로 요청 용량과 빈도를 줄입니다.
비동기 데이터 로딩: 주요 정보부터 빠르게 보여주고, 부가 데이터는 점진적 혹은 지연 로딩 처리합니다.
- React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.
방식 | 설명 및 특징 | 사용 사례 -- | -- | -- useState | 단일 컴포넌트의 지역 상태 관리. 코드 간결, 사용법 직관적 . | 단순 입력 폼, 토글 등 단순 인터랙션 useReducer | 복잡한 상태 변화 로직을 함수(reducer)로 관리. 업데이트 구조 명확함 . | 대형 폼, 복잡한 상태 트리거 관리 Context API | props drilling 없이 여러 컴포넌트가 공유해야 하는 값(테마, 사용자 정보 등) 관리 . | 로그인 정보, 글로벌 UI 상태 전역 상태 라이브러리 | Redux, Zustand, Recoil 등 복잡도/규모가 큰 앱을 위한 확장성 있는 상태 관리 . | 대규모 서비스의 비동기/공유 상태 관리