[4주차] 김승완 미션 제출합니다. #11

Programming-Seungwan · 2024-04-30T13:40:36Z

배포 링크

배포 링크

📌 구현 기능

피그마에 나타난 화면 UI 구현 => styled-components의 ThemeProvider를 통해 디자인 시스템 구축
기존의 json 파일에 나타난 데이터를 보여주거나 이미 데이터가 존재한다면 이를 보여주기
사용자가 채팅을 입력하고, 기존의 데이터에 뒤이어 UI로 구현 => 채팅 입력 시, 채팅창의 최하단으로 포커스 이동
사용자가 이미 보낸 상대방의 메시지를 더블 클릭하면 하트 UI가 생성되고, 다시 더블 클릭하면 사라짐
채팅방 상단의 프로필을 클릭하면 상대방으로 사용자가 바뀜
나머지 피그마 디자인 페이지 구현

🧠 느낀 점 및 시간 투자 부분

시간 투자 💪🏼

url 라우팅을 진행하는 데에 시간을 꽤 투자했던 것 같습니다. 3주차의 과제가 react로 채팅방까지를 구현하는 것이라, 이를 루트(/) 디렉터리로 설정했습니다.

이번 과제는 친구 목록, 채팅 목록, 채팅방 입장, 개인 프로필 페이지를 모두 구현해야 함과 동시에 기존의 채팅방을 녹여내는 것까지라 프로젝트 url 설계를 먼저 진행했습니다.
공통적으로 많이 사용되는 header와 tabBar 같은 경우에는 CommonLayout 컴포넌트에 넣어주고, 주소에 따라서 바뀌는 부분을 Outlet 컴포넌트를 통해 유동적으로 바꿔주었습니다.

또한 사용자가 입장한 채팅방에서 채팅을 입력한 후, 새로 고침을 하거나 퇴장한 후 다시 입장해도 기존의 메시지 데이터가 남아있어야 하기에 이를 localStorage에 넣어주는 방식을 이용했습니다.

느낀 점 ❗️

웹 애플리케이션의 전체적인 페이지 구조가 나와야 공통 레이아웃, 변화하는 Outlet 등을 적용하기 용이한 것 같습니다. 그 과정에서 기획자나 디자이너가 다른 페이지를 추가적으로 요구할 시를 위해 확장성 있는 설계가 필요할 것 같습니다.
현재 구현한 웹 애플리케이션은 사용자들의 이름이 서로 다름을 가정하고 있습니다. 하지만 실제 서비스에서는 동명이인이 존재할 가능성이 충분합니다. 이에 localStorage에 key 값으로 사용자명을 썼는데, 어떻게 하면 primary한 데이터로 바꿀 수 있을지 더 고민해보면 좋을 것 같습니다.
너무 세세한 상태까지 모두 recoil이나 redux 전역 상태 관리 라이브러리로 관리할 필요는 없을 것 같습니다. 사용자의 인터렉션에 따라 상태가 변화하고 관련 UI가 구현되는 정도라면 해당 상태는 컴포넌트에서 useState() 훅을 이용하는 것이 단일 책임의 원칙에도 더 맞을 것 같습니다.

❓ Key Questions

Routing 이란?

라우팅이란, 프론트엔드에서 웹 애플리케이션 내의 다양한 페이지를 탐색할 수 있도록 도와주는 기술이다. 네이버, 다음, 쿠팡, 배달의 민족과 같이 우리가 자주 사용하는 웹 사이트는 랜딩 페이지 이외에도 여러 세부 페이지로 나뉘어져 있다.

기존의 html, css, vanilla Javascript 만을 이용하는 방식에서는 a 태그를 통해 특정 페이지로의 전환을 하고 해당 페이지에 알맞은 html 파일을 통해 사용자에게 적절한 UI를 렌더링한다.

요즘 많이 사용되는 AngularJS(인기가 좀 죽긴 했다), vueJS, reactJS에는 Angular-router, vue-router, react-router 등의 방식으로 라우팅을 지원하는데, 이를 사용하지 않았을 때와 비교해서 살펴보면 좋다.

import "./styles.css";
import { useState } from "react";
import Home from "./Home";
import About from "./About";
import NotFound from "./Not-found";

export default function App() {
  const [comp, setComp] = useState(Home);

  return (
    <header>
      <button onClick={() => setComp(Home)}>Home</button>
      <button onClick={() => setComp(About)}>About</button>
      <button onClick={() => setComp(NotFound)}>Not Found</button>
    </header>
    <main children={comp}/></main>
  );
}

