개발자 사이드 프로젝트의 가장 큰 약점이자, 숙원 사업은 디자인이다. 최근에 출시된 (나온지 2주가 넘었지만) Claude Design 을 가볍게 사용하여 간단한 사이트 리디자인을 진행하려고 한다. 먼저, 클로드 디자인 사이트에 접속해준다. Project Name 에 이름을 넣고, 원하는 항목을 선택하여 Create 를 누른다. https://claude.ai/design 클로드 디자인은 따로 웹 사이트에서 진행하는 거다보니, 기존 프로젝트에 대한 컨텍스트 및 디자인 정보를 가지고 있지 않다. 먼저 기존 사이트의 기본 컨텍스트 정보를 가져와 보겠다. 이것도 내가 직접 정리하긴 어려우니, Claude Code 에게 정리해달라고 요청하였다. 기존 사이트의 디자인은 다음과 같았다. 이거는 Clau..
claude 를 사용하다가 아래 에러가 발생했다. Please run /login · API Error: 401 {"type":"error","error":{"type":"authentication_error","message":"Invalid authentication credentials"},"request_id":"req_011CZur9e67GHCiZ9PPwUSJP"} 클로드 코드 입력 창에 /logout 을 입력하고, /logout claude 를 터미널에 입력해 재실행해, 재로그인하면 해결된다. 끝 !
React 와 별도로 js 파일을 구현할 일이 생겼다. 1. Tomcat 설치https://tomcat.apache.org/download-90.cgi#9.0.116 Apache Tomcat® - Apache Tomcat 9 Software DownloadsWelcome to the Apache Tomcat® 9.x software download page. This page provides download links for obtaining the latest version of Tomcat 9.0.x software, as well as links to the archives of older releases. Unsure which version you need? Specification versi..
데이터 스트리밍이란?데이터를 일정한 크기의 청크(Chunk) 나 이벤트 단위로 끊임없이 실시간으로 전송하고 처리하는 방식이다. AI 를 사용할 때, 스트리밍 방식으로 해두면 중간 과정을 토큰으로 받아온다. 완료 후에 보내면 사용자가 너무 오래 기다리니까, AI 와 채팅할 때 중간중간 오는 것들이 데이터 스트리밍 방식이다.(생성 ➡️ 전송 ➡️ 렌더링) 데이터가 생성되는 즉시 처리하여 실시간성, 데이터의 시작과 끝이 정해져 있지 않고 계속 흘러가는 지속성, 메모리에 전체 데이터를 올릴 필요가 없어 효율성이 있다. Apache Kafka, Apache Flink, Spark Streaming, AWS Kinesis 등의 도구를 통해 구현할 수 있다. 데이터가 끝난 걸 어떻게 알까?스트리밍은 보통 이벤트 ..
웹 사이트에서 로고를 클릭하면 새로고침되며 이미지 박스가 먼저 보임 > 1초 후 로고 로딩되는 문제가 발생했다. 큰 문제는 아니지만, 사용자에게 신뢰를 저하시킬 수 있는 부분이라 판단되어 수정을 진행하였다. 깜빡임 원인Image 컴포넌트를 사용하였고, Image 컴포넌트가 blob을 비동기로 가져오는 동안 blobSrc 가 빈 문자열이라 깜빡임이 발생하였다. Image 와 img 태그의 차이Image 컴포넌트인증 토큰을 헤더에 포함해 fetch 로 이미지를 가져옴응답을 Blob 으로 변환URL.createObjectURL() 로 메모리 URL 생성URL 을 img 태그의 src 로 이용 * Blob (Binary Large Object) 이란?Blob 은 데이터 덩어리를 브라우저/JS 에서 ..
회사에서 Gitlab 에 있는 코드들을 다운받기 위해 계정의 ID 와 Password로 로그인했는데 아래와 같은 오류가 발생했다. HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password. 알고보니, 이젠 ID/Password 로 접근하지 못하고 Access Token 을 발급받아야 접근할 수 있다고 한다. 1. Gitlab 페이지 로그인 후 프로필 > Preferences 2. Access tokens > Add new token 선택하여 토큰 추가 3..
가끔 강제종료나, 여러가지 이유로 포트에 연결중이 아닌데 포트번호가 점유중인 경우가 있다. 에러 메세지를 Terminal 에 노출하기 위해서는 새로 열어야 하는데 기존에 점유중인 포트를 종료할 필요가 있다. netstat -ano | findstr :포트번호taskkill /PID 가장오른쪽ID /Fex) taskkill /PID 15068 /F
부끄럽게도, 개발자라는 직업을 2년 가까이 하면서 사이드 이펙트라는 단어도 정확히 몰랐다. 과장님께서 React 의 useEffect를 사용할 경우 사이드 이펙트를 주의해야한다고 말씀하셨다. 이때 이 단어를 인지하게 되었다. 사이드 이펙트란?프로그래밍에서 어떤 함수나 연산의 수행 결과로 시스템의 상태가 예상치 못하게 변경되는 현상이다. 바이브 코딩과 사이드 이펙트특히 요즘 회사에서 바이브 코딩으로 개발하고 있기 때문에 이 사이드 이펙트에 대해 더 유의해야하는 상황이 되었다. Cursor AI 를 사용하고 있는데, 내가 구체적으로 파일의 범위를 지정하지 않을 경우 내 말을 오해하여 다른 파일까지 건드는 케이스가 발생하였다. 이때 제대로 검토하지 않고 넘어가면 사이드 이펙트의 영향이 꽤나 커질 수 있..
디바운싱(Debouncing) 이란?디바운싱은 연속적으로 발생하는 이벤트를 글로벌화해서 마지막 이벤트만 실행되도록 하는 기술이다. 사용자가 빠르게 연속해서 입력할 때, 모든 입력마다 함수를 실행하지 않고 마지막 입력 후 일정시간 대기 후에 함수를 실행하는 방식이다.디바운싱에서 전역 상태관리가 필요한 이유는, 모든 화면 위에서 관리해야 하기 때문이다. 나의 경우에 입력을 완료하고 직후에 실행되는 자동저장 기능을 구현하기 위해 디바운싱을 적용했다. 매 입력마다 저장을 실행하면 API 호출도 너무 많고, 저장되는 동안 새로운 저장이 실행될 수 있기 때문에 디바운싱이 필요하다 판단하였다. 디바운싱이 필요한 사례 1. 검색창 자동완성2. 입력값 유효성 검사3. 자동저장 다음은 검색어 입력의 디바운싱 예제이다..
프로젝트를 진행하다 보면 어느 순간 코드가 복잡해지고, 같은 로직이 여러 곳에 중복되어 있는 것을 발견할 수 있다. 이번에 프로젝트를 진행하며 상태 코드 관리 로직을 리팩토링한 경험을 기록하고자 한다. 처음에는 조건에 따라 파트를 보여주는 해당 요건을 개발하기 위해, 각 부분에 상태 값을 하드코딩하여 조건을 붙였다. 근데, 1차 개발했던 것을 수정하려고 하니 꽤나 쉽지 않았다. 나야 내가 만든 코드지만, 운영할 사람이 이 코드를 파악하는건 너무 어려울 것 같았다. 또한 코드 값이 변경되거나 코드가 추가되면 관리하기 쉽지 않을 것 같았다. // Before: 여러 컴포넌트에 분산된 하드코딩if (code === 'AAA' || code === 'BBB' || code === 'CCC') { // ...}..
