react-form-hook이라는 아주 편리한 훅을 사용 중이다. 지금까지 느낀 점 중 베스트였던 것은 state를 장황하게 만들 필요가 없다는 점! import { useForm } from "react-hook-form"; export const EditForm = () => { const methods = useForm({ defaultValues: { orgName: currentItem.name, orgCode: currentItem.code, }, }); const { register, setValue, getValues, watch } = methods; return ( setValue("orgName", e.target.value)} onBlur={() => watch("orgName")...

1. 타입 명시 type Lat = number; type Lng = number; export type Coordinates = [Lat, Lng]; export type Court = { nid: number; name: string; description: string; image: string[]; }; 이제 코트 데이터를 랜딩 페이지에서 불러와준다. 코트 데이터는 예약 현황을 주기적으로 체크해줘야하므로 revalidate를 낮게 줘야한다. 하지만 우선은 1시간으로 지정해뒀다. export async function getStaticProps() { const courts = (await import('../public/court.json')).default; return { props: { co..

'('가 나오면 1을더하고, ')'가나오면 1을 빼줘서 answer를 0으로 만들어준다. 어떤 경우에든 ')'가 먼저나오면 return false를 해야함을 고려한 나의 코드 function solution(s){ let answer = 0; s.split('').map((i, idx) => { if (answer == -1) { return false; } if (i == '(') { answer+=1; }; if (i==')') { answer-=1; } }) return answer == 0? true:false; } 다른 사람들의 코드를 보던 중 match를 이용한 사람의 코드 발견 function is_pair(s){ var result = s.match(/(\(|\))/g); return re..

애니메이션 중간중간 방향 또는 크기 등과같은 변화가 있는 지점을 keyframes라고 한다. animation 동작 중 hover가일어나면 동작 멈춤 .ball:hover { animation-play-state: paused; } Animation Event - animationstart - animationend - animationiteration - animationcancel 애니메이션 과정 요소를 브라우저에 그리기위해 계산된 결과를 가지고 레이아웃 구성 이때 이 요소가 레이어가될지 그냥 계산을 통해 움직임을 줄건지 결정된다. transform, opacity는 보통 레이어로 작동된다. 하지만 top, left, width, border, background 등과 같은 요소는 레이어가 아니어서 ..

duration - 초단위 transition time function - ease(default) - ease-in - ease-out - ease-in-out - linear transition property(값 자체가 숫자 value인 것들만 적용) - transform - background-color - width - height - etc.. delay(값만큼 지연되었다가 재생) - 초단위 박스 클릭시 오른쪽으로 1초간 300px 좌우 이동하며 색상 coral에서 블루로 변경 transition: 1s 2s; 일땐 2초 delay 색상에는 transition을 안주고 transform에만 주고싶다면 transition: transform 1s; transform, background에 각각..