위와 같은 방식은 react 코드 단에서 react-router-dom의 도움 없이 상태(state)만으로 라우팅을 진행하고 있다. 버튼을 누르면 상태가 변경되어 main 태그 내에서 렌더링되는 children 속성 컴포넌트가 바뀔 수 있게 한다. 하지만 이와 같은 로직은 페이지가 추가될 때마다 관련 핸들러 함수를 만드는 등 복잡도가 증가할 수 있다. 이를 위해 react는 react-router-dom 모듈의 Router 개념을 통해 해결한다

function App() {
  return (
    <BrowserRouter>
      <GlobalStyles />
      <RecoilRoot>
        <ThemeProvider theme={theme}>
          <Routes>
            <Route path="/" element={<CommonLayout />}>
              <Route index={true} element={<Friends />}></Route>
              <Route path="messages" element={<Messages />}></Route>
              <Route path="profile" element={<Profile />}></Route>
            </Route>
            <Route path="/chat" index element={<ChatMain />}></Route>
            <Route path="/chat" element={<CommonLayout />}>
              <Route path=":username" element={<EmptyChat />} />
            </Route>
          </Routes>
        </ThemeProvider>
      </RecoilRoot>
    </BrowserRouter>
  );
}

위의 코드는 react-router-dom 모듈의 BrowserRouter, Routes, Route 컴포넌트 들을 이용해 app.tsx 파일 내에서 라우팅을 진행해준 것이다(ThemeProvider와 RecoilRoot 컴포넌트는 각각 디자인 시스템, 전역 상태 관리를 위해 존재하는 wrapper 컴포넌트이니 신경 쓰지 않아도 된다).

이와 같은 구조를 이용하면 웹 사이트의 도메인 주소의 특정 url path로 사용자가 접근하면 Route 컴포넌트의 element 속성으로 바인딩 된 컴포넌트가 렌더링 되는 구조인 것이다.

하지만 이와 같은 라우팅 방식은 ReactJS 같은 CSR(클라이언트 사이드 렌더링) 방식의 웹 페이지에서 보이는 특성이고, nextJS나 Remix 같은 SSR(서버 사이드 렌더링), SSG(Static Site Generation)을 지원하는 풀스택 프레임워크에서는 주로 src 디렉터리 내부의 폴더 구조를 통해 라우팅을 진행한다. 즉, 디렉터리가 하나의 url path에 대응하는 것이다.

SPA 란?

SPA는 Single Page Application의 약자로, 특정 웹 애플리케이션이 구동될 떄 하나의 html 파일만을 기반으로 하여 작동한다는 것이다. reactJS를 이용하여 프로젝트를 진행할 때, CRA이면 public 디렉터리 내에 index.html이, vite를 이용하면 루트 디렉터리에 index.html 파일 하나만이 존재하는 것을 볼 수 있다. 해당 파일을 들여다보면 body 컴포넌트 내에 id가 root인 div 태그 하나 만이 외롭게 있는 것일 알 수 있다.

이는 위에서 말한 react의 라우팅 방식에 의해 매 페이지에 해당하는 컨텐츠들이 id 가 root인 태그 내에 채워지며 상황마다 바뀌기 때문이다. 뉴진스의 홈페이지에서 페이지 소스를 살펴보면 클라이언트(브라우저)에 전달된 리소스는 텅 빈 html 파일만이 전달된 것을 알 수 있다.

SPA는 세부 페이지마다 바뀌는 내용을 AJAX(Asnycronous Javascript and Xml)라는 기술을 통해 필요한 부분의 데이터에 대한 요청을 실행하여 렌더링하기 때문에 html 문서 자체가 바뀌면서 생기는 full page refresh와 같은 현상을 막을 수 있다. 이는 페이지 간의 부드러운 전환으로 사용자에게 더 나은 UX를 선사할 수 있다. 하지만 위에서 언급한 바와 같이 처음 클라이언트에게 전달되는 html 문서에는 아무런 컨텐츠가 존재하지 않기 때문에 검색 엔진 최적화(SEO)의 측면에서는 다소 불리하다고 할 수 있다.

react 같은 SPA 기술이 등장 이전에는 Java의 서블릿과 같은 개념, 여러 템플릿 엔진을 통해 사용자의 동적 요청에 따른 웹 페이지 반환 SSR(Server Side Rendering) 와 미리 만들어둔 컨텐츠가 자주 변하지 않는 정적 컨텐츠를 생성하는 SSG(Static Site Generation) 개념이 주를 이루었다. 이는 복수의 html 파일을 사용자에게 전달할 수 있다는 점에서 MPA(Multi Page Application)이라고 하며, 미리 컨텐츠가 채워져 있어 검색 엔진 최적화를 할 수 있지만 페이지 전환 시 뚝뚝 끊기는 현상이 발생한다는 단점이 있다.

