기술 블로그

cors 개념과 백단에서의 해결 옵셔널 체이닝 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining 스타일드 컴포넌트 css https://styled-components.com/docs/api#css 스타일드 컴포넌트 theme set함수의 타입 Dispatch; setString: Dispatch setStringOrNull: Dispatch exhaustive-deps 전역 상태관리 (recoil) 통신 상태관리 (swr,react-query)

https://moida-frontend.vercel.app/ https://moida-frontend.vercel.app/ moida-frontend.vercel.app 어떤 걸 만들었나 팀빌딩 웹 서비스 어려웠던 이슈들 처음으로 협업을 진행했고 맨땅해딩식으로 기능들을 구현하면서 어려움이 많았다. 맨 밑에 어려웠고 기억하고싶은 이슈들을 적어두었다. 아쉬웠던 점 제한된 기간으로 퀄리티를 챙기지 못했다. 기억하면 좋을 것들 https://kjk5.tistory.com/69 Next.js에서 styled-components 딜레이 없이 사용하기 테스트때는 모르지만 vercel과 같은곳에 배포해보면 스타일드 컴포넌트(이하 sc)의 딜레이 때문에 쌩 html이 보였다가 사라짐을 알 수 있다. 이러한 문제를 해결..

테스트때는 모르지만 vercel과 같은곳에 배포해보면 스타일드 컴포넌트(이하 sc)의 딜레이 때문에 쌩 html이 보였다가 사라짐을 알 수 있다. 이러한 문제를 해결하기 위해 sc의 ssr 설정을 해줄 필요가 있다. 1 바벨 플러그인 sc 설치 npm i -D babel-plugin-styled-components 2 root 디렉토리에서 .babelrc 작성 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] } 3 pages 디렉토리에 _document.js(tsx) 작성 import Document from 'next/docu..

useRoute를 사용했을 때 route.qurey가 바로 반환되는 것이 아닌 딜레이가 생겨 백으로 get 요청을 제대로 보내지 못할 때가 있다 useEffect는 router의 딜레이를 기다려주지 않기 때문에 결국 post/1 이 아닌 post/undefined 로 요청을 보내는 문제가 있었다. hooks는 컴포넌트 최상위에 위치해야해서 이펙트에 담을 수 없다 해결법은 router.isReady 메서드를 담을 변수를 만들어 로딩을 판별하고 useEffect의 두번째 인자로 위 로딩 감시 변수를 넣어 감시한다 아울러 jsx부분에서도 위와 같은 플레그를 활용하여 예외 처리한다.

키워드 : next.js, proxy , dynamic route (url) 프로젝트 중 위와 같이 동적 라우팅을 했을 때 적용이 되지 않고 403이 뜨는 이유가 있었다. 이유는 프록시 적용 때문이었으며 답은 공식문서에 나와있었다 다이나믹 라우팅을 프록시 주소가 아닌 프론트단 주소에 적용하고 싶다면 next.config.js 폴더 안에 rewrite 함수 리턴을 위와 같이 fallback을 명시하여 재작성 해주면 된다.