📘Next.js 에 markdown 설치 하기
# ✨ Next.js에서 MDX 사용하기 ## 📦 MDX 관련 패키지 설치 yarn add @next/mdx @mdx-js/loader @mdx-js/react yarn add --dev @types/mdx @next/mdx: Next.js에서 MDX를 지원하기 위한 공식 패키지 @mdx-js/loader: MDX 문서를 컴파일하는 W...
개발공부일지
MongoDB 와 Next.JS 연결하기
MongoDB 와 Next.js 를 알기전에 mongoose에 대해 먼저 알아봐야한다. Mongoose란 Mongoose는 Node.js 와 MongoDB를 위한 ODM(Object Data Mapping) 라이브러리다. mongoose가 하는 역할은 DB의 데이터를 javascript 객체로 바꿔주는 역할을 해준다. MongoDB Atlas ...
MongoDB Atlas 프로젝트 삭제하기
MongoDB Atlas에 아래와 같은 프로젝트들중 하나를 삭제하려한다. This project cannot be deleted if there are active clusters or has enabled Backup Compliance Policy with active snapshots 하지만 삭제를 하려면 위와 같은 문구가 나오...
MongoDB Atlas 프로젝트 생성방법
MongoDB Atlas 1. Project 생성하기 2. Project Member 추가하기 멤버를 안추가해도 상관 없다. 3. Cluster 만들고 요금제 설정 및 기본 세팅해주기 Create를 해주면 아래와 같은 화면에 나오는데 요금제는 다음과 같은데 연습할용도로 사용하려면 M0 무료 요금제를 사용하자 이름을 지정해주고...
시간을 소중히 해주는 snippet 사용하기
vscode snippet 당신의 시간을 소중히 해주는 snippet 사용하기 1. snippets 설정 접근하기 방법 1. cmd + shift + p 를 통해 아래와 같이 snippets에 들어가기 방법 2. code - preferences - configure user snippets 로도 접근 가능 2. 설정할 언어 입력 필자...
Next Image 사용하는 방법
Next.js 에서는 별도의 Image 컴포넌트가 존재한다 . Image 컴포넌트의 장점은 다음과 같다 향상된 성능: 최신 이미지 형식을 사용하여 각 디바이스에 대한 올바른 크기의 이미지 제공 시각적 안정성: 자동으로 layout shift 방지 빠른 페이지 로드: 이미지가 뷰포트에 들어갈 때만 로드되며 placeholder 제공 ...
스토리북 설치중 에러
에러코드 🔴 Error: It looks like you are having a known issue with package hoisting. Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#is...
Next.js 12->13 변경 metadata 작성법
metadata를 다루는 방식의 변화가 생김 Next 12의 경우 Next.js 12 이전에는 next/head 컴포넌트를 사용하여 메타데이터를 설정. import Head from 'next/head'; export default function Page() { return ( <Head> <title&g...
추후 공부 방향성
방향성 Web 웹 Moblie Web 모바일 웹 Moblie App 모바일 앱 (하이브리드 앱), react-native 사용 가능 : 웹뷰를 사용 Cross Flatform 크로스 플랫폼 : 안드로이드와 IOS 둘 다 동시에 개발 ex) react-native , flutter Android 안드로이드 ex) 코틀린 IOS ...
docker 심화
효율적인 Docker Setting 처음 방법은 코드를 고쳤을때 효율적이지 못하다. 즉 빌드를 다시하고 실행해야 되는 비효율적이다. docker는 build할 때 임시 공간에서 동일한게 있으면 바로 가지고와서 처리하는데 만약에 하나라도 다른 부분이 생게되면 같은것이라도 새롭게 빌드한다. 즉 순서가 중요하다. 미리 생성된건 바로 사용하고 새롭게...