[2주차] 원채영 미션 제출합니다. #5

chaeyoungwon · 2025-03-21T06:22:42Z

배포 링크

미션을 진행하면서

HTML, CSS, vanillaJS로만 만들던 걸 리액트로 옮겨보는 건 이번이 처음이었던 것 같습니다.
미션하면서 styled-components로 컴포넌트를 나누는 과정이 되게 반가웠고, 리액트의 편리함도 새삼 느꼈습니다..!

지난번엔 사이드바를 만들면서 "굳이 이 위치에 있어야 하나?" 싶은 버튼들까지 마구 넣었었는데,
이번엔 실제 투두리스트에 필요한 요소들만 골라서, 날짜 변경 같은 건 밖으로 빼고,
사이드바에는 주간 완료한 할 일만 딱 보여주도록 구성해봤습니다. 열리고 닫히는 애니메이션, 외부 overlay도 추가했습니다!

다크모드/라이트모드 전환 버튼도 많이들 사용하는 토글 스위치 느낌으로 바꿔봤는데, 디자인적으로 더 깔끔해진 것 같아서 뿌듯했습니다 ☺️

그리고 저번엔 key로 index를 쓰다가 문제가 생겼었는데, 이번엔 다시 코드를 짜다 보니 구조상 크게 문제 없어서
uuid 대신 index로 간단하게 사용해봤습니다 😥

프로젝트를 할 때 리액트를 주로 사용하긴 했지만, 최적화나 깔끔한 코드 작성은 여전히 어렵게 느껴지는 부분인 것 같습니다... 혹시 코드 보시면서 조언해주실 부분이 있다면 언제든지 알려주시면 감사하겠습니다!
그리고 url이 같은 상황에서 처음 상태로 돌아가고 싶을때,, window reload말고 다른 방식이 있는지 알고싶습니다,,,

Key Questions

1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?

리액트에서는 실제 DOM이 아닌 가상 DOM을 사용한다.
Virtual-DOM: 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링

=> 사용하는 이유: 실제 DOM에는 브라우저가 화면을 그리는 데 필요한 모든 정보가 들어있어 무겁다.
따라서 부드러운 UX를 제공하고자 변경사항만 빠르게 파악하고 리렌더링하는 방식을 채택한다.

diffing 알고리즘 동작 방식이 이루어짐 (트리, 노드 비교)
가상 DOM의 재조정 과정 3단계
1: UI가 변경 감지 -> UI를 가상돔으로 렌더링 (여기서 렌더링은 가상렌더링을 의미)
2: 현재 가상돔과 이전 가상돔을 비교해 차이 계산
3: 변경 부분을 실제 DOM에 반영
가상 DOM의 장단점
장점: 성능/ 일관성/ 복잡한 UI 관리/ cross-platform 지원
단점: 추가 메모리 사용/ 복잡성 증가/ 특정상황에서의 불필요함

2. React.memo(), useMemo(), useCallback() 함수로 진행할 수 있는 리액트 렌더링 최적화에 대해 설명해주세요. 다른 방식이 있다면 이에 대한 소개도 좋습니다.

React: 컴포넌트 렌더링 후 -> 이전 렌더링 결과와 비교하여 DOM 업데이트를 결정

(1) React.memo():

HOC(higher-order components): 컴포넌트를 인자로 받아서, 새로운 컴포넌트 반환하는 함수

const MyComponent = React.memo((props) => { return (/*컴포넌트 렌더링 코드*/)} );
=> 똑같은 props를 넘겨받아 같은 결과 렌더링 x => 렌더링 과정 skip, 최근 결과 재사용
props의 변경여부만을 체크해서, useState같은 훅을 컴포넌트 내부에서 사용하고 있다면 상태 변경 시 리렌더링됨

(2) useMemo(): 값을 캐싱 => hook

