injae

LOOKY 프로젝트에 새로운 기능을 고민하다가 이미지를 업로드하기 전에 해당 이미지 스타일을 AI에게 평가를 받을 수 있는 기능을 추가하기로 하였다. 이미지와 관련된 AI를 제공하는 API가 많지않아서 힘들었지만 그러다가 GEMINI API를 발견했다 !https://blog.google/technology/google-deepmind/gemini-model-updates-february-2025/?fbclid=IwY2xjawISLy9leHRuA2FlbQIxMQABHbqJ-zu5b84bNx1LkghYdtz5m3bqQCwPhqALJ_zWdPnb6dQiqvqacdiXgA_aem_ghSNBqDFnh8AfLY7QxXqNA Gemini 2.0 is now available to everyoneWe’re annou..

Zustand는 작은 용량, 빠른 속도 그리고 확장 가능성을 자랑하는 상태 관리 라이브러리.Zustand, redux, context api등 중에서 전역 상태는 어떻게 관리하면 좋을지 고민을 하게 되었다. 1. 러닝커브vanilla js 기준 공식 홈페이지의 20줄 정도의 예시를 읽어도 쉽게 이해 및 적용이 가능할 정도의 완만하게 낮은 러닝커브를 가지고 있다. 비교군으로 redux를 사용하여 일정 이상 프로젝트를 진행하면, 많은 보일러플레이트와 복잡도를 중간에 참여한 협업자가 이해하려면 꽤나 큰 리소스가 든다. Redux는 유연한 방식으로 어플리케이션의 상태를 관리하기 위한 고급 기능을 제공하는 강력한 라이브러리이다. 규모가 크고 복잡한 소프트웨어 어플리케이션에서 흔히 사용되며 상태 관리에 보다 강력한..

Looky 프로젝트는 페이지에 사용자들이 올린 수많은 이미지들이 표시된다. 웹 페이지에서 이미지는 가장 큰 용량을 차지하는 요소 중 하나이기에 이미지 크기를 최적화하면 로드 해야 할 리소스 용량을 절감하여 성능 개선이 가능할 것이다.이미지 최적화 방법 ?차세대 이미지 형식 사용차세대 이미지 형식인 WebP와 AVIF를 사용하면 이미지 품질을 유지하면서 파일 크기를 크게 줄일 수 있다.WebP구글에서 개발한 이미지 형식으로, 손실 및 무손실 압축을 모두 지원하며 JPEG나 PNG보다 뛰어난 압축 효율을 제공.cwebp 커맨드라인 인코더를 사용하거나 Squoosh (GoogleChromeLabs 의 이미지 압축 웹앱) 를 통해 인코딩을 가능.이미지 Lazy Loading사용자가 실제로 이미지를 볼 때까지 로..

파이어 베이스에서 기본적으로 컬렉션, 문서, 정렬, 등등을 구현할 수 있는 다양한 기능을 제공해준다. import { collection, getDocs, query, doc, where, addDoc, orderBy, updateDoc, increment, limit, deleteDoc, QueryDocumentSnapshot, startAfter, . . . } from "firebase/firestore";  1. 데이터 필터링collection(db, "articles"): Firestore의 데이터베이스(db)에서 articles 컬렉션을 참조 Firestore의 query 객체를 생성 후 where절과 맞는 조건들과 일치하는 데이터들을 참조 ,그리고 쿼리..

