프로그래밍/React 3

[TypeScript && React ] 리펙토링(1) - TodoList

프론트엔드 온보딩에 참여하게 되었는데, 사전과제로 TodoList 만들기를 했었다. 공고를 늦게 발견하여 시간에 쫓겨 황급히 만들었는데.. 그러다 보니 더럽고 난잡하게 만들어지고 필요 구현 사항들도 완전히 만들지 못하게 되었다. 그렇게 완전하지 못한 사전과제를 기반으로 수업을 들었는데... 멘토님의 지적사항 하나하나가 뜨끔하게 만들었고 코드를 잘 짜는 방법을 배울 수 있게 되어서 좋았다. 아직 실무 경험이 없어 몰랐던 것들을 배울 수 있을 것으로 기대된다. 나는 내용과 적용하는 게 어렵게 느껴졌지만 시간이 오래 걸리더라도 꼭 Todolist를 Best Practice로 만들기 위해 차근차근 리펙토링 해볼 예정이다. 1. Token과 Authorication의 상수 선언 - 회원가입을 통해 발급 받을 수 ..

[React] 리엑트 Hook : useState

Hook 기존 Class 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. Hooks는 리액트 v16.8에 새로 도입된 기능이다. 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부른다. Hook을 사용할 때 규칙 1. 최상위 레벨에서만 Hook을 호출해야 한다. 반복문, 조건문 또는 중첩된 함수에서는 Hook의 호출을 권장하지 않는다. 항상 함수의 최상위에서 Hook을 호출하여야 하는데 이는 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되기 때문이다. 예시) function Form() { const [user, setUser] = useState('Hun'); useEffect(function persistForm() { l..

[React] caver-js 오류

에러 노트 caver-js 컴파일 오류 caver-js가 컴파일이 안되는 현상 발생 코드를 재작성 해보니 import Caver from 'caver-js'; caver-js를 가져오는 코드에서 오류가 발생 오류화면 Compiled with problems:X ERROR in ./node_modules/caver-js/packages/caver-core-requestmanager/caver-providers-http/src/index.js 31:13-28 Module not found: Error: Can't resolve 'http' in 'C:\Users\User\klay-market\node_modules\caver-js\packages\caver-core-requestmanager\caver-pr..