next 에서 그리드 시스템을 적용하는 중 속성 선택자로 [class^="col-"] 와 같이 설정을 해 두었을 경우 pure css 에는 className 또는 id 값이 있어야 한다 라는 에러가 뜨게 된다. 이 에러의 원인은 next.js 였다. next.js 9.2 이상 버전에서 sass 속성 선택자 attribute starts with 는 전역 css 에서만 사용이 가능하다. 나는 _grid.module.scss에서 적용을 해주고 있었는데 _grid.scss 로 바꾸어 주고 App.js 에서 전역으로 적용을 해주어야 했다. 아래 깃헙 이슈에서 이 문제를 발견하고 해결할 수 있었다. https://github.com/vercel/next.js/issues/10142

getServerSideProps 는 runtime 시 실행 getStaticProps 는 빌드시 실행 next build 명령어를 실행하게 되면 Next.js 는 페이지를 3 타입으로 최적화 한다. λ (Lambda): 이러한 페이지는 런타임에 렌더링되며getInitialProps 또는getServerSideProps를 구현할 수 있습니다. ○ (Static): Static으로 렌더링 된 페이지에는 HTML 만 포함되며 이 페이지는 매우 빠르다. ● (SSG): 정적 사이트 생성 페이지도 정적 방출로 제공됩니다. 이는 HTML 및 프리 페치 된 props (getStaticProps 정적 메소드에서)을 렌더링한다는 점에서 정적 페이지와 다릅니다. 완전히 서버레서 렌더 하려는 이유 사이트 엔진 최적화를 ..

카카오 템플릿 생성은 카카오 개발자에 페이지에 가서 도구 메뉴를 클릭한 후 메시지 템플릿에 들어가면 템플릿을 만들 수 있다. 자세한 설정은 아래 링크로 들어가보면 잘 나와 있다. https://developers.kakao.com/sdk/reference/js/release/Kakao.Link.html#.sendCustom__anchor https://developers.kakao.com/docs/latest/ko/message/js#link-send-with-template-id // 페이지 진입 시 kakao initialize useEffect(() => window.Kakao.init(process.env.KAKAO_API_KEY, []); // 템플릿 객체 생성 카카오 개발자에서 생성한 템플릿I..

비타민 검사 서비스에서 회원가입을 빼는 작업을 진행 하였다. 우선 현재 로직에서 빼는게 가능한지 테스트 삼아 시도를 해보았다. 사용자 인증 부분을 모두 제거하고 onSubmit 함수에 걸려있는 submit 조건을 마지막 step 에서 실행이 되도록 바꾸어 주었다. 그리고 페이지 마다 걸려있는 Auth Hoc 도 제거 해주고 서버 분과 맞추어 시도를 해보았다. 생각 보다 쉽게 회원가입을 제거 할 수 있었다. 다만 백에서는 좀 수정할 부분이 많았다.

tsconfig absolute path tsconfig에서 baseUrl:"." 이렇게 설정을 해두면 ./src 폴더 내에 있는 파일들에 대해서 감싸기? 때문에 ./src/component 라는 path에 import {} from "component/..." 이렇게 바로 접근이 가능하다. 하지만 ./src/component/button/Button.js 라는 경로가 있을 경우 Button.js에 바로 접근 하기위해서는 path 설정을 아래와 같이 해주어야 한다. dir/dir/ 경로를 절대 경로 설정하는방법 { "compilerOptions": { "baseUrl": ".", "paths": { "@/button/*": ["components/button/*"] // /* 이것을 추가로 적어주어야 한..

현재 회사 서비스는 next-routes 라이브러리를 통해서 route 지정을 해주고 있었기에 지금 진행하는 프로젝트에서도 해당 라이브러리를 사용하려고 하였다. 하지만 next 9 버전에서 dinamic routes를 제공해주는데 왜 라이브러리를 따로 사용하고 있을까 라는 생각이 들었고 사수에게 물어보니 그동안 next 업데이트를 진행 할 수 없기도 했고 현제 프로젝트에 얽혀 있는 부분이 있어서 계속 사용하고 있다고 하였다. 그래서 현재 진행 하는 프로젝트에서는 next-routes를 제거 하고 next 에서 제공해주는 dynamic route로 적용을 해주었다. 방법은 엄청 간단하였다. pages 폴더에 파일들을 만들면 해당 파일들이 그대로 url 주소가 되는 것이였다. pages - index.js ..