[POBTIL] 3일차

오늘 한 일

• 알고리즘 한문제

• 독서 15분 나는LINE개발자입니다

• 팀과제
  +함수 HOOK으로 따로 분리하기 // 분리
  +로컬스토리지관리 // ~~저장은 해결 ~~조회도 해야함

• 면접질문1개

해야할 일
+카테고리입력받기추가
+추가된거에도 색표시
+창열기 및 닫기 + 애니메이션
+미입력시알림창_커스텀사용권장(eslint)
+변수명,css,HTML 적절한가

공부했던 내용

add 함수 훅으로 빼서 사용하기!

이렇게 하면 todoList의 관련함수들이 한 곳에 모여있어서 리팩토링하기도 좋고,
뷰와 로직을 분리할 수 있어 가독성도 좋은 것 같다!

팀원분이 훅으로 빼놓고 사용하자고 제안해주셨는데, 처음 이렇게 해봤는데.. 아주 좋은 방식인 것 같다. 고수..! 팀원분들 코드도 훔쳐보면서 많이 배우고 훔쳐야짓!

//src/hooks/useTodoList
import { useRecoilState } from 'recoil'
import { todoListState } from '../atom/Todolist'

const useTodoList = () => { //투두리스트관련함수
  const [todoList, setTodoList] = useRecoilState(todoListState) 

  const addTodoList = (inputValue) => { //추가함수
    const newValue = {
      id: todoList.length + 1,
      title: inputValue,
      done: false,
    }
    const newTodoList = todoList.concat(newValue)
    setTodoList(newTodoList)
    localStorage.setItem('todoList', JSON.stringify(newTodoList)) 
  }
  return { addTodoList } //추가함수 리턴
}

export default useTodoList //투두리스트관련함수 export

// src/components/ AddTodo/ AddModal
import useTodoList from '../../hooks/useTodoList' //투두리스트관련함수 import

function AddModal() {
  const { addTodoList } = useTodoList() // 투두리스트관련함수에서 addTodoList 구조분해할당 이용해 아래에서 사용


  const handleAddClick = () => {
    addTodoList(inputValue) // 추가함수 사용
    setInputValue('')
  }
  return ...
}
export default AddModal

로컬스토리지

• 백엔드가 없는 우리는 todo목록을 브라우저를 닫아도 유지하기 위해, 로컬스토리지를 이용!
• 이 때 로컬스토리지는 배열로 저장할 수 없기 때문에 JSON.stringify로 array처럼 생긴 string으로 저장한 후 다시 JSON.parse 이용해 array로 꺼내서 해결할 수 있다

localStorage.setItem('key', value) // 해당 key로 값 저장하기
localStorage.getItem(key) // 해당 key 찾아오기
localStorage.removeItem(key) // 해당 key 삭제
localStorage.clear(); // 전체 삭제

localStorage.setItem('todoList', JSON.stringify(newTodoList)) // 배열로 된 문자열 저장
JSON.parse(localStorage.getItem(key)) // 저장된 것 배열로 가져오기

호이스팅

https://velog.io/@wkqkel/2.-호이스팅

회고

과제 진행상황

평소 쓰던 css in js가 아닌 scss를 이용해 스타일링 및 애니메이션을 구현해보고, 깔끔한 코드를 작성해보려고 시도중.
잘 안돼서 오히려 복잡해지고, 구현도 제대로 안되는 중... 삽질만 하는중..

내일은 개인과제도 꼭 시작하고, 삽질 좀 줄이게!

자주 우선순위를 정하고 어떻게 하면 더 좋을지 생각하면서 하자!.

내일할일

• 2시에 작업물 merge!
• 개인과제!

## 오늘 해결한 문제

## 앞으로 하고싶은 일

## 개인적인 잡담

## 강의내용

## 흥미로운 글

---