[코드 스테이츠] 65일차, "연휴의 TODO - 1일차"

 

  생각보다 해야할 게 많다. TODO 리스트 강의 듣기만도 벅찼다. 어떻게든 연휴 안으로 다 해보긴 할 건데, 연휴 아니었을 때 코드 스테이츠 정규 과정이랑 매우 비슷하게 시간 관리를 해야지 저 TODO 를 모두 끝낼 수 있을 것 같다. 일단은 계속 Try 해보자.

 

---

[ 연휴의 TODO ]

1. 코드 스테이츠) 코플릿 문제
   // 재귀 1 ~ 15
   // 자료구조 1 ~ 13
   
   
2. 코드 스테이츠) 과제 리팩토링
   // beesbeesbees
   // Tree ui
   // Stringfy-json
   // Underbar
   // Async and Promise
   // Stateairlines-client  & Stateairlines-server
   // React Custom Component
   // Cmarket Redux
   
   
3. 패스트 캠퍼스) 인강 듣기
   [React]
   // 리액트 맛보기 3 ~ 30 
     // 현재 28까지 보았음
   // React 공식문서로 디테일 잡기(초급) 1 ~ 11
   // React 공식문서로 디테일 잡기(고급) 1 ~ 19
   
   [Node.js]
   // ch 04. 모던 자바스크립트 살펴보기 1 ~ 6
   // ch 05. 프레임워크 없이 간단한 RESTful API 서버 만들어보기 1 ~ 6
   // ch 06. Node.js 핵심 개념 정리 1 ~ 6
   // ch 07. stream  1 ~ 5
   // ch 08. 리팩토링 프로젝트 1 ~ 4
   
   
4. 개인 프로젝트) React로 TODO List 만들기
     // TODO list 정적인 부분은 모두 만들었고 이제 동적인 부분을 만들면 된다.
5. 개인 프로젝트) CSS 로 파노라마 회사 페이지 만들기 (with 책)
   
   
6. 스터디 그룹) HA 대비 과제 
   
   
7. 생활) 물 1L 이상 마시기
8. 생활) 1시간 이상 걷기 

---

[ 오늘의 배움 ]

1.  HOOK custom

  리액트 강의를 들으면서 좀 참신했다고 생각한 건 Hook 을 내가 만들어 본 것 이었다. 그렇다고 진짜 useState 처럼 React 에 내장된 기능을 사용하는 Hook 을 custom 한 것이 아니라 여러 Hook 들을 묶어서 그 패키지를 Hook 처럼 만들어 본 과정이었다. 

 

  내가 useState 로 관리할 state 와 그것이 변화함에 따라서 실행할 useEffect 가 있다고 해보자. 그리고 그런 state 가 총 3개라면 우리는 state 도 세 개 만들고, effect 도 세 개를 만들어야 할 것이다. 같은 로직임에도 불구하고 이렇게 세 개씩이나 만드는 것은 비효율적이다. 그렇기에 리팩토링을 하면 다음과 같이 만들 수 있을 것이다. 

 

// Custom 
// APP.js 밖에서 선언 

function useSaveLocalStorage(key, value = '') {
  const [state, setState] = useState(() => {
    return window.localStorage.getItem('key' || value);
  });

  useEffect(() => {
    return window.localStorage.setItem(key, state);
  }, [state]);

  return [state, setState];
}


// APP.js 안

const [keyword, setKeyword] = useSaveLocalStorage('keyword');
const [result, setResult] = useSaveLocalStorage('result');
const [typing, setTyping] = useSaveLocalStorage('typing', false);

 

  이렇게 하면 useLocalStorage 는 useState keyword 라는 단어를 state 로 관리함과 동시에 useEffect 로도 관리할 수 있게 된다. 이제 리팩토링할 때 저렇게 커스터마이징할 수 있는 것들은 모두 만들어봐야 겠다.