본문 바로가기

전체 글

[테오스프린트] 테오스프린트 18기를 시작하며 테오스프린트, 설렘과 도전의 시작 드디어 제가 테오스프린트에 참가하게 되었어요! 😊 이번 기수는 오랜만에 진행되는 만큼 참가 인원이 더욱 많았다고 합니다. 처음엔 설레는 마음이 컸지만, 협업에 대한 기대와 함께 살짝의 걱정도 있었어요. 그래도 좋은 인연들과 함께 즐거운 시간을 만들어가길 기대하고 있습니다. 참가 전에 받은 첫 번째 미션은 프로젝트 아이디어를 구상해오는 것이었는데요. 저는 가구 배치 시뮬레이터 사이트, SweetHome을 제안했습니다.(아쉽게도 준결승까지만 올라갔지만... 여기에서 아이디어를 정리해 공유해봅니다!) SweetHome은 가구 배치를 쉽고 직관적으로 도와주는 가구 배치 시뮬레이터 사이트입니다.이사 준비나 인테리어를 고민할 때, '이 가구가 내 방에 어울릴까?' 망설였던 적 있.. 더보기
[TypeScript] Props를 선언할 때 type과 interface 중에 어떤 것을 사용할까? TypeScript에서 Props를 정의할 때 interface와 type 사이의 선택은 프로젝트를 시작하기 전 규칙을 잡아나아가는 과정에서 흔히 고민되는 주제입니다. 저는 확장성 있게 사용하려고 하면 interface를 사용하고 type은 변경사항이 없는 상황에서 사용했습니다. 이 두 방식 모두 타입을 정의하는 데 사용될 수 있지만, 그 미묘한 차이점과 각각의 장단점을 명확히 이해하는 것은 코드의 유연성과 확장성을 높이는 데 중요합니다. 이 글에서는 interface와 type의 근본적인 차이점을 깊이 있게 탐구하고, 실무에서 어떤 상황에 각각을 사용하는 것이 적절한지 비교해보겠습니다.Interface vs Type: 기본적인 차이점Interface객체 형태의 타입을 정의하는 데 주로 사용됩니다.선언 .. 더보기
[React] react-beautiful-dnd를 이용한 Drag and Drop 구현 웹 디자인 도구나 레이아웃 빌더를 개발하면서 사용자가 요소들을 자유롭게 이동하고 그룹화할 수 있는 인터페이스의 필요성을 느꼈습니다. 이를 위해 react-beautiful-dnd 라이브러리를 선택하여 직관적이고 부드러운 드래그 앤 드롭 경험을 구현했습니다. react-dnd가 아니라 react-beautiful-dnd를 선택한 이유가 무엇인가요?react-dnd는 react-beautiful-dnd보다 자유도가 높고, 커스텀하기에도 훨씬 유리하다는 장점이 있습니다. 하지만 위치 변경 애니메이션이나 드래그 후 이동 로직을 직접 정의해야 한다는 단점이 있었습니다.저는 이번 과제에서 복잡한 커스텀 작업이 필요하지 않았고, 단순히 위아래로 요소를 이동하면서 기본적인 애니메이션이 자연스럽게 적용되는 라이브러리가 .. 더보기
[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가 중복되어 저장되면서 데이터베이스가 불필.. 더보기

티스토리툴바