전체 글

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`는 볼륨을 만들겠다는..

Docker로 MySQL 실행시켜보기 - 2

지난 포스팅에서 했던 것처럼 MySQL 비밀번호를 설정해주고 run을 해주었다.그리고 bash로 컨테이너에 접속해주었다.2025.08.06 - [Docker] - Docker로 MySQL 실행시켜보기 - 1 Docker로 MySQL 실행시켜보기 - 1MySQL 이미지 다운로드하기도커 컨테이너, 볼륨을 활용해서 MySQL을 한번 실행시켜보자.그 전에, 먼저 이미지를 다운받아줘야 한다.Docker Hub에 들어가서 MySQL 이미지를 먼저 검색해보자.https://hub.dockjun-coding.tistory.com 컨테이너에 접속했으니, MySQL에 접속해주자.다음 명령어로 접속할 수 있다.mysql -u root -p비밀번호를 입력하라고 뜨는데,이전에 설정해준 비밀번호를 입력해주면 된다.비밀번호를 타이..