[7월1째주]WIL

매주 일요일은, 한 주를 정리하는 회고를 남겨보려고 한다. 
이번주 배운 것 / 느낀 것 / 내게 아쉬웠던 것을 중심적으로!

Fact : 이번주 있었던 일, 내가 한 일
Feeling : 나의 감정적인 반응, 느낌
Finding : 그 상황으로부터 내가 배운 것, 얻은 것
Future : 배운 것을 미래에 어떻게 적용할 것인가

 1. React ( useState, props ) 사용하여 TodoList기능의 WebSite 만들기 

완성본

1. App.jsx 

import "./App.css";

import React, { useState } from "react";

import Header from "components/Header";

import InputContainer from "components/InputContainer";

import ToDoList from "components/ToDoList";

function App() {

const [todo, setTodo] = useState([]);

const [title, setTitle] = useState(""); //클로저

const [content, setContent] = useState("");

const inputTitleHandler = (event) => {

setTitle(event.target.value);

};

const inputContentHandler = (event) => {

setContent(event.target.value);

};

const todoAddButtonHandler = () => {

const newTodo = {

id: Date.now(),

title,

content,

set: false, //기본설정 : false working에 있는 아이를 이렇게 생각하고!

};

console.log(newTodo);

//todo.push(newTodo) 리액트가 인지하지 못하기때문에

setTodo([...todo, newTodo]); //객체를 풀어서(기존의 주소를 없애버린다는것) 집어넣어야 한다. 새로운 주솟값을 가지고 있는 배열을 만들어 준것 //새로운 배열을 만들어주기 위해

setTitle("");

setContent("");

};

//deleteTodoList 배열이고

const deleteTodoList = (id) => { //카드하나의 id

const deleteTodo = todo.filter((item) => item.id !== id); //item.id는 전체 id를 다 돌리는것

console.log(deleteTodo);

setTodo(deleteTodo);

};

const completeTodoList = (id) => {

const completeTodo = todo.map((item) => {

if (item.id === id) {

return {

...item, // 스프레드 연산자 : 객체를 풀어서 복사,

set: true, // set에 true 를 덮어쓴다 //done으로 가!

};

}

return item;

});

setTodo(completeTodo);

};

const cancelTodoList = (id) => {

const cancelTodo = todo.map((item) => {

if (item.id === id) {

return {

...item,

set: false, //false면 working으로 다시 가!

};

}

return item;

});

setTodo(cancelTodo);

};

// const inProgressTodo = todo.filter((item) => !item.set)

// const successTodo = todo.filter((item) => item.set)

const { inProgressTodo, successTodo } = todo.reduce(

(acc, item) => {

if (item.set) {

acc.successTodo.push(item);

} else {

acc.inProgressTodo.push(item);

}

return acc;

},

{ inProgressTodo: [], successTodo: [] }

);

return (

<div className='container'>

<Header />

<InputContainer

title={title}

inputTitleHandler={inputTitleHandler} 

content={content}

 inputContentHandler={inputContentHandler}

 todoAddButtonHandler={todoAddButtonHandler}

 />

 {/* working */}

 <ToDoList

text='Working...🔥'

type={false}

deleteTodoList={deleteTodoList}

TwoButton={completeTodoList}

TwoTodo={inProgressTodo}

/>

{/* Done */}

<ToDoList

text='Done...🎉'

type={true}

deleteTodoList={deleteTodoList}

TwoButton={cancelTodoList}

TwoTodo={successTodo}

/>

</div>

);

}

export default App;

---

App.jsx 파일에서 컴포넌트는 3개로 분리했다. 아직까지 컴포넌트 분리기준에 대해서는 리렌더링을 최소화하는 방향으로 가야한다고 배웠지만 컴포넌트분리 연습을 위해 의도적으로 작은단위로 나누어 분리를 해보았다.

Components > Header.jsx

: App 컴포넌트로부터 상속받고 있는 것 X

import React from "react";

function Header() {

return (

<div className='header'>

<div>My Todo List</div>

<div>React</div>

</div>

);

}

export default Header;

Components > InputContainer.jsx

: App 컴포넌트로부터 상속받고 있는 것 title, inputTitleHandler, content, inputContentHandler, todoAddButtonHandler

import React from 'react';

function InputContainer({ title, inputTitleHandler, content, inputContentHandler, todoAddButtonHandler }) {

return (

<div className='input-container'>

<div className='input-content'>

제목 <input type='text' value={title} onChange={inputTitleHandler}></input>

내용 <input type='text' value={content} onChange={inputContentHandler}></input>

</div>

<button onClick={todoAddButtonHandler}>추가하기</button>

</div>

);

}

export default InputContainer;

Components > ToDoList.jsx

: App 컴포넌트로부터 상속받고 있는 것 text, type, deleteTodoList, TwoButton, TwoTodo

