3,4주차 미션: React-Messenger
세오스 3,4주차를 마무리하며..
처음으로 타입스크립트를 사용해봤다..그냥 죽음 뿐이었다 하하;;ㅠㅠㅠ
3주차는 일주일만에 처음 써 보는 타입스크립트로 메신저 방을 구현해보려니까 정말 대환장파티 ㅠㅠ 필수 요건도 제대로 모두 구현하지 못 할 수준이었다.4주차는 휴학생인 나에게 한 달의 시간이 주어졌고... 그래서 타입스크립트를 조금 더 공부한 뒤에 나름 만족할 수 있는 결과를 만들어낼 수 있었다!!!
사실 그럼에도 불구하고 아직 부족한 점이 많지만... 할 수 있다는 자신감이 생겼던.. 과제였다.
새롭게 알게 된 부분 & 어려웠던 부분
1. Layout
const Layout = () => {
return (
<Display>
<Navigator />
<Outlet />
</Display>
);
};
const App = () => {
return (
<RecoilRoot>
<GlobalStyle />
<Container>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<MainPage />} />
<Route path="/friends" element={<FriendsListPage />} />
<Route path="/chattingRoom" element={<ChattingRoomPage />} />
<Route path="/setting" element={<SettingPage />} />
</Route>
<Route path="/chatting" element={<ChattingPage />} />
</Routes>
</BrowserRouter>
</Container>
</RecoilRoot>
);
};
메신저에서 중복되는 navigator를 컴포넌트마다 작성해주는 방법 대신 Layout과 Outlet을 사용해봤다.
나름 아이디어는 좋았으나.... 뭔가 이렇게 하니까 오히려 내가 원하는대로 스타일링하기 어려웠다.
path ="/" 의 element가 layout이다보니... MainPage가 index가 되면서??! 첫 화면에 애니메이션도 넣고 싶었지만.. 넣을 수 없었고.. 개인 프로필 모달도 생각과는 다르게 스타일링 됐다.. 흠냐링 하지만 이건 방법이 있을 것 같은데 내가 못 했던 것 같다ㅠㅠㅠ
2. shiftKey & Enter
const handleKeyup = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (!e.shiftKey && e.key === 'Enter') {
submitText();
}
};
메세지를 입력할 때 enter를 누르면 전송이 되고 실제 pc 카카오톡처럼 shift + enter 키를 누르면 한 줄 아래로 넘어가게 하는 방법이다.
성준 오빠가 도와줘서 이런 방법도 알게 됐다!!!
앞으로도 유용하게 쓸 것 같다ㅎㅅㅎ
3. scrollDown
const scrollRef = useRef<HTMLDivElement | null>(null);
const scrollBottom = () => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
};
useEffect(() => {
scrollBottom();
}, [chattingList[chattingRoomId]]);
return (
<Chatting ref={scrollRef}>
{chattingList[chattingRoomId].message.map((chat, index) => (
<Talk key={index} messageId={index} chattingRoomId={chattingRoomId} />
))}
</Chatting>
);
};
구글링으로 완성된 나의 스크롤 다운....ㅋㅋ..ㅠㅠ 머... 사실 거의 대부분의 코드가 구글링의 조합으로 완성된 것 같은데.. 아무튼 이 외에도 새롭게 알게된 코드들이 많았다ㅠㅠ!!!
코드 리뷰로 배운 점
1. 불필요한 변수.. 왜 만들었니
realChat 배열을 새로 만들어서 update된 메세지를 붙여준 뒤 set하는 방식을 했는데
생각해보니까 지은 언니가 코드 리뷰 달아준 것처럼 그냥 스프레드 연산자로 뚀잉~! 쓰면 끝날 일이었다....ㅠ
2. 언제나 어려운 네이밍..
chat과 관련된 변수, 컴포넌트가 생각보다 너어어어어무 많아서 진짜... 네이밍 고민하는 데에 시간이 꽤나 걸렸다.
도대체 어떻게 해야 센스있고 깔끔하게 딱! 어? 겹치지 않게 네이밍을 잘 할 수 있는 걸까ㅠㅠㅠ
이건 실력의 문제일까... 센스의 문제일까..... 아마도 후자겠지ㅠ..ㅠ 뿡엥
3. string type
오.. 이건 진짜 몰랐던 부분이다..
String()과 .toString()을 해주는 것의 차이를 몰랐는데 후자가 더 많은 정보를 포함할 수 있다고 한다.
ㅠㅠ~!
후... 엄청난 3,4주차가 지났다. 아직 타입 스크립트를 정복하지 못 했지만 앞으로 계속 사용하면서 익숙해지면..
차차 나아지겠지!!!! 이번 주도 처음 써보는 next.js인데... 아찔하지만 화이팅....!!!!
'CEOS_Front' 카테고리의 다른 글
react-messenger-refactoring (1) | 2023.10.15 |
---|---|
react-todo-refactoring (1) | 2023.10.05 |
Week_5,6 (0) | 2023.05.22 |
Week_2 (4) | 2023.03.27 |
Week_1 (1) | 2023.03.19 |