NEW
-
Next.js
[Next.js] Font/Local 사용법(+ tailwind, storybook 설정까지)
완전 오랜만의 글이다😭 기존에 'next/font/google'에서 폰트를 사용하고 있었다. next/font/google폰트 최적화를 지원하며, 빌드시 다운로드되고, 배포에 포함되며 배포와 동일한 도메인에서 제공 (google에 요청하지 않음) 그런데 디자인시스템 바꾸면서 폰트가 바뀌어서 맞추어서 적용해야했는데,그것은 google font에 없는 Pretendard🫢 많이 바쁘시구나.. 그래서 생각한건아 그럼 public폴더에 폰트 파일 저장하고, localFont를 사용해보자. 였다next/font/localFont Module 관련 내용 > 🔗그래서 폰트를 다운받고, Woff2파일을 assets 하위에 넣었다. 근데 여기서 문제기존처럼 root layout파일에 추가했는데, path에 절..
-
FrontEnd
[Next.js] Nextjs에 Clerk IDaaS 적용기
원래 회사에서 사용자 인증 ,권한 관리 서비스로 사용하던 IDaaS(Identity-as-a-Service)는 auth0였는데, 비용 문제 등등 해서 Clerk로 변경을 할 수 있다고 해서, 일단 전체 변경했던 부분을 정리해본다! 이 회사에서 쓰는건 죄다 한글문서는 거의 존재하지 않았는데 Clerk도 마찬가지였다 :O 개인적으로 문서도 auth0에 비해 훨씬 깔끔하고 UI컴포넌트도 다양하고 설명도 잘 되어 있어서 적용하는데 문서만으로 충분했다 🔗 QuickStart 🔗 공식문서 > 🔗 UI컴포넌트 관련 페이지 > 참고로 저는 app router 기반으로 설정한부분을 정리해둡니다. ( Clerk Dashboard 설정, 가입과 nextjs는 되어 있는걸로 생각하고 넘어갑니다 ) 1. Install Cler..
-
Next.js
[Next.js] Next.js app router error page 무한 새로고침 에러
next에 app router가 추가되었다! 기존의 page router도 사용가능 하지만 app router로 정의한 부분이 먼저 우선 적용된다고하기도 하고, 새 프로젝트를 개발하게되어 공식문서 따라하다가 오류난 부분이 있어서 정리해본다. app폴더 하위에 not-found.tsx 파일을 생성했는데 (404페이지인 경우 렌더링됨) 파일은 제대로 나오는데 무한 새로고침의 굴레에 빠졌음.. 사실 이전 프로젝트할때도 이런 증상이 있긴 했었다... 고질적인 문젠가개발환경에서만 그렇고 배포되면 별 문제 없길래 그냥 넘어갔었는데 이번엔 검색하다 이틀전에 올라온 해결방법을 찾아서 정리해둠! 추가한 폴더, 파일은 아래 이미지 참고 🤓 next 버전 : 13.4.6 1. app폴더 하위에 [...not_found] 라..
-
Next.js
[Next.js] monorepo환경에서 next-seo, next-sitemap, robot 설정 | 사용하기
회사에서 monorepo로 프로젝트들을 작업하고 있는데, 그 중 한 프로젝트에 SEO를 위해 title, opengraph등 설정했던 내용들을 정리합니다. 1. next-seo 공식문서 https://github.com/garmeeh/next-seo 1. 라이브러리 설치 yarn add next-seo 2. DefaultSeo 설정 seo.config.js 옵션이 꽤 많은데, 일단 설정이 필요한 부분만 적용했습니다. 더 많은 옵션은 링크에서 확인가능합니다 : ) // /apps/프로젝트/seo.config.js export default { title: `{title}`, titleTemplate: '%s | `{부가설명}`', // %s에 각 페이지에서 설정한 title이 들어감 canonical: `..
JavaScript
-
JavaScript
[ JavaScript ] Date 객체에서 년,월,일 따로 출력하기
회사에서 엑셀 파일 다운로드 구현해뒀는데, 해당 파일 다운로드시 오늘날짜를 ( YYYY.MM.DD ) 형태로 파일명에 추가해달라는 요청이 와서 년, 월, 일을 가져오는 방법에 대해서 정리한다. 처음엔 그냥 Date 객체에서 getFullYear, getMonth, getDate등을 사용했는데 코드가 너무 지저분해서 다른 방법을 사용하면서 관련된 코드들을 정리해보았다! 1. getFullYear, getMonth, getDate등을 사용 getMonth에 1을 더해주고 한자리수 일 경우에 0을 추가 해주는등 너무 지저분해보여서 다른 방법을 찾아보았음! const date = new Date() const year = date.getFullYear() let month = date.getMonth() + 1..
-
JavaScript
[ JavaScript ] 논리 연산자 정리 &&, ||, <<, >>, !, !!, ?, ??
& : 비트 연산자 비트의 논리 합을 하는 연산자 && : 논리곱 연산자 &&는 모든 조건이 참이여야 true || : 논리합 연산자 ||는 둘중 하나가 참이면 true > : 비트 이동 연산자 왼쪽, 오른쪽으로 비트를 밀어내는 연산자 ! , !! : 부정 연산자 ! : 입력값을 boolean으로 변환하는데, true이면 false로 , false이면 true로 값을 반대로 반환한다. !! : boolean타입으로 명시적으로 형 변환 ?. : 옵셔널 체이닝 객체의 속성이 없는 경우, typeError가 발생하지 않고 undefined가 반환됨 ?? : Null 병합 연산자 앞에 오는 값이 null 또는 undefined이면 뒤에오는 값을, 아니면 null 또는 undefined을 반환 ✔️참고 https..
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
