목록모든 글 (126)
코딩쌀롱
✱dataset 상황 : 체크박스 모달에서 라벨이 선택되면 모달창이 닫혔을 때 선택된 라벨이 렌더링돼야 한다. 의도 : 모달 내 메뉴 아이템 요소에 dataset속성으로 라벨에 대한 정보를 객체로 넣고, 클릭 && checked 됐을 때 dataset 정보를 state로 저장해서 렌더링하려고 했음 문제 : dataset의 반환값이 DOMStringMap 이라서 객체를 넘겨줄 수 없음..그냥 문자열로만 받을 수 있음. 이걸 왜 이제 알았지...? 해결 : 코드가 좀 늘어나긴 하지만 각각 키로 주려고 했던 정보들을 dataset을 여러개로 해서 보냄 그리고 클릭핸들러에서 그 정보들을 객체로 만들어줌. ... Object.assign({}, element.dataset) 그리고 추가로, data- 뒤에 가능한..
✱커스텀 훅 - 커스텀 훅의 state는 독립적, 호출될 때마다 state는 아예 독립적이다. 그렇다면 커스텀 훅이 호출돼서 종료되면 그 내부의 state값은 더 이상 수정하거나 사용할 수 없고 끝?(커스텀 훅이 종료되면 내부로 들어갈 수 없으니까 - 커스텀 훅의 state는 async 함수 반환값이 promise객체라 리턴값 활용을 못 할 때 유용. setState로 값을 저장하고 return state하면 되니까. ✱history API - pushState: 주소가 바뀐다. 뒤로가기 버튼이 활성화된다. 페이지는 새로 갱신되지 않고 주소만 바뀐다!! - replcaceState: 주소가 바뀌지만, 뒤로가기 버튼은 활성화되지 않는다. 마찬가지로 페이지 갱신은 안 된다. 이전 주소를 지우기 때문에 더는 ..
✱Hook의 규칙 - 최상위(at the Top Level)에서만 Hook 호출! - 오직 React 함수 내에서 Hook 호출! ( 컴포넌트 함수, 커스텀훅) ✱useEffect에서 async 함수 사용하기 - async 함수는 promise 객체를 반환. - 첫 번째 인자인 부수 효과 함수는 함수만 반환할 수 있다. - 반환된 함수는 부수 효과 함수 호출 직전, 컴포넌트가 사라지기 직전에 호출된다. - useEffect에서 async 함수를 사용하려면 useEffect 내에서 async 함수를 만들어서 호출해야 한다. ✱mount와 render의 차이 - 맨 처음 컴포넌트가 렌더될 때 mount, - props, state가 변경되어 리렌더링될 때는 mount가 아니라 render 참고📚 리액트 공식..
정렬 알고리즘 중 quick sort를 공부했다. 코딩하는 거니 유튜브를 보고 자바스크립트 코드로 작성해봤다. function getSortedArr(arr) { quickSort(arr, 0, arr.length - 1); return arr; } function quickSort(arr, l, r) { if (l < r) { const p = partition(arr, l, r); quickSort(arr, l, p - 1); // * quickSort(arr, p + 1, r); // ** } } partition 함수의 반환값은 pivot의 인덱스. 피봇 이전 원소들로 quickSort 재귀, 피봇 이후 원소들로 quickSort 재귀를 돈다. 그러다가 원소가 하나만 남으면 l=r 조건으로 함수가..
현재 빈약하지만 더 공부해서 추가할 예정!!! ✱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; 이렇게~~
console.dir(location)해봤을 때. - location.pathname: 요청한 url의 path값 - match.path: 정의한 라우트의 path값 - match.isExact: 요청한 path와 정의한 라우트의 path가 같은지 - location.search: 쿼리 스트링 window.location.search를 queryString.parse에 전달해주면 객체로 만들어준다. location.search하니까 리액트+타입스크립트에서 에러가 나서 window.을 붙여줬더니 해결됐다. import queryString from "query-string"; const MyPageModal = ({ onClick }: Props) => { const query = queryString.p..
📌 event.target 타입 지정 event.target을 typescript로 어떻게 해줘야할지 모르겠었는데 카일이 도움을 줘서 해결했다. 위 코드에 주석을 붙여 설명해보았다. 아직 타입단언이 뭔지 감이 안 온다...😥 📌 달력 기능 구현 완료.. 오늘 드디어 달력을 마무리했다. 크게 단계를 나누자면 1. 달력을 띄우는 것: new Date()와 여러 메서드들 사용 2. 캐로셀: 화살표 버튼 클릭에 따라 duration, position, 내용이 바뀐다. 3. 날짜 선택: 사용자의 클릭에 따라, 호버에 따라.. 1단계인 달력을 띄우는 건 바닐라로 해봤어서 확실히 수월했다. 바닐라 자바스크립트로 할 때 참고했던 블로그가 즐겨찾기에 있어서 다행히..ㅎㅎㅎ 2단계는 큐랑 세미페어할 때 캐로셀 코드를 봤어..
📌 인터페이스 1. 함수의 인자를 정의하는 인터페이스 (매개변수-인자, 반환값) 2. 함수 구조를 정의하는 인터페이스 // 함수의 스펙(구조)에 인터페이스를 활용 interface SumFunction { (a: nubmer, b: number): number; } var sum: SumFunction; sum = function(a: number, b: number): number { return a + b; } 3. 인덱싱 방식을 정의하는 인터페이스 // 인덱싱 interface StringArray { [index: number]: string; } var arr: StringArray = ['a', 'b', 'c']; arr[0] = 10; // 에러 4. 인터페이스 딕셔너리 패턴 // 딕셔너리 ..