개발여행의 블로그

모던 자바스크립트 deep dive를 공부하면서 정리한 글입니다. Reference - 모던 자바스크립트 deep dive 인터넷 주소창에 URL을 입력했을 때 사용자가 web 페이지를 보기까지 어떤 과정을 거치는가? 먼저, 간단하게 렌더링 과정을 정리해보면 아래와 같다. 1. 브라우저가 HTML, JavaScript, CSS, image, font file 등의 리소스를 서버로 요청하고 응답받기 2. 브라우저의 렌더링을 담당하는 엔진은 응답 받은 HTML과 CSS를 parsing하여 DOM(document obeject model)과 CSSOM(css object model)을 생성 3. DOM와 CSSOM을 결합하여 Render Tree 생성 4. 브라우저의 자바스크립트 엔진은 응답 받은 JavaSc..

지난 포스팅에서 iterble과 the iterable protocol 그리고 iterator와 the iterator protocol에 대해 알아보았다. https://developerntraveler.tistory.com/135 [JavaScript] 왜 Object(객체)는 Iterable object가 아닌것일까? 콘솔에 이것저것 작성하면서 놀고(?) 있을 때 문득 Object는 왜 iterable 하지 않은지 의문이 생겨서 폭풍 서치를 시작했다. (맞지 않은 내용이 있다면 댓글 부탁드립니다. 미리 감사합니다!) Iterable이 developerntraveler.tistory.com 이번 포스팅에서는 the iteration protocols의 예시를 살펴볼 것이다. String은 built-i..

콘솔에 이것저것 작성하면서 놀고(?) 있을 때 문득 Object는 왜 iterable 하지 않은지 의문이 생겨서 폭풍 서치를 시작했다. (맞지 않은 내용이 있다면 댓글 부탁드립니다. 미리 감사합니다!) Iterable이란? iteration protocol을 따르는 객체를 iterable이라고 한다. 쉽게 말하면 iterable은 배열을 일반화한 object인 것이다. '반복 가능한'이라는 의미의 iterable을 풀어서 생각해보면, 반복 가능한 객체가 iterable object가 되는 것이다. 예를 들어, 배열, 문자열 등이 iterable이다. 그럼 여기서 Iteration protocol 은 무엇인가? 먼저 protocol에 대해 정리해보자! 컴퓨터와 컴퓨터 혹은 컴퓨터와 다른 장비 사이에서 데이..

설명 문자열 s가 주어질 때 s의 각 문자가 c와 떨어진 최단거리를 반환하는 문제이다. 예를 들어, s = 'test' , c = 'e' 일 때 [1, 0, 1, 2]를 반환해야 한다. (t는 e에서 1만큼 떨어져있고, e는 0, s는 1, 마지막 t는 2만큼 떨어져있기 때문이다.) Problem Given a string s and a character c that occurs in s, return an array of integers answer where answer.length == s.length and answer[i] is the distance from index i to the closest occurrence of character c in s. The distance between ..

parseInt 문자열에서 숫자만 추출해보자! 설명 parseInt를 사용하지 않고 문자열에서 추출한 정수를 반환 function extractNumbers(string) { let result = 0; if (typeof string !== "string") { return false; } for (const char of string) { if (!isNaN(char)) { result = result * 10 + Number(char); } } return result; } parseInt를 사용하지 않고 문자열 '00ab30c4' 에서 숫자 304만 반환받으려면 자릿수를 이용해서 반환값을 계산할 수 있다. result = result * 10 + Number(char); 구문에서 1) char에 ..

회문 문자열이란? 앞에서부터 읽거나 뒤에서부터 읽거나 모두 동일한 문자열이다. 문제 문자열이 주어졌을 때 회문 문자열인지 아닌지 출력하는 코드를 작성해보자! 입력 & 출력 길이 100 이하의 공백 없는 문자열 ex1) TEST -> false 출력 ex2) teeT -> ture 출력 풀이 두 가지 방법 정도로 해결할 수 있다. 1) Array.prototype.reverse()를 활용해서 거꾸로 뒤집어진 문자열 생성 후 같은지 확인. Array.prototype.reverse() 2) 문자열의 앞과 뒤의 짝을 맞춰서 같은 문자인지 비교. 문자열의 맨 앞과 맨 뒤 비교, 두 번째 문자열과 끝에서 두 번째 문자열 비교 이렇게 반복해서 다른 문자가 있을 경우 false를 리턴한다. 코드 1) reverse ..