두 개의 서비스를 계속 이용하다가 어제 리디셀렉트를 해지했습니다. 일단 써보면서 느꼈던 주관적인 장단점을 설명해보겠습니다!

리디셀렉트

• 장점

  • 직관적인 UI 화면 (인기 도서와 주제별 책을 한 페이지에서 깔끔하게 보여준다)

• 단점

  • 책의 종류가 생각보다 적다

밀리의 서재

• 장점

  • 책의 가짓수가 더 다양하고 많다
  • 오디오북이 있다!

• 단점

  • 너무 잦은 업데이트
  • 너무 많은 기능때문에 어지러운 UI
  • 복잡한 로직

해지한 이유?

• 밀리의 서재 단점을 더 많이 적었음에도 리디 셀렉트를 해지한 이유는

  • 리디셀렉트는 내가 느끼기에 책의 가짓수가 적고 오디오북이 없었기 때문이다.
  • 밀리의 서재 단점으로 너무 많은 기능과 수시의 업데이트를 적긴 했지만 그만큼 사용자를 신경쓴다는 느낌을 받았다.

잡담

개발자를 준비하고 있기에 두 가지의 서비스다 정말 잘 이용했고 클론코딩해보고 싶다. 개인적으로 개발 관련 서적이 밀리의 서재에 좀 더 많았기에 자주 사용했다.

1. velopert님의 Todolist UI만을 보고 구현
2. 내가 짠 거랑 velopert님 꺼랑 소스코드 비교

📌 기본 동작 원리

무지성으로 컴포넌트 두개...

📌 오늘 날짜 들고 오기

let today = new Date(); 
  let year = today.getFullYear();
  let month = today.getMonth() + 1;
  let date = today.getDate();
  let day = today.getDay();
  const weekday = ['일','월','화','수','목','금','토'];
  return (
    <div>
        <h1>{year}년 {month}월 {date}일</h1>
        <h2>{weekday[day]}요일</h2>
    </div>
);

📌 CRUD 기능 추가

CREATE, DELETE 만 있어서 두 개만 구현함.

• CREATE Enter -> 입력 -> input 창 초기화(오류)

const onCreate = (e) => {
    var newTodos= [...todos];
    newTodos.push({ text:e.target.value, active:false});
    if(e.key=='Enter'){
      setTodos(newTodos);    
      // setInputValue(''); (오류) 첫 입력후 inputValue값이 null로 고정됨      
    }   
  } 

• Delete button Click event -> 삭제

  const onRemove = (e) => {
    setTodos(todos.filter(todo => todos.indexOf(todo) !== Number(e.target.id)));    
  }
  

### 📌 남은 할 일 보여주기
```js
const undoneTasks= useMemo(() => {
    return todos.filter((todo) => !todo.done).length
  },[todos]);

📌 마주친 오류들

• TypeError : items.map is not a function.

  • 오브젝트는 map()함수를 가지고있지 않아 사용할 수가 없다. 배열만 가능하다.
  • 원인 : newItems += e.target.value;
  • 해결 : newItems.push(e.target.value);
  • 이상한 점 : setItems(prev => [...prev+e.target.value]) 하면 글자 하나씩 배열에 들어감
  • [참고] (https://www.techiediaries.com/react-usestate-hook-update-array/)

• JSX expressions must have one parent element

  • 원인 : 여러 개 요소를
    나 fragement로 감싸지 않음
  • 이유 : 여러개의 요소를 하나의 요소로 감싸주는 이유는 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하는 규칙이 있기 때문이다.
  • [참고] (https://dlthdud091.tistory.com/34)

• filter -> button의 key를 item의 index로 할당해서 나중에 key랑 item의 index를 비교해서 삭제할려고 했는데 안됨.

  • 원인 : typeof(e.target.id) = string typeof(items.indexOf(item)) = number

  • 해결 : items.indexOf(item) !== Number(e.target.id)

    • li태그를 checkbox type인 input으로 바꾸고 li 내용을 value로 넣으니까 화면상에 아무것도 보이지 않음

  • 코드 : <input value={item} type="checkbox" key={index} />

  • 해결 :

    <input id={index} type="checkbox" />
    <li type="checkbox" key={index} style={{display:"inline-block"}} >{item}</li>

  • [참고] (https://egg-programmer.tistory.com/282)

    • Objects are not valid as a React child 에러 처리

    • 원인 : source data인 Followings가 데이터타입이 array인데, 각 요소(여기서는 item, 데이터 타입은 Object)객체를 그대로 렌더링 하려고 했기 때문에 에러가 발생하였다. 즉, Object데이터를 그대로 렌더링 하려고 했기 때문에 에러가 발생한 것이다.

  • [참고] (https://velog.io/@bigbrothershin/React-Objects-are-not-valid-as-a-React-child-%EC%97%90%EB%9F%AC-%EC%B2%98%EB%A6%AC)

    • input 에 type="checkbox" value={items[index].text}했는데 화면에 value값 표현되지 않음

  • 원인 : ?

📌 원본에 없는 기능 추가 (추후 구현)

• 예외처리 : input값이 비어있으면 입력되게 하지 않기
• Update랑 Read 기능 추가