개발항해일지 22년/6월/2주 :: 타입스크립트 기본타입, useEffect와 setInterval

일지 2022년 6월 2주차

 

 

이번주 할 일

저번주에 써 놓은 것 외에도 이것저것 한 5가지 동시에 진행되었다.

그러다 보니 써놓은 것 조금 놓쳤다. 이번주는 좀 더 현실적으로

 

1. 알고리즘 마무리 정리

2. 데이터베이스 마무리 정리

3. 리액트 + 타입스크립트 프로젝트 진행

 

아쉽지만 이번주도 web3는 쉬어가기

 

 

소중한 피드백

혼자 프로젝트를 진행하면 피드백을 받을 곳이 없다.

그래서 이렇게 피드백을 받으면 굉장히 소중하다.

저번주에 Vanila JavaScript로 리액트 마냥 SPA를 만든 것에 대한 피드백이다.

 

소중한 피드백 리스트

• 매직넘버
• html lang 설정
• div가 아닌 의미에 맞는 태그 사용
• 필요없는 변수 정리
• Throttle 대신 IntersectionObserver 사용
• DOM 그리기 선언적 방법 이용

 

하나씩 차차 알아보자

 

 

타입스크립트 공식문서

우선 자주 사용되는 타입들을 정리

https://forgottenknowledge.tistory.com/entry/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Docs-%ED%95%B4%EB%B6%80

타입스크립트 :: Docs 해부

 

 

Sass 번역 완료

FreeCodeCamp 챌린지를 한국어로 번역중이다.

리액트 부분은 번역과 검수를 마쳤고, Sass 번역을 마쳤다.

이제는 Sass 검수를 할 시간!

한국어 커뮤니티에 한 명도 없었는데,

조금씩 늘어서 FreeCodeCamp 한국 상륙에 속도가 더 날 것으로 보인다!

 

 

useEffect와 setInterval

useEffect안에서 setInterval을 사용하려는데 초기값만 계속 출력됐다.

이유는 조금 복잡한 개념인 Closure와 비동기 동작 때문인 듯 하다.

 

예를 들어 3초마다 현재 인덱스에 1을 증가시키려고 한다.

useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex(currentIndex + 1);
    }, 3000);
  }, []);

 

하지만 currentIndex값을 확인해보면 계속 0만 출력한다.

그 이유는 당연하게도 currentIndex가 계속 0이라는 소리겠지.

 

이해를 하기 위해 Closure 동작이 어떤지 알아보면,

외부의 함수가 끝나도, 내부의 함수가 값을 참조하는 동작이라고 한다.

 

예를 들어,

마트의 마무리하는 직원을 제외하고 모든 직원이 퇴근하며, 재고 창고도 닫았다고 생각해보자.

남은 직원은 재고 창고의 직원이 전해준 재고 용지에 적힌 물품의 수량을 확인할 수 있다.

즉, 재고 창고가 닫혔지만, 재고를 확인할 수 있는 것이다. 이런게 Closure가 아닐까 생각한다.

 

다시 코드로 돌아가서

1. useEffect는 currentIndex 값이 0이라고 전해주고 종료됐다(이미 여기서 결판난듯)

2. setInterval은 비동기적으로 작동을 하고, 3초마다 setCurrentIndex 연산을 실행시킨다. 

3. 하지만 0인 currentIndex 값만 계속 +1 시킨다

 

그럼 어떻게 해야 3초마다 1씩 증가할까??

useInterval()같은 커스텀 훅을 만드는 것을 추천하지만,

setCurrentIndex를 이렇게 바꿔줘서 가능하기도 하다.

useEffect(() => {
const total = 10;

const interval = setInterval(() => {
  setCurrentIndex((previousIndex) => {
    let nextIndex = previousIndex + 1;
    if (nextIndex + 1 > total) {
      nextIndex = 0;
    }
    return nextIndex;
  });
}, 3000);

return () => clearInterval(interval);
}, []);

state에 파라미터를 넣어서 전의 state를 이용하는 방법이다.

아마 실행되는 동안 자체 state가 돌아가며 되지 않을까 생각된다.

자세한 setState에 대해서는 차차 찾아보자 지금은 졸려서.

 

 

데이터베이스, 알고리즘 강의 마무리 완료

데이터베이스 키 컨셉 정리 완료

https://forgottenknowledge.tistory.com/entry/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EA%B0%95%EC%9D%98-%EB%A7%88%EB%AC%B4%EB%A6%AC-%EC%A0%95%EB%A6%AC

데이터베이스 강의 마무리 정리

 

알고리즘 키 컨셉 정리 완료

https://forgottenknowledge.tistory.com/entry/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EA%B0%95%EC%9D%98-%EB%A7%88%EB%AC%B4%EB%A6%AC-%EC%A0%95%EB%A6%AC

알고리즘 강의 마무리 정리

 

 

참고링크

React with TypeScript: Best Practices

=> https://www.sitepoint.com/react-with-typescript-best-practices/

 

React TypeScript Cheatsheet

=> https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example

 

JS로 DOM 그리는 3가지 방식

=> https://serzhul.io/JavaScript/js%EB%A1%9C-dom-%EA%B7%B8%EB%A6%AC%EB%8A%94-3%EA%B0%80%EC%A7%80-%EB%B0%A9%EC%8B%9D/

 

React & TypeScript - Course for Beginners

=> https://youtu.be/FJDVKeh7RJI

 

How to Use TypeScript with React Components

=> https://dmitripavlutin.com/typescript-react-components/

 

Typescript: Five most useful utility types for React

=> https://isamatov.com/typescript-utility-types-for-react/

 

useInterval()

=> https://usehooks-ts.com/react-hook/use-interval

 

React에서 setInterval 현명하게 사용하기(feat. useInterval)

=> https://mingule.tistory.com/65

 

10 Must-Know Patterns for Writing Clean Code with React and TypeScript✨🛀

=> https://dev.to/alexomeyer/10-must-know-patterns-for-writing-clean-code-with-react-and-typescript-1m0g

 

 

sail by Johannes Plenio @unsplash