다크모드 토글버튼을 직접 만들으라네;공식문서 보고 만들었다.https://daisyui.com/docs/themes/ daisyUI themes — Tailwind CSS Components ( version 4 update is here )How to use daisyUI themes?daisyui.comhttps://daisyui.com/components/theme-controller/ Tailwind Theme Controller Component — Tailwind CSS Components ( version 4 update is here )Tailwind Theme Controller examples: If a checked checkbox input or a checked radio inpu..

vanilla JS로 핑퐁게임 SPA 사이트 프로젝트 하다가 겪은 일이다.커스텀 게임 방 리스트 페이지위 페이지에선 2가지 비동기 동작이 정의되어 있다.1. 먼저 5초마다 setInterval로 현재 페이지네이션 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직2. 아래 화살표를 누르면 페이지네이션을 + - 하고 그 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직 그런데 아래 화살표를 광클하니 현재 페이지네이션이 아닌 페이지가 깜빡거리면서 렌더링 되는 이슈가 생겼다.로직상 문제가 없었고, 콘솔로 페이지네이션을 찍어봐도 이상이 없어서 이틀 내내 고민하고 찾아본 결과 비동기 큐가 2개라는 걸 찾았다. setInterval, setTimeout같은 macrotask이 들어가는 macrotask q..

완성본 코드https://github.com/donghyun1998/vanilla_js_SPA_starter_kit/blob/main/src/utils/useReducer.js useState로도 상태관리 가능하지만, 더 짧고 가독성 좋게 관리할 수 있는 리액트 훅인 useReducer에 대해 알게 되어 비슷하게 구현해봤다.이전에 구현했던 useState와 비슷하게 클로저로 구현했다.중복되는 개념이 많으니 먼저 보고 오길 바란다. 복잡한 state가 필요한 상황에서 useReducer를 사용하면 reducer함수 내부의 switch문으로 state변경을 가독성 좋게 할 수 있다.function deepCopy(obj) {  if (Array.isArray(obj)) {    return obj.map((..

완성본 코드https://github.com/donghyun1998/vanilla_js_SPA_starter_kit/blob/main/src/utils/useEffect.js 컴포넌트의 생명주기를 관리 하는 useEffect 리액트 훅을 구현하려 했다. 실제 useEffect는 아래와 같이 동작하지 않는다. 오해 금지단지 내 vanilla js SPA 환경에서 사용할 함수 추상화 한 것일 뿐먼저 내 vanilla js SPA 환경에서는 모든 렌더링을 HTMLElement.innerHTML로 한다.즉 컴포넌트 마운트, 업데이트, 언마운트 모두 innerHTML로 되므로HTMLElement의 변경 감지가 필요하다. MutationObserver api를 사용하면 해당 HTMLElement의 변경을 감지할 수..

https://github.com/donghyun1998/vanilla_js_SPA_starter_kit GitHub - donghyun1998/vanilla_js_SPA_starter_kit: 바닐라 js로 SPA 구현하기 위한 스타터킷바닐라 js로 SPA 구현하기 위한 스타터킷. Contribute to donghyun1998/vanilla_js_SPA_starter_kit development by creating an account on GitHub.github.com바퀴의 재발명이긴 하지만 많이 배울 수 있는 시간이었다.component 분할, useState 활용하는 예시 페이지 만들어 두었으니 자바스크립트 잘하시는 분은 그냥 코드 보시면 됩니다.초심자 분들은 아래 설명 봐주세유 router ..

완성본 코드https://github.com/donghyun1998/vanilla_js_SPA_starter_kit/blob/main/src/utils/useState.js 바닐라 자바스크립트로 useState없이 온몸 비틀기로 사이트 만들다가 도저히 안되겠어서 useState 구현 시작했다.전에 배운 클로저를 이용해서 useState가 호출되는 시점에 인스턴스를 만들고 getState, setState를 리턴하게 해서 구현했다. 근데 다 정상적으로 되지만 render함수가 갱신되지를 않았다.function useState(oldState, render) { let state = [oldState]; const getState = () => { return state[0]; }; const ..