거의 알고리즘 일기장

필요성 만약에 파일구조의 뎁스가 깊고 //ex) src/components/layout/app/header/index.tsx 상대경로로 불러오게 되면 다른 스크립트를 import 해올때 ../../../../ 의 향연일것이다. 그럴때는 alias를 이용해서 경로를 설정해놓으면 그게 더 편할때가 많다. 설정방법 1. babel-plugin-module-resolver 추가 yarn add --dev babel-plugin-module-resolver 2. babel.confing.js 에 plugin과 경로들 추가 module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], //--------------..

해본 이유 회사에서 신규프로젝트의 프론트 부분을 맡게 되었다... 이번 프로젝트는 검색엔진에 노출이 잘되어야하는 프로젝트여서, seo에 유리한 ssr로 해야했다. 먼저, 이 프로젝트는 react를 이용할 예정임으로 react에서 ssr을 적용하는 경우를 생각해보았다. 1. react 자체적으로 ssr을 구현한다. 2. next.js 등 라이브러리 붙여서 편안하게~ 개발한다. 당연히 서비스를 만드는건 2번이고, 1번은 어떻게 하는지 호기심이 들어서 해보았다. 1차 시도 솔직히 어떻게 하는지 감도 안잡혀서 구글신께 여쭤봤더니 한글로 되어있는 괜찮은 글을 찾았다. https://minoo.medium.com/next-js-%EC%B2%98%EB%9F%BC-server-side-rendering-%EA%B5%A..

최근에 v6로 버전업되어 조금 다릅니다. v5기준입니다!! 문제상황 최근 재미있는 에러 상황을 겪었다. 카톡이니 모바일 앱이니 뭐니 번지르르 적어놨지만 결국 문제는 특정 링크를 통해 web에 detail page에 들어가게 되면 ex) domain/mypage/id history.goback() 함수를 호출했을때 뒤로 돌아갈 history stack이 없기 때문에 생기는 문제였다. 접근 처음에는 router dom에서 주는 history 객체 안에 지금까지 거슬러온 history stack을 접근 할수 있는지 먼저 확인해 보았다. 보니까.. lenght라고 history stack의 length를 불러올수있는게 있다. 개꿀~ 해결 여기까지 접근했으면 해결은 무척이나 간단했다. history.length ..

ㅇㅂ이 글은 React 18: Suspense를 이용한 새로운 SSR 아키텍처 라는 괜찮은 글을 읽어 리마인드용으로 작성하는 글이다. 많은 부분이 생략되었고 내가 이해한게 조금 틀릴수도 있으니 원글을 읽는걸 추천한다..ㅎㅎ 저번에 react에서 지원하는 Suspense, React.lazy를 이용해서 code spliting을 해본 적이 있는데, 그때는 Suspense, React.lazy가 ssr에서 지원이 안되었다. 그런데, React 18 에서 이 부분이 추가가 되는것으로 보인다. https://github.com/reactwg/react-18/discussions/37 New Suspense SSR Architecture in React 18 · Discussion #37 · reactwg/rea..

1. 코드 분할의 필요성 Create React App이나 Next.js, Gatsby 혹은 비슷한 툴을 사용하면 Webpack이 함께 설치되어 번들링 시 Webpack에 의해 자동으로 설정된 번들링이 된다. 번들링에 대한 자세한 내용은 https://humanwater.tistory.com/2 [webpack] 2) 번들링(Bundling) 개념 및 사용 이유 [이전 글] https://humanwater.tistory.com/1 [webpack] 1) 웹팩의 정의, 모듈(Module) https://github.com/webpack/webpack webpack/webpack A bundler for javascript and friends. Packs many modules into a f.. hum..