이전 값을 기억하여 재활용할 수 있도록 함
인자로 함수와 dependencies를 넘겨받음 (2번째 인자 중 변경된 값이 존재하면 1번째 인자로 들어간 함수 재실행)

단, 모든 코드에 useMemo를 사용해도 리소스 낭비가 된다. 연산량이 많은 곳에 사용하자

(3) useCallback(): 함수를 캐싱 => hook

컴포넌트 렌더링 시 내부 함수가 새롭게 생성될 경우, 자식에 prop으로 새로 생성된 함수가 넘겨지면 불필요한 리렌더링 발생 가능

import React, {useSatate} from 'react';
import {saveToServer} from './api';
import UserEdit from './UserEdit';
function Profile(){
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  return (
    <div>
      <p>{`name is ${name}`}</p>
      <p>{`age is ${age}`}</p>
      <UserEdit 
        onSave={() => saveToServer(name, age)}
        setName={setName}
        setAge={setAge}
      />
    </div>
  );
}

이 경우에서는, profile 컴포넌트가 렌더링 될때마다 userEdit의 onsave로 새로운 함수가 전달된다.
그러나 onsave의 속성값은 name, age의 변경이 없으면 같아야 함 ! => 따라서 useCallback 필요
const onSave = useCallback(() => saveToServer(name, age), [name, age]);

3. React 컴포넌트 생명주기에 대해서 설명해주세요. (3단계)
1단계: 마운팅 단계 -> 2단계: 업데이트 단계 -> 3단계: 언마운팅 단계

각 단계마다 특정 이벤트가 발생하여 사용되는 메서드가 따로 존재
클래스형 컴포넌트에서만 사용 가능, 함수형 컴포넌트에서는 훅으로 유사 기능 사용 가능

마운트 단계: 처음 DOM이 생명된 후 웹 브라우저 상에 나타나는 단계
constructor, getDerivedStateFromProps, render, componentDidMount

업데이트 단계: React 컴포넌트에 변화가 있을 때
getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate

props가 바뀔 때 (부모 컴포넌트에서 넘겨주는 props가 바뀔 때)
state가 바뀔 바뀔 때 (setState 함수를 통해 state가 업데이트될 때)
부모 컴포넌트가 리렌더링될 때 (자신에게 할당된 props 또는 state가 바뀌지 않아도 리렌더링)
this.forceUpdate로 강제로 렌더링을 트리거할 때

언마운트 단계: 마운트의 반대 과정으로, 컴포넌트를 DOM에서 제거
componentWillUnmount

seoyeon5117

다크모드 구경하려고 왔는데 잘 보고 갑니다👀 2주차 과제도 수고 많으셨습니다!!

seoyeon5117 · 2025-03-24T05:55:59Z

react-todo/src/pages/Home.tsx