위의 두 방식의 단점을 보완하고 장점을 챙기는 방식으로 나온 것들이 바로 nextJS와 nuxtJS 같은 풀스택 프레임워크 개념이다. 이들은 페이지, 컴포넌트 기반의 SSG, SSR 방식의 구현을 지원함과 동시에 웹 페이지의 변경되는 부분에 대한 추가적인 네트워크 데이터 요청으로 부드러운 페이지 전환 효과를 기대할 수 있다.
상태 관리란?

별도의 상태 관리 라이브러리를 사용하지 않아도 react 프로젝트를 진행할 수 있다. 이 경우에는 상태가 필요한 컴포넌트에서 useState() 훅을 통해 상태를 선언하여 UI를 렌더링 하면 된다. 하지만 복수의 컴포넌트에서 하나의 상태를 통해 렌더링 해야하는 로직이 존재한다면 상태 끌어올리기(state lifting)이 필요하다. 이는 해당 컴포넌트들이 공통적으로 가지는 부모 컴포넌트, 혹은 그 상위의 컴포넌트로 상태의 선언을 끌어올린 후,상태를 prop으로 계속해서 전달하여 사용하는 것이다. 단순한 프로젝트에서는 큰 상관이 없겠지만 이는 여러 문제점을 내포하고 있다.
1. 계속되는 prop drilling으로 프로그래머가 일일히 적어줘야 하고, 오타와 같은 human error가 발생할 수 있다.
2. 상태가 변화할 때, 여러 컴포넌트를 통해 상태가 전달된다면, 그 중간에 있는 관련 없는 컴포넌트까지 리렌더링 되는 성능 비효율이 발생한다.
3. 추후에 상태 관련 코드를 변경할 일이 생겼을 때, 하나의 상태에 여러 컴포넌트가 묶여있는 coupling 현상은 유지 보수를 어렵게 만든다 -> 단일 책임 원칙(SRP : Single Responsibility Principle)의 위반
이를 위해 contextAPI 같은 reactJS 자체의 방식, flux 패턴을 적용한 redux 라이브러리, atomic 패턴의 recoilJS와 그 이외의 mobx, zustand, jotai 등을 활용하면 보다 더 편리하게 상태 관리를 진행할 수 있다.

1. ThemeProvider 컴포넌트 이용

1. styled-reset 모듈을 통해 컴포넌트 방식으로 적용

1. 기존의 react-scripts 러너는 상대 경로를 설정해주더라도 알아서 이를 씹고 CRA의 기본 설정으로 경로를 인식하여 오류가 생김 2. tsconfig.paths.json 파일에 기존의 설정을 해주고 @craco/craco 모듈과 react-app-alias 모듈을 설치 3. craco.config.json 파일에 craco 관련 설정을 해줌 4. 애플리케이션 러너 환경 자체를 react-scripts가 아닌, craco 가 돌릴 수 있게 설정

1. context/state 디렉터리에서 원하는 js파일을 통해 상태들을 정의해주고 이를 export해준다. 2. 프로젝트의 최상위 컴포넌트(CRA에서는 App.tsx 컴포넌트)에서 RecoilRoot 컴포넌트로 wrapping 3. 원하는 파일에서 1에서 정의해준 상태를 import하여 useRecoilState() 훅으로 사용. 받는 것은 useState와 매우 흡사하다.

1. before와 after psuedo element를 이용하여 만듦. 주의할 점은 왼쪽으로 위치하려면 -8px, 오른쪽은 -8px 느낌으로 해야 겹치지 않고 보여줄 수 있음

1. 위의 디스코드 버튼이나 이름을 누르면 사용자가 전환되고 관련 UI도 함께 바뀜

…nt-box의 크기를 제한해주었음

…Blur 핸들러 함수 내부의 조건문 분기로 해결

1. 사용자가 채팅을 입력하면 상태도 바꿔주고 로컬 스토리지도 동기화시켜줌

1. 기존의 chatMessageData의 특정 날짜에 해당하는 배열과 주소값이 달라야함 2. 따라서 prevDateArray라는 변수를 기존의 것을 배열 구조 분해하여 받고 그다음 새로운 데이터를 push함 3. 이렇게 바뀌었는데 메모리 주소값이 다른 데이터를 새로운 상태로 설

1. 스크롤을 아래로 내일 chatBody와 chatInput은 부모-자식 관계가 아니므로 prop으로 콜백을 전달할 수 없음 2. 따라서 전역 상태 관리로 이를 구현해야하는데 커스텀 훅을 통해서 진행

…하는 useEffect() 훅에서, 커스텀 훅의 scrollToBottom을 해주어야함

…처리는 배치되기 때문에 핸들러 함수 내부에서 분기하여 작성해주었음

