최근 옵션 패널 UI를 구현하면서,컴포넌트를 좀 더 범용적으로 만들고 싶다는 욕심이 생겼다.그래서 TypeScript의 제네릭(Generic)을 이용한 추상화를 시도했다.결론부터 말하자면, 결과는 “굳이 그럴 필요는 없었다”였다.1. 시작은 단순한 옵션 패널이었다처음 작성했던 코드는 아래와 같다.입력창, 슬라이더, 색상 선택 UI를 나란히 배치하는 단순한 구조였다. 각 컴포넌트는 label + 입력 영역으로 구성되어 있었고,비슷한 형태의 레이아웃이 반복되고 있었다.또한 앞으로 다른 옵션(예: 테두리, 정렬 등) 을 추가할 계획도 있었기 때문에,이 구조를 그대로 늘려가면 관리가 점점 어려워질 것 같았다.그래서 “이 패턴을 하나의 컴포넌트로 추상화할 수 있지 않을까?”라는 생각을 하게 되었다.2..

커스텀 슬라이더를 구현하는 과정에서, CSS의 hover 효과가 정상적으로 작동하지 않는 상황을 마주했다.상황슬라이더의 구조는 단순했다. {/* 회색 배경 */} {/* 흰색 진행 바 */} {/* 투명 슬라이더 */}원래 의도는 이랬다:회색 바 위에 흰색 바가 진행도를 나타냄hover 시 회색 바의 색이 살짝 밝아지길 원함그런데 문제는,아무리 hover:bg-[#535764]를 줘도 hover가 먹히지 않았다.원인 추적원인은 금방 찾았다.input[type="range"]가 absolute로 맨 위를 덮고 있었던 것이다.즉, hover를 감지해야 하는 div 위를 투명한 input이 막고 있었던 것이다.첫 번째 시도: z-index처음엔 이렇게 생각했다.“그럼 input을 z-index로..

UI를 만들다 보면 마우스를 올렸을 때 색상이나 스타일이 살짝 바뀌는 효과를 자주 넣게 된다.보통은 CSS :hover나 Tailwind의 hover: 클래스로 간단히 해결된다.그런데 이번에 이런 상황이 있었다.슬라이더의 진행도를 JS로 계산해서 linear-gradient로 표현하고 있었는데,hover시에 어두운 부분의 색상을 살짝 바꾸고 싶었다.단순히 색만 바뀌는 게 아니라, 진행도가 JS 계산식으로 동적으로 결정되는 구조라서 hover: 클래스로는 적용이 불가능했다.왜냐하면 CSS의 :hover는 정적인 스타일 변경에만 적용되며, JS로 계산된 값에는 접근할 수 없기 때문이다. 슬라이더의 진행도(percent)를 기반으로 그라디언트를 계산하는 구조라서, hover 상태에서 이 값을 조정하려면 JS가..

ES6 화살표 함수 (Arrow Function)ES6에서 도입된 화살표 함수는 기존 함수와 바인딩 방식에서 차이가 있다. this를 자동으로 바인딩하여 클래스 내부에서 bind(this)를 사용할 필요가 없음 React 컴포넌트React에서 UI를 구성하는 독립적이고 재사용 가능한 코드 블록컴포넌트는 HTML, CSS, JavaScript를 조합하여 화면을 구성하는 역할을 함컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 방식으로 정의할 수 있음함수형 컴포넌트간결하고 직관적인 형태로 작성 가능useState, useEffect와 같은 React Hook을 활용하여 상태 및 생명주기 관리 가능const MyComponent = ({ name }) => { return Hello, {name}!; ..

MVC 패턴 vs MV 패턴일반적인 프레임워크(예: Angular, Spring 등)는 MVC(Model-View-Controller) 아키텍처를 사용.하지만 React는 MV(Model-View)만 사용하며, View(UI)만 신경 쓰도록 설계됨.규모가 커질수록 코드가 복잡해지고, 관리하지 않으면 성능 저하가 발생할 수 있음.React의 철학React는 "UI가 어떻게 생길지"만 고민하면 되도록 설계됨.하지만 이러한 방식은 CPU 점유율이 증가할 가능성이 있음.이유는 DOM 업데이트가 느리기 때문. Virtual DOMDOM은 왜 느릴까?DOM 자체는 빠름. 하지만 CSS, JS 재계산 과정이 느릴 수 있음.기존 방식: 데이터를 업데이트하면 전체 DOM을 다시 렌더링 → 성능 저하.Virtual DOM..

컴포넌트재사용 가능한 디자인 요소버튼, 네비게이션 바 등 반복적으로 사용되는 UI 요소를 컴포넌트로 생성 가능원본 컴포넌트를 수정하면 모든 인스턴스에도 자동 반영됨Ctrl + Alt + K인스턴스컴포넌트의 복사본(자식 요소)으로 원본과 연동됨원본 컴포넌트의 변경 사항이 인스턴스에 자동 적용됨Detach러 인스턴스와 원본 컴포넌트의 연동을 끊을 수 있음 >> 더 이상 원본 컴포넌트의 변경이 적용되지 않음배리언트 (Variant)컴포넌트의 다양한 상태를 관리하는 기능버튼(기본/호버/비활성화)이나 아이콘(활성/비활성) 같은 상태를 한 곳에서 관리 가능Properties에서 다양한 속성을 추가해 쉽게 변경 가능인터랙션 (Interaction)사용자 인터랙션(클릭, 호버 등)에 따른 동작을 설정하는 기능Proto..

UI/UX를 배워야 하는 이유활성 사용자 수와 평균 실행 횟수가 높은 기업일수록 수익성이 높고, 결국 더 큰 기업으로 성장할 가능성이 크다.하지만 서비스가 사용하기 불편하다면 사용자는 이탈할 것이고, 성공적인 비즈니스는 어렵다.따라서 UI/UX는 사용자 경험을 극대화하여 서비스의 성장을 돕는 핵심 요소다.피그마그룹, 프레임, 컴포넌트의 차이그룹 (Ctrl + G)단순 묶음 (레이어 정리용)내부 요소들이 독립적으로 움직일 수 있음프레임 (Ctrl + Alt + G)독립적인 영역 (화면 크기, 스크롤 등 제어 가능)화면/디자인 시스템을 만들 때 유용컴포넌트 (Ctrl + Alt + K)재사용 가능한 요소수정 시 연결된 모든 인스턴스에 반영됨컬러 토큰디자인 시스템에서 색상을 변수처럼 관리하는 것컬러 토큰을 사..

사용자에게 편리하고 유용한 환경을 제공하기 위해단순한 서비스를 넘어 사업으로, 문화로 확장하기 위해 CX : 고객이 제품이나 서비스를 인지, 탐색, 이용하는 전 과정에서의 경험을 설계하고 최적화 하는 작업아이폰 광고를 보고, 웹페이지를 봐서 아이폰 구매, 앱 이용CX > UI/UX UX사용자 경험 중심적인 관점에서 앱 또는 웹을 구상하고 설계하는 모든 단계UI실제로 사용자가 접하게 되는 부분. 즉, 시각적으로 드러나는 것들을 디자인하는 것 색의 역할⭐1. 브랜드 아이덴티티 각인2. 마케팅 관점에서 클릭을 유도(할인 정보)3. 방향을 제시(구매하기 버튼) 1. 주색 (Primary Color)UI  내에서 가장 메인으로 사용되는 색상으로 화면 내 클릭을 유도하는 버튼에 많이 사용된다. 주로 브랜드의 고유한..

이미지 저장 방식 변경문제상황기존에는 이미지 파일을 서버 파일 시스템에 저장하고, DB에는 이미지 경로를 저장하는 방식으로 구현.하지만 협업을 진행하면서 각자의 서버 파일 시스템에 이미지가 저장되는 상황에서 동기화 문제가 발생.DB에는 이미지 경로가 저장되어 있지만 서버 로컬 파일 시스템에는 해당 이미지가 없는 경우가 있어 이미지를 가져오지 못하는 상황 발생.해결방안동기화를 위해 백엔드 서버를 클라우드에 배포하여 사용하거나하나의 로컬 서버를 여러 사람이 공동으로 사용하는 방식으로 해결 사용자 인증, 로그인 유효시간 및 토큰 관리사용자 인증 및 토큰 관리백엔드는 Authorization 헤더를 통해 전달된 토큰을 검사하여 사용자의 로그인 상태를 관리.로그인 후, login 테이블에 email, token,..

Controller와 RestController의 차이점Controller: Controller에서는 리턴이 템플릿 이름RestController: RestController에서는 리턴이 컨텐츠가 됩니다. 반환값이 그대로 HTTP 응답의 본문으로 전달됨.카카오 로그인 과정사용자가 카카오 로그인 버튼을 클릭하면 카카오 로그인 API에 요청이 가고, 리다이렉트 링크가 반환이 리다이렉트 링크를 통해 카카오 로그인 화면으로 이동카카오 로그인 화면에서 아이디와 비밀번호를 입력하여 로그인카카오는 사용자의 정보 동의를 요청. 사용자가 동의를 하면, 카카오는 동의코드를 제공하고 이를 콜백 URL로 전달백엔드는 제공된 동의코드를 사용하여 카카오 서버에 액세스 토큰을 요청카카오는 액세스 토큰을 반환액세스 토큰을 이용해 카..