전체 글

Figma MCP를 이용해서 사이드 프로젝트 디자인, 퍼블리싱 해보기 (feat. Readdy ai)

사이드 프로젝트를 진행할 때 디자인과 퍼블리싱 작업에 많은 시간이 소요됩니다. 하지만 AI 기술을 활용하면 이 과정을 크게 단축할 수 있습니다. 이 글에서는 Readdy AI와 Figma, 그리고 MCP(Model Context Protocol)를 활용해 디자인부터 코드 구현까지 AI가 도와주는 방법을 소개하려 합니다.제 0장. MCP ?MCP에 대해서.AI 시스템이 콘텐츠 저장소, 비즈니스 도구, 개발 환경 등 다양한 데이터 소스와 원활하게 연결될 수 있도록 지원하는 표준화된 프로토콜입니다.MCP 서버의 구조와 주요 기능MCP는 클라이언트-서버 모델을 기반으로 하며, AI 시스템이 다양한 데이터 소스와 연결될 수 있도록 설계된 프로토콜입니다. MCP Server 특징데이터 소스 연결: AI 시스템이 파..

입사한 지 2주째인 현시점에서 주절주절

이번 글의 제목은 "입사한지 2주째인 현시점에서 주절주절"이름하여, 주절주절 시리즈가 되겠다 !! (퇴사하고 주절주절편은 여기로) 시작. 2024. 06. 17 월요일 날씨 맑고 더움 어쩌구 저쩌구 ...  오늘은 2023년 12월까지 근무를 마치고 퇴사를 하고서 약 5개월간 내 자신이 정말 고생했다고 느껴질 만큼 열심히 이직 준비를 했던 지난날을 뒤로하고, 이직에 성공한 내가 새로운 회사에 입사한 지 딱 2주가 되는 오늘이다. 난 퇴사를 하고 본격적으로 이직하기 전까지 남들이 "요새 이직이 너무 힘들다."라고 말할 때, 나는 그 사람들이 눈이 높아서 취직을 못하는 줄 알았다. 하지만 내가 직접 채용시장에 놓여지니 "요새 이직이 너무 말도 안되게 꽁꽁 얼어붙어 힘들어 죽겠다"라고 곡소리가 절로 나더라...

[Next.js] Next.js 14에서 react-select를 사용해보자 (feat. 트러블 슈팅)

이번에 프로젝트를 진행하던중에 next.js 14버전에서 react-select를 쓰려는데 참고할만한 글이 그렇게 많지 않아서 정보도 공유하고 나도 나중에 다시 볼 겸 포스팅을 해본다 ! 시작은 똑같다. npm i react-select 해당 명령을 통해 설치하면 기본 셋팅은 끝. "use client"; import React from "react"; import Select from "react-select"; export default function SelectBox() { const areaOptions = [ { value: "전체", label: "전체" }, { value: "강동구", label: "강동구" }, { value: "강서구", label: "강서구" }, ]; return ..

[Next.js] Extra attributes from the server : ... 에러 해결

Next 14를 사용하는 프로젝트를 하다가 문제에 부딪혔다. "use client"; import React, { useId } from "react"; import Select from "react-select"; interface OptionData { value: string; label: string; } interface Props { area?: boolean; status?: boolean; options: OptionData[]; } export default function SelectBox({ area, options }: Props) { const placeholder = area ? "지역 선택" : "완료/미완료 여부"; const id = useId(); return ( ); }..

[Next.js] useSelectedLayoutSegment와 useSelectedLayoutSegments에 대해 알아보자 !

❗️useSelectedLayoutSegment ✅ 클라이언트 컴포넌트에서만 사용할 수 있는 훅으로 'use client'필수 ✅ 현재 active 한 segment의 값을 (/ 가 포함되지 않은) 반환 ✅ Header Footer와 같이 글로벌하게 사용되는 레이아웃 컴포넌트에서 이를 활용하여 조건부 처리가 가능 경로 url return app/layout.tsx /segment segment app/test/layout.tsx /segment null app/layout.tsx / null ❗️useSelectedLayoutSegments ✅ useSelectedLayoutSegment와 동일하게 클라이언트 컴포넌트에서만 사용할 수 있느 훅으로 'use client'필수 ✅ 현재 active 한 seg..

[Next.js] Next.js의 기본적인 정보에 대해서 알아보자

❗️클라이언트 컴포넌트가 될 수 있는 상황들 ✅ 훅을 쓸 때 ✅ onclick같은 이벤트 리스너를 쓸 때 ✅ 동적으로 UI를 업데이트 해야할 때 등등 ..? ❗️폴더명 대괄호와 소괄호의 차이 Next.js에서 괄호 ( )와 대괄호 [ ]로 묶인 폴더 이름은 라우팅 및 동적 경로와 관련된 특정 의미를 갖는다. ✅ 소괄호 ( ) 안의 폴더 이름 ]app 폴더 내부에 폴더를 정의하길 원하지만 route 경로설정은 되지 않기를 원할 때 폴더 이름을 소괄호( ) 로 생성할 경우 route 경로 설정이 되지 않는다. 소괄호를 사용하면 주소창에 관여를 하지 않기 때문에 특정 그룹을 만들어서 사용하면 좋다 ! 예시를 보여주자면, 해당 이미지에서 처럼 afterLogin과 beforeLogin이라는 주소창에 관여하지 않..

[React.js] TDD(Test-Driven-Development)방법론 사전

이번 포스팅은 여태 했던 포스팅과는 달리 React Testing Library와 jest, vitest에 대해 학습하며 얻은 지식들을 모두 한 곳에 모아서 포스팅 할 예정이라 학습에 대한 순서가 조금 뒤죽박죽일 수는 있다. 바로 시작해보자 ! ❗️ getByText()와 queryByText()의 차이 React Testing Library를 사용한 테스트 맥락에서 'getByText' 및 'queryByText'는 모두 React 구성 요소에서 렌더링된 요소를 쿼리하고 상호 작용하는 데 사용되는 메서드이다. 그러나 요소의 유무를 처리하는 방법에는 차이점이 있다. getByText와 queryByText는 텍스트 내용을 기반으로 요소를 찾는 데 사용되는 공통점을 가지고 있지만, getByText는 정의..

[React.js] TDD(Test-Driven-Development) 방법론에 대해서 알아보자

❗️ TDD란 ? TDD란 Test Driven Development의 약자로 '테스트 주도 개발'이라고 한다. 반복 테스트를 이용한 소프트웨어 방법론으로, 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다. ❗️ TDD를 사용하는 이유 ✅ 초기 버그 감지 기능을 구현하기 전에 테스트를 작성하면 개발 프로세스 초기에 버그와 문제를 파악하는 데 도움이 된다. 이렇게 하면 나중에 디버깅할 때 상당한 시간과 노력을 절약할 수 있습니다. ✅ 코드 신뢰도 TDD는 개발자에게 안전망을 제공하여 코드베이스 변경으로 인해 기존 기능이 중단되지 않도록 보장한다. 수정 시 테스트를 실행하여 모든 것이 여전히 예상대로 작동하는지 빠르게 확인할 수 있다. ✅ 튼튼한 객체 지향적인 코..