[2주차] 임시언 미션 제출합니다. #8

Sieonn · 2024-09-04T00:45:17Z

안녕하세요. U+ 유레카 프론트엔드 과정을 진행하고 있는 입시언 입니다. ദ്ദി ᵔ∇ᵔ )
이번에 처음 미션을 진행하면서 Git에 대해서 좀 알게 되었고 배포도 해보고 또 Fork 기능도 사용해봐서 신기하면서도 어려웠던 경험이었습니다.

pull request에 서툴러서 분명히 했는데 뭔가 되지 않은 것을 알고 부랴부랴 하느라 좀 진땀을
뺐습니다...허허 😂

이 스터디를 통해서 Git이랑도 친해지는 계기가 될 것 같아 설렙니다.

미션

🎯 미션 목표

React의 기초 개념을 이해하고 활용합니다.
React의 state와 props 사용에 익숙해집니다.
컴포넌트 기반 개발 방식을 경험하며, 재사용 가능한 UI 컴포넌트를 설계하고 적용합니다.

✅ 필수 요건

결과 화면의 기능을 구현합니다.
emotion 라이브러리를 활용하여 화면을 스타일링 합니다.
적절한 단위로 컴포넌트를 나누어 개발합니다.
브라우저의 웹 스토리지를 이용하여 기존의 데이터를 저장하고 불러옵니다.
MobX, Redux, Recoil, Zustand 등 상태 관리 라이브러리를 사용하지 않습니다.

📖 생각해 본 질문들

지난주 미션과 비교했을 때, React로 구현하는 과정에서 어떤 점이 더 편리하거나 복잡했나요?

컴포넌트를 생성한다는 점에서 구현하고자 하는 화면에 대해서 저 상세하게 고민하면서 같이 묶어도 될 것, 재 사용할 것에 대해서 생각할 수 있었습니다.
React의 Virtual DOM(가상 돔)이란 무엇이고, 이를 사용했을 때의 장점은 무엇이 있나요?

최소한으로 DOM을 수정할 수 있도록 도와주는 자바스립트 객체이다.

DOM은 Document Object Model의 약자로 HTML 문서의 계층적 구조와 정보를 표현하고 이를 제어할 수 있는 API(프로퍼티와 메서드)를 제공하는 트리 구조이다.

DOM을 사용하는 이유는 자바스크립트로 DOM을 조작할 경우 DOM이 수정될 때마다 리렌더링이 되어서 성능에 악영향을 준다.

Virtual DOM은 메모리에 저장되어 있는 자바스크립트의 객체, 즉 값일 뿐이라 수정/ 제거/ 삭제하는 과정에서 연산을 많이 소요하지 않는다.
React에서 state와 props는 무엇이고 어떻게 사용하나요?

state는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다.

props는 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 것들을 의미한다.
React에서 컴포넌트를 분리하는 기준은 무엇일까요?

리액트에서 컴포넌트를 분리하는 기준은 여러가지가 있다.
- 재사용성
- 단일 책임 원칙
- 가독성
- 상태와 라이프사이클
- UI 요소

참고 자료

⭐ 추가한 기능

체크 박스를 통해서 전체 선택 부분 선택하여 삭제, 상태 변화가 가능하도록 했습니다.

💜느낀 점

주어진 화면을 잘 구현할 수 있는 능력을 길러야겠습니다. ( •̅ɞ•̅ )

처음에 그냥 구성할 때 Page자체에 너무 많은 기능을 다 구현해 넣다 보니까 지저분하고 List가 TodoList와 Done이 같은 모양과 유사한 기능을 가지고 있어 정리하고 싶었습니다.

그래서 Hook이라는 폴더를 만들어 커스텀 훅을 정리하고 이에 대해서 따로 정리를 해서 깔끔해졌습니다.

기능 구현한 것 자체가 너무 지저분하고 중복되는 기능을 뭔가 이름을 바꿔서 여러 개 만든 것 같아 좋은 코드라고 볼 수 없을 것 같습니다.

또 약간 몰아서 commit하게 되는데 commit 습관을 잘 들여 놓는 것이 좋을 듯합니다. (•́ε•̀;ก)💦

구현

구현화면 보기

추가 기능으로 체크박스✅와 전체 삭제, 전체 선택 버튼을 만들었습니다.

구조

크게 src안에 Components, hooks, images, Pages 폴더로 나눴습니다.