+        <S.ItemContainer>
+          {todos.map((todo, index) => (
+            <TodoItem
+              key={index}


key에 index값을 넣는 것은 권장되지 않습니다. 아래 문서 참고하시면 좋을 것 같아요!

key에 index를 넣으면 안되는 이유

seoyeon5117 · 2025-03-24T05:57:42Z

react-todo/src/App.tsx

+
+  return (
+    <BrowserRouter>
+      <ThemeProvider theme={{ ...theme }}>


저도 이번에 다크모드 구현하면서 이 부분 어떻게 구현하셨는지 궁금해서 놀러왔습니다. 저도 훅으로 만들었으면 더 좋을 것 같네요!

seoyeon5117 · 2025-03-24T05:59:31Z

react-todo/src/components/SideBar/SideBar.Styled.ts

+  margin: 1.5rem 0;
+`;
+
+export const CloseButton = styled.span`


button과 같은 시맨틱 태그를 활용하면 웹사이트의 구조를 파악하기 쉽고 스크린 리더를 사용하는 사용자에게도 더 좋을 것 같습니다!

seoyeon5117 · 2025-03-24T06:02:06Z

react-todo/src/pages/Home.Styled.ts

+  gap: 10px;
+  height: 100%;
+  max-height: 500px;
+  overflow-y: scroll;


overflow-y: auto로 바꾸면 투두리스트가 길지 않을 때는 저 하얀 스크롤바가 사라지고, 투두리스트가 길어졌을 때 다시 나타나서 더 깔끔할 것 같습니다!

아 그리고 overflow-w도 숨겨주시면 더 예쁠 것 같아요!

seoyeon5117 · 2025-03-24T06:03:47Z

react-todo/src/pages/Home.Styled.ts

+export const WeekButton = styled.button`
+  font-size: 1rem;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 5px 10px;
+`;


rem과 px을 번갈아 쓰시는 이유가 있나요? 어떤 부분은 padding에 rem이 들어가있고 이 부분에는 px이 들어가 있어서 어떤 때 px을 사용하시고 어떤 경우 rem을 사용하시는지 궁금합니다!

디자인을 만들면서 개발하다 보니 스타일을 고정하고 싶을 경우에는 px로 사용하고, 그 경우가 아니라면 rem을 썼습니다 ,,, ㅎㅎㅎ

seoyeon5117 · 2025-03-24T06:06:24Z

react-todo/src/styles/GlobalStyles.ts

+    :root  {
+        --vh: 100%;
+    }


이 부분 정의하시고 따로 사용하시지는 않은 것 같아요!

앗,, 그렇네요 ㅜㅜ

seoyeon5117 · 2025-03-24T06:08:29Z

react-todo/src/styles/GlobalStyles.ts

@@ -0,0 +1,53 @@
+import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';


새로운 라이브러리 알아갑니다~

seoyeon5117 · 2025-03-24T06:12:10Z

react-todo/src/styles/theme.ts

+  },
+};
+
+export { lightTheme, darkTheme };


export 방식이 통일 되면 좋을 것 같습니다!

seoyeon5117 · 2025-03-24T06:18:16Z

react-todo/src/utils/dateUtils.ts

+  return date.toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });


저도 바닐라 js로 투두리스트 만들때 코드리뷰 받았던 부분인데 OPTION을 따로 상수로 빼면 코드를 자세히 보지 않아도 추후 쉽게 유지보수할 수 있어 상수로 빼는 방식도 고려해보시면 좋을 것 같네요!

2025314242

배울 것도 많고 너무 좋은 코드였습니다!

2025314242 · 2025-03-24T07:29:03Z

react-todo/src/utils/todoUtils.ts

+  const newDate = new Date(currentDate);
+  newDate.setDate(currentDate.getDate() + days);
+  setCurrentDate(newDate);
+};


이렇게 todo 핸들링 관련 함수들 아예 utils로 따로 빼 놓으신 게 너무 좋은 것 같스빈다! 한 눈에 보기 편리하네요

2025314242 · 2025-03-24T07:31:23Z

react-todo/src/utils/dateUtils.ts

+    month: 'long',
+    day: 'numeric',
+  });
+};


확실히 이렇게 parameter로 format 전달하게 되면 너무 좋을 것 같습니다! 다만 한 가지 의견을 드리자면, date.toLocaleDateString 에서 'ko-KR' 대신 format으로 설정하시는 건 어떠신가요? 이렇게 하면 추후 유지보수에 더 편리할 것 같습니다!

2025314242 · 2025-03-24T07:32:27Z

react-todo/src/styles/theme.ts

+  },
+};
+
+export { lightTheme, darkTheme };


colors 파일 따로 분리하신 것도 그렇고, light/dark 모드 1주차 때 리뷰하실 때도 너무 인상깊게 봤습니다. 저도 기회가 되면 이렇게 모드 분리해서 만들어보고 싶네요!

2025314242 · 2025-03-24T07:34:02Z

react-todo/src/styles/GlobalStyles.ts

