만족

npm run build후 결과물로 번들링된 javascript가 출력된다. 이 bundle의 크기가 크면 SEO의 단점인 '첫 로딩 속도'가 부각되므로, 번들 사이즈 관리는 매우 중요하다. 그렇다면 이 번들 사이즈가 얼마나 큰지, 또 어떤 부분을 점검해야 하는지 어떻게 알 수 있을까? webpack-bundle-analyzer를 사용하면 번들에서 어떤 요소가 얼마나 용량을 차지하는지를 알 수 있다. 설치 yarn add -D webpack-bundle-analyzer webpack-bundle-analyzer를 설치한다. webpack 설정을 건드려야 하기 때문에, eject 하지 않았다면 해준다. yarn eject /config/webpack.config.js에서 맨 위에 const BundleAn..

https://www.npmjs.com/package/class-validator class-validator Decorator-based property validation for classes.. Latest version: 0.13.2, last published: 5 months ago. Start using class-validator in your project by running `npm i class-validator`. There are 3348 other projects in the npm registry using class-validator. www.npmjs.com class-validator는 이메일, 휴대전화 등 다양한 입력에 대한 유효성을 검증할 수 있는 기능을 지원하는 모듈..

문제 우리가 프로젝트에서 어떤 데이터를 로드하고 사용할 때, 그 데이터가 반복적으로 로딩될 필요가 없다면 어떤 식으로 구현할까? //return Promise const loadData= ()=>{ //load data return new Promise((rs)=> rs({msg: 'hi!'})); }; const MyComponent= ()=>{ const [data, setData]= useState(); useEffect(()=>{ loadData().then(setData); }, []); return {data?.msg} } 위 코드에서는 MyComponent가 마운트될때마다 계속해서 loadData를 호출하면서 데이터를 로드한다. 갱신될 필요가 없는 데이터인데도 마운트될 때는 데이터가 없으므로..

https://satisfactoryplace.tistory.com/131 [React] 검색엔진 최적화(SEO):: Prerendering (react-snap) React는 대표적인 SPA제작 라이브러리이다. SPA가 사용감이나 개발적인 측면에서는 유리하지만, 빌드된 결과물을 보면 는 텅 비어있고 js가 body를 바꾸기 때문에 검색엔진은 이 사이트를 비어있는 satisfactoryplace.tistory.com 위 포스트에서 react-snap 으로 prerendering을 사용하는 방법에 대해 설명했었다. 그러나 언제부턴가 오류와 함께 동작하지 않게 되었고, 해결 방법을 알아내기 위해 react-snap의 레포를 둘러보았으나 개발이 끊긴지 오래 되어 이슈는 많은데 픽스 버전이 전혀 나오지 않는 상..

|-components |---AAA |-----AAA.js |---BBB |-----BBB.js |-App.js 이런 구조로 되어 있을 때, AAA.js가 BBB.js를 import 한다면 아래와 같다. import * from '../BBB/BBB' 이정도는 괜찮다. 그런데 만약 components와 같은 레벨에 utils라는 디렉터리가 있고, AAA.js에서 utils/index.js를 import하려면 어떻게 할까? |-components |---AAA |-----AAA.js |---BBB |-----BBB.js |-utils |---index.js |-App.js import * from '../../utils'; 우우욱... 디렉터리이 깊이가 더 깊어지면 아래와 같이 ../로 도배된다 꺄아아아..

redux-thunk에 대해 redux 문서에서는 아래와 같이 설명하고 있다. For Redux specifically, "thunks" are a pattern of writing functions with logic inside that can interact with a Redux store's dispatch and getState methods. Redux에서 thunks는 리덕스 스토어의 dispatch, getState와 상호작용하는 내부 로직을 포함한 함수를 작성하는 패턴입니다. 다시 말하면, 함수 내부 로직에서 별도로 redux store와 상호작용하는 로직을 구현하기 위해 사용하는 패턴이라는 뜻이다. 특히 비동기로 스토어와 상호작용할 때 유용하다. https://github.com/re..

redux에 대해 포스트를 작성하고, 이후 redux-toolkit에 대해 작성해보겠다 하고는 시간이 꽤나 지났다. https://satisfactoryplace.tistory.com/278 [Nodejs] Redux의 기본 이해 https://redux.js.org/tutorials/fundamentals/part-1-overview Redux Fundamentals, Part 1: Redux Overview | Redux The official Fundamentals tutorial for Redux: learn the fundamentals of using Redux red.. satisfactoryplace.tistory.com 이번에 회사에 입사하게 되었는데, 마침 상태관리 도구로 redux-t..

애드블록은 브라우저를 사용할 때 표시되는 광고의 로딩을 막아 빠른 로딩이 가능하고 쾌적한 이용을 할 수 있게 해 주는 확장 프로그램이다. 그렇지만 개발자나 운영자 입장에서는 트래픽은 나오는데 수익으로 이어지지 않게 하는 아주 골치아픈 녀석이다. https://adblockplus.org/ko/faq_internal 자주 묻는 질문 - 내부 작동 원리 어려운 작업은 실질적으로 게코(Gecko)라는 파이어폭스, 선더버드 그리고 다른 애플러케이션에 내장된 상위 엔진에 의해 이루어집니다. 게코는 "콘텐츠 정책(content policies)"으로 불리는 것을 허용 adblockplus.org 애드블록은 브라우저에서 요청을 보낼 때 그 요청 대상이 등록된 광고 관련 주소일 경우 요청을 드랍시키는 방법으로 광고를 ..