Components에는 재 사용성이 높은 것들을 구현했고 Page에 최소한의 컴포넌트만 깔끔하게 한 눈에 보이기 바라면서 구현했습니다.

Components

Button과 전체 Container, 그리고 Input이 이루어지는 부분 List로 나누었습니다.

처음 구현할 때 List만 구현하고 세미타이들과 버튼은 그냥 직접 넣었는데 같은 코드와 스타일을 사용하니 코드 가독성이 떨어지고 복잡해보여서 ListSection으로 컴포넌트를 다시 만들어주었습니다.

186줄 이었는데 이걸 쪼개서 74줄로 만들었습니다.

다음에는 기능을 정의할 때 효율적으로 짜도록 해야겠습니다.

❓질문

컴포넌트를 나누거나 js, css를 나누는 좋은 방법이 있나요? 좋은 방법이란게 없다면 추천하고 많이 사용하는 형태가 있을까요?~

jejukyj

시언님! 합류하고 나서 첫 미션인데 일주일간 고생하셨습니다~!
저랑 다른 방식으로 코드를 짜셔서 코드 구경하는 재미가 있었어요 ㅎ_ㅎ
다음 미션도 같이 힘내봅시다💪

jejukyj · 2024-09-05T04:20:04Z

src/App.jsx

+  function setScreenSize() {
+    let vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  }


우와 스크린 사이즈를 자동으로 리사이즈 할 수 있는 방법이 있었네요..! 저도 브라우저 사이즈가 변경될 때 잘리는 오류가 있었는데 이 방법 사용해보면 해결될 것 같아요 +_+ 참고해서 수정해보도록 하겠습니다 유용한 정보 감사해요💓

히히..배포했다는 사실이 신나서 모바일에서 열었다가 보이지 않아서 찾아봤었어요..ㅎㅎ

우와 이런 것까지 적용하시다니! 디테일 최고입니다 👍🏻

jejukyj · 2024-09-05T04:22:35Z

src/Components/Button.jsx

