😩 내 개성을 담은 블로그 디자인, 왜 다시 초기화했을까 1. 동기티스토리에서 유명한 HELLO 스킨을 썼었는데 다른 블로그들이랑 너무 똑같아 보였다.명색에 기술블로그인데 나만의 특색이 있어야 하지 않나.. ㅎㅎ (이유모를 자신감;)그래서 여러 블로그 레퍼런스를 찾기 시작했다! 2. 레퍼런스 수집내가 원하는 블로그 스타일은 다음과 같디.첫째, 블랙 & 화이트를 기반으로 한 깔끔한 느낌.둘째, 블로그 주인(나)인 프로필이 한눈에 들어오는 구조.셋째, 상세 페이지의 폭은 좁게 유지하고, velog처럼 플로팅 네비게이션을 구현.PC 환경에만 최적화할 예정이기 때문에, 여러 사이트의 블로그 레퍼런스를 참고하면서 구체적인 방향을 잡았다.각 사이트에서 마음에 드는 요소가 있으면 해당 부분만 참고하는 방식으로 진행..

문제로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순위 당첨 내용16개 번호가 모두 일치25개 번호가 일치34개 번호가 일치43개 번호가 일치52개 번호가 일치6(낙첨)그 외로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다.알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다. 당첨 번호 6개가 31, 10,..

requestIdleCallback브라우저의 유휴시간(idle)에 콜백을 실행할 수 있는 웹 API이다.브라우저가 주요 메인스레드의 작업을 끝낸 후 남은 시간에 우선순위가 낮은 작업을 실행 할 수 있다.requestIdleCallback은 이벤트루프의 모든큐(태스크 큐,마이크로태스크 큐) 동작이 끝나고 렌더링, requestAnimationFrame 콜백까지 모두 처리 후 유휴시간에 유휴 콜백큐에 등록된 콜백함수가 실행된다.requestIdleCallback의 실전 활용나는 이 함수를 통계 수집 API 요청시 사용했다.tanstack query를 사용중이라 일반적으로 useQuery를 사용해 api를 요청했었는데 페이지 진입시 불러오는 데이터 요청 API 보다 통계 수집 API가 먼저 요청되거나 중간에 ..

어댑터 패턴어댑터패턴(Adapter pattern)은 서로 호환되지 않는 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴이다.어댑터 말 그대로 어댑터 역할을 해준다. 다른전압을 가진 나라를 가서 여행용 어댑터를 들고가는 것과 같다.// 아이폰 충전기class IphonCharger { chargeLightning(){ console.log('라이트닝 케이블로 아이폰 충전중'); return '아이폰 충전 완료' }}// 안드로이드 충전기class AndroidCharger { chargeUSBC(){ console.log('USBC 케이블로 안드로이드폰 충전중'); return '안드로이드폰 충전 완료' }}class Adapter { constructor{ thi..

시간에 쫒겨 개발 중 HotReload 에러를 마주했다.해석을 해보니 무언가 컴포넌트가 렌더링 중에 상태를 업데이트 할 수 없다. 라는 말이다.const TodoList = ({ data, isDashboard }: TodoListProps) => { // queries => todos const {todos} = useQueries({ queries: data?.content ? data?.content.map((id: string) => ({ queryKey: QUERY_KEY.TODO(id), queryFn: getTodo, })) : [], combine: (results) => { return: { ..

모바일 브라우저에서는 터치 스크린을 기반으로 하기 때문에 scroll이 있을때 드래그를 하면 자연스럽게 스크롤이 된다. 하지만 데스크탑의 경우에는 마우스를 기반이라 마우스로 드래그를 하면 일반 요소를 드래그 하는걸로 인식이 된다. 드래그 했을때 스크롤이 되지 않기 때문에 직접 드래그 이벤트를 걸어줘야 한다.이번에 리스트에 가로스크롤을 구현하게 되었는데 모바일&데스크탑에서도 구현이 가능해야 했으므로 직접 드래그 이벤트를 구현해 적용했다. Drag and Drop API 사용하기HTML요소를 드래그 앤 드롭 하게 해줄 수 있는 기능이다.나는 총 5가지의 기능을 사용했다.1. draggable : 드래그 대상에 true값을 설정해주면 해당 요소가 드래그 된다.2. dragstart : 드래그가 시작될때 발생...