공부하자

상상만 하던 인테리어를 실제로 구현할 수 있다면 어떨까요? AI 인테리어 디자인 도구의 등장으로 이제 누구나 전문가 수준의 공간 디자인이 가능해졌습니다. 특히 오늘의집 AI (Ohouse AI)는 단순히 예쁜 이미지를 만드는 것을 넘어, 실제 구매 가능한 가구로 디자인을 구성해 바로 주문할 수 있다는 점에서 게임 체인저가 되고 있습니다. 이 글에서는 2025년 주목해야 할 AI 인테리어 도구 8가지를 소개하고, 왜 오늘의집 AI가 한국 사용자에게 최고의 선택인지 자세히 알아보겠습니다.목차2025년 최고의 AI 인테리어 디자인 도구 8선오늘의집 AI가 특별한 이유: 상상을 현실로나에게 맞는 AI 인테리어 도구 선택 가이드결론자주 묻는 질문2025년 최고의 AI 인테리어 디자인 도구 8선1. 오늘의집 AI ..

React에서 순차적 API 호출 처리하기: 위치 기반 버스 도착 정보 조회 사례서론한 API의 결과가 다른 API를 호출하는 전제 조건이 되는 경우가 있다.버스 번호판 인식 앱을 개발하다가 사용자의 위치를 먼저 서버에 전송하고, 그 위치 기반으로 버스 도착 정보를 조회해야 하는 상황이 발생했다. 이런 순차적 API 호출은 React에서 어떻게 처리할 수 있을까?이번 글에서는 React Query의 Dependent Queries를 활용한 실제 구현 사례를 작성해보겠다.문제 상황요구사항 및 서비스 플로우이다.사용자가 버스 번호를 입력하면 이 후에 위치 정보가 서버로 전송됨서버에서 위치를 처리하는데 약간의 시간이 필요함위치가 처리되면 해당 위치 기반으로 버스 도착 정보를 조회할 수 있음하지만 위치 처리 전..

https://5ffthewall.tistory.com/137 Figma에 Cladue 연결해서 AI에게 디자인 생성해달라고 하기인데 이제 MCP를 곁들인…오픈소스 과목에서 프로젝트 UI 디자인을 맡게 되었다.지금까지 개발자로만 이루어진 프로젝트를 하면서 항상 떠맡듯이 디자인을 맡아왔는데 이번에는 내가 자진해서 디자인을 해보고싶다고5ffthewall.tistory.com 이전 글을 참고해서 클로드로 피그마 디자인을 하는 환경을 구축해뒀다.이번에는 어느정도로 쓸만 한지를 직접 보여주겠다. 1. 디자인 시스템 주고 적용해서 디자인 해달라고 하기 사진과 같은 디자인 시스템이 담긴 링크를 클로드에게 주고 이 걸 활용해서 디자인을 해달라고 했다. 프롬프트는 다음과 같다.(https://www.figma.com/d..