1. 그냥 TabIconConatiner에서 userPageMode는 url과 곧바로 연동되면 끝이므로 useLocation() 훅의 pathname 정도만을 확인하는 로직이면 충분하다.

1. 렌더링 도중에 상태의 변경이 일어나면 안된다. 이를 useEffect() 훅 내부로 옮겨주었음

1. 다양한 메시지 리스트들을 렌더링함 2. 추후에 특정 메시지 아이템을 클릭하면 채팅방으로 이동하게 만듬. 근데 일단 김정민을 누르면 내가 원래 구현했던 /chat으로 이동하게 할거고 나머지는 아무 것도 없는 채팅 페이지로 이동하게 할 것임

1. 절대경로로 import 하도록 자잘한 코드 수정

1. 김정민 chat 말고도 다른 chat에서도 뒤로 가기 화살표를 누르면 /messages url로 갈 수 있도록 설정

1. 기존의 메시지 데이터가 있는 상황에 대해서 상태관리 설정을 추후에 해줘야 함

1. 사용자를 누르면 전환되는 것을 추가적으로 구현해야함

1. 앞에 $를 붙여주는 방식으로 해결

1. img를 담은 div를 img 보다 너비 높이를 높게 잡고 border radius를 원형으로 만든 뒤, background color를 적용함

1. 로고의 너비 높이는 80px 이지만 이를 위치시키는 컨테이너는 90px 이므로 이를 고려해야 레이아웃 배치

1. 사용자가 예상치 못한 접근을 하면 not found page로 갈 수 있도록 라우팅 설정

youdame

과제하느라 수고하셨습니다! 제가 승완님 코드에 대한 완전한 이해 없이 남기는 리뷰들이라 잘못 판단한 부분이 있을 수 있다는 걸 감안하고 봐주시면 감사하겠습니다. 전반적인 틀이나 개념적인 부분에 대한 피드백보다는 너무 마이크로한 피드백만 드린 거 같아 아쉽네요 ㅠㅠㅋㅋ

youdame · 2024-05-05T06:18:30Z

src/pages/Friends.tsx

+  const [userNumber, setUserNumber] = useRecoilState(userNumberState);
+
+  useEffect(() => {
+    setUserNumber(1);
+  }, []);


이미 userNumberState의 디폴트 값이 1이고, 현재 이곳에서 userNumber를 사용하는 곳이 없음에도 useEffect를 이용해 1로 설정해준 이유가 궁금합니다..!

아 그 부분은 채팅방 페이지(여기에서는 /chat/:username 경로에서 상단의 사용자를 클릭하면 userMode가 전환되는 것을 맞춰주기 위함이에요!
사용자가 채팅방에서 해당 부분을 몇번 클릭하든, 다시 친구 목록이 있는 /friends 경로로 나오면 userNumber 상태를 1로 변환하여 다시 다른 채팅방으로 접속해도 정상적으로 앱이 동작하도록 만들어 주기 위해 Friends 컴포넌트가 처음 마운트되는 시점에 useEffect() 훅을 이용하여 상태를 바꿔주는 코드를 짰습니다.

youdame · 2024-05-05T06:23:39Z

src/components/non-fixed/TabBar/TabIconContainer.tsx

+  const [userPageMode, setUserPageMode] = useRecoilState(userPageModeState);
+  const navigate = useNavigate();
+
+  // 렌더링 도중에 상태 변경을 진행하면 안됨 => 첫 렌더링 이후에 useEffect() 훅을 통해서 진행해줌ㄴ
+  useEffect(() => {
+    if (location.pathname === '/') {
+      setUserPageMode('friends');
+    } else if (location.pathname === '/messages') {
+      setUserPageMode('messages');
+    } else if (location.pathname === '/profile') {
+      setUserPageMode('profile');
+    }
+  }, [location, setUserPageMode]);


이 페이지에서만 사용하는 상태값이라고 판단되는데 그렇다면 로컬 상태로 관리하는 게 더 좋았을 거 같습니다!

네 저두 과제를 제출하고 너무 과도하게 모든 것을 전역 상태관리로 해결하려고 한 것이 아닌가...하는 생각이 들었어요. 유담님 말씀처럼 여기에서는 useState() 훅을 이용하여 colocation의 원칙을 지키는 게 더 나았을 것 같네요

youdame · 2024-05-05T06:34:26Z

src/components/non-fixed/FriendsBody/FriendsSearchHead/FriendsSearchHead.tsx

저라면 바로 FriendsBody 컴포넌트에서 SearchHead를 호출했을 거 같아요. FriendsSearchHead라는 컴포넌트에 SearchHead를 호출하는 부분밖에 없어서요..! 컴포넌트를 잘게 쪼개다보면 관리하는 게 너무 어렵더라구요 ㅠ 그래서 승완님만의 컴포넌트 쪼개는 방식이 궁금하네요!

youdame · 2024-05-05T06:36:00Z

src/components/non-fixed/FriendsBody/FriendsList/FriendsList.tsx

+const tmpFriendsList = [
+  'discord_redesign1',
+  '김정민',
+  'discord_redesign2',
+  '김승완',
+  'discord_redesign3',
+  'CEOS',
+];


이 부분 하드 코딩하셨군요! 데이터와 연동해서 사람 이름을 클릭하면 그 사람과의 채팅방으로 연결되는 방식으로 구현하셨다면 더 챌린징했을 거 같아요 :)