+    }
+`;
+
+export default GlobalStyles;


저는 meyer's reset을 따로 복붙해서 사용하였는데, 아예 이렇게 패키지로 사용할 수도 있군요?? 너무 좋은 것 같습니다!

2025314242 · 2025-03-24T07:39:14Z

react-todo/src/hooks/useTheme.ts

+  const theme: DefaultTheme = themeMode === 'light' ? lightTheme : darkTheme;
+
+  return { theme, themeMode, toggleTheme };
+};


저도 추후 light/dark 모드 적용해볼 때 이렇게 custom hook 만들어서 사용하면 정말 좋을 거 같네요, 좋은 코드 감사합니다!

2025314242 · 2025-03-24T08:15:12Z

react-todo/src/components/ToggleButton/ToggleButton.tsx

+  );
+};
+
+export default ToggleButton;


이건 그냥 제 개인적인 바램인데, 혹시 기회가 되신다면 토글 버튼 옆에 낮/밤 이모지도 간단하게 추가해주실 수 있으실까요? 1주차 때 있으셨던 거로 기억하는데 너무 좋게 봤어서 그렇습니다!!

2025314242 · 2025-03-24T08:15:51Z

react-todo/src/components/Header/Header.tsx

+  );
+};
+
+export default Header;


혹시 헤더를 위쪽 상단에 고정하시는 방안에 대해서는 어떻게 생각하시나요? 지금은 스크롤 내리면 헤더가 가려지더라고요 ㅜㅜ

2025314242 · 2025-03-24T08:17:22Z

react-todo/src/hooks/useCompletedTodos.ts

+    return () => window.removeEventListener('storage', updateCompletedTodos);
+  }, [updateCompletedTodos]);
+
+  return { completedTodos, maxDays };


위에 커밋에서도 언급하였는데, 지금 방법도 너무 좋지만 혹시 max day를 단순 count가 아닌 비율로 설정하시는 방법은 어떠신가요??

2025314242 · 2025-03-24T08:18:25Z

react-todo/src/components/TodoInput/TodoInput.tsx

@@ -0,0 +1,79 @@
+import { useState, useRef } from 'react';
+import * as S from './TodoInput.Styled';
+import { FaCalendarAlt } from 'react-icons/fa';


react에서 자체적으로 아이콘 제공을 해주는군요?? 대박이네요

2025314242 · 2025-03-24T08:24:01Z

react-todo/src/components/TodoInput/TodoInput.tsx

+  const [isComposing, setIsComposing] = useState(false);
+  const [selectedDate, setSelectedDate] = useState('');
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+  const dateInputRef = useRef<HTMLInputElement>(null);


제가 구현하지는 않았지만, 추후에 input type=date 사용할 때 useRef 사용하면 많은 도움이 될 것 같네요 감사합니다!

lemoncurdyogurt

다크모드랑 화이트모드로 모드 전환하는거에서 굉장히 신선함을 느꼈는데, 토글로 전환해서 디벨롭 한게 너무 인상깊었어요! 화면 스타일면에서도 많은 고민을 한게 느껴졌고, 코드에서도 많은걸 배울 수 있었어요!

lemoncurdyogurt · 2025-03-24T08:07:21Z

react-todo/src/styles/GlobalStyles.ts

+        &::-webkit-scrollbar {
+            display: none; /* 웹 브라우저에서 스크롤 바 숨기기 */
+        }


웹 브라우저에 스크롤바 없애는거에 대해서 생각 해본적 없는데 되게 좋은 기술인거 같아요!

lemoncurdyogurt · 2025-03-24T08:18:28Z

react-todo/src/components/SideBar/SideBar.tsx

+          <S.WeekText>Weekly Progress 📅</S.WeekText>
+          {Object.entries(completedTodos).map(([day, count]) => (
+            <S.DayStat key={day} $isMax={maxDays.includes(day)}>
+              {day === todayDay ? `Today (${day})` : day} | {count}개 완료
+            </S.DayStat>


사소한거긴 한데, 요일 별 할일을 보고 -> 해당 날짜로 이동하는 과정이 조금 불편한거 같아서 요일을 클릭했을 때 해당 날짜로 이동시킬 수 있는 navigate가 있으면 좋을 거 같아요!

lemoncurdyogurt · 2025-03-24T08:28:22Z

react-todo/src/components/TodoInput/TodoInput.tsx

+    if (e.key === 'Enter' && !isComposing) {
+      e.preventDefault();
+      handleAddTodo();
+    }


e.key === 'Enter' && !isComposing로 한글 조합 중에 엔터키 막은거 같은데
이렇게 등록이 돼요!

lemoncurdyogurt · 2025-03-24T10:02:16Z

react-todo/src/main.tsx

+  <StrictMode>
+    <GlobalStyles />
+    <App />
+  </StrictMode>,


StrictMode를 사용한 이유가 있을까요?

chaeyoungwon added 18 commits March 20, 2025 15:27

Environment: 초기 환경 세팅

8f4646b

Feat: 홈화면 UI 초기 구현

4370b73

Feat: 등록 및 삭제 로직 구현

f6e35a4

Feat: 다크모드 로직 구현 및 스타일 수정

afce987

Feat: 할 일 completed 속성 추가

55a654d

Feat: 사이드바 weekly progress 추가 구현

a8c17f7

Refactor: 주간완료 할일 계산함수 분리

6904b68

Refactor: 주석 추가 및 코드 분리

201d543

Fix: 삭제 시 빈 배열을 남기지 않도록 수정

63315e0

Feat: 캘린더 아이콘 및 datepicker 추가

38b9eca

Feat: 사이드바 애니메이션 추가

b58443f

Fix: fadein 속성 제거

7904dc4

Chore: 배포

9566700

Chore: 배포 설정 수정

5109a3e

Chore: 배포

5cc53e5

Fix: tsconfig.json 수정

fd84360

Fix: 확장자 제거

3b53d73

Fix: 포인터속성 제거

c4160d0

seoyeon5117 reviewed Mar 24, 2025

View reviewed changes

2025314242 reviewed Mar 24, 2025

View reviewed changes

lemoncurdyogurt reviewed Mar 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 원채영 미션 제출합니다. #5

[2주차] 원채영 미션 제출합니다. #5

chaeyoungwon commented Mar 21, 2025 •

edited

Loading

seoyeon5117 left a comment

seoyeon5117 Mar 24, 2025

seoyeon5117 Mar 24, 2025

seoyeon5117 Mar 24, 2025

seoyeon5117 Mar 24, 2025

seoyeon5117 Mar 24, 2025

seoyeon5117 Mar 24, 2025

chaeyoungwon Mar 24, 2025

seoyeon5117 Mar 24, 2025

chaeyoungwon Mar 24, 2025

seoyeon5117 Mar 24, 2025

seoyeon5117 Mar 24, 2025

seoyeon5117 Mar 24, 2025

2025314242 left a comment

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

2025314242 Mar 24, 2025

lemoncurdyogurt left a comment

lemoncurdyogurt Mar 24, 2025

lemoncurdyogurt Mar 24, 2025

lemoncurdyogurt Mar 24, 2025

lemoncurdyogurt Mar 24, 2025

		@@ -0,0 +1,53 @@
		import { createGlobalStyle } from 'styled-components';
		import reset from 'styled-reset';

[2주차] 원채영 미션 제출합니다. #5

Are you sure you want to change the base?

[2주차] 원채영 미션 제출합니다. #5

Conversation

chaeyoungwon commented Mar 21, 2025 • edited Loading

배포 링크

미션을 진행하면서

Key Questions

seoyeon5117 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

2025314242 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

lemoncurdyogurt 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

chaeyoungwon commented Mar 21, 2025 •

edited

Loading