Looky 프로젝트의 백엔드를 대체하여 파이어베이스를 사용하였다. 파이어베이스에서 Cloud Firestore를 이용하였는데, 구조는 컬렉션을 생성하여 내부에 여러 문서들이 존재하고 문서마다 필드를 추가할 수 있는 형식이었다. 처음 이 클라우드 파이어스토어를 보았을때 컬렉션은 테이블, 여러 문서들은 테이블의 튜플, 그리고 그 문서에 추가할 수 있는 필드들이 속성(Attribute)의 개념을 가지고 있다고 생각을 하고 이에 맞게 초안 데이터베이스의 구조를 짜보았다. 파이어베이스는 RDBMS가 아닌 NOSQL이기 때문에 아래에 짠 구조와 다른 방향의 구조로 만들게되었다.( RDBMS는 RDB를 관리하는 시스템이며 RDB는 관계형 데이터 모델을 기초로 두고 모든 데이터를 2차원 테이블 형태로 표현하는 데이터베..

Looky 프로젝트에 사진을 업로드 할 시 원하는 부위에( 옷 착용 부위 ) 태그를 이동시킬 수 있고, 이동된 태그들의 좌표를 DB에 담는 기능을 구현하려고 사용한 라이브러리이다. ( 리액트 환경에서 드래그 앤 드롭 인터페이스를 구현하도록 해주는 라이브러리 )npm i react-dnd react-dnd-html5-backend  DndProvider와 HTML5Backend가 설정한다.DndProvider 로 item 들을 감싸준다.  HTML5Backend: 브라우저의 HTML5 Drag and Drop API를 활용하기 위한 백엔드입니다.DndProvider: 드래그 앤 드롭 관련 컴포넌트를 감싸는 최상위 Provider로, 하위 컴포넌트에서 useDrag 및 useDrop을 사용할 수 있게 합니다..

에러바운더리는 리액트16에서 나온 개념으로 js에러를 기록하여 깨진 컴포넌트 대신 폴백 UI를 보여주는 리액트 컴포넌트다. getDerivedStateFromError()와 componentDidCatch()를 정의한 클래스형 컴포넌트를 만들어야 한며,getDerivedStateFromError()를 사용해서 fallback component를 보여주고, componentDidCatch()를 사용해서 에러 내용을 기록하는 형태로 사용하면 된다. 하지만 react-error-boundary 라이브러리로 함수형 컴포넌트방식으로 에러바운더리를 사용할 수 있기 때문에 라이브러리를 이용하여 함수형 컴포넌트 방식으로 구현하였다.  1. 리액트 쿼리와 에러바운더리 적용 문제기본적으로 에러바운더리 컴포넌트를 만들어서 ..

COWERKER의 에러 핸들링 부분을 리펙토링 진행하였다!우선 프론트에서 처리하는 에러핸들링을 살펴보면프론트에서의 에러 핸들링JS의 try/catch문react-query의 onError옵션 (API에 관한 에러 처리)axios 설정 (API에 관한 에러 처리)Error boundary ( 클라이언트 쪽의 컴포넌트의 렌더링 문제가 발생했을 때 보여줄 컴포넌트 정의 및 경계 )next.js 에서 제공되는 에러핸들링 (404, 500, error 페이지)1. 에러 관심사의 분리앞서 정리한 에러처리들을 모두 사용한다면 중복된 에러처리를 하거나, 유지보수가 어려워질 수도 있다. (axios와 react-query, next의 error page등은 중복으로 에러핸들링을 하고 있을 수도 있음.)어떤 에러를 기준으..

Debounce사진 처럼 와인가격을 input으로 조절하면 그 범위에 있는 가격의 와인데이터들이 불러와지는 로직을 짯는데 인풋의 gap이 하나라도 바뀔때마다 get요청을 보내기때문에 드래그를 할때마다 api get요청을 우수수 받는 문제가 있었다. 이를 디바운싱(debouncing) 과 쓰로틀링(throttling)을 이용하여 개선해보고자 하였다. 둘 중 어느 것을 사용하는게 적합할까?  디바운싱은 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것쓰로틀링은 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 필터에서 사용자가 게이지 바를 움직일 때마다 API 요청을 보낸다면, 디바운싱을 통해 입력이 끝난 시점에만 (즉 마지막 함수 호출 시점) 요청이 이루어지는게 좋..

버추얼 스크롤팀 페이지에서 팀내의 할 일 목록, 멤버의 데이터를 불러와서 페이지에 뿌려야하는 부분이다.{ "teamId": "string", "image": "string", "name": "string", "id": 0, "members": [ { "role": "ADMIN", "userImage": "string", "userEmail": "string", } ], "taskLists": [ { "groupId": 0, "name": "string", "id": 0, } ]} API상으로 GetGroup요청 한 번으로 팀과 연관된 모든 할 일 목록들과 멤버들의 데이터를 불러올 수 있도록 설정되어있지만, 할 일 목..