데이터 스트리밍이란?데이터를 일정한 크기의 청크(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') { // ...}..
회사에서 잘못된 useEffect 사용으로 인해 화면에 무한루프가 걸리는 문제가 발생했다.내가 원인도 파악을 못해서, 과장님이 의심되는 부분 확인해주셨다. 문제는 새로고침 후, 팝업 렌더링에서 useEffect 를 사용하는게 문제였다. useEffect 를 사용하며 새로고침이 발생해, 로그인 인증을 재실행하고, 인증 재실행 후 팝업 렌더링이 재실행되는 무한루프에 빠진 것이다. 어렴풋이 사용하고 있던 useState 와 useEffect 를 정리하고자 한다. useStateuseState 는 컴포넌트의 상태 (데이터) 를 관리하기 위해 사용한다.useState는 컴포넌트가 기억해야 할 값 (상태) 를 만들고 관리할 수 있게 해주는 Hook이다.컴포넌트 내에서 변경될 수 있는 데이터를 관리한다.useSt..
⬇️ 이전 Homebrew 글 보러가기.[도구 및 기타/Mac 개발환경] - [Mac] 맥에 홈브류 (Homebrew) 설치하는 법[도구 및 기타/Mac 개발환경] - [Mac 맥북] Homebrew로 Java 쉽게 설치하기 Homebrew 설치하는 방법은 여기에서 볼 수 있다. Homebrew 를 이용해 관리하는 모든 과정은, Homebrew 가 설치되어 있어야 한다.물론 Homebrew 말고 다른 방법으로도 설치할 수 있지만, 난 홈브류 쓸거다. 왜냐? 관리하기 편하니까 ! 노트북을 변경한 후 기존에 진행하던 React 프로젝트에서 npm run dev 를 실행하였는데, npm 자체 명령어를 찾지 못했다.이 상황이 발생하는 경우는 아래와 같다.Node.js가 설치되지 않은 경우npm 이 PA..
이전에 한번 환경설정을 하며, 새로 설치할 때는 homebrew 로 가능한 한 모든 것을 관리하겠다고 생각한 적이 있다.여기저기서 직접 다운로드하면 관리가 너무 어렵기 때문이다 ! [선행되어야 하는 작업] Homebrew 설치하러 가기 https://skylarcoding.tistory.com/21#google_vignette [Mac] 맥에 홈브류 (Homebrew) 설치하는 법홈브류 (homebrew) 란맥에서 개발 프로그램의 설치와 관리를 용이하게 도와주는 프로그램이다. 즉, 맥 사용자는 설치해두면 유용한 프로그램이다. 홈브류 설치 방법1. 홈브류 홈페이지에 있는 코드skylarcoding.tistory.com ✅ Homebrew 로 Java 설치 우선, Homebrew 에서 Java ..
