분류 전체보기 (76) 썸네일형 리스트형 [react-beautiful-dnd] Could not find a declaration file for module 'react-beautiful-dnd'. 1. 에러가 발생한 이유이 에러는 타입스크립트 프로젝트에서 react-beautiful-dnd를 사용할 때 발생하는 문제로, 해당 라이브러리에 타입 정의 파일(.d.ts)이 포함되어 있지 않거나, 타입 패키지가 프로젝트에 설치되지 않은 경우에 나타납니다. 타입스크립트는 모든 모듈의 타입을 확인하려고 시도하지만, 타입 정의가 없으면 implicitly has an 'any' type 경고를 출력합니다. 2. 해결 방법1) 타입 정의 파일 설치react-beautiful-dnd는 커뮤니티가 관리하는 타입 정의 파일이 별도로 제공됩니다. 이를 설치하면 문제를 해결할 수 있습니다.npm install --save-dev @types/react-beautiful-dnd 혹은 yarn을 사용하는 경우:yarn ad.. [Vercel] 배포 중 만난 에러와 해결 과정 들어가며Vercel을 통해 프로젝트를 배포하는 과정에서 예상치 못한 여러 에러를 만났습니다. 로컬에서는 잘 작동하던 프로젝트가 배포 환경에서 문제를 일으키는 경우가 종종 있는데, 이번 글에서는 제가 겪은 문제들과 해결 과정을 공유하고자 합니다.1. Prisma Type Error발생한 문제첫 번째로 만난 에러는 Prisma와 관련된 Type Error였습니다. 로컬 환경에서는 정상적으로 작동했기에 더욱 당황스러웠습니다.Error: Type error in Prisma Client원인 분석Vercel 배포 환경에서는 로컬 환경과 달리 Prisma 관련 명령어를 별도로 실행해줘야 한다는 것을 알게 되었습니다. 이는 배포 환경에서 Prisma Client가 제대로 생성되지 않아서 발생하는 문제였습니다.해결 방.. SW 교육 페스티벌 2023 회고 저는 2023년 11월 4일, 킨텍스에서 열린 SW 교육 페스티벌에 회사 관계자들과 함께 참가해 클리브스튜디오를 소개하는 부스에 직접 참여했습니다. 행사에서 제가 개발에 참여한 클리브스튜디오 서비스를 방문객들에게 설명하며 체험을 유도했고, 여러 기업 및 기관 관계자들과 교류하며 제휴에 관해서도 논의하기도 했습니다. SW 교육 페스티벌은 기술에 관심 있는 일반 방문자뿐만 아니라, 다양한 기업과 기관의 관계자들이 함께 참여해 최신 디지털 혁신 기술을 경험하고 소통할 수 있는 자리였습니다. 이 행사에서 클리브웍스와 클리브스튜디오는 특히 큰 주목을 받았으며, 참관객과 업계 관계자들로부터 많은 호평을 받았습니다. 이를 통해 자사 기술이 실제 고객에게 제공하는 가치를 다시금 확인할 수 있어서 기뻤고, 방문자분들에.. SSE(Server-Sent Events)를 활용한 실시간 알림 시스템 개선 1. 프로젝트 배경이전 포스팅에서 SSE(Server-Sent Events)에 대한 기본 개념과 사용 사례를 설명드렸습니다. 이번에는 실전에서 SSE를 활용해 실시간 알림 기능을 구축하면서 겪은 문제와 그 해결 과정을 공유하고자 합니다. 이 글은 실시간 알림이 필요한 상황에서 SSE를 어떻게 효과적으로 적용하고, 성능 문제를 어떻게 해결했는지를 중심으로 작성하고 있습니다. 2. 문제 상황: 다수의 연결 시도로 인한 서버 성능 저하알림 시스템을 구현할 때 가장 큰 도전 과제는 동시에 많은 사용자가 접속해 실시간으로 알림을 받을 때 발생하는 서버 부하였습니다. 특히, 프로젝트 초기에는 사용자의 연결이 끊길 때마다 자동으로 재연결을 시도하게 설정해 놓았는데, 이로 인해 다수의 사용자가 알림을 동시에 요청하면 .. [Prisma] 카테고리와 옵션 데이터의 중복 및 관리 문제 문제점이 프로젝트의 초기 구조에서는 각 Store별로 독립적인 Category, Size, Color 데이터를 가지고 있었기 때문에, 비슷한 카테고리나 옵션들이 중복 저장되는 문제가 있었습니다. 예를 들어 '의류'라는 카테고리가 여러 쇼핑몰에 각각 동일하게 생성되었으며, 각 쇼핑몰마다 동일한 '사이즈'와 '색상'이 중복되어 데이터베이스의 관리가 비효율적이고, 성능에도 영향을 미쳤습니다. 이러한 문제를 해결하기 위해 공통된 데이터를 관리하고 참조하는 방식으로 DB 테이블 구조를 변경하였으며, 이를 통해 성능과 관리 효율성을 개선했습니다. Before: 중복된 Category, Size, Color 테이블 관리문제: 각 쇼핑몰의 Category, Size, Color가 중복되어 저장되면서 데이터베이스가 불필.. 실시간 알림 구현을 위한 선택: 롱 폴링, 웹 소켓, Server-Sent-Events 롱 폴링이란?클라이언트가 정기적인 간격으로 서버에 반복적으로 데이터를 요청하는 전통적인 폴링과 달리, 롱 폴링은 새로운 데이터를 사용할 수 있을 때까지 서버와의 연결을 열려 있는 상태로 유지합니다. 서버에 새 정보가 생기면 클라이언트에 응답을 보내고 연결이 닫힙니다. 서버의 응답을 받자마자 클라이언트는 새로운 요청을 보내는 과정이 반복됩니다. 이를 통해 데이터가 갱신되면 즉시 클라이언트에 전달되며, 불필요한 네트워크 트래픽을 줄일 수 있습니다. 그러나 여전히 통신 지연이 발생할 수 있고, 웹 소켓과 같은 기술에 비해 비효율적일 수 있습니다. // 자바스크립트 클라이언트의 롱 폴링function longPoll() { fetch('http://example.com/poll') .then(.. 주니어 개발자의 코드 리뷰 문화 도입시키기 코드 리뷰 문화를 도입한 계기처음에는 개인 브랜치에서 각자 작업을 완료한 후, 공통 브랜치(dev)에 병합하는 방식으로 개발을 진행했지만, 코드 품질에 대한 문제가 점점 드러나기 시작했습니다. 당시 코드 리뷰를 해줄 테크리드가 없어 코드 품질을 관리할 방법이 부족했기 때문에 저는 자발적으로 코드 리뷰 규칙에 대해 의견을 내었고 팀 내에서도 적용하기로 결정했습니다. 이는 코드 품질을 개선하고 유지보수성을 높이기 위한 중요한 첫걸음이었습니다. 비슷한 상황에 놓이신 분들을 위해 저의 개발문화 적용과정과 생각들을 공유드리려고 합니다. 개선된 코드 리뷰 문화코드 리뷰는 매일 아침 팀이 모여 진행되었습니다. 이 시간 동안 팀원들은 온라인으로 서로의 코드를 검토하며 질문을 주고받고, 더 나은 코드 작성 방법이나 공.. Component-Driven Development(CDD): 효율적인 UI 개발의 핵심 Component-Driven Development(CDD)란?Component-Driven Development(CDD)는 UI 개발에서 컴포넌트를 중심으로 개발하는 방식을 말합니다. CDD의 핵심은 UI를 독립적이고 재사용 가능한 단위로 나누고, 각 컴포넌트가 명확한 기능과 책임을 갖도록 개발하는 것입니다. 이를 통해 유지보수와 확장이 쉬운 코드를 만들 수 있습니다. CDD와 기존 방식의 차이 기존 방식: 전통적인 UI 개발 방식에서는 페이지나 화면 단위로 개발이 이루어집니다. 이 방식은 각 페이지가 완성된 이후 수정이 필요할 때, 코드 중복이 많아 재사용성이 떨어지고 유지보수가 어렵습니다.CDD 적용 전 (비포):CDD를 적용하기 전에는 여러 페이지에서 동일한 버튼을 복사해 사용했을 수 있습니다... 이전 1 2 3 4 5 6 7 ··· 10 다음 목록 더보기