youdame · 2024-05-05T06:41:01Z

src/components/non-fixed/MessageBody/MessageList/MessageListContainer.tsx

여기도 하드코딩 하기보다 json에 있는 더미데이터와 연결되어서 각 유저와 나눈 마지막 메세지를 보여주는 식으로 구현했다면 더 챌린징했을 거 같아요! 실제로 서버에서 받아온 데이터를 보여준다고 생각하면서요!

맞아요....! 차라리 저는 메시지 데이터를 json 더미 데이터나 로컬 스토리지에 넣어놓고 컴포넌트가 처음 마운트 되는 시점에 useEffect() 훅을 이용해서 보여주는 방식을 택했는데, 분기의 로직을 통해 하드 코딩된 데이터를 chatList UI를 보여주기보다 실제 마지막 대화 데이터를 보여주는 것이 앱의 사용성에 있어서 더 좋다고 생각해요!
좋은 지적 감사합니🙏🏼

youdame · 2024-05-05T06:46:50Z

src/components/non-fixed/ProfileBody/ProfilePageHead/ProfilePageHead.tsx

요 부분이 아마 서치바가 없다는 이유로 SearchHead 컴포넌트와 다르게 분리된 거 같은데, 저라면 SearchHead 컴포넌트에서 분기를 치거나 서치바도 따로 뺀 다음 사용하는 부분에서 조합을 했을 거 같아요! head 부분이 세 페이지 모두에서 같은 용도로 사용되고 있는 거 같아서 ProfilePageHead를 따로 빼기보단 SearchHead와 같은 컴포넌트로 취급되는 게 좋을 거 같아요 : )

youdame · 2024-05-05T06:47:31Z

src/pages/NotFound.tsx

notFound까지 챙겨주신 꼼꼼함..

youdame · 2024-05-05T07:00:06Z

src/components/non-fixed/EmptyChatBody/EmptyChatBody.tsx

+  useEffect(() => {
+    if (
+      localStorage.getItem(`chatMessageData${username}`) === null &&
+      localStorage.getItem(`chatMessageDateArray${username}`) === null
+    ) {
+      setMessageData({});
+      setMessageDateArray([]);
+    } else if (
+      // 데이터가 있는 경우 -> 상태를 변경시키고 이를 이용하여 리렌더링 진행
+      localStorage.getItem(`chatMessageData${username}`) !== null &&
+      localStorage.getItem(`chatMessageDateArray${username}`) !== null
+    ) {
+      const lstrgChatMessageData = JSON.parse(
+        localStorage.getItem(`chatMessageData${username}`) as string
+      );
+      const lstrgChatMessageDateArray = JSON.parse(
+        localStorage.getItem(`chatMessageDateArray${username}`) as string
+      );
+
+      setMessageData(lstrgChatMessageData);
+      setMessageDateArray(lstrgChatMessageDateArray);
+    }
+  }, []);


Suggested change

useEffect(() => {

if (

localStorage.getItem(`chatMessageData${username}`) === null &&

localStorage.getItem(`chatMessageDateArray${username}`) === null

) {

setMessageData({});

setMessageDateArray([]);

} else if (

// 데이터가 있는 경우 -> 상태를 변경시키고 이를 이용하여 리렌더링 진행

localStorage.getItem(`chatMessageData${username}`) !== null &&

localStorage.getItem(`chatMessageDateArray${username}`) !== null

) {

const lstrgChatMessageData = JSON.parse(

localStorage.getItem(`chatMessageData${username}`) as string

);

const lstrgChatMessageDateArray = JSON.parse(

localStorage.getItem(`chatMessageDateArray${username}`) as string

);

setMessageData(lstrgChatMessageData);

setMessageDateArray(lstrgChatMessageDateArray);

}

}, []);

useEffect(() => {

const chatMessageData = localStorage.getItem(`chatMessageData${username}`);

const chatMessageDateArray = localStorage.getItem(`chatMessageDateArray${username}`);

if (chatMessageData && chatMessageDateArray) {

setMessageData(JSON.parse(chatMessageData));

setMessageDateArray(JSON.parse(chatMessageDateArray));

} else {

setMessageData({});

setMessageDateArray([]);

}

}, []);

