💡툴팁 컴포넌트란?툴팁(Tooltip) 컴포넌트는 사용자가 인터페이스 요소에 마우스를 올리거나 초점을 맞출 때, 추가적인 정보를 제공하는 작은 팝업 창입니다. 일반적으로 짧고 유용한 설명이나 가이드를 보여주는 데 사용됩니다. 툴팁은 사용성 향상과 사용자 경험 개선에 중요한 역할을 합니다.이 컴포넌트는 주로 다음과 같은 상황에서 사용됩니다.아이콘 설명축약된 정보의 확장폼 필드의 도움말버튼 또는 링크의 추가 정보 툴팁 컴포넌트를 위해 고민할 점툴팁의 위치툴팁 컴포넌트를 개발할 때, 기본적으로는 툴팁을 호출하는 부모컴포넌트에서 원하는 위치를 지정할 수 있도록 합니다. 하지만, 이렇게 호출된 툴팁이 스크롤에 가리거나 유저의 뷰포트에 보이지 않는 경우도 고려할 필요가 있다 생각합니다. 툴팁이 길어지는 경우나 화..
개발
💡아코디언 컴포넌트란?아코디언 컴포넌트는 클릭(또는 탭)과 같은 사용자 동작에 반응하여 관련 콘텐츠를 확장하거나 축소하는 방식으로 작동합니다. 각 아코디언 항목은 보통 두 가지 주요 요소로 구성됩니다헤더(Header): 제목이나 트리거 역할을 하며, 클릭 시 콘텐츠가 열리거나 닫힙니다.패널(Panel): 헤더에 연결된 숨겨진 콘텐츠 영역입니다.이 컴포넌트는 직관적인 인터랙션 디자인을 제공하며, 특히 다음과 같은 상황에서 유용합니다FAQ(자주 묻는 질문) 섹션설정 및 구성 메뉴다단계 정보 표시 아코디언 컴포넌트를 위해 고민할 점하나만 열기 vs 모두 열기사실 이 부분은 개발자 입장에서 고민하기보다는 유저 입장에서 기획자, 디자이너와 함께 고민하는 것이 더 좋다고 생각합니다.개발적인 부분에서는 각 아코디..
가상스크롤가상스크롤이란?가상스크롤은 유저의 입장에서 직접 보이는 요소들만 렌더링 하고, 스크롤에 가려지는 부분은 렌더링 하지 않는 프런트엔드 최적화기법입니다. 데이터 수가 많지 않다면 브라우저가 DOM을 그리는데 무리가 없지만, 그려야 하는 DOM의 개수가 수천, 수만단위를 넘어가게 된다면 점점 부하가 발생하게 됩니다. 이때, 가상스크롤을 활용해서 보이는 부분만 렌더링 하고 나머지 데이터는 유저의 스크롤에 맞춰 렌더링 한다면 DOM의 수가 많아져 브라우저의 부하가 발생하는 문제를 막을 수 있습니다.직접 개발 이유메신저 프로젝트를 개발하면서 하나의 채팅방에 수천, 수만단위에 데이터가 쌓일 수 있고, 메시지 양의 상한선이 없기 때문에 가상스크롤 사용이 필수적입니다. 오픈소스로 대표적인 가상스크롤 라이브러리는..
배포 사이트 들어가며 저번 추상화강의에 이어서 비즈니스 로직과, Compound Componenet, 그리고 캡슐화에 대한 내용까지 들었습니다. 저도 프로젝트를 진행하면서 재사용성을 올릴 수 있는 방법에 대해 고민했었고, 비즈니스 로직까지 구분했던 경험이 있었습니다. 이런 경험을 바탕으로 내 프로젝트에 어떻게 적용할 수 있을까를 고민하며, 강의를 들었더니 '이거 조금 분리할 수 있겠는데?'라는 아이디어를 얻었고, 직접 리팩토링까지 해보게 되었습니다. 우선 저의 목표는 아래 컴포넌트의 비즈니스 로직을 분리하는 것입니다. 아래 컴포넌트는 이모지를 클릭시 바로 서버에 데이터를 전송하고, 이용자에게 평가가 반영되었다는 토스트 메시지를 이용자에게 보여주는 컴포넌트입니다. // FeedbackSele..
원티드 수업을 통해서 액션, 데이터, 계산을 나누어 컴포넌트 및, 함수를 추상화하는 방법에 대해 배웠습니다. 저 역시 사라 마라 웹 서비스 프런트엔드 개발을 하며 고치긴 해야 했는데, 그 방법을 찾지 못해 고민이었던 코드가 있었는데, 이번 기회에 일단 액션, 데이터, 계산을 담당하는 코드를 분리하는 작업부터 리팩토링을 해보았습니다. 코드 설명 위 코드는 챗 GPT한테 할 질문을 이용자에게 받고 대답받는 로직을 수행하는 모듈화 한 훅입니다. 하지만, 그 과정에서 너무 많은 역할을 하고 있습니다. 사용자에게 받은 데이터를 서버에 전송합니다(initial 단계) 전송후, questionId를 받으면, ReactQuery를 활용하여 응답이 완성될 때까지 확인하는 데이터요청을 보냅니다. (process 단계) 응..
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/ Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy. 프로젝트를 할 때마다, 이러한 에러들이 콘솔에 찍히는 경험이 있습니다. 웹 개발자라면 당연히 만나는 에러지만 만날 때마다 썩 좋은 경험은 아닙니다. 이번에야 말로 CORS..
이전 글을 통해서 사라 마라 서비스의 문제점과 이를 해결할 수 있는, 아토믹 디자인에 대해 공부할 수 있었습니다. 이번에는 직접 사라마라 서비스의 전체적인 코드를 리팩터링 하면서, 아토믹 디자인 패턴을 도입하였습니다. 1. 컴포넌트를 다섯단계로 구분하기 아토믹컴포넌트를 도입하면서, 가장 먼저 한 것은 저만의 컴포넌트 기준을 가지는 것이었습니다. 앞서 아토믹 디자인 패턴을 도입하면서 대부분에 사람들이 기준 그대로 따랐을 때, molecules와 organisms의 모호성 때문의 고민하는 것을 보았기 때문에, 저는 이 부분을 명확히 하고자 했습니다. 저의 기준은 다음과 같습니다. 1. atoms - 더 이상 분해가 되지 않는 컴포넌트 (ex. Text, Input, Button, Label) atoms는 아..
사라마라 프로젝트를 진행하면서 Container-Presentational과 비슷한(?) 패턴을 사용했습니다. "비슷한"이라는 의미는 컴포넌트의 설계와 정의가 명확하지 않다는 의미였습니다. 이는 프로젝트를 진행하면서도 새로운 팀원이 들어왔을 때, 프로젝트와 설계방법에 대해 전달하기도 힘들었으며, 새로운 컴포넌트를 제작할 때 기존의 설계방식을 따르기 어렵게 만들었습니다. 사라마라 프로젝트의 문제점 낮은 컴포넌트 재사용성 비슷해 보이는 컴포넌트더라도 사용하는 기능이 달랐기 때문에 재사용하기 힘들었습니다. 재사용성을 고려하며 컴포넌트를 설계하려고 노력했지만, 기능과 디자인이 결합된 컴포넌트를 재사용하기에는 쉽지 않았습니다. 특히, 사라마라 프로젝트에서 버튼의 label은 로고로 대체한 경우가 많았는데 이때, ..
