[WIL] 주말이 더 알찬건 왜때문이죠? 오늘의 개발일지

 

 

지난 주에 해결 못했던 투두리스트

'완료'버튼 눌렀을때 Done으로 가고 '취소'버튼 누르면 다시 Working으로 가게 기능 구현 완료~~!!

 

요건 TextInput.js에 들어간 내용!!

  const onChangeHandler = (event) => {
    const { name, value } = event.target;
    // event.target의 name 뭐지??
    // todoItem이 name
    console.log("event.target의 name?", event.target.name);

    //key : value값으로 넣고 싶을때, (key값이 안정해져있으면)
    // 대괄호를 써서 key네임을 넣는다.
    setNewTodo({ ...newTodo, [name]: value });
  };
  
  const onSubmitHandler = (event) => {
    event.preventDefault();
    // 이거 뭐한거임 26번 코드 ???
    // trim
    // 함수 안에서 return의 의미는 이 아랫줄을 더이상 실행시키지 않는다는 것
    // 아예 빈값은 처리자체를 안해버리려고 If문으로 써준 것
    if (newTodo.todoItem.trim() === "") return;
    console.log("number?", number);

    setTodoList([...todoList, { ...newTodo, id: number }]);
    //다시 initialNewTodo를 초기화시킨건강??
    setNewTodo(initialNewTodo);
    number++;
  };

 

 

그리고 TodoList.js에서 봐야할 내용!!

 <div>
        {todoList.map((todo) => {
          if (!todo.isDone) {
            return (
              <TodoBox
                todo={todo}
                key={todo.id}
                deleteHandler={deleteHandler}
                cancelOrDoneHandler={cancelOrDoneHandler}
              />
            );
          } else {
            return null;
          }
        })}
      </div>

      <h2>Done..! 🎉</h2>
      <div>
        {/* todo의  */}
        {todoList.map((todo) => {
          if (todo.isDone) {
            return (
              <TodoBox
                todo={todo}
                key={todo.id}
                deleteHandler={deleteHandler}
                cancelOrDoneHandler={cancelOrDoneHandler}
              />
            );
          } else {
            return null;
          }
        })}
      </div>
    </div>
  );
};

 

튜터님께 코드를 짜면서 궁금했던 부분들을 물어보면서 라이브 코딩을 진행했는데

튜터님께서 왜 라이브코딩을 계속 사람들에게 시키려고 하시는지 몸으로 깨달았던 시간이었다 ㅠ.ㅠ 

 

입문 과제에서 기능 구현을 못했던 부분을 완성하는 것 뿐만 아니라 

추가로 '로컬스토리지'에 데이터를 넣어볼 수 있냐고 질문을 주셨고, json을 사용하여 배열 형태의 데이터를 string타입으로 전환하고

다시 json을 통해 string 타입이지만 배열처럼 생긴넘(?)의 데이터를 다시 배열로 만들어내는 방법을 배웠고

 

let obj = ['a', ' b', 'c'];

let json = JSON.stringify(obj);

var as = JSON.parse(json);

 

또 숙련강의에서 이해가 잘 가지 않았던 스타일 컴포넌트를 정확히 어떤식으로 사용하는 건지도 배웠다!!!

 

 

 

**스타일 컴포넌트는 js구문 쓰는 곳 맨 아래에다 작성하라고 하셨다

//styled-component는 여기다가 작성
//styled.h2 : h2를 꾸며서 쓰고 싶다는 의미
const TitleContainer = styled.h2`
  color: ${(props) => {
    return props.color;
  }};
  padding: 20px;
  font-size: 20px;
`;

 

 

요거슨 jsx 안의 내용!!!! (리턴문 안의 내용)

      <TitleContainer
        color={color}
        onClick={() => {
          setColor(color === "blue" ? "red" : "blue");
        }}
      >
        Working.. 🔥
      </TitleContainer>

 

 

진짜 혼자 강의듣는것보다 튜터님이랑 같이 소통하면서 봐주셨던 시간이 급속(?) 발전하는 느낌

 

목마른 자가 우물을 판다!!!

 

항상 1개라도 더 배우려는 열정을 잃지 않고 남들보다 '빠른' 성장은 아니더라도

어제의 나보다 미러전에서 이길 수 있는 사람이 되야지

 

그나저나 아무래도 운동량을 좀 줄여야될거같다

체력 증진하려던 운동이 갑자기 트레이너 될 기세가 된거 같네

내일은 50분만 운동해야징