이런 식으로 반복되는 코드를 변수로 빼서 사용하면 더 간소화된 코드를 작성할 수 있을 거 같아요!

youdame · 2024-05-05T07:07:31Z

src/components/non-fixed/EmptyChatBody/EmptyChatLog/EmptyChatLog.tsx

+  isEqual: boolean;
+  from: number;
+  createdAt: string;
+  content: string;
+  like: boolean;


이렇게 생긴 타입이 다른 컴포넌트에서도 반복되던데 types 폴더에 따로 지정해둔 뒤 import해서 사용하는 게 더 좋을 거 같습니다!

youdame · 2024-05-05T07:19:22Z

src/components/non-fixed/MessageBody/MessageList/MessageListContainer.tsx

+export default function MessageListContainer() {
+  const navigate = useNavigate();
+
+  function handleClickMessageListItem(path: string) {
+    navigate(`/chat/${path}`);
+  }
+
+  return (
+    <StyledMessageListContainer>
+      <MessageListItem
+        discordLogoColor="green"
+        name="김정민"
+        $ifBlueSignal={true}
+        content={'내일 회의 괜찮으실까요?'}
+        dateString={'20:45'}
+        navigateToChatFunc={handleClickMessageListItem}
+        path=""
+      />
+      <MessageListItem
+        discordLogoColor="purple"
+        name="CEOS2024"
+        $ifBlueSignal={true}
+        content={'내일 숙제 제출 마감일입니다! 늦지 않게 제출해주세요!'}
+        dateString={'어제'}
+        navigateToChatFunc={handleClickMessageListItem}
+        path="CEOS2024"
+      />
+      <MessageListItem
+        discordLogoColor="purple"
+        name="홍길동"
+        $ifBlueSignal={false}
+        content={'내일 회의 괜찮으실까요?'}
+        dateString={'3월 10일'}


어차피 url path에 name이라면 name 프로퍼티만 넘긴 뒤 navigate하는 부분은 MessageListItem에서 처리한다면 불필요한 프롭 전달을 하지 않아도 될 거 같아요!

앗 그 부분은 제가 3주차 과제에 만든 채팅방을 /chat/userId 형식이 아닌, 그냥 가장 기본적인 /chat url path로 설정하여 첫 아이템만 name과 path가 달라지기에 이렇게 짰습니다.
근데 오히려 아예 유담님 말씀을 참고해보니 MessageListItem 컴포넌트에서 name을 받아온 뒤 분기의 로직으로 해줘도 좋았겠네요!

youdame · 2024-05-05T07:38:21Z

public/images/discord40.svg

마지막으로 svg 관련해서 네이밍만 보더라도 어떤 아이콘인지 알 수 있게 피그마에서 가져온 네임을 그대로 사용하기 보다 다른 네임으로 변경하는 게 좋을 거 같습니다! 그리고 svgr을 사용하게 된다면 편리하게 svg의 속성(크기, 색상)을 변경할 수 있는데요. svg 코드의 색상에 해당하는 부분에 fill = "current"라는 값을 넣어주면 import 하는 측에서 fill: 원하는 색상 을 넣음으로써 동적 스타일링을 편하게 할 수 있습니다! 저는 하단 네비게이션 바 아이콘 클릭시 svg 색상 변경에 사용했는데요. 제 코드 레퍼런스 남기고 가요 :)

jinnyleeis

역시나 승완님답게
엄청나게 구조화된 구조의 코드
라우팅, recoil , 커스텀 훅 등을 필요에 맞게 최대한으로 잘 활용하신 점이 너무나 인상깊습니다.
recoil과 라우팅을 처음 이용해본 사람으로써, 많이 배워가는 시간이 되었던 것 같습니다.

jinnyleeis · 2024-05-05T07:54:06Z

src/App.tsx

+            <Route path="/" element={<CommonLayout />}>
+              <Route index={true} element={<Friends />}></Route>
+              <Route path="messages" element={<Messages />}></Route>
+              <Route path="profile" element={<Profile />}></Route>


index={true} 속성을 활용한 라우팅 처리 방식이 매우 효율적인 것 같습니다
CommonLayout을 부모 컴포넌트로 사용하면서, / 경로에서 Friends 컴포넌트를 기본 페이지로 설정한 것은 사용자가 사이트에 접속했을 때 바로 친구 목록을 볼 수 있게 하셨네요..!

messages와 profile을 하위 라우트로 구성해 중첩을 구현하셨네요ㅠ 저는 그냥 분리해서 구현했는데, 유지보수와 확장성 면에서도 좋은 코들르 짜신 것 같네요 bbb 많이 배워갑ㄴ디ㅏ.

jinnyleeis · 2024-05-05T08:01:41Z

src/pages/CommonLayout.tsx

+  return (
+    <StyledCommonLayout>
+      <IphoneStatusBar />
+      <Outlet />


IphoneStatusBar와 HomeIndicator 컴포넌트는 상단과 하단에 고정으로 배치하고
중앙의 Outlet을 통해 주요 콘텐츠를 변경할 수 있게 구현하신 점이 정말 인상적입니다. 라우팅 구현을 정말 잘 하시는 것 같네요ㅠ
특히 저는 레이아웃 간에 중복 문제 해결을 할 떄, css를 통해 위치를 고정하는 원시적인 방식으로 해결했는데,
Outlet을 사용하면 여러 레이아웃 간에 중복을 피하면서도 코드의 가독성을 높일 수 있는 것 같아 정말 좋은 것 같아 리팩토링할 때 꼭 이용해봐야겠습니다.

jinnyleeis · 2024-05-05T08:10:33Z

src/hooks/useScrollToBottom.tsx

useScrollToBottom' 훅은 스크롤 관련 로직을 커스텀 훅으로 분리하셨네요..!!
어떤 컴포넌트에서든 동일한 스크롤 기능을 재사용할 수 있어, 기능을 더 확장하면 효율적인 방식인 것 같네요!

jinnyleeis · 2024-05-05T08:11:40Z

src/pages/NotFound.tsx

+  overflow-y: scroll;
+`;
+
+export default function NotFound() {


notfound 구현할 생각을 못했는데, 승완님 코드 보면 항상 꼼꼼하게 구현하시는 것 같아서 많이 배우고 갑니다ㅠ

jinnyleeis · 2024-05-05T08:12:22Z

src/pages/theme.ts

@@ -0,0 +1,39 @@
+const theme = {
+  color: {


이렇게 자주 사용하는 style을 묶어서 관리하는게 정말 효율적인 방식인 것 같네요!

Programming-Seungwan added 30 commits March 25, 2024 02:19

Docs : figma를 보고 구현 기능에 대한 파악

965c1d1

Feat : styled-components를 통해 figma의 디자인 시스템 구축

a2f0ef0

1. ThemeProvider 컴포넌트 이용

Chore : apply reset.css

f2e5ee2

1. styled-reset 모듈을 통해 컴포넌트 방식으로 적용

Style : import 문에 대한 절대 경로 설정

7e331b4

Feat : make default entire app layout

513ca0f

Feat : make iphone status bar UI layout

ce221fe

Feat : make chat head default UI layout

2968ce7

Fix : styled-components의 css 기능을 이용하여 재사용성 증대

e6ad123

Fix : replace png images with svg images

93103e6

Feat : chat input UI make

72a15f1

Chore : 전체 기본 서체를 Pretendard 최우선으로 만들어주었음

7d5af18

Chore : make dummy data file in public directory

654f930

Chore : recommit of dummy data

3f32de0

Feat : make date divider UI

2d9645d

1. before와 after psuedo element를 이용하여 만듦. 주의할 점은 왼쪽으로 위치하려면 -8px, 오른쪽은 -8px 느낌으로 해야 겹치지 않고 보여줄 수 있음

Feat : make message div UI

9cc166a

Build : npm build 관련 package.json 수정

9453e49

Feat : make entire ChatBody UI

2926f21

Feat : make toggle user change

7215349

1. 위의 디스코드 버튼이나 이름을 누르면 사용자가 전환되고 관련 UI도 함께 바뀜

Fix : input 박스에 텍스트가 많아지면 이모지 아래로 내려가는 것을 padding-right 속성을 이용해 conte…

a5a2bb0

…nt-box의 크기를 제한해주었음

Feat : input box focus 여부에 따라 chatInput 영역의 UI를 조건부 렌더링을 통해 변화

c9ea7da

Fix : clear send 버튼을 눌렀을 때 onSubmit 속성이 아니라 onBlur 핸들러함수가 발동되는 로직을 on…

57eee59

…Blur 핸들러 함수 내부의 조건문 분기로 해결

Fix : make user adjusted time generating function in makeTimeString.js

d14dc0d

Feat : make chat append 기능

bce5f6f

1. 사용자가 채팅을 입력하면 상태도 바꿔주고 로컬 스토리지도 동기화시켜줌

Feat : make useScrollToBottom custom hook

665f563

1. 스크롤을 아래로 내일 chatBody와 chatInput은 부모-자식 관계가 아니므로 prop으로 콜백을 전달할 수 없음 2. 따라서 전역 상태 관리로 이를 구현해야하는데 커스텀 훅을 통해서 진행

Fix : dom이 업데이트된 이후에 스크롤을 끝까지 내리려면 messageData가 바뀌고 그 다음에 이를 의존성 배열로 …

b452080

…하는 useEffect() 훅에서, 커스텀 훅의 scrollToBottom을 해주어야함

Fix : 가로 방향으로 모바일 환경에서 움직이는 것을 해결

4382061

Feat : make like heartUI and conditional rendering

30a4d4c

Programming-Seungwan added 27 commits April 5, 2024 18:42

Fix : useEffect() 훅 내에서 setUserPageMode() 를 통해 상태를 변경시키기 보다는, 어차피 상태 …

d97b001

…처리는 배치되기 때문에 핸들러 함수 내부에서 분기하여 작성해주었음

Feat : make friends search head UI

82956e1

Feat : make profile page head UI

b4c282d

Fix : 불필요한 useEffect() 훅의 사용 없앰

a49a2f8

1. 그냥 TabIconConatiner에서 userPageMode는 url과 곧바로 연동되면 끝이므로 useLocation() 훅의 pathname 정도만을 확인하는 로직이면 충분하다.

Feat : make Friends List UI in /(friends) url path

aae29fa

Feat : make messages search head UI

fcdef66

Fix : fix state changing error

01c3a35

1. 렌더링 도중에 상태의 변경이 일어나면 안된다. 이를 useEffect() 훅 내부로 옮겨주었음

Feat : make route betwwen message list page and chat page

f80c9d8

Feat : make chat detail members page UI

50e092d

Refactor: absolute import path refactoring

18ef9e1

1. 절대경로로 import 하도록 자잘한 코드 수정

Chore : make router setting in chat page

768da6f

1. 김정민 chat 말고도 다른 chat에서도 뒤로 가기 화살표를 누르면 /messages url로 갈 수 있도록 설정

Feat : make empty chat default UI

562c30c

1. 기존의 메시지 데이터가 있는 상황에 대해서 상태관리 설정을 추후에 해줘야 함

Feat : make default profile UI

fe81081

Fix : github image file name fix

375827e

Chore : messageData가 없을 때 ProfileGroup UI로 보이게 조건부 렌더링

53fa57a

Feat: make chat 기능 in empty chat page

028b77f

1. 사용자를 누르면 전환되는 것을 추가적으로 구현해야함

Feat : empty chat room에도 채팅 기능을 구현 완료

e400fb8

Fix : html 속성명과 겹치는 ifBlueSignal 이름 변경

c3b331e

1. 앞에 $를 붙여주는 방식으로 해결

Docs : 두 번째 pr을 위한 md 파일 작성

1637dbc

Feat : profile 페이지 로고 UI 해결

48e8f53

1. img를 담은 div를 img 보다 너비 높이를 높게 잡고 border radius를 원형으로 만든 뒤, background color를 적용함

Fix : profile logo UI position 변경

9ad56de

1. 로고의 너비 높이는 80px 이지만 이를 위치시키는 컨테이너는 90px 이므로 이를 고려해야 레이아웃 배치

Refactor : 불필요한 주석 제거

8341301

Docs : pr을 위한 마크다운 생성

079de11

Fix : not found page for unexpected approach

7487820

1. 사용자가 예상치 못한 접근을 하면 not found page로 갈 수 있도록 라우팅 설정

Forcing an empty commit.

edcf599

Refactor : 중복되는 코드 제거

bada0ea

youdame reviewed May 5, 2024

View reviewed changes

jinnyleeis reviewed May 5, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4주차] 김승완 미션 제출합니다. #11

[4주차] 김승완 미션 제출합니다. #11

Programming-Seungwan commented Apr 30, 2024

youdame left a comment

youdame May 5, 2024

Programming-Seungwan May 5, 2024

youdame May 5, 2024

Programming-Seungwan May 5, 2024

youdame May 5, 2024

youdame May 5, 2024

youdame May 5, 2024

Programming-Seungwan May 5, 2024

youdame May 5, 2024

youdame May 5, 2024

youdame May 5, 2024

youdame May 5, 2024

youdame May 5, 2024

Programming-Seungwan May 5, 2024

youdame May 5, 2024

jinnyleeis left a comment

jinnyleeis May 5, 2024

jinnyleeis May 5, 2024

jinnyleeis May 5, 2024

jinnyleeis May 5, 2024

jinnyleeis May 5, 2024

[4주차] 김승완 미션 제출합니다. #11

Are you sure you want to change the base?

[4주차] 김승완 미션 제출합니다. #11

Conversation

Programming-Seungwan commented Apr 30, 2024

배포 링크

📌 구현 기능

🧠 느낀 점 및 시간 투자 부분

시간 투자 💪🏼

느낀 점 ❗️

❓ Key Questions

youdame left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jinnyleeis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment