코딩쌀롱

📚 이터레이션 프로토콜 - 이터러블 프로토콜 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이러한 규약을 이터러블 프로토콜이라 하며, 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 for...of문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다. - 이터레이터 프로토콜 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터는 next 메서드를 소유하며 next 메서드를 호출하면 이터러블을 순회하며 value와 done 프로퍼..

8월 4일 자바스크립트에 private이 있다고 착각했었는데, OOP 공부하다 자바의 클래스 코드들에서 private을 본 거랑 헷갈린 것 같다. 자바스크립트의 static이랑도 헷갈린 듯.. 그래서 찾아보다보니 몰랐던 private, protected에 대해 알게되었다! 객체 지향 프로그래밍에서 두 그룹으로 분류가 되는데, internal interface는 동일 클래스 내에서 접근 가능, 밖에선 접근 불가. external interface는 클래스 밖에서도 접근 가능한 프로퍼티와 메서드! - protected 필드: private과 비슷하지만, 자손 클래스에서도 접근이 가능하다는 점이 다르다. 내부 인터페이스를 만들 때 유용. 자손 클래스의 필드에 접근해야 하는 경우가 많아 private 필드보다 ..

Critical Rendering Path | Constructing the Object Model Critical Rendering Path | Render-Tree Construction, Layout, and Paint 위 글을 읽으면서 정리했다. 1. DOM(Document Object Model) 1. 변환: 브라우저가 HTML의 원시 바이트를 읽어와서, 파일에 지정된 인코딩(UTF-8)에 따라 개별 문자로 변환 2. tokenize: 브라우저가 문자열을 고유 토큰으로 변환(토큰에 따라 의미, 규칙이 있음) 3. lexing: 토큰은 속성, 규칙을 정의하는 객체로 변환 4. DOM 생성: HTML 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결 이 전체..

What happens when you type a URL in the browser and press enter? 글을 읽으면서 정리했다. 1. 주소창에 URL 입력 2. 브라우저가 캐시를 체크. (DNS 기록에서 URL과 일치하는 IP 주소를 찾기 위해) - DNS란 url과 연결된 ip주소들을 보관하는 데이터베이스. 모든 url은 ip주소가 할당돼있음DNS의 주된 목적은 사람들의 편의를 위한 것. 사이트 이름 URL을 사용함으로써 더 편하게 접근할 수 있다. 정확한 ip주소와 매핑 시켜주는 것이 DNS가 하는 일. - DNS 기록을 찾기 위해 브라우저는 네 가지 캐시를 체크한다. 1) 브라우저 캐시. 브라우저가 이전에 방문했던 사이트의 DNS기록을 일정 시간 보관함 2) OS 캐시. 브라우저 캐시에..

문제 Leetcode Sort Colors 문제 - input: 숫자 0, 1, 2로 이뤄진 배열 - output: void, - 주의: 카피하지 않고 nums 배열을 in-place로 swap해서 sort 풀이 런타임: 71ms / 86.69% (주로 70ms대로 나옴) 메모리: 38MB / 98.00% var sortColors = function(nums) { let zeroP = 0; let twoP = nums.length - 1; for(let i = 0; i < nums.length; i++) { if(twoP < i) break; else if(nums[i] === 0) { nums[i] = nums[zeroP] nums[zeroP] = 0; zeroP++; if(zeroP-1 === i)..

문제 Leetcode Find Pivot Index 문제 - input: 정수 배열 nums - output: pivot index의 왼쪽의 모든 값의 합과 오른쪽의 모든 값의 합이 같을 때의 pivot index, 없으면 -1 풀이 80ms / 98.33% var pivotIndex = function(nums) { let total = nums.reduce((a,b) => a+b) let leftSum = 0; for(let i = 0; i < nums.length; i++) { const rightSum = total - leftSum - nums[i]; if(leftSum === rightSum) return i; leftSum += nums[i]; } return -1; }; pivot 인덱스 ..

알고리즘을 다시 처음부터 시작해보려고 한다. 코드스쿼드가 끝났으니 이제 모두 내가 알아서 해야한다! 처음부터 매일매일 쌓아가보자👊🏼 문제 Leetcode Move Zeroes 문제 - input: 정수 배열 nums - output: 0이 아닌 정수는 순서 그대로, 0만 오른쪽으로 이동한 배열 - 주의! 배열 복사하지 말고 in-place로 풀이 76ms / 93.54% var moveZeroes = function(nums) { let left = nums.indexOf(0); if(left === -1) return nums; let right = left; for(let i = left; i < nums.length; i++) { if(nums[right] === 0) right++; else { ..

7월 6일 토스의 비동기 영상을 보았다. 최근에 useRecoilValueLoadable 코드를 블로그에도 작성(링크)했었는데, 가독성이 좋지 않은 코드였다! 깔끔하다고 생각했어서 충격이기도 했고, 잘못된 점을 알게돼서 기쁘기도 했다. async 함수의 장점을 다음과 같이 설명했다. '성공하는 경우'만 다루고, '실패하는 경우'는 catch절에서 분리해 처리한다. '실패하는 경우'에 대한 처리를 외부에 위임할 수 있다. 비동기가 성공적으로 응답을 받았을 때의 코드만 작성해서 동기적으로 보일 수 있게끔 하고, 로딩과 에러는 외부에 위임하는 것. 그래서 내가 작성했었던 useRecoilValueLoadable의 코드는 좋은 코드라고 하기 어려웠던 것이다. 리액트 컴포넌트 내에서 조건문으로 성공, 로딩, 에러..

📌 상황1 이슈 트래커의 라벨페이지에서 라벨들을 get할 때 selector를 사용해서 response 값을 받으려고 했다. 그런데 라벨, 마일스톤을 한 selector로 받아올 수 있으면 좋을 것 같아 인자를 넘길 수 있는 selectorFamily를 사용했다. path값을 인자로 넘겨서 라벨, 마일스톤이 한 selector를 사용할 수 있게끔 했다. ✱selectorFamily - 공식문서 공식문서를 보면 코드가 아닌 글들은 이해하기 어렵다ㅠㅠ 좀 더 익숙해지면 이해할 수 있게 될까... selector 문서와 같이 영어로 보면서 이해하려고 노력해봤다. ‣ key: 내부적으로 atom을 식별하는데 사용되는 고유한 문자열, 앱 전체의 atom, selector에 대해 고유해야 함! key값이 똑같은 게..

정렬 알고리즘 중 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 조건으로 함수가..