💡툴팁 컴포넌트란?툴팁(Tooltip) 컴포넌트는 사용자가 인터페이스 요소에 마우스를 올리거나 초점을 맞출 때, 추가적인 정보를 제공하는 작은 팝업 창입니다. 일반적으로 짧고 유용한 설명이나 가이드를 보여주는 데 사용됩니다. 툴팁은 사용성 향상과 사용자 경험 개선에 중요한 역할을 합니다.이 컴포넌트는 주로 다음과 같은 상황에서 사용됩니다.아이콘 설명축약된 정보의 확장폼 필드의 도움말버튼 또는 링크의 추가 정보 툴팁 컴포넌트를 위해 고민할 점툴팁의 위치툴팁 컴포넌트를 개발할 때, 기본적으로는 툴팁을 호출하는 부모컴포넌트에서 원하는 위치를 지정할 수 있도록 합니다. 하지만, 이렇게 호출된 툴팁이 스크롤에 가리거나 유저의 뷰포트에 보이지 않는 경우도 고려할 필요가 있다 생각합니다. 툴팁이 길어지는 경우나 화..
분류 전체보기
탭메뉴 컴포넌트 개발하기💡탭메뉴 컴포넌트란?탭 메뉴(Tabs) 컴포넌트는 사용자 인터페이스(UI)에서 여러 콘텐츠를 공간 효율적으로 표시하기 위해 사용되는 UI 패턴입니다. 여러 개의 탭을 제공하여 사용자가 클릭하거나 선택할 때마다 다른 콘텐츠를 표시하도록 설계되었습니다. 이는 사용자가 한 화면 내에서 빠르고 직관적으로 다양한 콘텐츠를 탐색할 수 있게 합니다.탭 헤더(Tab Header)각 탭을 나타내는 버튼이나 링크로 구성됩니다.일반적으로 수평으로 정렬되며, 선택된 탭은 활성화 상태(active)를 표시합니다.예를 들어, 현재 선택된 탭에 강조 표시(예: 굵게, 밑줄, 색상 변경)가 추가됩니다.탭 콘텐츠(Tab Content)각 탭에 해당하는 실제 콘텐츠 영역입니다.선택된 탭에 따라 관련 콘텐츠만 표..
💡아코디언 컴포넌트란?아코디언 컴포넌트는 클릭(또는 탭)과 같은 사용자 동작에 반응하여 관련 콘텐츠를 확장하거나 축소하는 방식으로 작동합니다. 각 아코디언 항목은 보통 두 가지 주요 요소로 구성됩니다헤더(Header): 제목이나 트리거 역할을 하며, 클릭 시 콘텐츠가 열리거나 닫힙니다.패널(Panel): 헤더에 연결된 숨겨진 콘텐츠 영역입니다.이 컴포넌트는 직관적인 인터랙션 디자인을 제공하며, 특히 다음과 같은 상황에서 유용합니다FAQ(자주 묻는 질문) 섹션설정 및 구성 메뉴다단계 정보 표시 아코디언 컴포넌트를 위해 고민할 점하나만 열기 vs 모두 열기사실 이 부분은 개발자 입장에서 고민하기보다는 유저 입장에서 기획자, 디자이너와 함께 고민하는 것이 더 좋다고 생각합니다.개발적인 부분에서는 각 아코디..
2024년이 끝나가면서, 지난 7월부터 시작된 대한상공회의소 팀메이트 멘토멘티단 1기 활동도 마무리되었습니다. 이번 활동은 제가 취업 후 회사 외에서 처음으로 참여한 공식적인 프로그램이었기에 설렘도 컸고, 그만큼 많은 기억에 남는 소중한 경험이었습니다.팀메이트 활동에서 얻은 경험들팔로워였던 내가 멘토로!?멘토멘티 활동에서 가장 인상 깊었던 점은 제가 멘토로서 멘티를 이끌어야 하는 역할을 맡게 되었다는 점이었습니다. 주니어 개발자로서 평소에는 주로 팔로워의 입장에서 리더의 의견을 따르거나 보조하는 역할에 익숙했지만, 이번에는 제 의견을 제시하고 방향을 제시해야 했습니다. 처음에는 제가 낸 의견이 상대방에게 어떻게 받아들여질지, 혹시 멘토링 활동이 멘티에게 큰 도움이 되지 못하면 어쩌나 하는 고민이 많았습니..
가상스크롤가상스크롤이란?가상스크롤은 유저의 입장에서 직접 보이는 요소들만 렌더링 하고, 스크롤에 가려지는 부분은 렌더링 하지 않는 프런트엔드 최적화기법입니다. 데이터 수가 많지 않다면 브라우저가 DOM을 그리는데 무리가 없지만, 그려야 하는 DOM의 개수가 수천, 수만단위를 넘어가게 된다면 점점 부하가 발생하게 됩니다. 이때, 가상스크롤을 활용해서 보이는 부분만 렌더링 하고 나머지 데이터는 유저의 스크롤에 맞춰 렌더링 한다면 DOM의 수가 많아져 브라우저의 부하가 발생하는 문제를 막을 수 있습니다.직접 개발 이유메신저 프로젝트를 개발하면서 하나의 채팅방에 수천, 수만단위에 데이터가 쌓일 수 있고, 메시지 양의 상한선이 없기 때문에 가상스크롤 사용이 필수적입니다. 오픈소스로 대표적인 가상스크롤 라이브러리는..
우아한 타입스크립트 스터디 회고스터디 시작 동기React, Vue, Next 등 어떤 프레임워크를 사용하더라도 자연스럽게 타입스크립트를 사용해왔습니다. 하지만 조금만 복잡한 타입을 작성하거나 읽어야 할 때마다 어려움을 겪으면서, 제가 타입스크립트를 자주 사용하면서도 제대로 이해하지 못하고 있다는 생각이 들었습니다.사실, 취업 준비를 하면서 자바스크립트나 리액트는 책을 읽고 인강을 보며 개념적인 부분을 공부했지만, 타입스크립트는 따로 학습한 적이 없었습니다. 그러던 중 타입스크립트 공부의 필요성을 절감했고, 회사 동기들에게 이 고민을 이야기했더니 모두 비슷한 고민을 하고 있었습니다. 그렇게 자연스럽게 스터디를 시작하게 되었습니다.스터디 진행 방식회사에서 처음으로 진행하는 스터디였기 때문에 어떻게 운영할지에..
배포 사이트 들어가며 저번 추상화강의에 이어서 비즈니스 로직과, Compound Componenet, 그리고 캡슐화에 대한 내용까지 들었습니다. 저도 프로젝트를 진행하면서 재사용성을 올릴 수 있는 방법에 대해 고민했었고, 비즈니스 로직까지 구분했던 경험이 있었습니다. 이런 경험을 바탕으로 내 프로젝트에 어떻게 적용할 수 있을까를 고민하며, 강의를 들었더니 '이거 조금 분리할 수 있겠는데?'라는 아이디어를 얻었고, 직접 리팩토링까지 해보게 되었습니다. 우선 저의 목표는 아래 컴포넌트의 비즈니스 로직을 분리하는 것입니다. 아래 컴포넌트는 이모지를 클릭시 바로 서버에 데이터를 전송하고, 이용자에게 평가가 반영되었다는 토스트 메시지를 이용자에게 보여주는 컴포넌트입니다. // FeedbackSele..
원티드 수업을 통해서 액션, 데이터, 계산을 나누어 컴포넌트 및, 함수를 추상화하는 방법에 대해 배웠습니다. 저 역시 사라 마라 웹 서비스 프런트엔드 개발을 하며 고치긴 해야 했는데, 그 방법을 찾지 못해 고민이었던 코드가 있었는데, 이번 기회에 일단 액션, 데이터, 계산을 담당하는 코드를 분리하는 작업부터 리팩토링을 해보았습니다. 코드 설명 위 코드는 챗 GPT한테 할 질문을 이용자에게 받고 대답받는 로직을 수행하는 모듈화 한 훅입니다. 하지만, 그 과정에서 너무 많은 역할을 하고 있습니다. 사용자에게 받은 데이터를 서버에 전송합니다(initial 단계) 전송후, questionId를 받으면, ReactQuery를 활용하여 응답이 완성될 때까지 확인하는 데이터요청을 보냅니다. (process 단계) 응..
