- Npm Private Package 첫 회사에서 가장 뿌듯했던 일을 고르라 하면 Component 재사용을 위해 Npm private package 를 구성했던 것이었다.공부도 많이 하고 시행착오도 여러가지 겪었으나 기록해두지 못했던 게 아쉬웠었다.시간이 흐르고 또 흘러 Monorepo 에 대한 개념이 희미해져가고 동시에 재사용성에 대한 고민을 다시 하게 되는 시점에서새롭게 마주하고 구성하게 된 모노레포에 대한 기록을 이번엔 남겨두고자 한다. 🛠️ 작업 환경Next(React 18)TypescriptTailwind CSSWeb3 목표기존 메인 프로젝트의 카피 프로젝트가 하나 더 생김에 따라 동일한 컴포넌트를 각각 관리해야 하는 번거로움 해소메인 프로젝트에 공통 디자인 시스템이 발생하면서 과부하 방지추후 프로젝트가 더 추가될 가능성을 고려.. 2024.11.28
- [React + Next] String data 를 HTML 로 사용하기 1. 기존 코드detail 변수 안에 request 해서 받은 데이터를 담아서 그중 content라는 key 값을 사용하고자 함string으로 떨어지는 해당 값은 안에 '\n' 또는 '\r'을 포함하고 있어서, 그 문자열을 활용해야 했는데,처음에는 아래와 같은 방법을 적용했다.{detail.content && detail.content.split("\n").map((line, index) => { return ( {line} )})} 2. 요구 사항위의 코드는 데이터로 떨어진 string 을 화면에 보여주되, '\n' 일 때 문자열을 잘라서 줄바꿈을 (어찌보면) 강제로 적용시킨 코드였다.따라서, 추후 와 같은 HTML 형식의 string 값을 받았을 때 tag 별 .. 2024.08.28
- Lottie (w/ next.js) 지난 번에 Vue 에서 Lottie 사용하는 방법을 정리했는데,이제는 React + Next 기반 프로젝트를 하고 있어서 다시금 Lottie 정리 ! 🚨 next 의 ssr 렌더링 때문에 document is not defined 이슈 발생 ⇒ dynamic import 로 대체(이미 next 사용자에겐 나름 익숙하기 때문에 next/dynamic 에 대한 설명은 생략)단, lazy-loading 관련 next 공식 문서를 참고용으로 첨부 https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading Optimizing: Lazy Loading | Next.jsLazy load imported libraries and Re.. 2024.08.14
- Vue 에서 provider 사용하기 // Index.vue provide('LandingProvide', { isObjectEmpty, isMobile }) provider 로 사용할 이름과 값을 부모 컴포넌트에 지정 ** 참고 : https://vuejs.org/guide/typescript/composition-api TypeScript with Composition API | Vue.js Haven't migrated to Vue 3 yet? Explore Never-Ending Support for Vue 2 by HeroDevs Learn more vuejs.org // Content.vue const { isObjectEmpty } = inject('LandingProvide') as any; any 의 경우 type 지정이 필.. 2023.12.04
- User 정보 상태관리 ❗ 문제 상황 : getInfo() 로 얻어온 state.user 가 undefined 로 유실됨 → login 여부 체크 불가능 → state.user 관련된 정보 (ex. 크레딧) 누락 상태 관리 라이브러리 활용하지 않음 ⇒ 보통 상태관리는 라이브러리를 통해 action, mutation, getter 및 state 를 보관 해당 상태는 setter 에 mutation, action 의 기능을 다 담고 있어서 발생하는 것 같았다. undefined 정의 값이 할당되지 않은 변수를 의미 🤔 상태관리에 대한 고찰 전역 데이터는 한 번만 호출해서 계속 가지고 있을 수 있는지 → 단, 라우터 이동 혹은 새로고침 시에 다시 해당 api 를 호출하기 (브라우저 내 데이터 유지 방법) 즉, 전역 App.vue 와.. 2023.12.04
반응형