728x90 전체 글986 [테스트] 테스트 주도 개발(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. [Android] 프로덕션 액세스 이전 내용 [Android] 터미널로 APK 내 폰에 설치하기이전 내용 [Android] 터미널로 APK 내 폰에 설치하기 앱 만드는 사이드 프로젝트를 진행 중이다.VS CODE로 작업을 하고, APK 파일을 내 폰에 설치해서 수정 작업이 잘 반영됐는지 확인하고, 에러나 개선puppy-foot-it.tistory.com1. 앱 개발 근황: 비공개 테스트 종료지난 6월 23일에 2주간의 비공개 테스트를 시작했다.알다시피, 안드로이드 앱의 경우 앱을 출시하기 전에 12명의 비공개 테스터를 모집하여 2주 동안 비공개 테스트를 진행해야 한다. 12명이 모아져야 테스트 신청 가능2주 동안 최소 12명이 앱을 지우지 않고 테스트 수행(만약 1명이 지워서 11명이 되면 기간 중단 - 1명 더 추가하여 재수행)을 해야.. 2026. 8. 3. [데이터 분석] 구글 애널리틱스 세팅하기 이전 내용 [풀스택 개발] 확장성: 팀 개발에 강한 구조란 무엇인가?이전 내용 [풀스택 개발] 프론트와 백을 잇는 '연결 고리' API 클라이언트 설계이전 내용 [풀스택 개발] 실패 없는 풀스택 개발 빌드업 가이드실패 없는 풀스택 개발 빌드업 가이드 FastAPI × Next.jspuppy-foot-it.tistory.com구글 애널리틱스 도입하기1. 간단한 근황 (+ 넋두리)프로젝트를 진행한 지, 어느덧 정확히 10개월의 시간이 흘렀다. (25년 9월 22일 ~ 26년 7월 22일)기획서도 없이 몇 마디 말로 시작되어 몇 명의 개발자를 거쳐 나에게 온 이 프로젝트는 10개월동안 큰 뼈대를 갖추게 되었고, 사내 몇몇 분들의 도움으로 인해 살(컨텐츠)을 붙이게 되었다.다행스럽게도 최근에 전시회를 통해 대중.. 2026. 7. 22. [리뷰] 누구나 이해하는 클라우드 인프라 지식 사전: 1인 개발자와 주니어가 서비스 출시 전 꼭 옆에 두어야 할 가이드북 "한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다." 누구나 이해하는 클라우드 인프라 지식 사전: 1인 개발자와 주니어가 서비스 출시 전 꼭 옆에 두어야 할 가이드북 7월에 만난 책은 「누구나 이해하는 클라우드 인프라 지식 사전」이다.개발 속도가 빨라지고 AI가 코딩을 도와주는 시대라지만, 서비스가 제대로 구동되고 장애 없이 버티는 것은 결국 '기본적인 인프라 원리'에 달려 있다. 이 책은 클라우드 환경에서 개발자가 반드시 이해해야 할 신뢰성, 성능, 보안, 운영의 핵심 원리를 실무 관점에서 체계적으로 짚어주는 책이다. 이 책은 클라우드 환경에서 개발자가 반드시 이해해야 할 신뢰성, 성능, 보안, 운영 등 핵심 원리를 체계적으로 설명하며, 복잡한 인프라 개념을 실무 관점에서 쉽게 익힐 .. 2026. 7. 22. 이전 1 2 3 4 ··· 83 다음 728x90
