이제 백엔드 개발자도 AI 도구 덕분에 프론트엔드 화면을 직접 만지는 일이 흔해졌습니다. 그런데 "헤더에 로그인 버튼 넣어줘" 정도의 지시만으로는 정교한 결과를 얻기 어렵습니다. UI 용어를 정확히 알아야 AI에게도, 디자이너·기획자에게도 원하는 걸 정확히 전달할 수 있습니다. 일반적인 UI/UX 용어에 더해, 실제로 코드를 짤 때 마주치는 컴포넌트 개발 용어까지 필수적인 것만 함께 정리했습니다. 레이아웃 관련 UI 요소`헤더(Header)` 웹페이지 상단 영역으로, 로고와 메인 메뉴, 검색 버튼 등이 주로 위치합니다.`푸터(Footer)` 웹페이지 하단 영역으로, 회사 정보나 개인정보 처리방침, 이용약관, SNS 링크 등이 들어갑니다. 메뉴 관련 UI 요소`GNB(Global Navigation Bar..

백엔드 개발자라고 API와 DB만 알면 끝나는 시대는 지났습니다. 서비스가 어떻게 배포되고, 트래픽이 몰릴 때 어떻게 버티고, 장애가 났을 때 어디를 봐야 하는지까지 알아야 "설계할 줄 아는" 개발자로 인정받습니다. 실무에서 가장 자주 마주치는 20개 용어를 정리했습니다. 아키텍처 관련 용어`모놀리식 아키텍처(Monolithic Architecture)` 하나의 애플리케이션 안에 모든 기능(회원, 주문, 결제 등)이 한 덩어리로 배포되는 구조입니다. 초기 개발 속도가 빠르고 배포가 단순하지만, 서비스가 커질수록 코드 결합도가 높아져 하나만 고쳐도 전체를 다시 배포해야 하는 문제가 생깁니다.`MSA(Micro Service Architecture)` 기능 단위로 서비스를 잘게 쪼개서 독립적으로 배포·확장하..

claude code를 돌리는 터미널에서 긴 프롬프트 수정할 때, 방향키로 한 글자씩 이동하고 계신가요? 저도 그렇게 사용해왔습니다. 근데 Warp 에서 약간의 노력으로 해결할 수 있더라구요..? https://www.warp.dev/ Warp — The Agentic Development EnvironmentA modern AI terminal for coding with agents. Run Oz, Claude Code, Codex, and Gemini CLI with fine-grained control — locally or in the cloud. Free download.www.warp.dev 왜 Warp인가Claude Code는 어떤 터미널에서도 돌아가지만, Warp에서 쓰면 IDE급 편의..

들어가며프로젝트 초기엔 new로 객체를 직접 생성하는 게 간단해 보입니다. 하지만 시간이 지나면서 테스트 코드 작성이 어려워지고, 작은 변경에도 여러 클래스를 수정해야 하는 상황이 반복됩니다. 이 글에서 다룰 내용:의존(Dependency)의 정의클래스 간 의존 관계가 무엇이고, 왜 문제가 되는지강한 결합의 문제점구체 클래스에 직접 의존할 때 발생하는 실무 이슈들인터페이스 기반 설계느슨한 결합을 만드는 방법과 SOLID 원칙 연결실무 적용 사례결제 시스템, 로깅, 외부 API 연동 등에서 DI 패턴 활용법의존성 주입 방식 비교생성자/세터/필드 주입의 장단점이 글을 읽고 나면, 왜 "인터페이스에 의존하고 구체 클래스 의존을 피해야 하는지" 명확히 이해하고, 실무에서 바로 적용할 수 있는 패턴들을 익힐 수 ..

요약본- Claude 등 LLM은 메모리가 대화별로 완전 독립되어있다. 따라서 관련 주제는 무조건 한 대화에서 처리하자.- 사용자 입장에서는 LLM이 모든 대화를 알아서 기억해주면 좋겠지만, 이 경우 추론에 엄청난 자원이 들어가기 때문에 비효율적이지 않을까? 혹시 저처럼 이런 실수를 하고 계셨나요?상황: 이력서 쓰려고 Claude와 대화 → 포트폴리오도 만들려고 새 대화 시작 → 자기소개서도 새 대화에서..`매번 똑같은 설명 반복` + `일관성 깨진 조언`이거 `완전 안티패턴`입니다. 왜 그런지 알아보죠.Claude의 치명적 한계점 (+ 헷갈리는 개인 선호사항)먼저! 개인 선호사항 vs 대화 맥락 구분하기많은 분들이 헷갈릴 수 있는 부분입니다. 저만 헷갈렸다면 죄송합니다.구분개인 선호사항대화 맥락설정 위..

들어가며실무에서 `권한 관리, 기능 플래그, 태그 시스템`을 구현할 때 어떻게 하시나요?보통 별도 테이블을 만들어 JOIN으로 연결하거나, 문자열로 저장해서 LIKE 검색을 하실 텐데요. 오늘은 `비트 연산을 활용한 효율적인 복합 속성 관리`에 대해 알아보겠습니다.최근 프로그래머스 SQL 문제(특정 형질을 가지는 대장균 찾기, 부모의 형질을 모두 가지는 대장균 찾기)를 통해 이런 패턴의 실무 활용 가능성을 확인할 수 있었습니다.비트마스크 기본 개념왜 비트마스크를 사용할까?전통적인 방식과 비교해보겠습니다. 기존 방식: 별도 테이블 + JOIN-- 사용자별 권한 관리CREATE TABLE user_roles ( user_id INT, role_name VARCHAR(50) -- 'READ', '..

1. 왜 굳이 MCP인가?Claude Code Cli ($20/월) 은 `로컬 파일 접근 + 코드 리뷰 + Git 연동`이 매력 포인트이다.이 기능들은, MCP(Model Context Protocol)라는 연결 규격 덕분에 가능했던 것이다.MCP는 Claude한테 “손발”을 달아주는 기술이다. 즉, `웹 Claude`가 “똑똑한 부사수”라면,`Claude Desktop + MCP`는 “프롬프트대로 작업을 직접 처리하는 에이전트”라고 볼 수 있다. 2. 설치 준비물1. Claude Desktop 다운로드 (Mac/Windows 지원)2. Node.js (https://nodejs.org → LTS 버전 설치) 3. MCP 서버 설정하기 📂 설정 파일 위치Mac: ~/Library/Applicat..

들어가면서저는 거의 자바 스프링을 기반으로 한 백엔드 개발만 해왔습니다. 하지만 언제까지고 API만 만들고 있을 순 없죠. 제가 만든 서버를 지인들이, 그리고 제가 더 편하게 쓸 수 있도록 간단한 프론트엔드를 직접 만들고 싶다는 욕심이 생겼습니다.수많은 기술 스택 속에서 제가 선택한 도구는 `React + TypeScript`였습니다. 채용 시장의 목소리도, 대중성도 이 조합을 가리키고 있었죠. 문제는 `어떻게`였습니다. HTML, CSS, JavaScript를 만져본 게 언젯적인지...이 글은 `Gemini CLI`라는 강력한 AI 도구와 함께, 제가 어떻게 프론트엔드의 벽을 넘고 있는지에 대한 기록입니다. 1. JavaScript와 TypeScriptJava 개발자에게 JavaScript는 애증의..