Week_3,4

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인데... 아찔하지만 화이팅....!!!!