import React from 'react'

function ToDoList({text, type, deleteTodoList, TwoButton, TwoTodo}) {

return (

<div>

<p>{text}</p>

<div className='to-do-list'>

{TwoTodo.map((item) => {

return (

<div key={item.id} className='todo-card'>

<h3>{item.title}</h3>

<div>{item.content}</div>

<div className='button-todo'>

<button onClick={() => deleteTodoList(item.id)}>삭제하기</button>

<button onClick={() => TwoButton(item.id)}>{type ? "취소" : "완료"}</button>

</div>

</div>

);

})}

</div>

</div>

);

}

export default ToDoList

1. inputTitleHandler 등의 함수에서 event.target.value를 변수로 빼주면 더 좋을 것 같아요. 아래의 함수에서도 반복되고, 긴 이름을 가진 친구들은 짧은 변수로 명시해주면 가독성이 더 좋아집니다!
2. todo 안에 있는 객체들의 done에 대한 상태값을 set이라는 key값을 주셨는데, 어떤 뜻으로 set을 사용하셨는지 이해가 가질 않습니다! 결국 나중에는 다른 사람들과도 협업을 진행해야하기 때문에 내가 짠 코드를 남이 이해할 수 있어야해요! 그래서 변수명, 함수명 등을 좀 더 명확하게 명시해주면 좋습니다!
3. 위에 말씀드린 것과 마찬가지로 TwoButton, TwoTodo 라는 함수명, 데이터명이 어떤것을 뜻하는지 모르겠습니다!
4. 컴포넌트 분리가 엄청 깔끔하고 좋네요!

---

Future 우민기 기술매니저님의 피드백.. 따흙! TwoButton과 TwoTodo는 나도 변수명을 짤 때 굉장히 혼란을 느꼈던 부분이다.

컴포넌트 분리를 위해 Working 부분과 Done 부분을 합쳐서 ToDoList에 넣어놓다 보니 각기다른 함수명을 불러와야해서 어떤 이름이 좋을까 고민하다가 시간이 촉박하여 대충 지었던 것이 화근이 되었던 것 같다. 나중에는 나도 이해하지못하는 코드가 될수도,,, 다음에는 변수명을 지을 때 코드컨벤션을 잘 적립하여 동료와 함께 협업할 때 누가되지 않도록 해야겠다!

 

Feeling and Finding  나는 정말 배움의 속도가 느리다...이해가 안되면 못넘어가서 이론을 너무 깊게 파고들려고 하는 문제가 있다는 것을 처음 깨달았다.. 동료들과 동시에 시작했는데 나만 강의 보는 속도가 느렸고, 코드를 짜보라고 하면 단 한줄을 짜는데에도 이해하고 짜느라 시간이 정말 오래 걸렸다. 자괴감에 빠졌고, 코딩할 머리가 아닌가 계속 끊임없이 생각하기도 했다.

 

하지만 기술매니저님들과 이야기를 나누고 동료들과 이야기를 나누다보니, 이전부터 코딩공부를 해 왔던 몇몇 잘하는 사람들과 비교하고 있는 것이었으며, 보통의 나와 같은 시기에 시작한 동료들은 나와 속도가 비슷하다는 것을 깨닫게 되었다.

아! 내가 너무 욕심이 컸구나. 그들은 나보다 몇 년, 몇 개월 먼저 공부를 시작했는데 나보다 월등히 더 (그게 그들이 처음접하는 라이브러리 일지라도) 익히는 속도가 빠를 수 밖에 없다는 사실을 왜 이제야 깨달았을까. 사실은 인정하고, 나도 더 많은 절대적인 시간을 투자해서 언젠가는 깨닫는 속도도, 코드를 짜는 손도 빨라질거라 생각하며 초심의 마음으로 돌아가 차분히 공부를 다시 시작한다.

---

2. 리액트 숙련과정인 Styled-Components 와 Redux 강의듣기 시작!

CSS 라이브러리와 React의 전역상태관리를 도와주는 Redux를 배우기 시작했다. 아직 응애라서 강의에서 알려주는대로 받아들이고, 코드를 작성하고 있었다. 그런데 드림코딩엘리님의 리액트 강의를 보다보니 Redux와 Styled-components를 사용하지 않고 리액트 쿼리와 리액트 훅, 그리고 Post CSS와 Tailwind를 사용하여 css 라이브러리를 알려주시는게 아닌가! 한정된 시간에 모든 걸 다 배울수 없어 취사선택을 해야하는 입장에 놓여있던 찰나, 마침 차이점을 정리해 놓으면 좋을 것 같아서 여러가지 글들을 읽고 각각의 장단점과 쓰는 이유에 대해서 정리하는 블로그 글을 작성하게 되었다.

 

(완성되면 링크 수정하여 올릴 예정)