react3 컴포넌트 내의 모든 이미지 렌더링 된 이후 감지하는 훅 wrapper 내의 컴포넌트에서 img들을 전부 불러왔는지 체크하는 훅을 만들어보았다. 특정 범위 내의 이미지가 전부 렌더링 된 후 처리를 해야하는 경우 유용하다. (나의 경우엔 이미지 전부 로드된 후 스크롤 시키는 작업을 함) 이미지가 캐싱된 케이스를 고려해 이미 로드가 된 채로 온 경우와 에러났을 경우의 예외처리를 하였다. HTML 삽입 미리보기할 수 없는 소스 이렇게 사용하면 된다. 2022. 3. 28. 신버전 프로젝트 중간 회고 2년이 넘게 전에 쓰인 글이니 감안해서 참고해주세요.. 다시보니 내용이 너무 수치스럽네요...😓 신버전 프로젝트는 이렇게 잡았다. 중요 모듈: 1. Typescript 2. mobx5 3. emotion 4. Storybook 그 외 모듈: 5. React-hook-form 6. framer-motion 7. lodash 8. 아키텍쳐 9. 느낀 점 1. Typescript 물론 지금도 Typescript가 없다면 코딩하기 너무나도 싫겠지만(특히 소형이 아닌 프로젝트에서는) 타입을 위한 일들이 정말 많아진다. 제품을 만드는 가장 큰 이유가 무엇인가? 회사의 매출과 유저에게 좋은 가치를 제공하기 위함이 아니던가. 타입 체킹을 더 Generic하게 하고 싶거나, 더 추상화된 기능을 만들때 타입스크립트는 끔찍.. 2020. 10. 31. CRA3 에서 craco + Mobx + React-hot-loader 적용하기 Mobx와 carco를 사용하여 react-hot-loader 도 힙한 방법(React hook지원)으로 적용하기. 1. 먼저 패키지를 설치한다. yarn add react-hot-loader @hot-loader/react-dom yarn add -D @craco/craco 2. package.json 에 react-script가 아닌 craco로 실행하게 한다. /* package.json */ ... "scripts": { "start": "craco start", "build": "craco build" "test": "craco test" } ... 3. package.json 이 있는 폴더에 craco.config.js 를 생성하여 다음과 같이 내용을 입력한다. module.exports = .. 2020. 1. 18. 이전 1 다음
