프로젝트 시작 시 Prettier 설정하는 방법에 대해 정리했다.Prettier 설치npm install --save-dev prettier  프로젝트 루트에  .prettierrc / .prettierrc.js 파일 추가 module.exports = { printWidth: 200, tabWidth: 2, bracketSpacing: true, arrowParens: 'always', semi: true, singleQuote: true, trailingComma: 'all', endOfLine: 'auto', singleAttributePerLine: true,};semi: false - 세미콜론을 사용하지 않는다.singleQuote: true - 문자열을 표현할 때 싱글 쿼트를 ..

Next.js 에 있는 module.css 사용법에 대해 정리해보았다.CSS mosulesCSS mosules는 css를 모듈처럼 사용할 수 있는 장점이 있으며 클래스 명에 해쉬 값을 붙여 다시 생성하고, 그 값을 모듈로 내보내서 사용하는 방식으로 클래스 명이 충돌하는 단점을 극복할 수 있다. 파일 명파일 명은 대문자로 시작하는 이름.module.css 로 명하면 된다. ex) Home.module.css{이름}.module.css 사용법사용할 module.css 파일을 import 해와 className에 적용하면된다.// index.jsximport styles from "@/styles/Home.module.css";export default function Home() { return ( ..

Next.js로 프로젝트를 진행하다 보면 next.config.js의 설정을 바꿔야 할 때가 있다.자주 사용하는 설정에 대해 정리하고자 한다. reactStrictModeapplication 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다.Nextjs 문서에서는 strict mode를 활성화하는 것을 추천한다./** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true,};module.exports = nextConfig; swcMiniftyswcMinifty이란 Terser와 비슷한 역할을 한다. 필요 없는 공백이나, 주석을 삭제하여 용량을 줄이고, 해당 스크립트를 해석할 수 없도록 암호화 하는..

사내 프로젝트 진행 중 로그인한 user session에 값을 추가적으로 가져와야되서 next-auth의 callbacks에 대해 알아보았다. 일반적으로 클라이언트 페이지에서 useSession()을 활용해 data를 가져오면 expires와 user의 eamil, name 만 가져온다. 그래서 만약 그 외의 데이터가 필요하면 callbacks중 Session callback 을 활용해 데이터를 추가하면 된다. 세션 콜백은 세션이 확인될 때마다 호출된다. session의 email과 token의 email이 같으면 session user 객체에 추가할 속성과 값을추가한다. (아래코드에서는 region을 추가했다.)// api/auth/[...nextauth].tsdeclare module "next-au..

현재 AWS 프리티어 기간이 얼마 남지 않아 티스토리로 이전을 준비 중이지만, 직접 블로그를 만들어 보고 싶어서 Next.js와 Notion API를 활용해 AWS EC2에 배포한 개인 블로그를 구현한 경험을 정리했습니다. 📌 프로젝트 깃허브, 배포 링크 현재 운영 중입니다. 한 번 구경해 보세요!개인 블로그 주소 : https://minsunblog.com/프로젝트 깃허브 : https://github.com/pminsun/MinsunBlogQ. 프로젝트 소개이 프로젝트는 기술 블로그를 운영하고 싶다는 마음에서 시작했습니다. 고민 끝에 Notion API를 알게 되었고, 이를 Next.js와 AWS EC2를 활용해 블로그로 구현하게 되었습니다. 구현 과정에서 여러 챌린지와 이슈가 있었습니다:1. No..

Next.js 13에서 사용할 수있는 Server-Side Rendering (SSR) 에 대해 애기 해보고자 한다.글을 쓰게 된 이유는 Notion.api를 활용해서 블로그를 제작해봤는데 api를 불러올때 브라우저를 통하면  CORS 에러가 나 해결방안으로 SSR을 사용했기 때문이다.  CORS 에러CORS(Cross-Origin Resource Sharing) 에러는 클라이언트에서 다른 도메인에 요청을 보낼 때 발생할 수 있습니다. 이 에러는 보안상의 이유로 브라우저가 동일 출처 정책(Same-Origin Policy)을 적용하기 때문입니다.관련 글 : https://minsun309.tistory.com/entry/CORS-%EC%97%90%EB%9F%AC Notion APICORS 에러에 대한 해..

Next.js Amazon EC2 배포(1) 에서 진행한 인스턴스 생성에 이어서 인스턴스에 접속 & 무중단 배포에 대해 정리해보았다. 인스턴스에 접속.pem파일을 저장해둔 곳으로 가서 ssh 접속을 해야한다. 생성한 인스턴스에 들어가서 우측 상단에 있는 연결 버튼을 누른다.인스턴스에 연결 중 페이지에 있는 탭 중 SSH 클라이언트 클릭해 예로 있는 명령어를 .pem 파일이 위치한 터미널에 들어가 명령어를 사용한다.// 예ssh -i ".pem파일이름" ubuntu@ec2-00-000-00-000.ap-northeast-2.compute.amazonaws.com접속에 성공하면 yes를 입력하고 ubuntu@ip 라는 초록 글씨가 나오면 성공적으로 접속이 된 것이다.Git & Node아래 명령어를 입력해 u..

blog를 vercel 외에 다른 방법으로 배포 방법을 찾던 중 많이 사용되어지는 Amazon EC2 로 배포해보았다. NextJS를 이용한 개인 프로젝트를 배포해야 했고, AWS Route53에서 도메인을 구입한 상황이다. 로그인https://aws.amazon.com/ko/ 에 들어가 로그인 후 콘솔에 들어간다. 1. 인스턴스 생성EC2 접속인스턴스 시작 버튼 누르면 인스턴스 생성 페이지로 이동한다.이름을 적은 후 Ubuntu 22.04를 선택한다. 인스턴스 유형인스턴스 유형은 프리티어(= 무료) 인 tc.micro로 선택한다. 키 페어키페어 생성은 서버 컴퓨터에 들어갈 수 있게 해주는 비밀번호 같은 것이다. 한 번만 발급 받을 수 있는 거여서 중요하게 관리해야 한다. 새 키 페어 생성 클릭하며 생성..

프로젝트 중 mdx 파일을 불러와야 하는 상황이 생겨 Next.js (14 버전)에서 어떻게 불러오는지 알아보았다.MDX in NextJSMDX 확장자는 마크다운(MD)과 JSX가 결합되어 마크다운 컨텐츠를 리액트 내에서 컴포넌트 형태로 export 하거나, JSX컴포넌트를 MDX파일 내에 import 할 수 있도록 한다. 정적 컨텐츠를 컴포넌트화 시키는 특성 때문에 SSG를 지원하는 프레임워크(Gatsby, Next)에서는 MDX를 위한 플러그인이 잘 지원되고 있다. 먼저 Next.js에서 mdx파일을 불러오기 위해 하위 packages 을 설치해야 한다.npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx  Configuring: MDX | N..

Firebase를 활용할 일이 종종 있어 Next.js와 연동하는 방법에 대해 정리했다.Firebase파이어베이스는 구글(Google)이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로 백엔드의 요소들을 쉽게 구현할 수 있도록 도와주는 일종의 툴이다. 파이어베이스에서 프로젝트 추가 Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com 이 주소에 들어가서 로그인 후 프로젝트를 만들면 되며 앱 생성시 나오는 SDK 값을 저장하면된다. 프로젝트에 firebase 설치"firebas..