코딩쌀롱

현재 빈약하지만 더 공부해서 추가할 예정!!! ✱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; 이렇게~~

📌 인터페이스 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. 인터페이스 딕셔너리 패턴 // 딕셔너리 ..

✏️유튜브에서 땅콩코딩 타입스크립트 강의를 보면서 간단히 메모한 것 ✘ 타입스크립트는 정적 타입(Static Typing) ✘ 타입 추론(Type Inference): 타입 표기가 없는 경우 코드를 읽고 분석해 타입을 유추해내는 것 // ====예제 1==== let student: { name: 'Eve', // name 속성은 type이 string이라고 추론. course: 'TypeScript', codingIQ: 120, code: function() { console.log('brain is working hard'); } } student.name = 10; // number이기 때문에 에러 발생! // ====예제 2==== function calculateCodingIQ(lostPoint..

DP에 대해 아예 모르는 상태에서 문제를 풀려고 하니 기본문제라고 하는데도 풀 수 없었다. 그래서 DP에 대해 공부하고 문제를 다시 풀었고, 공부한 내용을 정리했다. 찾아보면서 좋았던 유튜브 영상 밑에 참고에 작성해놓았다. 문제 Leetcode Climbing Stairs 문제 input: 총 계단의 개수 n output: 1칸, 2칸으로만 올라갈 수 있고, 끝까지 올라갔을 때 경우의 수 📌 Dynamic Programming ✱Top-down - 작은 문제는 해결했다는 전제하에 큰 문제부터 : f(n), f(n-1), ..., f(2), f(1) - 생각의 과정은 자연스럽지만 스택의 limit이 있기 때문 좋은 방식은 아니다. - 재귀 1. 완전 재귀 → O(2^n) 2. 메모 재귀 → O(n) 재귀의..

5월 3일 1. props를 넘길 때 true일 경우에는 props 이름만 써도 되는 것, 9. props값이 문자열일 때 중괄호를 쓰지 않아도 되는 것, 12. import 순서가 정해진 것(Built-in, External, Internal) 12번은 자연스럽게 하고 있었는데 확실히 순서가 있다는 걸 알게 되었다. 21 Best Practices for a Clean React Project 6일 display none이 transition이 안 먹혀서 visibility, opacity를 사용했었는데, 왜 그 이유에 대해서 자세히 생각해보지 않았는지 반성하게 됐다. 이 글을 읽고, display: none은 렌더링 트리에 포함되지 않기 때문에 transition이 먹히지 않는다는 것도 알았지만! 구..

useState의 지연 초기화를 통해 리액트 함수 컴포넌트를 최적화시킬 수 있다. // 예제 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getItem(cacheKey)), ) useEffect(() => { window.localStorage.setItem(cacheKey, count) }, [cacheKey, count]) return ( Count: {count} setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ) } // 예제 2 const Counter = () =>..

참고📚 블로그 - 좋은 코드란 무엇일까?

🍭 호스트 트리 시간이 지남에 따라 변화할 수 있는 트리 출력. 외부 이벤트(상호작용, 네트워크 응답, 타이머)에 대한 응답으로 복잡한 호스트 트리를 예측할 수 있게 조작하는 프로그램을 작성하는 데에 유용. 안정성 - 호스트 트리는 비교적 안정적, 갱신할 때 전체를 뜯어고치지X 규칙성 - 무작위 형태X, 일관된 모습, 동작 UI패턴 🍭 호스트 객체(DOM노드) 리액트는 DOM api를 직접 호출X, 리액트가 처리 🍭 렌더러 create host instance and set the properties 🍭 React 엘리먼트 리액트에서 제일 작은 요소, 매번 새로 만들어짐 persistant X, Immutable O 🍭 Entry Point ReactDOM.render(reactElement, domCo..