기술 블로그
웹과 앱을 만들며 남긴 기록 447편입니다.
Next.js App Router를 학습할 때 가장 먼저 이해해야 하는 개념 중 하나가 Server Component와 Client Component입니다. 두 컴포넌트는 모두 React 컴포넌트처럼 보이지만, 실행되는 위치와 사용할 수 있는 기능이 다릅니다. 이 차이...
Next.js를 처음 공부할 때 가장 헷갈리는 부분 중 하나가 라우팅 구조입니다.예전에는 pages 디렉터리를 기준으로 페이지를 만들었지만, Next.js 13 이후부터는 app 디렉터리를 사용하는 App Router 방식이 등장했습니다. App Router는 단순히...
바이브코딩을 할 때, AI에게 앱의 구조를 설명하려면 데이터베이스(DB)의 기본 개념을 아는 것이 필수적입니다. AI는 똑똑하지만, 여러분의 머릿속에 있는 데이터를 어떻게 분류하고 저장할지 명확히 짚어주면 결과물의 퀄리티가 훨씬 높아지거든요. 우리가 가장 많이 사용하는...
프론트엔드가 사용자의 눈을 즐겁게 하고 편리한 조작을 돕는 영역이라면, 백엔드는 사용자의 눈에 보이지 않는 곳에서 데이터를 안전하게 보관하고 복잡한 규칙들을 처리하는 숨은 공로자입니다. 처음 개발을 접하시는 분들도, 그리고 자연어로 코딩을 하는 '바이브코딩'을 시작하시...
코드 읽는 법 초보자가 가장 많이 하는 실수는 코드를 소설책처럼 첫 줄부터 마지막 줄까지 순서대로 읽으려는 것입니다. 코드는 '위에서 아래로'가 아니라 '흐름을 따라' 읽어야 합니다. Import 구문 (준비물 확인): 코드의 가장 윗부분에는 import 문들이 있습니...
패러다임의 변화 '나의 일'의 재정의가 필요하다. AI 이전 (과거): 철저한 분업화. "이건 제 업무가 아닌데요", "타 부서(백엔드/디자인/데이터팀)의 작업이 끝나야 제가 일을 시작할 수 있습니다." AI 이후 (현재~미래): AI를 어시스턴트로 활용한 업무의 엔드...
업무 분해하기 불가능한 업무 자동화는 없다. 하지만 아직은 사람이 해야할 일이 남아있다. 분해의 3단계 ① 동사로 쪼개보기 ❌ "보고서 작성" (명사 → 분해 불가) [불명확] ⭕ "수집한다 → 요약한다 → 작성한다" (동사 → 분해 가능) ② 입력/출력 정의 동사 입...
엑셀 파일을 열고 한참을 멍하니 화면만 바라본 적이 있을 것이다. 행 단위로 정리된 매출 데이터, 고객 리스트, 설문 응답 숫자는 가득한데 어디서부터 손을 대야 할지 막막하다. VLOOKUP을 검색하고, 피벗 테이블 강좌를 절반쯤 보다가 결국 "그냥 눈으로 세자" 로...
AI를 실무에 도입할 때 가장 경계해야 할 것은 '할루시네이션'입니다. 아무리 유창한 문장이라도 사실이 아니라면 치명적인 문제가 됩니다. 이번 7편에서는 검색형 AI를 활용한 심층 리서치부터, MCP와 Skills 연동을 통해 자료 조사와 검증의 수준을 극대화하는 방법...
가장 많이 사용하는 핵심 단축키 영상 편집 작업 속도를 크게 높여주는 필수 단축키 모음입니다. 기능 분류 세부 기능 Mac 단축키 (참고) Windows 재생 및 탐색 재생 / 일시 정지 Spacebar (스페이스바) Spacebar 다음 프레임 이동 → (우측 방향키...
저작권과 AI 생성물 표기법 현재 전 세계적으로 "AI가 단독으로 생성한 결과물은 저작권을 가질 수 없다"는 것이 법적 중론입니다. 예를 들어, 프롬프트를 아무리 정교하게 작성해 AI로 패션 룩북이나 브랜드 콘텐츠 이미지를 생성하더라도, 산출물 그 자체만으로는 인간의...
AI라는 강력한 도구를 얼마나 잘 활용하느냐가 미래의 혁신을 좌우하는 역량이 되었습니다. 여기서 가장 중요한 역할을 하는 것이 바로 '프롬프트'입니다. 프롬프트란 무엇인가? 프롬프트는 사용자가 AI 모델에게 특정한 답변이나 결과물을 생성하도록 지시하기 위해 입력하는 '...
Vrew란 Capcut 차이는 크게 없습니다. 다만 캡컷이 좀 더 많은 기능을 제공하고 직관적인 영상 편집이 가능하다면, Vrew가 좀 더 초보자를 많이 지원해주는 느낌입니다. 텍스트 기반 컷 편집을 한다면 처음에는 Vrew로 시작해보는 걸 권장드립니다. 내가 얘기하는...
하루가 다르게 새로운 기술과 혁신이 쏟아지는 시대입니다. 그 중심에는 단연 생성형 AI가 있죠. 현재 AI 생태계를 이끌고 있는 대표적인 세 가지 모델은 ChatGPT, Claude, 그리고 Gemini입니다. 오늘은 이 세 모델의 핵심 특징부터, 소리 소문 없이 업데...
DB 자동 스케일업(Cluster Auto-Scaling) 옵션을 끈다고 해서 즉시 DB가 다운되는 것은 아닙니다. 스케일업을 유발했던 트래픽 부하나 무거운 쿼리가 다시 발생할 경우, 제한된 리소스(CPU, RAM) 한계에 부딪히면서 사실상 다운에 준하는 서비스 장애가...
LLM이란? LLM은 방대한 양의 텍스트 데이터를 학습하여 인간의 언어를 이해하고 논리적인 문장을 생성하는 인공지능입니다. 작동 원리: 기본적으로 주어진 문맥 다음에 올 가장 자연스러운 단어를 확률적으로 예측하여 문장을 완성합니다. 문장 내 단어들 간의 복잡한 관계와...
우선 해당 게시글을 작성하는 이유는 AI를 직접 만들기 위함이 아니라, 활용하기 위함입니다. 최근 AI 교육 격차는 참가자마다 출발선이 극단적으로 다릅니다. 누군가는 ChatGPT로 이미 업무 보고서를 쓰고 있고, 누군가는 "AI가 검색엔진과 뭐가 다른가요?"라는 질문...
서비스를 구축하다 보면 사용자의 결제나 예약 내역을 보여줘야 하는 순간이 반드시 찾아옵니다. 이때 흔히 간과하는 것이 바로 '정보를 보여주는 화면'과 '액션을 수행하는 화면'의 분리입니다. 이번 글에서는 사용자의 거래 상세 내역을 읽기 전용으로 제공하는 viewTran...
Next.js의 `app/sitemap.ts`를 오랜만에 다시 봤는데, 코드가 대략 이런 모양이었다. export default function sitemap(): MetadataRoute.Sitemap { const now = new Date() return [ {...
Next.js로 기존 프로젝트를 마이그레이션하면서 가장 많이 놓치는 파일이 loading.tsx입니다. 단순히 "로딩 스피너를 보여주는 파일" 정도로 인식하고 넘어가기 쉽지만, 실제로는 React Suspense와 결합된 스트리밍 렌더링의 진입점 역할을 하는 핵심 파일...