본문 바로가기

분류 전체보기126

직접 구현하며 느낀 Debounce 와 Throttle 차이 📌  Debounce ? Throttle ?  공부하게 된 이유 resize 이벤트 핸들러를 통해 화면의 사이즈 변경을 감지하고그에 따라 화면의 애니메이션을 변경해야하는 기능이 있었다.그런데 정말로 화면 크기가 바뀔 때마다 매번 이벤트가 호출되는 걸 보고리페인트 비용 낭비가 예상되었다.마우스로 요리조리 변경할 때마다 이벤트를 호출하는 게 아니라변경이 끝난 후 화면 사이즈가 고정되었을 때 한번만 호출하도록 수정하고 싶었다.최적화 방법 중 일부인, Debounce 와 Throttle 을 공부해보자. Debounce 와 Throttle 모두 함수의 연속적인 실행을 제한하는 목적을 가지고 설계되었다.  📍  Debounce요청이 들어온 뒤, 일정 시간을 기다린 후 요청을 수행한다.일정 시간 내에 같은 요청이.. 2024. 11. 18.
[OS] 교착 상태 📍  교착 상태란 ? 다중 프로세스 환경에서 발생할 수 있는 상호 배제 문제.2개 이상의 프로세스가 서로의 자원을 기다리며 무한정 대기 상태에 빠지는 현상.  프로세스 A는 임계 구역 진입 전 lock1 을 잠그고  (lock1 = true)프로세스 B는 임계 구역 진입 전 lock2 를 잠궜다. (lock2 = true)만약 프로세스 A가 lock2 가 false 가 되길 기다리고,프로세스 B가 lock1 이 false 가 되길 기다린다면 교착 상태가 발생하게 된다.  📍  교착 상태 발생 조건 교착 상태는 4가지 조건이 모두 충족되면 발생할 가능성이 높아진다. 1️⃣ 상호 배제 Mutual Exclusion한 프로세스가 사용하는 자원을, 다른 프로세스가 사용할 수 없는 경우하나의 프로세스가 하나의.. 2024. 11. 8.
React Virtual Dom 과 Vue Virtual Dom 비교 📍  React Virtual Dom 이랑 Vue Virtual Dom 차이가 뭐에요 ? 같이 공부하는 친구의 질문에 말문이 막혔다.가상돔이 운영되는 방식이 거기서 거기 아닐까..?라는 애매모호한 답변을 하기 싫어서 공부하게 되었다.  📍  Vue / Compiler-Informed Virtual Dom 나는 막연하게,초기 렌더링 과정이 Vue 가 React 보다 더 빠르다고는 알고 있었다. 왜 ? 에 대한 답변으로,Vue 는 문법을 사용하고React 는 .jsx 문법을 사용하니까변환되는 과정이 Vue 가 상식적으로 더 빠르지 않을까 ? 라고 생각했다. Vue 의 렌더링 메커니즘 공식 문서를 보면  잘 나와있지만 내가 이해한 대로 설명해보겠다.Vue 컴포넌트가 mount 될 때, 다음과 같은 과정이.. 2024. 11. 7.
220509 - 220513 주간 공부 메모 정리 📌 220509 인사이드 자바스크립트 책 리뷰 Chapter01 [ 자바스크립트 기본 개요 ] 📌 220510 인사이드 자바스크립트 책 리뷰 Chapter03 [ 자바스크립트 데이터 타입과 연산자 ] 📌 220511 인사이드 자바스크립트 책 리뷰 [ 함수와 프로토타입 체이닝 ] 📌 220512 WebStorm 개발 초기 설정, Webpack 🤬 nodeJS, nvm, npm 설정 다 까먹었다는 사실을 알게 됌 nodeJS 환경 조성 순서 바로잡기 1. nvm 설치 후 nvm 명령어로 node 설치 2. npm 설치 후 각종 모듈 이용 😝 어려울줄만 알았던 webpack 설정, 공식문서보고 따라하니 재밌어 .. webpack 초기 설정 📌 220513 package.json 파일 설정, WebStorm 익.. 2022. 5. 12.
오늘 배운것들 정리 💡 0부터 원하는 숫자까지 모든 수를 요소로 갖는 배열 만들기 // Array.from()으로 길이가 10, 값이 (0~9)인 배열 생성 const arr = Array.from({length: 10}, (val, idx) => idx); console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr.length); // 10 불러온 데이터의 인덱스를 가진 배열을 한번에 생성 or 삭제해야하는 이벤트가 있었는데 이 때 이 방법을 유용하게 썼다. 더 좋은 방법이 있을 수도 ..?!! 💡 checkbox 타입의 input 태그는 'checked' 속성을 갖는다 체크 X 체크 O 리액트에서 useRef 훅으로 체크박스를 관리해야하나 .. 고민했었는데 .. 2022. 4. 18.
Imported JSX component must be in PascalCase or SCREAMING_SNAKE_CASE (styled-components & React 에러) 📍 오늘의 에러 Imported JSX component must be in PascalCase or SCREAMING_SNAKE_CASE 노트북에서는 잡히지 않던 에러가 데스크탑에서는 잡힌다 ..! (CPU 용량 부족인가..) 화면 렌더할 때는 문제생기지 않지만 파일을 컴파일할때는 문제가 생긴다 ㅎㅎ JSX 문법은 파스칼 케이스나 스네이크 케이스로 꼭 써주자 😊 2022. 4. 17.
검색 Debounce 직접 구현하기 (feat. 재할당 & 비동기) 👀 검색창 자동완성 기능 만들 때 서버에 너무 많은 요청을 보내게 되는 문제 발생 ❗ lodash의 debounce 함수를 이용할 수도 있지만 직접 구현할 수도 있다 ㅎㅎ 😊 그런데 구현하다가 아차 싶었던, 내가 실수했던 부분이 있어서 기록에 남긴다. const handleSearchBar = (event: React.ChangeEvent) => { // 내부 let timer: any = 0; const searchValue = event.target.value; if (timer) { console.log('clear time'); clearTimeout(timer); } timer = setTimeout(() => { axios({ method: 'get', url: '서버 URL' }) .then.. 2022. 4. 12.
커링 Currying 과 클로저 📍 클로저 간단 복습 클로저는, 현재의 유효범위를 넘어 스코프 체인으로 연결된 객체나 변수를 참조할 수 있게 해준다. 간단하게는 "함수와 함수가 선언된 어휘적 환경의 조합" 으로 정의된다. ✔ 장점 • 함수 내에 있는 변수를 재활용할 수 있다. • 참조하고 있는 변수를 외부에 노출시키지 않을 수 있다. 은닉 가능 ✔ 단점 • 클로저 함수를 남발하면 메모리 누수가 발생한다. 📌 커링을 공부하게 된 계기 코드를 작성하면서 은연중에 클로저를 사용하고 있다는 건 안다. 하지만 효과적으로 사용하고 있냐는 질문에는 자신있게 대답을 못하겠더라 .. ㅎ 그래서 실제 클로저 예시를 찾아보게 되었다 !-! 📌 커링 Currying 커링은 f(a, b, c) 처럼 단일 호출로 처리하는 함수를 f(a)(b)(c) 와 같이 각.. 2022. 4. 11.
22.03.10 [읽기 좋은 코드가 좋은 코드다] - 더스틴 보즈웰, 트레버 파우커 📍 책을 읽게 된 계기 팀 프로젝트 진행에 앞서 팀 규칙을 정하게 된다. 이때 변수명, 파일명 등 얕은 코드 스타일을 통일시켜놓고 시작할 수 있는데, 어떤 걸 기준으로 정해야되는지 모르겠더라. 읽기 편하다는 기준도 엉망이고 ..!! 팀 단위 작업을 할때 적어도 좋은 규칙을 제안할 수는 있어야겠다는 생각에 읽게 되었다. 💡 목차 1. 표면적 수준에서의 개선 ✔ 이름에 정보 담기 ✔ 오해할 수 없는 이름들 ✔ 미학 ✔ 주석에 담아야 하는 대상 ✔ 명확하고 간결한 주석 달기 2. 루프와 논리를 단순화하기 ✔ 읽기 쉽게 흐름제어 만들기 ✔ 거대한 표현을 잘게 쪼개기 ✔ 변수와 가독성 3. 코드 재작성하기 ✔ 상관없는 하위 문제 추출하기 ✔ 한 번에 하나씩 ✔ 생각을 코드로 만들기 ✔ 코드 분량 줄이기 4. 선택.. 2022. 4. 10.