코딩쌀롱

현재 빈약하지만 더 공부해서 추가할 예정!!! ✱Local - key, value 저장 - string 타입만 - 용량 적음(MB단위) - 만료기간 없음 ✱Session - local과 비슷하지만 만료가 됨 → 브라우저 종료, 새 탭을 열면 초기화 - 하지만 새로고침에는 유지됨 ex) 에디터에서 글 임시저장 용도 - 사용자나 다른 누군가에게 노출되어서는 안 되는, 서비스 제공자가 직접 관리해야할 정보들을 세션으로 서버가 관리 ex) 로그인 정보 저장 ✱Cookie - 용량 매우 적음(KB 단위) - 서버 데이터 공유 용도이기 때문에 많은 데이터를 갖거나 오래 가질 수 있을 수 없게끔 - 만료 시간을 정할 수 있음 - SSR 시점에 서버가 로컬 스토리지를 조회할 수 없고 쿠키는 사용할 수 있기 때문에 SS..

range slider를 유튜브 따라서 만들어봤다! 코드펜 링크🔗 javascript 코드도 들어가지만 input type="range"때문에 HTML¦CSS 카테고리에 글을 쓴다. 먼저 설명하자면, 1. 진짜 슬라이더인 input 2개를 만들고, 가짜 슬라이더 div를 만든다. 2. 진짜 슬라이더를 동작할 때 가짜 슬라이더도 같이 움직이도록 배치를 javascript 코드로 짠다. 3. 진짜 슬라이더를 opacity: 0 으로 투명하게 만들고, 가짜 슬라이더 위에 올린다. 4. 이 때 진짜 슬라이더는 2개지만 겹쳐놓고, thumb 두 개가 모두 활성화되도록 한다.(pointer-event: all) ✱HTML ✱CSS -webkit-, -moz-는 동작 브라우저에 관한 prefix이다. (webkit은..

🤨 오류1 useRef로 바로 캔버스 요소를 쓰려고 하자 null로 오류 🤓 해결 카일코드를 참고해서 해결했다. useEffect를 사용해서 canvas요소와 context객체를 state에 저장했다. 🤨 오류2 함수에서 상태값을 바로 사용하려니까 오류. 사실 너무 쉬운..문제임-.- 초기값을 null로 해줬고, generic도 유니언타입으로 넘겨놓고... 🤓 해결 조건문으로 상태값 확인! 참고로, canvas 상태값은 안 썼으니까 조건문에 없어도 됐음 if(!ctx) return; 이렇게~~