free islet

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 세 번째 단계로 Lucia를 사용하여 인증을 구현했다. GitHub OAuth App 생성 GitHub OAuth 연동을 위해 https://github.com/settings/developers에서 OAuth app을 생성한다. (Create a GitHub OAuth app 참고) Application name, Homepage URL을 적절히 채우고, Authorization callback URL에는 "http://localhost:3000/login/github/callback"을 입력한다. app의 Client ID와 Secret을 다음과 같이 .env.local에 추가한다. GITHUB_CLIENT_ID=".....

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 두 번째 단계로 Kysely를 사용하여 PlanetScale 데이터베이스를 연동했다. PlanetScale 데이터베이스 셋업 https://planetscale.com/docs/tutorials/planetscale-quick-start-guide를 따라하면 정말 쉽게 새 데이터베이스를 만들 수 있다. 데이터베이스 생성이 끝나면 대시보드에서 DB 상태를 비롯해 각종 정보를 볼 수 있다. 우측의 Connect 버튼을 누르면 username 등의 DB 접속 정보를 확인할 수 있는데, Connect with에서 MySQL CLI를 선택하면 나오는 명령을 참고하여 일반적인 DB 클라이언트에서 접속 가능하다. 다음은 MySQLWork..

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 첫 번째 단계로 shadcn/ui를 추가했다. shadcn/ui 셋업 https://ui.shadcn.com/docs/installation/next의 가이드를 참고하여 shadcn/ui를 셋업한다. 다음 명령으로 shadcn-ui를 초기화한다. 설정을 위한 질문에는 모두 디폴트값을 선택한다. npx shadcn-ui@latest init Would you like to use TypeScript (recommended)? no / yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Whe..

Next.js 프로젝트를 GitHub pages에 배포하기에서 사용한 Static Site Generation(SSG) 방식으로는 홈페이지를 만드는데 한계가 있어서, 서버 호스팅을 포함해 웹앱 개발 및 배포에 사용할 기술스택을 살펴보았다. 2023년 기준 스택이고, 무료 호스팅만 검토했다. 참고: https://dev.to/livecycle/how-to-host-your-side-projects-for-free-in-2023-from-auth-to-database-42im How to host your side-projects for free in 2023: from Auth to Database TL;DR In this article, we'll look at how you can host your s..

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다. Next.js 홈페이지 만들기 - 한글 폰트 (1/3) Next.js 홈페이지 만들기 - 다크 모드 (2/3) Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) 웹사이트 구조 홈페이지를 포트폴리오 사이트스럽게 만들기 위해 웹사이트 상단에 제목과 네비게이션 바를 포함하는 헤더를 배치하려고 한다. 이를 위해 header.tsx 파일을 추가하였다. 세부 페이지는 dynamic route를 사용하지 않고, app 폴더 밑에 직접 페이지용 폴더와 page.tsx 파일을 생성하였다. About 페이지를 위한 about 폴더 하나만 추가했는데, 추후에 Nextra, gray..

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다. Next.js 홈페이지 만들기 - 한글 폰트 (1/3) Next.js 홈페이지 만들기 - 다크 모드 (2/3) Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) 다크 모드 (with Tailwind) next-themes 패키지를 설치하여 비교적 손쉽게 다크 모드를 추가할 수 있다. Tailwind config 수정 tailwind는 OS 설정에 따라 다크 모드를 지원한다. 다크 모드를 직접 설정하려면, 아래와 같이 tailwind.config.ts 파일에서 darkMode 값을 "class"로 설정해야 한다. /** @type {import('tailwindc..

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다. Next.js 홈페이지 만들기 - 한글 폰트 (1/3) Next.js 홈페이지 만들기 - 다크 모드 (2/3) Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) 한글 폰트 적용 (google font) Next.js 보일러플레이트의 Inter 폰트 대신 한글 폰트를 기본으로 사용하도록 수정했다. 구글 폰트 브라우저에 나오는 한글 폰트 중 Noto Sans Korean을 선택했다. 다음과 같이 layout.tsx에서 Inter를 Noto_Sans_KR로 바꿔주면 간단하게 기본 폰트가 변경된다. import { Noto_Sans_KR } from 'next/font..

Next.js 프로젝트를 GitHub pages에 배포하려면 다음 과정을 거치면 된다. static site 빌드 GitHub에 올리기(push) GitHub pages 노출 설정 Next.js GitHub pages 배포 샘플 프로젝트를 참고하여 그 과정을 정리하면 다음과 같다. 프로젝트 GitHub 등록 우선 새 repository를 만들어서 Next.js 프로젝트를 올린다. next.config.js 수정 next.config.js 파일을 다음과 같이 수정한다. const nextConfig = { output: 'export', basePath: '/(repository 이름)', } static site 생성을 위해 output: 'export' 설정을 추가한다. 이렇게 지정하면 next bui..