전체 글

Next.js 15 / Image Component

개요Next.js의 장점이 '간편한 라우팅'과, '이미지 및 폰트 최적화'라고 많이 들어봤을 것이다.이미지 최적화 할 때, React랑은 다르게 `` 컴포넌트를 사용하는데, 어떻게 다른지 궁금하였다.되게 많은 prop들이 있지만, 실제로 사용해본 것들 먼저 천천히 정리해보려 한다. 먼저, Image 컴포넌트에 대해 가볍게 설명하자면,Image 컴포넌트는 HTML의 ``를 확장하여 자동 이미지 최적화 기능을 제공한다.원본 이미지를 직접 사용하는 것이 아니라, Next.js 서버를 거쳐서 최적화된 크기의 이미지를 전달한다. PropsProp예시타입설명srcsrc="/profile.png"String이미지 경로(필수)altalt="저자 사진"String대체 텍스트(필수)widthwidth={500}Intege..

Next.js 15 / CSS Modules

개요평소에는 Tailwind CSS를 사용하다가, 한번도 써보지 않았던 CSS Modules를 접하게 되어 정리해보려 한다. Tailwind CSS는 Next.js를 설치할 때 터미널에서 선택하면 자동으로 설치되기도 하고,Next.js 문서에서도 여러가지 CSS 적용 방법중에 볼드체로 권장되는 방법이기도 하다. Getting Started: CSS | Next.jsLearn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more.nextjs.org(무엇보다 한 번 사용하게 되면서 다른건 보지도 않게 되었다...) 다만, Tailwind CSS를 사용하면서 ..

Next.js 15 / File system conventions - layout.js(ts)

개요Next.js의 'File system convention'은 프로젝트 폴더와 파일의 구조만으로라우팅 및 주요 기능이 자동으로 결정되는 방식이다.특히 Next.js 15.4.6 App Router 기준으로 20개가 넘는 컨벤션들이 있는데,공식문서를 보고 하나씩 정리해보려 한다. 먼저, Next.js를 설치하게 되면 기본적으로 세팅이 되있기도 한 `layout.js`이다.`layout` 파일은 레이아웃을 정의하기 위해 사용된다.모든 페이지에서 공통적으로 사용되는 레이아웃은 가장 상위인 `app` 디렉터리에 만든다. ReferenceProps`children` (필수)레이아웃 컴포넌트는 `children` prop을 반드시 가져야 한다.렌더링 되는동안, `children`은 레이아웃이 감싸고 있는 경로에..

Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 2

개요지난 포스팅에서 코드를 구현하기전에 끝내야 할 모든 설정들을 완료했다.2025.08.08 - [Web/Next.js] - Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 1 Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 1개요사이드 프로젝트 진행중에 '카카오 로그인' 기능을 추가하고자 했다.Next.js를 사용하는것도 처음이고,Supbase로 OAuth를 이용해 카카오 로그인 기능을 구현하는 것도 처음이었다.시행착오를 거jun-coding.tistory.com 이제 공식문서를 따라서 구현해보면서 카카오 로그인 기능을 구현해보려 한다. Login with Kakao | Supabase DocsAdd Kakao OAuth to your Supabase pr..

Next.js 15 + Supabase로 Kakao 로그인 구현하기 - 1

개요사이드 프로젝트 진행중에 '카카오 로그인' 기능을 추가하고자 했다.Next.js를 사용하는것도 처음이고,Supbase로 OAuth를 이용해 카카오 로그인 기능을 구현하는 것도 처음이었다.시행착오를 거치면서 어떻게 구현했는지 남기고자 한다.(Supabase에 프로젝트는 미리 생성했고, Supabase 사용법에 관련해서는 따로 다루지 않을 예정) 일단, Supabase의 공식문서에 방법이 나와있어서 참고하면서 했다.(쉽고 자세하게 나와있으니, 영어 읽는데 거부감이 없다면 공식문서를 보고하는걸 추천!)https://supabase.com/docs/guides/auth/social-login/auth-kakao Login with Kakao | Supabase DocsAdd Kakao OAuth to you..

Docker로 MySQL 실행시켜보기 - 3

도커 볼륨 이용해서 컨테이너 생성하기이번에는 MySQL에 대한 데이터 정보를 호스트의 일부 어떤 공간의 데이터로 저장해보려고 한다.따라서, 터미널에서 데이터를 저장할 경로에 들어가야 한다.이 포스팅에서는 'dev'라는 폴더를 만들어서 사용할 것이다.그리고, 기존의 컨테이너들은 모두 삭제해주었다. 그리고나서, 하위 폴더에 'docker-mysql'이라는 폴더를 또 만들어주었다.`pwd`를 입력하면 현재 경로가 나오는데, 복사해두자. 그리고 다음 명령어로 볼륨을 만들어주자.docker run -e MYSQL_ROOT_PASSWORD=[비밀번호] -d -p 3306:3306 -v [데이터를 저장할 경로] mysql`-v` 이전까지는 전에 MySQL을 실행시켰을 때랑 같은 명령어이다.`-v`는 볼륨을 만들겠다는..