[4주차] 원채영 미션 제출합니다. #13
Conversation
| /> | ||
|
|
||
| <div className="flex flex-col justify-center w-[254px]"> | ||
| <span className="title-2 px-4 py-1 text-grey-900 h-[33px]"> |
There was a problem hiding this comment.
혹시 h-[33px] 이랑 px-4 이렇게 구분해서 사용하는 기준이 있으신가요?
4px 단위이신 것도 어떤 거는 gap-[60px] 쓰고 어떤거는 gap-1 이렇게 쓰시던데, 가능하시다면 알려주시면 너무 감사할 것 같습니다!
저는 고민하다가 모르겠어서 그냥 다 [#px] 로 통일해서 쓰고 있어서..
There was a problem hiding this comment.
저는 4px 단위라면 px-4와 같은 형태로 사용하고, 지원하지 않는 애매한 길이의 경우에는 직접 px 값으로 지정해주었습니다.
이렇게 클래스로 작성하면 무엇보다 빠르기도 하고, 가독성이 좋아 지원되는 값이라면 클래스 형식으로 작성하는 방식을 선호하고 있습니다.
4px 단위인데 px로 직접 지정이 되어있는 경우는 지난 과제에서 v3->v4로 넘어가면서 변경이 안된 부분이라고 할 수 있습니다 😓
기존 v3에서는 gap-12, gap-14, gap-16, gap-20처럼 중간값이 빠져있는 상태로 제공되었고, gap-15와 같은 값은 직접 설정해주어야 사용이 가능했습니다.
하지만 이번에 v4로 변경되면서 gap-15와 같은 형식으로 직접 작성할 수 있게 되었고, gap-[60px] 같은 코드는 이제 gap-15로 바꿔도 괜찮을 것 같습니다!
이제 v4가 나와서 필요하지는 않지만, 혹시 궁금하실 수도 있으니 관련 자료를 첨부하겠습니다 !!
tailwind v3 문서
There was a problem hiding this comment.
아하 감사합니다! 저는 처음에 코드 봤을 때 width랑 height만 px 지정하고 나머지는 tailwind 스타일 적용해서 사용하나 생각했는데 v3에서는 지정된 값만 사용할 수 있어서 그렇게 하신 거군요
| const menus = [ | ||
| { | ||
| name: '홈', | ||
| path: '/home', | ||
| iconOn: HomeOn, | ||
| iconOff: HomeOff, | ||
| }, | ||
| { | ||
| name: '채팅', | ||
| path: '/chat', | ||
| iconOn: ChatOn, | ||
| iconOff: ChatOff, | ||
| }, | ||
| { | ||
| name: '설정', | ||
| path: '/setting', | ||
| iconOn: MoreOn, | ||
| iconOff: MoreOff, | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
svg?react를 사용하면 svg파일을 컴포넌트로 변환해서 isActive상태를 통해 색상의 변화를 줄 수가 있어요. 그래서 파일을 하나만 받으면 된답니다
| <span className="body-1 text-grey-900">{title}</span> | ||
| {count !== undefined && <span className="body-1 text-grey-400">{count}</span>} | ||
| </div> | ||
| <img src={UpArrow} alt="toggle" className={`w-[24px] h-[24px] ${!isOpen ? 'rotate-180' : ''}`} /> |
There was a problem hiding this comment.
Arrow방향마다 이미를 다운받았는데 rotate를 시킬 수 있는 방법이 있었군요..!
| // 메시지 수신 시 자동 스크롤 | ||
| const bottomRef = useRef<HTMLDivElement>(null); | ||
| useEffect(() => { | ||
| bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); | ||
| }, [messages]); |
There was a problem hiding this comment.
메세지스크롤이 smooth덕에 자동으로 내려가져서 좋은거 사용자 입장에서좋은거 같아요!
There was a problem hiding this comment.
뭔가 따로 안보내도, 자동으로 스크롤이 흘러내려가는데 의도한걸까요..?
| const getLastMessageContent = (msg?: Message['messages'][0]) => { | ||
| if (!msg) return ''; | ||
| return msg.messageType === 'image' ? '사진을 보냈습니다.' : (msg.content ?? ''); | ||
| }; |
There was a problem hiding this comment.
사진 보냈을 때의 경우에 따라 사진보냈습니다 만든거에서 디테일이 엿보이는거 같아요
| .sort((a, b) => { | ||
| const aTime = new Date(a.messages.at(-1)?.createdAt ?? 0).getTime(); | ||
| const bTime = new Date(b.messages.at(-1)?.createdAt ?? 0).getTime(); | ||
| return bTime - aTime; | ||
| }); |
배포 링크
🔗
과제를 진행하며
지난 과제를 리팩토링하면서, 당시에는 여러 화면을 구현하는 데 급급했다는 점을 느꼈습니다,,
이번에는 코드 리뷰를 바탕으로 전반적인 구조와 코드를 리팩토링하는 데 집중하였고,
추가할 새로운 UI는 많지 않았어서, 디테일한 기능들을 추가하고 다듬는 방향으로 과제를 진행하였습니다.
Zustand가 익숙하지 않은 상태에서 프론트만으로 상태를 관리하다 보니, 코드가 복잡하게 느껴져 아쉬움이 남았습니다 😭
(디자인이 금요일에 추가로 수정될 예정이라고 하셔서, 일정상 먼저 제출해두겠습니다ㅏ 😢)
3주차 & 4주차 구현 기능 정리
[3주차]
[4주차]
Key Questions
1. React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?
2. 네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법은 무엇인가요?
3. React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.
const [state, setState] = useState(initialValue)형태로 사용하며, 상태와 상태 변경 함수를 반환const [state, dispatch] = useReducer(reducer, initialState);형태로 사용함지역 상태 관리는 해당 컴포넌트 내부에서만 상태가 유효하며, 마운트 또는 언마운트 시 상태가 초기화됨.
다른 컴포넌트와 상태를 공유하거나 유지하기 어려움.
전역 상태 관리는 여러 컴포넌트 간 상태를 공유하고, 전체 앱에서 일관된 상태 흐름을 제공할 수 있음.