bkdragon's log

... 이런 html 구조가 있다. tailwind로 간단히 작성했다..div1 { flex : 1; display : flex; flex-direction : column; overflow : auto;}첫번째 div는 이런 스타일이 적용이 되어 있는 상태이다.flex : 1 은 간단하게 설명해서 기본 크기를 0으로 설정하고, 유연하게 늘어나거나 줄어들 수 있게 된다.두번째 div 에는 해당 속성이 적용이 안되어있어서 첫번째 div가 두번째 div를 제외한 크기를 차지하게 된다.이렇게만 보면 첫번째 div는 전체에서 가능한 만큼의 공간을 차지하고 내부 컨텐츠가 늘어남에 따라 스크롤이 생길 것으로 예상이 되는데 실제론 그렇게 안된다. https://stackoverf..

Carousel 은 슬라이드쇼를 말한다. 회전목마라는 뜻을 가지고 있다. 이벤트와 같은 것들을 광고하는 용도로 사용되는 것을 종종 볼 수 있다. 예시 커머스 (ex. 쿠팡) 상품의 사진을 Carousel을 통해 보여준다. Netflix 인기 작품, 추천 작품을 Carousel을 통해 보여준다. 장점 눈에 띈다. 주목하게 되는 효과가 있다. 효율적인 공간활용. 페이지를 넘기지 않고도 다양한 정보를 제공할 수 있다. 다양한 variation 이 있다. 자동으로 돌아가게 한다던지 다음 요소를 약간 노출한다던지, 버튼을 통해 다음 요소로 넘긴다던지 등이 있다. 단점 웹 접근성 문제가 생길 수 있다. 성능 저하. 웹 페이지 로딩 속도에 영향을 미칠 수 있다. 다양한 variation. 이는 단점이 될 수도 있다고..

Button은 아주 많이 사용되는 UI이다. 그냥 button 태그를 사용해도 되고 스타일 같은 것들을 지정해서 변경하면서 재사용 할 수 있게 컴포넌트를 만들어서 사용할 수도 있다. 조만간 Chakra UI를 사용할 일이 있어서 미리 공부할 겸 간단하게 컴포넌트를 작성해보았다. CustomButton.tsx import React, { PropsWithChildren } from 'react'; import { Button, ButtonProps } from '@chakra-ui/react'; type Props = ButtonProps; const CustomButton = (props: PropsWithChildren) => { const { children, ...rest } = props; ret..

제출 폼은 UI 요소라고 라기 보단 개발용어(?)의 느낌이다. 물론 아주 개인적인 의견이다. 재사용성 있게 만들어보고 싶어서 만들어보았다! 검증을 편하게 하기 위해 react-hook-form을 사용해서 만들었다. react-hook-form의 간단한 예제 코드로 역할도 할 수 있는 글이 되지 않을까싶다. 우선 전체를 담당하는 Form form.tsx interface Props { title: string; onSubmit: (data: TFormData) => void; list: InputList; } const Form = ({ title, onSubmit, list, }: Props) => { const { control, handleSubmit } = useForm({ criteriaMode:..

출처 : https://fourwingsy.medium.com/dropdown-컴포넌트-5d53820e3f4f 아래로 리스트가 나열되는 메뉴이다. 장점 공간을 절약 할 수 있다. 사용이 쉽다. 표준이다. select와 option 태그를 사용해서 아주 쉽게 기능을 만들 수 있다. 입력값이 정해져 있기 때문에 예외처리가 편하다. 단점 선택지가 많아지면 피로도가 생길 수 있다. (예를 들어 생일을 선택하는 경우 12월 31일 생이면 귀찮을 것이다.) 작다(?) 작아서 못 볼 수도 있을 것 같다. 그렇다고 크게 하자니 그것도 이상한 느낌을 준다. 선택지가 두개 뿐이면 toggle 형식의 버튼을 사용하는 것이 좋을 것 같고 너무 많은 옵션을 가진다면 직접 입력하게 하고 예외처리를 추가하는 것이 사용자 경험에 좋..

햄버거 버튼과 비슷하게 토글 형태로 컨텐츠를 보여준다. 다만 아코디언처럼 컨텐츠가 아래로 나오고 여러개가 붙어있다. 출처 : WEBCLUM Blog (https://webclub.tistory.com/288) 장단점 장단점은 햄버거 버튼과 비슷한 것 같다. 정보에 대한 타이틀을 보이게 해두고 사용자로 하여금 그 정보가 필요할 때 열어보게 하는 식으로 사용하기 좋을 것 같다. 채용사이트에서 그런 형태를 많이 보았다. Q. 중복 지원은 불가능 한가요? ⇒ 이런 타이틀을 가진 버튼을 누르면 A. 가능합니다. 다만… ⇒ 설명이 나온다. 구현 accordianMenu.tsx import React, { useState } from 'react'; import styles from './index.module.sc..

출처 : 위키백과 (https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC) 햄버거와 비슷해서 붙여진 이름이다. 내비게이션 메뉴를 토글해서 보이거나 보이지 않게 하는 역할로 주로 사용된다. 장점 공간 절약 작은 화면 공간에서 내비게이션 메뉴를 효과적으로 표시 할 수 있게 해준다. 익숙함 많이 사용되는 디자인이다 보니 많은 사람들에게 익숙하다. 이는 별도의 설명서나 학습과정이 필요 없기 때문에 굉장한 장점이다. 디자인 유연성 브랜드나 컨셉에 맞게 다양하게 커스터마이징이 가능하다. 예를 들어 햄버거 버튼을 눌러서 네비게이션 메뉴가 보이게 되면 X 모양으로 변하는 애니메이션을 통해 사용자 경험을 향상 시킬 수 있다. 단점 효율성..