혼자 적어보는 노트

storybook에서 next에서 사용하는 Image 컴포넌트를 그대로 사용했더니 404 (Not Found)가 무한 호출되는 현상이 나타났다. ✅ 해결 방법 storybook 환경에서는 이미지 최적화를 하지 않도록 설정한다. // .storybook/preview.js import * as NextImage from 'next/image'; const OriginalNextImage = NextImage.default; Object.defineProperty(NextImage, 'default', { configurable: true, value: (props) => src} />, }); export const parameters = { actions: { argTypesRegex: '^on[A-Z]..

Next.js를 사용하여 프로젝트를 진행중이었는데 SSR로 작성된 페이지로 진입 시 csr보다 1초정도 느리게 페이지가 이동되는 현상이 있었다. (이전 프로젝트에서도 마찬가지) 이 부분을 개선하고 싶어서 여러 방면으로 알아보았지만 마땅한 해결 방법을 찾지 못했고 계속 신경쓰이던 부분이었는데,이번에 reactQuery를 테스트삼아 도입을 하며 조금은 개선을 하게 되었다. (아직 이후 발견하는 문제를 찾지는 못함) 📝 과정 1. 질문 목록을 클릭하면 해당 질문의 카테고리 정보와 함께 상세 페이지([id].tsx)로 이동한다. 2. 상세 페이지에서는 상세정보를 요청을 하고(SSR) 응답받은 데이터를 페이지에 내려준다. 3. 2번에서 받은 상세 정보에는 이전,다음 질문에 대한 (prevId, nextId)가 존..

프로젝트를하며 API를 통해 로그인 요청을 테스트하던 중 다른 API들은 정상적으로 호출이 되는데 로그인 부분만 CORS가 발생하여 이후 진행이 안되던 상태였다. 백엔드쪽에서 바로 처리가 안되기도 했고 일단 개발 진행을 위해 크롬 확장 프로그램을 사용하여 해결을 해보려 했지만 해결이 되지 않아서 프론트쪽에서 proxy를 사용해보기로 했고, rewrites로 대체할 수 있다는걸 알게되어 글을 작성하게 되었다. Rewrites rewrites는 프록시 역할을 해주기도 하고 요청으로 들어온 경로를 다른 경로로 보내줄 수도 있다. Next.js rewrites axios 요청 export const getUerInfo = () => { return axios.get('/user'); }; next.config...

이전 프로젝트를 진행하며 예상한 날짜에 API가 완성되지 않거나 응답이 제대로 되지 않을 경우 작업에 딜레이가 생겼던 적이 있었다. 뒤늦게 MSW의 존재를 알게 되긴 했지만 그 때 도입하기엔 조금 늦은감이 있어서 적용을 못했었다. 그래서! 조금은 여유로운(?) 새로운 프로젝트를 진행하며 비슷한 상황이 생기는 듯 하여 MSW를 도입해보기로 했다. MSW란? MSW는 Mock Service Worker로 서비스 워커를 이용하여 API를 모킹할 수 있는 라이브러리이다. 서비스 워커는 서버로 요청이 발생하면 요청을 가로채서 MSW에 전달하고 handler에 정의해둔 응답을 받을 수 있다. MSW를 사용하면 백엔드 API가 완성되지 않았을 때 API를 모킹하여 가상으로 데이터를 불러올 수 있기 때문에 미리 코드를..

이전에 2개의 프로젝트를 진행하면서 SVG파일의 경우 img태그로 불러와서 처리를 했었는데 size는 컨트롤 할 수 있었으나 img로 svg를 불러올 경우 컬러 변경이 안되기 때문에 각 컬러별로 svg파일을 불러왔었다. 이렇게 하다보니 여간 불편한게 아니었고 실무에서는 왠지 이렇게 사용할 것 같지가 않았다.. 때마침 새로운 프로젝트를 진행하며 나와 비슷한 시행착오를 겪었던 팀원을 만나게 되었고, 그 팀원분이 SVG Icon 컴포넌트를 담당해서 맡아주시기로 했고 공유를 해주셨다.🙌 SVGR svgr은 svg 파일을 React 컴포넌트로 변환을 시켜주는 라이브러리이다. // assets/icons/close.svg 이런 svg파일을 아래와 같은 컴포넌트 형태로 만들어준다. import * as React f..

이전 프로젝트에서 CSR로만 구성되어 있던 유저 페이지를 SSR을 통해 일부 데이터를 미리 받는 방식으로 변경을 하기로 했다. export const getServerSideProps = async (context: NextPageContext) => { const { id } = context.query; const userId = Number(id); if (Number.isNaN(userId)) { return { notFound: true }; } try { const user = await UserApi.getUser(userId); return { props: { user, userId } }; } catch (e) { return { notFound: true }; } }; 이렇게 미리 받으..

next로 프로젝트를 진행하며 일부 페이지에 ssr을 적용했는데, 해당 페이지에 접근하려고 링크를 클릭하면 약간의 딜레이 후에 페이지가 이동되어 조금 이질감이 느껴졌다. router.event를 사용한 로딩 처리 next의 router에서 제공하는 이벤트를 사용하여 route가 변경될 때를 감지하여 loading 페이지를 보여주는 방식을 사용할 수 있다. _app.tsx function MyApp({ Component, pageProps }: AppPropsWidthLayout) { const [loading, setLoading] = useState(false); useEffect(() => { const start = (url: string) => { setLoading(true); }; const ..

이전에 React에서 카카오톡 공유하기 기능을 추가해본 적이 있긴 했지만 그때는 template을 사용하지 않고 코드를 조금 길게 작성했었어서 이번 기회에 template을 사용해보기로 했다. 1. _document.tsx에 script 추가 : 컴포넌트 내부에서도 script를 추가할 수도 있겠지만 전역으로 사용할 script기 때문에 _document에 추가했다. render() { return ( ); } 2. 상위 컴포넌트에서 kakao init 하기 const Layout = ({ children }: LayoutProps) => { useEffect(() => { const kakao = window.Kakao; if (!kakao.isInitialized()) { kakao.init(proc..