Web

Next.js + node.js로 간단한 Web Scoket 채팅 구현하기 - 1

개요그동안 여러 프로젝트를 진행해오면서SSE(Server Sent Event), CRUD API 연동은 진행해봤지만,Web Socket을 다뤄본적은 없었다. Web Socket 대신 SSE를 사용했던 이유는 알림 기능을 구현하기 위해서였다.물론 Web Socket을 사용해도 되지만,클라이언트는 단순히 알림조회를 하므로 양방향 소통이 필요하지 않았다.그래서 단방향인 SSE를 다뤘었다. 그래서 Web Socket을 한번쯤은 다뤄보고 싶었는데,언젠간 분명히 사용할 것 같아서 그냥 간단한 채팅을 구현하면서 트러블 슈팅을 해보려한다. Server평소에 프론트엔드를 주로 공부하고, 프로젝트도 모두 프론트엔드로 참여를 했다.그리고 프론트엔드 직무로 프론트엔드를 준비중이기도 하다. 따라서 서버를 다룬 경험은 거의 없어..

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..