만족

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..

위와 같이 스크립트 태그를 선언하고 사용했을 것이다. script에서 지정한 js에서 import/export를 사용하기 위해서는 type='module'을 사용해야 한다. 이제 /path/js/code에서 import/export를 사용할 수 있다. 사용해보기 // /path/js/lib.js export const foo= ()=>{ console.log('hello'); } lib.js 파일을 만들고 위 내용을 작성한다. lib.js는 script태그에 넣어주지 않아도 된다. // /path/js/code.js import {foo} from './lib.js'; foo(); /path/js/code.js에는 위와 같이 import를 사용해 lib.js에서 export한 변수를 사용할 수 있다. 주..

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

MDN문서 내용을 바탕으로 설명할 것이다. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EA%B8%B0%EB%8A%A5%EC%A0%81_%EA%B0%9C%EC%9A%94 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org CORS는 무엇이고, 왜 필요하며, 어떻게 CORS 문제를 해결하는지는 평소 개발할 때도 크게 도움이 되고, 웹 개발 직무 면접 시에도 자주 등장하는 만큼 반드시 ..

https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com Scss는 css를 더 유연하게 사용할 수 있게 해 주는 언어이다. 실제로 웹에서 적용할 때는 전처리기를 통해 css로 변환한 후 사용한다. React에서 Scss 사용하기 yarn eject eject 스크립트를 통해 webpack 설정파일을 끄집어낸다. yarn add node-sass sass-loader 모듈 두개를 설치한다. 단 webpack의 버전에 따라 최신 버전의 node-..