배경 및 문제 상황React-Webcam 라이브러리를 사용해서 개발을 진행하던 중, 모바일 환경에서 테스트할 때 중요한 문제점을 발견했다. 모바일 브라우저에서 카메라 접근은 보안상의 이유로 HTTPS 프로토콜에서만 허용되기 때문에, 로컬 개발 환경이 기본적으로 사용하는 HTTP로는 모바일 테스트가 불가능했다. 이를 해결하기 위해 HTTPS 접속을 제공하는 ngrok을 사용하게 되었다. 사용 방법은 다음과 같다.React Webcam 개발 환경 설정 가이드 - ngrok 사용 편준비사항GitNode.jspnpm (설치 방법: npm install -g pnpm)ngrok 계정 (https://ngrok.com 에서 가입)설정 단계1. 프로젝트 클론하기git clone https://github.com/Te..

오픈소스 과목에서 프로젝트 UI 디자인을 맡게 되었다.지금까지 개발자로만 이루어진 프로젝트를 하면서 항상 떠맡듯이 디자인을 맡아왔는데 이번에는 내가 자진해서 디자인을 해보고싶다고 했다. 그동안 디자인 시스템을 개발하거나 동아리 내의 디자인 시스템인 Handy를 사용하면서 디자인에 관심이 생기기도 했고 요즘 핫하다는 MCP를 사용해서 디자인을 AI로 만들어내고 싶었기 때문에 처음으로 자진해서 디자인을 해보고싶다고 했다. 그래서 오늘 할 건 Figma에 claude 연결하기!!일단 MCP에 관해 간단히 설명을 해보고 넘어가겠다. MCP(Model Context Protocol)란? MCP는 Model Context Protocol의 약자로, 대형 언어 모델(LLM)이 외부 애플리케이션과 상호작용할 수 있게 ..

서론모달(Modal)은 사용자에게 중요한 정보를 표시하거나 작업을 완료하도록 유도하는 UI 요소로 널리 사용된다.하지만 모달의 상태 관리는 생각보다 복잡할 수 있다. 보통 모달의 열림/닫힘 상태를 관리하기 위해 보통 boolean 값을 사용하는 방식을 많이 채택한다. 최근에는 URL을 기반으로 모달 상태를 관리하는 방법이 떠오르고 있다. 이번 글에서는 Next.js의 App Router에서 제공하는 Parallel Routes 기능을 활용하여 모달 상태 관리를 URL 기반으로 리팩토링한 경험을 공유하려 한다. 단순히 boolean 값으로 관리하던 모달 상태를 왜 URL 기반으로 바꾸었는지, 그리고 이러한 접근 방식이 어떤 이점을 가져다주는지 함께 살펴보자.Parallel Routes란?Next.js의 A..

1. Vercel 배포를 선택한 이유동아리 내에서 팀 organization을 사용하고 있다. 원래는 AWS S3 버킷을 생성하고 배포하는 방식으로 진행하려 했다. 하지만 이번 프로젝트는 Next.js를 사용하고 있으며, 특히 API Route 기능을 활용하고 있다. 이러한 특성상 단순한 정적 빌드가 어렵다고 판단했다.Next.js의 SSR(Server Side Rendering) 및 API Route를 포함한 프로젝트는 기본적으로 서버 환경이 필요하다. AWS에서 이를 운영하려면 Lambda나 EC2 같은 추가적인 설정이 필요하지만, 이는 유지보수 비용과 복잡도를 증가시킨다. 하는 방법이 없진 않지만!! 빠른 배포가 우선이었기에 빠르고 간편한 Vercel 배포를 선택했다. Vercel은 Next.js의..

API 요청을 할 때, 401 Unauthorized 응답이 오면 보통 액세스 토큰을 갱신(Refresh)하는 로직을 추가한다.이 과정에서 ky 라이브러리를 활용하면 beforeRetry 훅을 사용해 비교적 간결하게 구현할 수 있다. 일단 ky에서 제공하는 BeforeRetryHook을 살펴보면BeforeRetryHook에는 다음과 같은 타입이 정의되어 있다.👉 [ky 공식 문서](https://www.npmjs.com/package/ky#:~:text=users%27)%3B-,hooks.beforeRetry,-Type%3A%20Function)  kyTiny and elegant HTTP client based on the Fetch API. Latest version: 1.7.5, last publ..

데이터 통신에는 항상 axios만 사용해왔는데 요즘에는 오히려 fetch만 쓰는게 덜 무겁다는 의견도 많이 나오고 axios는 과하다는 이야기가 많아서 이번 프로젝트에서는 fetch 기반의 ky 라이브러리를 사용해서 데이터 통신을 해보고자 한다.ky란?https://www.npmjs.com/package/ky kyTiny and elegant HTTP client based on the Fetch API. Latest version: 1.7.5, last published: a day ago. Start using ky in your project by running `npm i ky`. There are 693 other projects in the npm registry using ky.www.npm..

문제 상황Dialog 컴포넌트와 버튼을 합쳐서 드롭다운 컴포넌트를 만들고 있었다.내가 만든 컴포넌트의 요구사항은 다음과 같다.버튼을 클릭하면 Dialog가 열림Dialog는 화면 여유 공간에 따라 버튼의 위나 아래에 위치스크롤/리사이즈 시에도 적절한 위치 유지핵심 구현을 위해 위치 계산이 필요했고 위치 계산에는 여러가지 방법이 있다.처음에는 그냥 순수하게 useEffect만 사용해 구현했다.useEffect(() => { if (isOpen && anchorEl && dialogRef.current) { const updatePosition = () => { // 1. 버튼의 위치 정보 가져오기 const buttonRect = anchorEl.getBoundingClientRe..