전체 글

개인 Blog 만들기 - 1

개요개인 Blog를 직접 만들어보려고 한다.원래 예전부터 만드려고는 했지만,당장 할 일의 중요도에서 계속 미뤄지다보니 여기까지 왔다. 물론, 지금도 중요도가 높은 다른 task들이 있다.그럼에도 마음 먹은 이유는 다음과 같다. 1. 티스토리 AI 댓글 너무 달린다.이게 가장 큰 문제다.광고 클릭했다느니, 한 번 들러달라느니 이런 블로그 들어가보면AI로 글 찍어내는 공장 블로그다.블로그의 퀄리티를 저해시킨다고 생각했다. 2. Next.js 연습항상 React만 사용하다가 최근 들어서 Next.js를 공부중인데,아무래도 강의보고 따라치기보단 직접 만들면서 부딫혀보는게 낫다고 생각했다.강의들으면서 공부하는것의 가장 큰 문제점은,단순히 강의를 많이 들었을 뿐인데, 많이 공부했다고 착각하게 된다.공부한 양이 많아..

Programmers / Level 3 / 표 편집 / JS

https://school.programmers.co.kr/learn/courses/30/lessons/81303 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 개요이번 시간에는 Programmers의 Level 3,'표 편집' 문제에 대해 알아보겠습니다.먼저, 문제에 대해 간략히 설명드리고,제한사항을 살펴본 뒤,문제를 해결해보면서 마무리하겠습니다. 문제문제에는 총 네 종류의 명령이 주어질 수 있습니다. 첫 번째, 'U' 명령을 수행하면, X칸 위에 있는 행을 선택합니다.두 번째, 'D' 명령을 수행하면, X칸 아래에 있는 행을 선택합니다.세 번째, 'C' 명령을 수행하면, 현재 선택된 행을 삭제한 후, 바로 ..

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