728x90 전체 글989 [버팀목 전세] 버팀목 전세대출 연장(ft. 든든전세) 버팀목 전세대출 연장전세금을 잘 상환받고 새로운 집에서 지낸 지 어느덧 2년이 다 되어 간다.2년 동안 참 많은 일이 있었다. 우리 집에 새로운 행복을 불어넣어 주는 아기가 새로 태어나서 어느덧 걸어 다닐 수 있는 월령이 되었고, 나는 새로운 직업으로 새로운 삶을 시작한 지 1년이 넘었다. 이 글은 추후 2차 연장 시 헷갈리지 않게 남겨 놓는 포스팅이다. (바라는 것은 29년 이후에는 내 집 마련에 성공하는 것인데, 힘내 봐야지) 현재 전세 대출 만기가 정확히 2달 남아 은행 측에 연락해서 내가 해야 할 것이 무엇인지 확인을 해야 할 것 같아 대출받은 은행 영업점에 전화를 했지만 전화를 받지 않았다.그러다 인터넷에 '버팀목 전세대출 연장'이라고 검색해 보니 주택도시기금 사이트가 나왔고, 그 안에 연장 관.. 2026. 10. 16. [React / TypeScript] 실무 컴포넌트 설계 꿀팁: 탭(Tab) 컴포넌트와 상태 관리 완벽 정복 실무 컴포넌트 설계 꿀팁: 탭(Tab) 컴포넌트와 상태 관리 완벽 정복리액트와 타입스크립트를 활용해 공통 컴포넌트를 설계하고 고도화하다 보면, "이 상태는 어떻게 관리해야 타입이 안전할까?", " 이 많은 탭 콘텐츠를 어떻게 깔끔하게 매핑할까?"하는 고민을 마주하게 된다.현재 진행 중인 프로젝트에서 연구실 상세 페이지의 탭 전환 기능을 구현하면서 학습하고 적용한 탭 타입 제어, useState 상태 관리, 그리고 Record 유틸리티 타입 활용법을 정리해 봤다.1. 탭 상수의 타입 안전성 높이기탭 메뉴를 구성할 때 배열 형태로 탭 목록을 정의하곤 하는데, 이때 제네릭을 결합한 타입을 사용하면 오타를 사전에 방지하고 타입 안정성을 강력하게 챙길 수 있다.import { LAB_TAB_LABEL, type .. 2026. 10. 13. [React / TypeScript] React 컴포넌트 함수 선언 유형 완벽 정리 React 컴포넌트 함수 선언 유형 완벽 정리 (기본형부터 제네릭까지)React와 TypeScript로 개발을 하다 보면 컴포넌트마다 함수를 선언하는 모양이 조금씩 다르다.누군가는 평범하게, 누군가는 꺾쇠()를 붙이고, 누군가는 화살표(=>)를 사용한다. 초보자 입장에서 가장 많이 쓰이는 컴포넌트 함수 선언의 3가지 유형과 각각 왜 그렇게 작성하는지 그 이유를 파헤쳐 보고자 한다.1. 기본 유형: 가장 표준적인 형태export default function ComponentName(props) 가장 흔하게 볼 수 있는 정석적인 컴포넌트 선언 방식★ 인터페이스(Interface)와 props의 의미1) 인터페이스: 이 컴포넌트가 받을 데이터는 반드시 이 모양(규격)이어야 한다고 정해주는 데이터 설계도(예:.. 2026. 10. 13. [테스트] 테스트 주도 개발(TDD, Test-Driven Development)이란? 테스트 주도 개발(TDD, Test-Driven Development) 1. 테스트 주도 개발(TDD, Test-Driven Development)이란?테스트 주도 개발은 프로그램을 작성하기 전에 실패하는 테스트 코드를 먼저 작성하고, 그 테스트를 통과하는 최소한의 코드를 작성한 뒤, 코드를 리팩토링하는 과정을 반복하는 소프트웨어 방법론이다. TDD는 단순히 "테스트 코드를 짜는 것"이 아니라, "테스트를 통해 설계와 개발을 주도해 나가는 프로세스"로, 전통적인 개발 방식(개발 후 테스트)과 정반대의 흐름을 가진다. [TDD의 핵심 사이클: Red - Green - Refactor]Red(실패하는 테스트 작성): 구현하고자 하는 기능의 요구사항을 검증할 수 있는 단위 테스트를 먼저 작성한다. 당연히 아직.. 2026. 10. 12. [React] ReactNode란? (ft. 탭 컴포넌트 타입 정의하기) ReactNode란?리액트(React)와 타입스크립트(TypeScript)를 함께 사용하다 보면 컴포넌트의 props 타입을 정의할 때 아주 자주 마주치는 타입이 있는데, 바로 ReactNode다.최근 탭(Tab) 컴포넌트의 타입을 정의하는 코드를 작성하면서 이 ReactNode를 활용하게 되었는데, 정확히 어떤 역할을 하고 왜 사용해야 하는지 정리해 보았다.1. 작성했던 인터페이스 코드제품 상세 페이지의 탭 컴포넌트를 만들면서 아래와 같은 타입 인터페이스를 정의했다.import { useState, type ReactNode } from "react";interface ProductDetailTabProps { /** 제품정보 탭 내용 (서버에서 렌더링된 결과) */ infoContent: Reac.. 2026. 10. 8. AX 시대로 넘어가며 개발자가 알아야 할 AI 인프라 & 배포 용어 AX/AI 플랫폼 구축할 때 자주 쓰이는 핵심 용어최근 풀스택 엔지니어를 넘어 AI Agent 직무로의 전환을 목표로 공부하며 여러 책들을 읽어보고 있다.특히나 AX(AI Transformation, AI 전환) 관련 책들과 기사를 많이 읽어보는 중인데 생소한 용어가 몇 가지 있어 정리하는 김에 핵심 용어까지 포함하여 내용을 정리한다.1. VRAM(Video RAM / 비디오 메모리)- 그래픽카드(GPU) 안에 있는 고속 메모리로, 일반 PC의 RAM과 다름. - 왜 중요할까? 거대 언어 모델(LLM)이나 이미지 생성 AI는 크기가 매우 커서 VRAM이 작으면 AI 모델이 VRAM 위에 다 올라가지 못해 아예 작동하지 않거나 속도가 급속도로 느려짐. - AI 인프라 구축 비용(GPU 선정)을 결정하는 핵.. 2026. 10. 8. [Next.js] z-index: 50 모달 위로 썸네일이 뚫고 나온 이유 (Stacking Context와 React Portal) [Next.js] z-index: 50 모달 위로 썸네일이 뚫고 나온 이유Stacking Context와 React PortalNext.js 14(App Router) 를 활용한 산업안전용품 관련 프로젝트에서 2단 레이아웃을 개발하던 중, z-50을 부여한 화면 전체 모달 위로 오른쪽 리스트의 제품 썸네일(next/Image)이 뚫고 나오는 버그를 마주했다.단순히 z-index 숫자를 높이는 방식으로 임시 대처하지 않고, CSS Stacking Context(쌓임 맥락)의 원리를 파악하여 React Portal로 근본적인 해결을 한 과정을 정리하려고 한다.1. 문제 상황화면은 크게 좌우 2단 구조로 구성되어 있다.좌측 패널: 스크롤 시 화면에 고정되도록 position:sticky 처리된 표(이미지 클릭.. 2026. 10. 7. React useEffect 의존성 경고 완벽 가이드: 원리부터 실전 패턴까지 React useEffect 의존성 경고 완벽 가이드: 원리부터 실전 패턴까지React 애플리케이션을 개발하다 보면 ESLint의 react-hooks/exhaustive-deps 경고를 자주 접하게 된다.이 경고를 무심코 eslint-disable로 끄거나 무시하면 심각한 무한 루프, 데이터 불일치(State Closure), 메모리 누수 등의 버그로 이어진다. 이 가이드에서는 문제 발생 원인부터 React의 내부 작동 원리, 그리고 5가지 완벽한 해결법까지 다룬다. 1. 문제의 원인: React의 렌더링과 참조 투명성(1) 리액트 컴포넌트 렌더링의 본질React 컴포넌트 (함수형 컴포넌트)는 상태(state)나 속성(props)이 변경될 때마다 함수 전체가 다시 실행된다.function MyCompo.. 2026. 10. 1. "The stub received bad data" — Docker 로그인 에러 잡기 "The stub received bad data"Docker 로그인 에러 하나 잡느라 2시간 태운 이야기 깃액션으로 CI/CD를 해 놨는데, 무료 배포 한도를 초과하여 수동 배포가 필요해져 배포 스크립트를 만들어 놨다.평소처럼 프론트엔드 코드 수정을 마치고 배포 스크립트를 돌렸는데, ECR 로그인 단계에서 처음 보는 에러가 떴다.error saving credentials: error storing credentials - err: exit status 1, out: The stub received bad data. 인터넷에서 검색해 보니, Windows에서 Docker credential helper(wincred)가 Windows 자격 증명 관리자와 통신하다가 깨지는 꽤 알려진 버그였다. 대부분의 .. 2026. 9. 29. [리뷰] 클로드 코드 에이전틱 코딩: '딸깍'의 한계를 넘어 아이디어를 서비스로 완성하는 실전 가이드 "한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다."클로드 코드 에이전틱 코딩: '딸깍'의 한계를 넘어 아이디어를 서비스로 완성하는 실전 가이드9월에 만난 책은 『클로드 코드 에이전틱 코딩』이다. 최근 개발 트렌드는 단순히 AI에게 코드를 물어보는 'AI 보조 코딩'을 넘어, AI가 스스로 개발 계획을 세우고 실행까지 수행하는 '에이전틱 코딩(Agentic Coding)'의 시대로 급격히 전환되고 있다.이 책은 클로드 코드(Claude Code)의 기초 설치와 작동 원리부터 스킬, 서브에이전트, 에이전트 팀즈 같은 최신 확장 기능까지 폭넓게 다룬다. 특히 아이디어를 구상에 그치지 않고 실제 동작하는 제품으로 완성해 내는 에이전틱 코딩의 전 과정을 단계별로 친절하게 안내하는 실전 가이드북.. 2026. 9. 22. [Android] 앱 출시 완료 이전 내용https://puppy-foot-it.tistory.com/1041 [Android] 프로덕션 액세스이전 내용 [Android] 터미널로 APK 내 폰에 설치하기이전 내용 [Android] 터미널로 APK 내 폰에 설치하기 앱 만드는 사이드 프로젝트를 진행 중이다.VS CODE로 작업을 하고, APK 파일을 내 폰에 설치해서 수puppy-foot-it.tistory.com앱 출시 완료! 본업 프로젝트가 너무 바쁘고, 퇴근 후의 육아도 만만치 않아서 육퇴 후에는 쉬기에 바쁜 요즘이다. 그러다 며칠 전 아내랑 대화 중에 앱 만드는 근황을 묻는 얘기가 나와서 앱 출시 작업을 했다. (급히 하느라 출시하는 과정은 기록으로 남기지 못했다.) 아무튼, 금요일(9월 4일)에 프로덕션 신청을 하고 월요일에 .. 2026. 9. 7. [리뷰] AI 시대의 엔지니어링 전략: 단순 구현을 넘어 임팩트를 정의하는 '프로덕트 중심 엔지니어'의 길 "한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다." 8월에 만난 책은 『AI 시대의 엔지니어링 전략』이다.긍정적이든 부정적이든, AI의 비약적인 발전으로 인해 수많은 개발자들의 일하는 방식이 완전히 바뀌었다. 예전에는 여러 명이 매달려야 했던 작업들을 이제는 한 사람이 AI의 도움을 받아 충분히 처리할 수 있게 되었고, PM과 개발자처럼 엄격하게 나뉘어 있던 역할의 경계도 점차 희미해지고 있다.프롬프트 한 줄로 코드를 뚝뚝 만들어내는 시대라지만, 여전히 AI가 내놓는 결과물은 완벽하지 않다. 역설적이게도 AI 시대일수록 '무엇을, 왜 만들 것인가'를 정의하고 프로젝트의 완성도를 좌우하는 단단한 엔지니어링 지식의 가치는 더욱 올라가고 있다. 1. 주니어에서 시니어로, 성장의 길목에서 만.. 2026. 8. 24. 이전 1 2 3 4 ··· 83 다음 728x90
