Portfolio

1. React 4강 (D-51)

1. Upload 컴포넌트

💡

Drag & Drop을 통해 업로트 기능 만들기

input type=”file” 을 통해 local의 file을 선택할 수 있다.

props로 컴포넌트 사이의 들어갈 children을 함수의 형태로 내려주어, 하위 컴포넌트로 data를 넘겨줄 수 있다.

부모: typeof children === “function” ? children(file) : children
자식 : <Upload>{(file) => <button> {file ? file.name : "Click me"}</button>}</Upload>

1.2 Drag and Drop

droppable의 값에 따라 가능여부 체크

drag시 e.dataTransfer에 해당 파일 정보를 가지게 되므로,
각각의 DragEnter, DragLeave, DragOver, DragDrop에 대한 이벤트를 정의해주고 할당해준다.

DragEnter: e.dataTransfer가 있다면 setDragging(true)
DragDrop : e.dataTransfer.files[0]를 현재 state에 저장하고 드래깅을 종료(setDragging(false))

e.dataTransfer 에 대한 추가 공부 필요

children으로 함수를 넘겨주어 사용하는 패턴 어려움을 느낌

2. Badge 컴포넌트

찾아볼 것

sup 태그란?

윗첨자를 의미

기능

maxConunt 활용 기능 추가

{maxCount && count > maxCount ? ${maxCount}+ : count}

동적인 색상 변경 기능 추가

color, bgColor 받아 적용해주기

알림이 없을 경우는 보여지지 않도록 하는 기능

count === 0 && showzero ? null : <Badge>

주의사항

BadgeContainer에 position:relative로 기준점 잡고, Super를 통해 absolute로 위치 지정하기
뱃지를 달아줄 contents를 children으로 받아 적용해주기

3. Icon 컴포넌트

💡

feather 라이브러리로 받아온 icon을 랩핑하여, 편하게 사용하기

더 찾아볼 것

Buffer.from으로 svg파일을 image로 변호나시키는 것

base64란?
const base64 = Buffer.from(svg, "utf8").toString("base64");
<img src={data:image/svg+xml;base64,${base64}} alt={name} />

기능

받아온 icon 회전하기

props

name, size, strokeWidth, color

2. React 5강 (D-52)

Avatar

💡

이미지를 특정모양(원형,네모)으로 깎아서, 보여주는 컴포넌트

더 찾아볼 것

new Image() 객체를 통한 이미지 로딩

props

src,size,alt, lazy, threshold,placeholder, mode: Image컴포넌트에 넘겨줄 prop
shape: [circle, round, square]

기능

new Image() 브라우저 객체를 통한 부드러운 이미지로딩
AvatarGroup (생략)

여러 Avatar를 자식으로 가지고 있는 컴포넌트

이중삼항연산자를 객체를 통해 가독성 높여주기

before : shape === ‘circle’ ? ‘50%’ : shape === ‘round’ ? ‘4px’ : ‘0px’
After : shape ⇒ shapeToCssValue[shape]

Slider

💡

slider는 버튼 음량 조절과 같이, 특정 data의 크기를 드래그를 통해 증감할 수 있는 컴포넌트이다. 핸들과 트랙(Track), 레일(Rail)으로 구성

Props

min, max : 보여줄 item의 개수
step
defaultValue:
onChange: 부모컴포넌트로의 EVENT 전달

state

dragging : 현재 dragging 여부 관리
value: slider에서 조절하는 data 값

기능

핸들을 잡고 끌어서 움직이도록 하는 기능

handleMouseDown : dragging을 true로
handleMouseUp - dragging을 false로
handleMouseMove

