전체 글119 [Error] Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 에러 발생 todomvc를 만드는데 아래와 같은 에러가 발생했다. Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 발생 원인 todomvc에서 해당 부분은 아래와 같은 코드로 구성되어있다. itemElement = ( {content} ); checked는 event delegation으로 해당 태그의 className이 toggle 일 때, useState로.. 2021. 10. 27. react-hot-loader란? HMR (HotModuleReplacement) react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침 하지 않고 바뀐 부분만 빠르게 교체해주는 라이브러리이다. 앱의 규모가 커지면 개발서버가 수정될 때마다 새로고침이 된다면 딜레이가 발생되어 개발의 흐름이 중간중간 몇초씩 끊길 수도 있다. 자바스크립트 코드의 일부분만 교체하는 기능은 웹팩 개발서버의 기능이기 때문에, 라이브러리 없이도 가능하다. 하지만, 어플리케이션의 state를 계속 유지하려면 과정이 복잡하기 때문에 라이브러리의 힘을 빌릴 필요가 있다. (단, 컴포넌트의 메소드중 async/await을 사용한 메서드를 수정했다면 새로고침을 해주자.) react-hot-loader는 v3와 v4 버전이 존재한다. v4이전 버전인 v3의 .. 2021. 10. 26. Charles 사용법 (SwitchHosts) SwitchHost 설정 Host 설정 시 switchHost를 사용하면 무척 편리하다. https://github.com/oldj/SwitchHosts GitHub - oldj/SwitchHosts: Switch hosts quickly! Switch hosts quickly! Contribute to oldj/SwitchHosts development by creating an account on GitHub. github.com Charles 설정 라이센스 등록 In Charles) help > Register Charles Local Map 설정 Map Local을 클릭하자. Path: 대체할 파일 경로 ~.js Query: * (쿼리는 계속 바뀌기 때문) Local Path: 로컬에서 대체할 ~.. 2021. 10. 25. [Typescript] Type number trivially inferred from a number literal, remove type annotation. 에러 발생 발생 원인 타입 스크립트가 추론 가능한 부분이어서, number 타입을 명시하지 않아도 된다. 코드가 길어지게 쓰지 않고 타입 스크립트의 타입 추론 기능으로 increaseId의 타입을 추론할 수 있다. 해결! 타입스크립트를 쓰는 또 한 가지 이유. 자동 타입 추론 능력이다. 2021. 10. 15. Webpack typescript loader webpack에서 타입스크립트를 읽을 수 있는 loader의 종류에는 2가지가 있다. (2021년 10월 8일 기준) babel-loader + @babel/preset-typescript (Last Publish: 2 months ago) ts-loader (Last Publish: 18 days ago) Awesome-typescript-loader (Last Publish: 3 years ago) babel-loader + @babel/preset-typescript와 ts-loader의 차이는 컴파일 속도와 타입 체킹 유무이다. 속도의 경우 @babel/preset-typescript가 더 빠르며(ts-loader도 옵션으로 차이를 줄일 수 있어서 차이가 크지 않다.), 타입 체킹도 플러그인으로 .. 2021. 10. 12. TS2307: Cannot find module '@/App' or its corresponding type declarations. 발생 오류 발생 원인 아래 코드와 같이 webpack에서 alias를 지정했을 때, tsconfig.json에서도 path를 설정해주어야하는데 설정하지 않았을 때 에러가 발생한다. // webpack.config.js module.exports = { ... resolve: { alias: { '@': path.resolve(__dirname, '../src/'), }, ... }, }; 해결 방안 tsconfig.json에 paths를 추가해준다. // tsconfig.json "paths": { "@/*": ["src/*"] }, 2021. 10. 8. 이전 1 2 3 4 5 6 ··· 20 다음
