공부 기록장

https://youtu.be/Yf_1w00qIKc?si=GoLXRvkjtb1DO1a1 개발자들은 각자 선호하는 환경에서 코드를 작성한다. VSCode부터 JetBrains 제품군, Android Studio, Xcode, 그리고 최근의 Cursor, Windsurf까지 무수히 많은 IDE가 존재한다. AI 시대에 접어들면서 이들 IDE는 저마다의 AI 기능을 탑재했지만, 여전히 태생적인 한계점들이 존재한다.IDE별로 다른 AI 통합 방식, 제한적인 커스터마이징 옵션, 그리고 무엇보다 특정 환경에 종속되는 문제다.Anthropic은 이런 문제를 해결하기 위해 터미널만 존재한다면 어떤 환경에서도 구동할 수 있는 Claude Code를 내놓았다. Claude Code는 GitHub, GitLab 및 명령줄..

5일 만에 17개 테이블을 가진 풀스택 앱을 완성했다고 하면 믿을 사람이 얼마나 될까? 백엔드를 한 번도 제대로 다뤄본 적 없는 프론트엔드 개발자가 Supabase로 완전한 CRUD 시스템을 구축하고, Redux Toolkit으로 상태 관리를 구현하며, 요양보호사를 위한 업무 관리 앱을 배포까지 마쳤다.이것이 가능했던 이유는 단순히 AI 도구를 사용했기 때문이 아니다. 오히려 AI를 어떻게 활용하느냐가 모든 차이를 만들었다. 이번 글에서는 Claude Code, V0.dev, Cursor, Supabase MCP 등 다양한 AI 도구를 조합해 진행한 '바이브 코딩' 경험을 공유하려 한다. 프로젝트 개요 및 기술 선택프로젝트의 목적은 명확했다. 요양보호사를 위한 업무 관리 애플리케이션(케어노트)을 AI 도..

