분류 전체보기

변경된 파일에 한해서만 테스트할 수 있도록 해보자 ! (feat.Github Actions, Jest)

❗️문제 상황발생한 문제PR 생성 시 마다 Github Action의 CI Action에서 약 160개 테스트와 500개의 테스트 케이스가 매 번 실행되어 완료까지의 과도한 소요 시간이 발생목표CI Action 시 테스트 시간 단축을 통한 생산성 향상시도한 해결 방법들❎ 1차 시도: Jest 내장 옵션 --onlyChanged 활용 (실패)npm test --onlyChanged결과: PR 환경에서 "No tests found related to files changed since last commit" 에러 발생 에러 원인:--onlyChanged 옵션은 마지막 커밋 이후의 변경사항만 감지PR 환경에서는 모든 변경사항이 이미 커밋되어 있어 Jest가 변경된 파일을 찾지 못함Git working dire..

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는 정의..