AI가 만든 프론트엔드 코드를 리뷰할 때 보는 기준

AI 코딩 도구는 프론트엔드 개발에서 꽤 강력합니다. React 컴포넌트를 만들고, TypeScript 타입을 붙이고, CSS를 작성하고, 테스트 초안까지 만들어 줍니다. 특히 반복적인 UI 작업이나 기존 패턴을 따라가는 작업에서는 생산성이 확실히 좋아집니다.하지만 AI가 만든 코드를 그대로 머지해도 되는지는 다른 문제입니다. 겉으로는 동작하는 것처럼 보여도 요구사항을 일부 놓치거나, 상태 관리를 복잡하게 만들거나, 접근성과 테스트가 빠져 있는 경우가 많습니다.이번 글에서는 AI가 만든 프론트엔드 코드를 리뷰할 때 확인하면 좋은 기준을 정리해보겠습니다. React와 TypeScript 프로젝트를 기준으로 설명하지만, Vue나 다른 프레임워크에서도 대부분 비슷하게 적용할 수 있습니다.1. 요구사항을 제대로..

최근 AI 코딩 도구들은 단순히 질문에 답하는 수준을 넘어 실제 개발 환경과 연결되는 방향으로 발전하고 있습니다. 파일을 읽고, 코드를 수정하고, 테스트를 실행하고, GitHub 이슈나 문서를 참고하면서 작업하는 식입니다.이때 중요한 개념 중 하나가 MCP(Model Context Protocol) 입니다.MCP는 AI 에이전트가 외부 도구나 데이터에 접근할 수 있도록 해주는 표준화된 연결 방식입니다. 쉽게 말하면 AI에게 “이 도구를 이런 방식으로 사용할 수 있다”고 알려주는 인터페이스입니다.이전 글에서 MCP가 무엇인지 개념을 살펴봤다면, 이번 글에서는 조금 더 실전적인 예제로 들어가보겠습니다. 목표는 간단합니다.AI 에이전트가 GitHub 저장소의 이슈 목록을 조회할 수 있도록 MCP 서버를 만들어..

타입스크립트에서는 Type Transformation을 유연하게 도와 주는 여러 유틸리티 타입을 제공하고 있습니다. (TypeScript Utility Types) 그 중에 실무에서 유용한 몇가지 타입을 알아보겠습니다. 타입스크립트에서는 조건부 형식으로 타입을 정의 할 수 있습니다. T extends U ? X : Y 위와 같은 형태를 취하는데 조건식 결과에 따라 X가 될 수도 Y 가 될 수도 있습니다. 타입스크립트는 용도에 맞게 조건부 타입을 활용한 새로운 타입들을 미리 정의해두고 이것을 "Predefined conditional types" 라고 하며 그 중 하나가 Exculude 입니다. Exclude Exclude 타입은 2개의 제네릭 타입을 받을 수 있으며, 첫번재 제네릭 타입 T 중 두번째 제..

Pinia 는 Vue의 새로운 상태 관리 라이브러리입니다. Pinia 는 2019년 11월경 Composition API 를 사용하여 Store for Vue가 어떻게 생겼는지 재설계하기 위한 실험으로 시작되었습니다. 그 이후 초기 원칙은 동일하지만 Pinia 는 Vue2와 Vue3 모두에서 작동하며 Composition API 를 사용할 필요는 없습니다. VueConf Toronton 2021 에서 Vue의 창시자 Evan You가 상태 관리 플러그인으로 vuex가 아닌 Pinia를 추천 Pinia([piːnjʌ] 영어로 "peenya" 로 발음됨) 는 유효한 패키지 이름인 piña(스페인어로 파인애플) 에 가장 가까운 단어입니다. 파인애플은 실제로 여러개의 과일을 만들기 위해 결합된 개별 꽃의 그룹입..