전통적인 테스트 도구들은 브라우저 외부에서 원격으로 명령을 전송하는 방식이었다면, Cypress는 브라우저 내부에서 직접 실행됩니다. Cypress를 실행하면 실제 브라우저 창이 열리고, 테스트가 실행되는 모든 과정을 실시간으로 시각적으로 확인할 수 있습니다.타임 트래블 기능도 지원합니다. 테스트의 각 단계를 클릭하면 그 시점의 상태로 되돌아가서 DOM의 상태, 네트워크 요청, 콘솔 로그 등을 자세히 살펴볼 수 있습니다. 설치 과정1. 프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다.npm install cypress --save-dev 2. package.json에 스크립트를 추가합니다.{ "scripts": { "cy:open": "cypress open", "cy:run": "cyp..

프론트엔드 개발에서 테스트 코드는 선택사항이 아닌 필수 요소가 되었습니다. 특히 React와 같은 컴포넌트 기반 라이브러리에서는 각 컴포넌트의 독립성과 재사용성을 보장하기 위해 체계적인 테스트 전략이 중요합니다. 이번 글에서는 React 테스트 코드 작성의 목적부터 실제 적용 방법까지 차근차근 살펴보겠습니다.테스트 코드를 작성하는 이유정확성과 신뢰성 확보테스트 코드의 가장 기본적인 목적은 작성한 코드가 올바르게 동작하는지 확인하는 것입니다. React 컴포넌트는 다양한 props와 state 조합에 따라 다르게 렌더링되며, 사용자의 인터랙션에 따라 동적으로 변화합니다. 테스트 코드를 통해 이러한 모든 시나리오에서 컴포넌트가 예상대로 동작하는지 검증할 수 있습니다. 안전한 리팩토링 환경 제공프로젝트가 성장..

2025년 5월 7일, Figma Config 2025 컨퍼런스에서 클릭 한 번으로 웹 퍼블리싱이 가능한 "Figma Sites"가 공개되었습니다. AI 시대에 발맞춘 이 혁신적인 기능은 많은 개발자와 디자이너들의 관심을 끌었지만, 아쉽게도 유료 사용자만 베타 기능에 접근할 수 있었습니다.이 소식을 접한 후, 저는 대안을 찾아보았고 최근 주목받고 있는 MCP(Model Context Protocol)라는 기술이 눈에 들어왔습니다. 이 프로토콜을 활용하면 AI가 Figma 디자인 파일을 직접 분석해 코드로 변환할 수 있다고 합니다. 과연 이 기술이 실제로 얼마나 효과적일지 궁금했고, 특히 웹과 모바일 환경에서 각각 어떤 결과가 나올지 비교해보고 싶었습니다. Figma MCPMCP(Model Context ..

최근 AI 트렌드와 코딩의 변화인공지능 기술의 급격한 발전은 소프트웨어 개발 방식에 혁명적인 변화를 가져오고 있습니다. 특히 대규모 언어 모델(LLM)의 등장으로 코드 작성 방식이 근본적으로 달라지고 있습니다. ChatGPT, Claude, Cursor와 같은 AI 도구들이 코드 제안, 버그 수정, 심지어 전체 프로젝트 생성까지 가능해지면서 개발자의 역할과 작업 방식이 재정의되고 있습니다.바이브 코딩이란?바이브 코딩은 (Vibe Coding)은 AI를 활용해 개발자가 코드의 세부 사항을 깊이 파고들지 않고도 소프트웨어를 만드는 새로운 코딩 방식을 의미합니다. 즉, 코드를 직접 작성하는 것이 아니라 생성형 AI를 통해 자연어로 코딩을 하는 방식입니다. '바이브(Vibe)'라는 단어가 의미하는 것처럼, 개발..

MCP (Model Context Protocol)최근 AI 업계의 가장 주목받는 트렌드 중 하나는 MCP(Model Context Protocol)입니다. Anthropic에서 2024년 11월에 발표한 이 개방형 모델 연결 표준은 AI의 활용 방식을 크게 변화시키고 있습니다.인공지능 모델은 단순한 텍스트 생성 챗봇에서 벗어나 실제 시스템과 상호작용하고 작업을 수행하는 에이전트 형태로 진화하고 있습니다. 이러한 에이전트는 정보 제공을 넘어 콘텐츠 저장소, 비즈니스 도구, 개발 환경 등 다양한 데이터 시스템과 연결될 수 있습니다.MCP는 인공지능 모델이 더 정확하고 관련성 높은 응답을 생성할 수 있도록 외부 환경과의 상호작용을 지원합니다. 기존에는 AI가 새로운 서비스를 활용하려면 서비스마다 전용 API..

UML 다이어그램 소개UML(Unified Modeling Lanuage)은 시스템의 설계를 시각적으로 표현하기 위한 표준화된 모델링 언어이다. 소프트웨어 개발 과정에서 시스템의 구조와 동작을 명확하게 표현하고 의사소통을 돕는 역할을 한다.UML 다이어그램은 크게 구조적 다이어그램(Structural Diagram)과 행위적 다이어그램(Behavioral Diagram)으로 나뉜다. 여기서 서술할 시퀀스 다이어그램(Sequence Diagram)은 행위적 다이어그램에 속하며, 객체 간의 상호작용을 시간 순서대로 보여주는 다이어그램이다. 시퀀스 다이어그램의 특징시퀀스 다이어그램은 객체 간의 상호작용을 시간 순서대로 표현하는 UML 다이어그램이다. 주요 특징은 다음과 같다.수직 축 : 시간의 흐름(위에서 아..

1. position 프로퍼티position 프로퍼티는 HTML 요소의 위치를 결정하는 방식을 설정한다. 웹 페이지의 레이아웃을 구성할 때 필수적인 속성으로, 각 요소를 원하는 위치에 배치할 수 있게 해준다.position 속성 값은 static, relative, absolute, fixed 네 가지가 있으며, 각각의 특성은 다음과 같다.속성값 기준점 다른 요소에 영향 스크롤 시 동작static기본 문서 흐름영향 있음함께 스크롤relative원래 위치영향 없음함께 스크롤absolute상위 요소영향 없음함께 스크롤fixed뷰포트영향 없음고정 위치 유지 1) 정적 위치(static position) 지정 방식static은 position 프로퍼티의 기본값이다. 다른 태그와의 관계에 의해 자동으로 배치되며,..

1. HTML 과 CSS 연동 방법적용할 태그에 style 속성으로 넣기 (인라인 스타일)가급적 사용하지 않아야 한다. Hello World!  HTML 문서 Hello World!  HTML 문서 Hello World   2. SelectorHTML 문서의 특정 부분에 대해 렌더링 방법을 정의하기 위해서는 특정 부분을 선택할 수 있어야 함 CSS Selecotr는 이런 특정 부분을 선택하기 위한 문법이다.전체 셀렉터(``) : 모든 요소를 선택태그 셀렉터 : HTML 태그 이름으로 선택 (예 : p, div, span)클래스 셀렉터 (.) : 특정 클래스가 적용된 요소 선택ID 셀렉터(#) : 특정 ID를 가진 요소 선택속성 셀렉터([]) : 특정 속성이나 속성값을 가진 요소 선택전체 셀..