+function Button({ onClick, children, isActive }) {
+  return (
+    <button
+      css={css({


버튼 컴포넌트의 코드내용이 적어서 위에 쓰나 아래에 쓰나 크게 다르지 않기 때문에 인라인으로 css속성 적용하신걸까요??

사실 잘 몰라서 처음 찾아봤던 블로그를 보고 따라 작성한 방법이라 이후에 따로 밖에서도 설정할 수 있다는 걸 알았어요.😂

jejukyj · 2024-09-05T04:25:21Z

src/Components/Container.jsx

+    <div
+      css={css({
+        width: '400px',
+        maxWidth: '60vw', // 모바일이나 작은 화면에서 잘리길래 화면 설정해주었다.


오 이런 디테일한 부분 너무 좋아요✨✨

jejukyj · 2024-09-05T04:28:18Z

src/Components/Container.jsx

+  );
+}
+
+export default Container;


혹시 Container 컴포넌트를 따로 분리한 이유가 무엇일까요? 저는 <div className="container">로 하고 이 아래에 컴포넌트들을 넣은 방식으로 진행했는데 어떤 이유로 분리하신건지 궁금해요!

전체 틀을 잡아 놓고 그 안에서 컴포넌트들이 제한되게 움직였으면 좋겠다는 이유랑 아에 완전히 모든 기능들과 구성요소를 컴포넌트화 해버려야지~ 하는 느낌으로 한건데 나중에 전체적으로 보니까 뭔가뭔가 굳이스러웠습니다.

레이아웃을 따로 잡아두셨다는 점에서 저는 좋은 것 같아요!

jejukyj · 2024-09-05T04:49:44Z

src/hooks/useTodoList.js

+        const itemsToMove = activeItems.filter((_, index) => selectedItems.includes(index));
+        const styledItems = itemsToMove.map((item) => ({
+            text: item,
+            style: { textDecoration: 'line-through', color: '#888' },


내부 스타일 코드에서 스타일 변경사항을 적용하는 방법 대신 이 방법을 선택하신 이유가 있을까요? (이유를 너무 많이 물어보나요..?🥲)

저는 List를 하나로 묶어놔서 얘를 따로 저장해주지 않으면 이벤트 적용이 안된다고 생각했슴다. List라는 친구를 Done이나 TodoList가 같이 사용하기 때문에 line-through를 넣어주려면 이렇게 해야하는 줄 알았어유

corinthionia

안녕하세요 시언 님!
리뷰하면서 정말 다양한 추가 기능을 구현하셔서 감탄하면서 봤습니다...! 특히 스크롤바 디자인과 선택 삭제 기능도 구현까지 하신 점이 대단하신 것 같아요! 🥹👍🏻
미션 수행하시느라 정말정말 고생하셨습니다~!

corinthionia · 2024-09-05T08:07:21Z

src/App.jsx

+  function setScreenSize() {
+    let vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  }


우와 이런 것까지 적용하시다니! 디테일 최고입니다 👍🏻

corinthionia · 2024-09-05T08:08:43Z

src/Components/Container.jsx

+        boxShadow:
+          '0 4px 10px rgba(114, 114, 114, 0.1), 0 4px 13px rgba(0, 0, 0, 0.15), inset 0px 0px 5px rgba(255, 255, 255, 0.514)',
+
+        // 유리 두께감을 강조하는 추가적인 효과


👍🏻👍🏻✨

corinthionia · 2024-09-05T08:09:23Z

src/Components/Container.jsx

+  );
+}
+
+export default Container;


레이아웃을 따로 잡아두셨다는 점에서 저는 좋은 것 같아요!

corinthionia · 2024-09-05T08:10:18Z

src/Components/InputValue.jsx

+import { css } from '@emotion/react';
+import addIcon from '../images/pencil.png';
+
+function InputValue({ value, onChange, addItem }) {


InputValue라 하면 값 자체를 가리키는 의미로 많이 사용되어서 Input이나 InputField와 같은 컴포넌트명이 더 적절할 것 같아요!

이름 정하기는 해도해도 어려운 것 같아요..

corinthionia · 2024-09-05T08:11:09Z

src/Components/List.jsx

+          '&::-webkit-scrollbar': {
+            width: '8px',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: '#f1f1f1',
+            borderRadius: '10px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#ff9393',
+            borderRadius: '10px',
+          },


헉 스크롤바 디자인까지... ✨ 여러모로 사소한 부분에 신경을 많이 쓰셨네요!!

약간 병이라면 병인건데 뭔가 잘 안 어울리거나 좀 튀어 보이거나 그러면 가만히 못 두는 고집이 있는 것 같습니다... 너무 디테일에 집착하면 시간도 오래 걸리고 계속 들여다보게 되고 그래서 좀 전체적으로 보는 연습을 이번기회에 하고싶습니다!

corinthionia · 2024-09-05T08:20:59Z

src/hooks/useTodoList.js

+        if (selectedItems.includes(index)) {
+            setSelectedItems(selectedItems.filter((i) => i !== index));


배열 메서드를 아주 잘 활용하시네요 👍🏻👍🏻

corinthionia · 2024-09-05T08:21:41Z

src/hooks/useTodoList.js

+        if (selectedItems.includes(index)) {
+            setSelectedItems(selectedItems.filter((i) => i !== index));
+        } else {
+            setSelectedItems([...selectedItems, index]);


spread 연산자 사용 아주 좋습니다! 다만 setState를 사용할 때 변경되는 state를 직접 참조하여 사용하는 것보다는 콜백 함수를 작성하는 방식이 조금 더 안정적인 방식입니다 🙂

Suggested change

setSelectedItems([...selectedItems, index]);

setSelectedItems(prev => [...prev, index]);

그 이유가 궁금하다면...

프로젝트를 진행하다 보면 state 변경 -> 렌더링 -> state 변경 -> 렌더링 -> ... 과정을 반복하게 됩니다.

setState(state + 1)은 현재의 state 값을 기반으로 상태를 업데이트 합니다. 하지만 이 방식은 state 값이 변경되는 과정에서 다른 setState 호출이 있을 경우, 이전 렌더링 시점의 상태를 기반으로 하기 때문에 최신 상태값을 반영하지 못할 수 있습니다.

반면 setState(prev => prev + 1)은 콜백 함수를 사용하여 이전 상태(prev)를 기준으로 상태를 업데이트 합니다. 이 방법은 상태 업데이트가 비동기적으로 처리되는 동안에도 항상 최신 상태를 반영하므로, 상태가 여러 번 업데이트 될 때에도 정확한 결과를 보장한다고 합니다!

corinthionia · 2024-09-05T08:23:24Z

src/index.css

@@ -0,0 +1,25 @@
+@font-face {


emotion의 <Global 컴포넌트를 이용해서 전역 스타일을 적용해 봐도 좋을 것 같아요!
Emotion - Global Styles

corinthionia · 2024-09-05T08:24:13Z

src/hooks/useTodoList.js

@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react';
+
+export function useTodoList() {


커스텀훅까지 구현하셨군요! 👍🏻 그런데 useTodoList가 상당히 길어져서 hook을 잘게 나누어도 좋을 것 같아요!

corinthionia · 2024-09-05T08:25:18Z

src/hooks/useTodoList.js

+        let newActiveItems = activeItems;
+        let newCompletedItems = completedItems;


해당 함수 내에서 activeItems와 newCompletedItems 값이 변경되지 않는 것 같은데, 새로운 변수에 할당하여 사용하신 이유가 있으신가요?!

처음에 localstorage에 값을 담아놓고 자유롭게 꺼내쓰고 이거보다 기능 일단 구현해보고 그 결과를 넣자! 이렇게 되어서 모든 경우의 동작을 다 만들게 되어버려서 중복되고 지저분해지는 상황이 생겼어요!😭
구현하면서 생각 정리가 잘 안됨의 이슈입니다..허허

Sieonn added 4 commits September 2, 2024 21:13

기능구현

a51e5ec

localstorage 기능구현

71222c3

Separate List into components

1addee1

Refactory Components

c47927c

Sieonn changed the title ~~제목 : [2주차] 임시 미션 제출합니다.~~ [2주차] 임시언 미션 제출합니다. Sep 4, 2024

Sieonn added 3 commits September 5, 2024 09:29

Add Counting items

ea3aa56

화면 크기에 따라서 사이즈조절

06a42ab

화면 조절

bfdf32b

jejukyj reviewed Sep 5, 2024

View reviewed changes

corinthionia reviewed Sep 5, 2024

View reviewed changes

Sieonn added 2 commits September 5, 2024 18:07

Feat: Item count color change

7c7280b

Test: 이미지에서 자꾸 에러가 발생..

b5d0d50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 임시언 미션 제출합니다. #8

[2주차] 임시언 미션 제출합니다. #8

Sieonn commented Sep 4, 2024 •

edited

Loading

jejukyj left a comment

jejukyj Sep 5, 2024

Sieonn Sep 5, 2024

corinthionia Sep 5, 2024

jejukyj Sep 5, 2024

Sieonn Sep 5, 2024

jejukyj Sep 5, 2024

jejukyj Sep 5, 2024

Sieonn Sep 5, 2024

corinthionia Sep 5, 2024

jejukyj Sep 5, 2024

Sieonn Sep 5, 2024 •

edited

Loading

corinthionia left a comment

corinthionia Sep 5, 2024

corinthionia Sep 5, 2024

corinthionia Sep 5, 2024

corinthionia Sep 5, 2024

Sieonn Sep 5, 2024

corinthionia Sep 5, 2024

Sieonn Sep 5, 2024 •

edited

Loading

corinthionia Sep 5, 2024

corinthionia Sep 5, 2024

corinthionia Sep 5, 2024

corinthionia Sep 5, 2024

corinthionia Sep 5, 2024

Sieonn Sep 5, 2024

		if (selectedItems.includes(index)) {
		setSelectedItems(selectedItems.filter((i) => i !== index));

	setSelectedItems([...selectedItems, index]);
	setSelectedItems(prev => [...prev, index]);

		@@ -0,0 +1,171 @@
		import { useState, useEffect } from 'react';

		export function useTodoList() {

		let newActiveItems = activeItems;
		let newCompletedItems = completedItems;

[2주차] 임시언 미션 제출합니다. #8

Are you sure you want to change the base?

[2주차] 임시언 미션 제출합니다. #8

Conversation

Sieonn commented Sep 4, 2024 • edited Loading

미션

구현

구조

Components

jejukyj 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

Sieonn Sep 5, 2024 • edited Loading

Choose a reason for hiding this comment

corinthionia 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

Sieonn Sep 5, 2024 • edited Loading

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

Sieonn commented Sep 4, 2024 •

edited

Loading

Sieonn Sep 5, 2024 •

edited

Loading

Sieonn Sep 5, 2024 •

edited

Loading