useEffect에서 관리 ([value, min, max, dragging, slideRef,handle이벤트함수)
slider의 위치 및 넓이 구하기

handleOffset = e.pageX - slideRef의 offsetLeft
slideWidth = slideRef.offsetWidth
track = handleOffset / sliderWidth

0보다 작으면 min으로 처리
1다 크면 max로 처리

track내의 위치 = min + (max-min) * track

css로 현재 위치 보여지도록 하기

Track 만들기

Track은 현재 value만큼 지나간 길애 Color를 입히는 것

tip event를 전역에 잡아준 것은 사용성을 고려한 것.

container 내부에서만 마우스를 움직이지 않으므로

Progress

💡

slider 컴포넌트를 기반으로, 이벤트를 제거하고, Rail과 Track을 통해 구성

props

value : 현재 진행 % 값 입력 (Number)

state

기능

애니메이션 기능

Track의 배경에 스트라이프 지정하기

background-image:linear-gradient(각도, 색상 - to지점, 색상 -시작지점)

애니메이션을 통해 미용실 기둥 돌아가는 효과 주기


{
	@keyframes move { 
		from { 
			background-position: 0 0;
		} to {
			background-position: 40px 0;
		}
	}
	animation: move 1000ms linear infinite;
}

@keyframes move { from { background-position: 0 0;} to{ background-position: 0 0;} }
animation: move 1000ms linear infinite

더공부할 것

css: linearr-graient

background-image: linear-gradient(90deg, red 20% ,yellow 80%)

90도(수평으로), 20% 까지는 red, 80%~100%까지는 yellow만 출력, 사이 공간인 20%~80%의 gradient 색상 적용

[CSS] linear-gradient 사용법 그리고 예제

CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다(출처 MDN). 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있습니다. 즉 background-color 또는 color 와 같은 속성에는 사용할 수 없습니다. linear-gradient() 함수 사용법은 다음과 같습니다.

https://penguingoon.tistory.com/267

keyframe 과 animation

useState와 transition 속성을 통해, 현재 loading 정도를 setState로 관리하여, 실제 실무에 적용해볼 수 있음

Divider

💡

컴포넌트들간의 구분선을 통해 여백을 만들어주는 컴포넌트

결과물

수평

수직

props

type : 수직과 수평을 구분하는 속성 (String[’horizontal’, ‘vertival’])
size : margin값

style

수직과 수평의 경우 나누어서, class로 스타일 지정

기능

수직일 경우 좌우로 margin 값을 size 만큼 넣어주고,
수평일 경우 위아래로 margin 값을 size 만큼 잡아준다.

Skeleton

💡

로딩 중에서 데이터를 받아오기 이전의 모습을 미리 보여주는 컴포넌트 for UX

내부 컴포넌트

Base를 기반으로 Box, Circle, Paragraph 등에 적용하여 사용
Base 컴포넌트

style만 적용된 div
줌인 및 흐르는 로딩효과 적용

props

Box ⇒ width, height
Cirlcle ⇒ size
Paragraph ⇒ line

기능

처음 로딩시 줌인 효과
로딩 시 흐르는 효과

Paragraph의 경우 마지막 line의 width를 조금 적게 주어, 문단 느낌을 살려줄 수 있다.

Input

💡

사용자 확장성을 위해 Wrapper로 감싼 Input 형태의 컴포넌트

props

label ⇒ input에 대한 설명을 담고 있는 부분(String)
block, readOnly, invalid, required ,disabled ⇒ input자체 속성 컨트롤 (Boolean)
WrapperProps ⇒ Wrapper에 cutom한 props를 넘겨주고 싶을 때 사용 (Object)
props ⇒ input에 대한 추가 Props(className, label 등) 설정 (Object)

style

Input

width, padding, border, border-radius ,

Wrapper

display: block에 따른 구분

Select

💡

input과 유사하지만 option들을 가지고 선택할 수 있는 컴포넌트

props

data
label
placeholder
block, invalid, required, disabled
WrapperProps

기능

type에 따른 다른처리

string과 Object를 구분하여 처리

Object { label : String, value: String }

options

select할 수 있는 options로 구분

placeholder 처리

placeholder 있을 경우에만 value=”” hidden을 통해 트릭처리가능

주의

html의 select태그를 사용

54일차 배운 것 정리

목차