코딩쌀롱

[JS] 이터러블, 이터레이터

이브✱ — Wed, 20 Oct 2021 15:08:15 +0900

이터레이션 프로토콜

- 이터러블 프로토콜

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

- 이터레이터 프로토콜

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터는 next 메서드를 소유하며 next 메서드를 호출하면 이터러블을 순회하며 value와 done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다. 이러한 규약을 이터레이터 프로토콜이라 하며, 이터레이터 프로토콜을 준수한 객체를 이터레이터라 한다. 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다.

이터러블

- 이터러블 프로토콜을 준수한 객체

- Symbol.iterator가 구현된 객체 (프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받거나)

- 빌트인 이터러블 : 문자열, 배열, Map, Set, TypedArray, arguments, DOM컬렉션(NodeList, HTMLCollection)

배열 : Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블
⇒ for...of, spread, destructuring 가능

객체 : Symbol.iterator 메서드를 직접 구현하지 않거나 상속받지 않았다면 이터러블X
⇒ for...of, destructuring 불가 (spread는 가능)

이터레이터

- 이터러블의 Symbol.iterator 반환값

- next 메서드를 갖는다

next : 이터러블의 각 요소를 순회하기 위한 포인터 역할의 메서드

- 호출 : 이터러블을 순차적으로 한 단계씩 순회

- 반환값 : 순회 결과를 나타내는 iterator result object

- 형태 : value, done 프로퍼티를 갖는 객체

const array = [1, 2];
const iterator = array[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

for...of문

for...of가 시작되자마자 Symbol.iterator를 호출next 메서드가 있는 iterator를 반환해야 함
Symbol.iterator가 없으면 에러 발생
내부적으로 iterator의 next 메서드를 호출하면서 이터러블 순회
next 메서드가 반환한 iterator result object의 value 프로퍼티 값을 for ... of 문 변수에 할당
iterator result object의 done 프로퍼티 값이 false이면 순회 진행
iterator result object의 done 프로퍼티 값이 true이면 순회 중단

유사 배열 객체

숫자형식 문자열을 프로퍼티 키로 가짐 → 배열처럼 인덱스로 프로퍼티 값에 접근 가능
length 프로퍼티를 갖는 객체 → for문 순회 가능

유사배열객체는 이터러블이 아닌 일반 객체다.
Symbol.iterator 메서드가 없어 for...of문 순회 불가
arguments, NodeList, HTMLCollection 유사배열객체이면서 이터러블
ES6에서 이터러블이 도입되면서 위 객체들에 Symbol.iterator 메서드를 구현했고 이터러블이 되었다

이터레이션 프로토콜의 필요성

ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다.

만약 다양한 데이터 공급자(배열, 문자열, Map,...)가 각자의 순회 방식을 갖는다면 데이터 소비자(for...of, spread,...)는 다양한 데이터 공급자의 순회방식을 모두 지원해야 한다. → 비효율
다양한 데이터 공급자가 이터레이션 프로토콜을 준수하도록 규정한다면 데이터 소비자는 이터레이션 프로토콜만 지원하도록 구현하면 된다.
다양한 데이터 공급자가 하나의 순회 방식을 갖도록 규정하여 데이터 소비자가 효율적으로 다양한 데이터 공급자를 사용할 수 있도록 데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할을 한다.

참고

책 - 모던 자바스크립트 Deep Dive (p.614 ~ p.621)

링크 - 모던 JavaScript 튜토리얼

레오폴드 fc980c 45g 균등 리뷰

이브✱ — Sun, 26 Sep 2021 02:06:57 +0900

레오폴드 fc980c 키보드를 새로 샀다!!

뭘 살까 고민

토프레 무접점을 사고 싶어서 처음으로 타건하러 리더스키도 가봤다ㅎㅎ

리더스키에서 타건해봤을 때 느낀 점은..

생각보다 토프레 별 거 없다
데프콘 유튜브에서 봤던 것처럼 레오폴드의 스페이스는 경박 그 자체.
예상대로 35g은 너무너무 가볍다.
55g이 생각보다 괜찮은데?!
저소음이 많아 일반 모델을 다양한 키압, 브랜드로는 타건을 못했다.

생각보다 특별하진 않은 느낌이라 안 사도 되겠단 생각도 들었지만,, 뭔가 그냥.. 계속 갖고싶었다. 토프레를

그래서 사는김에 끝판왕이라는 리얼포스로 사고싶었는데 화이트모델은 품절에 입고예정도 없다고..;

그 외 그레이블루랑 블랙은 조금의 고민도 안 됐음..나에게 키보드 외관은 너무 중요함ㅎㅎ

결과적으로 리얼포스를 기다릴 순 없고, 토프레를 갖고 싶어서 레오폴드 중 고민했다.

선택할 수 있는 건 두 가지였음 저소음 fc660c, 일반 fc980c

이미 쓰던 키가 없는 미니보단 차라리 안 쓰는 텐키가 있는 fc980c를 선택했다.

보다보면 980c 배열이 매력이 나름 있음ㅎㅎ 또 결정적으로 저소음이 싫었다

개봉

esc 포인트 키캡은 레오폴드에서 살 때 같이 주문했다.

첫인상은 진짜 미쳤다..너무 예쁘고 우아해 ✨

레오폴드 키캡 퀄리티 좋다는 건 많이 들어봤는데 아..다르긴 다르다. 과장해서 좋은 가죽같은 느낌..

키캡, 하우징이 그냥 넘 좋아.. 약간 누리끼리한 게 완전 취저. (이 부분은 취향 차이 있긴 할 듯)

타건⌨️

드보키 썸넬 감성

타건해봤을 땐 입꼬리가 절로 그냥 올라감 리더스키에서 타건해봤을 때랑 아예 다름 기분차이인걸까..

토프레 특유의 키캡 부딪히는 달그락달그락이 너무 매력적이었다. 의외로 도각도각은 잘 모르겠고 달그락달그락

걱정했던 스테빌. 데프콘 유튜브, 리더스키에서 봤던 그 경박한 스페이스바..

가장 놀랐던 게 스테빌이 예상외로 너무 좋았다. 스페이스바가 하나도 안 경박하고 아주 오도도도-

기존 갖고있는 엠스톤 45g 갈축이 넘 가벼운 느낌이라 걱정했는데 딱 적당한 키압인 듯

내꺼 갈축이 이상한건가..

리얼포스 안 사길 잘 했다. 디자인도 레오폴드가 더 내 취향이고, 스테빌도 굳

키캡

포인트 키캡을 중고나라에서 샀다. 토프레 키캡은 판매가 많지 않아 중고 거래를 많이 하는 듯.

esc가 빨간색이라 방향키는 블루나 퍼플로 하고 싶었는데 마침 중고로 올라와 바로 구매했다.

좋은 가격은 아니었음..토프레는 키캡도 비싸

기계식처럼 키캡이 다양하면 좋겠다..

awsd 퍼플도 갖고싶다

네이버 인턴 1주 회고

이브✱ — Mon, 16 Aug 2021 19:51:46 +0900

웹팩 바벨에 대해서 겉햝기로만 알았었다..그러다보니 개념, 설정 파일 작성하는 것 등 공부할 게 많았다.

✱어려웠던 것

- typescript + babel

둘 다 컴파일링을 한다. 타입스크립트는 TypeScript → JavaScript. 바벨은 JavaScript → ES5 이전 JavaScript. 이 둘을 같이 환경설정하는 데 뭔가 확실하게 와닿지 않는 느낌이랄까..이렇게 하는 게 맞는 것 같긴한데 맞는 거겠지? 이런 느낌.. 일단 바벨에 컴파일링을 모두 맡겼다. ts-loader를 사용하지 않고 preset-typescript를 사용했다.

- tsconfig, eslint 설정 파일 옵션들

환경설정을 하다보면 옵션들이 매우 많다. 찾아보면서 이건 뭐지, 저건 뭐지 하면서 이해하는 데에도 정신이 없고, 이게 필요할까 없어도 상관없지 않나하는 고민들도 많이 든다. 공식문서를 봐도 이해가 잘 안 되는 옵션들도 많았고, 구글링으로도 확 와닿지 않는 것들도 조금 있었다.

- 짬뽕

환경설정을 할 때 번들러, 컴파일러, 포매터 등 결합해서 사용하기 때문에 어떻게 같이 이것들이 돌아가는지 이해하기 어려웠고, 또 학습하는 면에서는 머리 속에서 짬뽕이 돼서 이 옵션이 어떤 것에 있던 옵션이더라..라는 생각도 자주 했다ㅋㅋㅋ

✱좋았던 것

확실히 와닿을만큼 제대로 이해한 느낌은 아니지만..그래도 직접 설정해보면서 전반적으로 배우게 된 것이 정말 많았다. 개발 환경 설정을 하는 일주일동안 열심히 찾아보고 공부했다. 설정파일을 작성할 때 복붙이 아니라, 어떤 것들을 설치할지, 어떤 옵션들이 필요할지를 찾아보면서 '이게 하는 역할이 뭐지? 필요할까?'라는 생각으로 설정 파일을 작성했다. 진행 속도는 느렸지만 그만큼 많은 것들을 찾아보고 공부했다. 힘들었지만 뿌듯하다.

✱느낀 점

인턴 시작 전에는 인턴하면서 알고리즘도 풀고, 아티클도 읽고, 이것도 하고, 저것도 다 하고.. 싶었다.

이전 글에도 썼듯이 인턴 합격 후 다짐했던 것들이 많은데..ㅎㅎ못 하고 있다. 계획했던 다양한 것들은 못하고 있지만 매일 꽉 차게 보내고 있다.

인턴시작하니 정신이 하나도 없다. 솔직히 체력적으로, 정신적으로 정말 힘들었다. 난 너무 나약해 멘탈이 휴지조각이야

하지만 두 달 지나면 성장해 있을거라고 확신한다!

네이버 인턴 합격과 다짐

이브✱ — Thu, 5 Aug 2021 04:04:48 +0900

질문에 대답 못 한 게 많았어서 기대를 하지 않으려고..노력했다.

믿기지 않지만 인턴에 합격했다.

코쿼 종료 이후 자신감이 낮아진 상태라 걱정이 되기도 한다.

하지만 이 기회로 더 성장하고 자신감을 가질 수 있지 않을까!

인턴십 기간동안은 진짜 열심히 성실하게 살아야지

‍♀️목표 ‍♂️

✔️ 규칙적인 생활

밤낮이 바뀐 생활패턴을 오래 가지고 있었는데 늦게 자는 습관을 바꿀 것.

운동도 일주일에 2번 이상 하자.

✔️ 구체적인 계획

매일, 매주 해야하는 투두리스트를 정해 꾸준히 하자 (TIL, 알고리즘, 플젝, 강의, 독서 ...)

어떻게 해야 하루를 효율적으로 채울 수 있을지 고민해서 실행 (오전, 오후, 저녁으로 나눠 계획한다던지..)

✔️ 기록

배운 것, 느낀 점들을 TIL로 기록

매주 회고

기술 아티클 읽고 메모 _8월

이브✱ — Thu, 5 Aug 2021 03:42:07 +0900

8월

4일

자바스크립트에 private이 있다고 착각했었는데, OOP 공부하다 자바의 클래스 코드들에서 private을 본 거랑 헷갈린 것 같다. 자바스크립트의 static이랑도 헷갈린 듯.. 그래서 찾아보다보니 몰랐던 private, protected에 대해 알게되었다!

객체 지향 프로그래밍에서 두 그룹으로 분류가 되는데, internal interface는 동일 클래스 내에서 접근 가능, 밖에선 접근 불가. external interface는 클래스 밖에서도 접근 가능한 프로퍼티와 메서드!

- protected 필드: private과 비슷하지만, 자손 클래스에서도 접근이 가능하다는 점이 다르다. 내부 인터페이스를 만들 때 유용. 자손 클래스의 필드에 접근해야 하는 경우가 많아 private 필드보다 광범위하게 사용된다. _로 시작하는 것이 관습

+ 카일의 코드에서 _observers에 왜 언더바를 붙이나 궁금했었는데 protected 프로퍼티 명 앞엔 밑줄_이 붙는 게 관습이라고 한다. 이 글을 보고 알았다. 외부 접근이 불가능한 프로퍼티나 메서드를 나타날 때 앞에 밑줄을 붙이기!

- private 필드: 프로퍼티와 메서드가 #으로 시작. #이 붙으면 클래스 안에서만 접근 가능하다. #은 자바스크립트에서 지원하는 문법으로, private 필드를 의미한다. 클래스 외부나 자손 클래스에서 접근할 수 없다. (private필드는 public 필드와 상충X, 다른 것으로 간주)

아직 익숙하지 않지만 필요한 적절한 때에 꼭 사용해보고 싶다! MDN에서 찾아보니까 static이랑 같이 쓰는 예제가 많이 있다. publicStatic, privateStatic으로 나뉘는 것 같은데 예제가 잘 나와있다. 잘 이해한 건진 모르겠지만 static + private 기능을 합친 느낌이다. 인스턴스가 아닌 클래스로만 접근 가능하면서 직접 접근이 안 되는 것이 privateStatic인듯.

private, protected 프로퍼티와 메서드
MDN - Private class fields

5일

동시성이란, 여러 작업을 처리할 수 있도록 작업들을 작은 조각들로 나누는 방법. 즉, 렌더링 과정을 더 작은 작업들로 나누고, 스케줄러를 통해 각 작업들에 중요도에 따른 우선 순위를 부여한다.

→ 메인 스레드를 블록X

→ 동시에 여러 작업들을 처리하고, 우선 순위에 따라 각 작업들 간에 전환 가능

→ 최종 결과로 확정하지 않고도 부분적으로 트리를 렌더링

(해당 글의 그리드 예시에서) 사용자 경험 개선을 위해서는 사용자 입력에 우선 순위를 부여하고, 그리드 렌더링은 후순위로 고려해야 한다. 렌더링 과정이 더 이상 스레드를 블록하지 않으므로, 사용자가 키를 누르는 등의 좀 더 높은 중요도를 가지는 작업이 실행되었을 때 렌더링이 나중으로 미뤄질 수 있다!

useDeferredValue: "이 상태에 의존하는 컴포넌트라면 좀 나중에 렌더링해도 괜찮아" 주어진 시간 전에 준비가 끝나면 DOM에 적용

Suspense: 플레이스 홀더를 표시할 간단한 문법 제공

SuspenseList: 여러 Suspense 컴포넌트들을 감쌀 수 있는 컴포넌트. 자식들의 표시 순서 제어

useTransition: DOM에 변동 사항을 적용하기 전에 데이터가 모두 준비될 때까지 기다림.

What is React Concurrent Mode?
What is React Concurrent Mode? 번역 - velog

8일

순환 참조(Circular Dependancy) 문제에 대해 아직 겪어보지 않아 몰랐었다. 찾아보니 겪게 되면 꽤나 오래 고생할 수 있는 문제인 듯 하다..무섭 순환 참조가 존재하는 경우에는 모듈의 평가(코드를 처음부터 끝까지 읽는 것) 순서가 중요하다. 순환 참조 문제는 모듈의 평가 순서를 정해주면 대부분 해결된다. Michel Weststrate의 방법으로는 모듈의 평가 순서를 정의하는 파일을 따로 만드는 것. 규모가 큰 프로젝트에서는 어려운 일.. common 등의 이름을 가진 폴더로 공통 모듈을 모아 모듈의 평가 순서를 정해주면 순환 참조 문제의 상당 부분을 해결할 수 있다고 한다. 웹팩에 circular-dependecy-plugin로 미리 발견해 예방할 수도 있다.

지금까지 별 생각없이 import를 사용했었는데 앞으로는 모듈의 평가 순서를 생각하면서 짜야겠다.

JS 모듈 시스템과 순환 참조 문제
순환 참조
[번역] 자바스크립트 & 타입스크립트의 순환 참조를 한 방에 해결하는 방법

2021.7.26(mon)_네이버 인턴 면접 후기

이브✱ — Wed, 28 Jul 2021 19:06:33 +0900

개발 공부를 시작하고 처음으로 면접을 봤다.

준비하면서 공부할 시간이 더 있으면 좋겠다고 생각하기도 했지만 한편으로는 빨리 끝나서 계획한 공부들을 하고 싶다는 생각도 있었다. 면접을 잘 보진 않았지만 그래도 끝나서 후련하다!

면접 보기 전 이야기를 먼저 하자면,

이력서 제출은 코드스쿼드 프로젝트 3가지를 노션으로 적어냈다. 어떤 것들을 어떻게 구현했는지 간단하게 적고, 프로젝트를 진행하면서 했던 고민들을 적었다.

코딩 테스트는 3문제가 나왔었는데 어렵지 않았다. 부스트캠프 코테보다 훨씬 쉽게 나왔었음

면접 준비

코드스쿼드가 끝나고 긴 휴식을 가졌어서 면접 메일이 왔을 때 기쁘지만 당황하기도 했다. 면접 날짜가 바로 다음 날이 될 수도 있는 상황이어서 왜 그렇게 쉬었을까 하는 후회를 엄청 했다 다음 날 면접 날짜 안내 메일이 왔고 다행히 면접은 일주일 뒤였다. 그 때부터 네이버 면접 후기들을 다 찾아보고 프론트엔드 면접에 대한 글들을 많이 찾아봤다.

다음은 찾아보고 공부했던 것들이다.

- 브라우저 (주소창에 url입력 후 과정, 브라우저 렌더링..)
- 자바스크립트
- 네트워크 (HTTP, TCP..)
- 프로젝트에서 사용했던 것들 ( React, Recoil..)
- 이력서 관련 (JWT, OAuth, 로그인 인증 방법들..)
- 프로젝트 코드들 복기

첫 면접이라 이전에 미리 스크립트를 준비해놓은 것들이 없고, 공부할 건 너~~무 많아서 힘들었다.

꼬리 질문이 깊게 들어오면 잘 대답해야할텐데..

2시간 면접이라 라이브 코딩을 시키지 않을까..

갑자기 미션 구현같은 걸 하지는 않을까..

끝 없는 걱정을 하면서 준비를 했다.

면접

면접은 1:1로 2세션으로 2시간동안 진행됐다.

첫 번째 세션

첫 번째 세션에서는 면접관님이 굉장히 친절하셨다. 계속 웃으시면서 말씀해주셨고, 긴장 풀라고도 말씀해주셨고, 모르겠다고 답변을 할 때는 너무 마음쓰지 말라는 말까지도 해주셨다. 대화를 하는 느낌으로 면접을 했고 그 분이랑 같이 일할 수 있다면 좋겠다는 생각도 들었다.

첫 번째 질문은 자기소개는 식상하니까 다른 질문을 주시겠다고 했다. 의류쪽 전공이신데 어떻게 개발쪽 일을 하게 됐는지에 대한 질문이었다. 그 다음부터는 코드스쿼드에서 공부했던 것들, 제출했던 이력서 기반 질문, 준비하신 몇 가지 질문들을 하셨다.

이력서 내용 중 JWT디코딩에 관한 고민이 있었는데 그래서 JWT에 대한 질문, 로그인 인증 방식 들에 대한 비교 질문을 받았다. 이력서에 적은 내용이라 예상했던 질문들이었다. 이력서에 기술 관련한 것들을 적으면 질문을 받을 확률이 높아 예상 질문을 준비하는 데 좋을 것 같다.

‍ 두 번째 세션

두 번째 세션에서는 기술 질문 폭탄이었다ㅎㅎㅎ 한 시간동안 질문 하시면 대답하고 바로바로 다음 질문으로 넘어갔다. 모르겠다고 하면 바로 또 다음 질문, 답을 하면 꼬리질문이거나 다음 질문 이렇게

온리 100% 기술 역량 질문들. 브라우저, 자바스크립트, 자료구조, 이런 상황일 때 어떻게 되는지 등등. 아주 짧은 5줄 이하 라이브코딩도 있었다. 심지어 이건 공부해놔야지 해놓고 다른 것들 하느라 못 했었는데 그게 나왔다...에휴!! 풀긴 했지만 아는 사람이라면 보자마자 휘리릭 코드치고 엔터! 할 거였는데 에휴!!! 속상해

질문들로는 프론트엔드 면접 질문으로 많이 나오는 것들이 실제로 나왔다. 그리고 이런 질문들도 나오네? 하는 것들도 있었는데 공부하면서 지나칠 수 있지만 궁금해서 찾아볼만한 것들, 또 개념에서 한층 더 깊은 질문들이 나왔다. 그리고 뒤로 갈수록 난이도가 매우 올라갔다.. 모르겠습니다를 몇 번 했나..

느낀 것들

역시 항상 느끼는 것이지만 준비되어 있어야 한다!

면접보기 전까지 스크립트를 준비하면서 공부하기도 하지만,, 평소에 개발하면서 궁금한 것들을 찾아서 공부하고 꾸준히 열심히 하는 것들이 중요하다. 너무너무 당연한 말이긴 한데 벼락치기로 대답할 수 없는 질문들이 나왔었기에 더 느꼈던 것임!!

예상질문에서 많이 나왔지만 어렵다!!자바스크립트, 브라우저, 사용하는 라이브러리, 프레임워크, 번들러 등 동작원리 같은 기본적인 것들을 깊게!!! 공부하는 게 좋을 것 같다. 단순히 개념 설명도 중요하지만 '이러한 상황이라고 할 때 이것은 어떻게 될까, 어떻게 동작할까'에 대답할 수 있어야한다.

정리하자면, 꾸준히 공부하고 깊게 공부하자~~

2021.7.24(sat)_TypeScript + useReducer

이브✱ — Sun, 25 Jul 2021 00:20:52 +0900

원인을 모를 때는 정말 모르겠다가 원인을 알고 해결하고 보면 꼭 별 거 아니고 당연한 것을 못 알아챘다는 생각이 든다.

고민할 땐 진지하지만 해결한 후에는 아오 하고 넘어가기 쉬워 작성해본다.

useReducer를 사용한 곳에서 오류 발생

오류 메시지를 읽어보면 inputReducer의 반환값이 {...} | undefined로 되어있다.

useReducer 함수

useReducer 내부는 switch문으로 되어 있고, action.type은 'title', 'description', 'color'로 세 경우가 있다.

어떻게하면 반환값이 undefined일 가능성이 있을까.

action.type이 'title', 'description', 'color'이 아닌 경우!

그래서 순간 switch문에 default를 추가할까했다..

하지만 case는 딱 문자열 세 가지뿐이기 때문에 type 지정을 바꿔주면 된다.

이렇게 오류를 해결했다

[Web¦Browser] DOM, CSSOM, Render Tree

이브✱ — Wed, 21 Jul 2021 09:06:31 +0900

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 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결

이 전체 프로세스의 최종 출력이 바로 이 간단한 페이지의 DOM(Document Object Model)이며, 브라우저는 이후 모든 페이지 처리에 이 DOM을 사용한다.

2. CSSOM(CSS Object Model)

- 브라우저는 DOM 생성하는 동안 CSS 스타일시트 링크 태그를 접하고 리소스에 대해 요청한다.

- HTML을 DOM 트리로 만든 것처럼, CSS도 브라우저가 이해하고 처리할 수 있도록 변환해줘야 한다. HTML과 같은 과정을 반복한다.

3. Render Tree

- Render Tree: 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리

- DOM, CSSOM 결합되어 형성

- 페이지를 렌더링하는 데 필요한 노드만 포함

- display: none 속성은 요소가 보이지 않으며 레이아웃에 포함되지 않도록 렌더링 트리에서 요소 완전 제거

- visibility: hidden 속성은 요소를 보이지 않게 만들지만, 여전히 레이아웃에서 공간을 차지(비어있는 상자로 렌더링)

- 최종 출력은 화면에 표시되는 모든 노드의 콘텐츠, 스타일 정보를 모두 포함하는 렌더링 트리. 렌더링 트리가 생성되었으므로 레이아웃 단계로 진행할 수 있다.

렌더 트리 생성: 표시할 노드와 해당 노드의 스타일 계산

레이아웃(리플로우): 기기 뷰포트 내의 노드의 정확한 위치와 크기 계산

페인팅(래스터화): 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계

[Web¦Browser] 브라우저 주소창에 URL 입력 후의 과정

이브✱ — Tue, 20 Jul 2021 20:03:48 +0900

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 캐시. 브라우저 캐시에 없으면 컴퓨터 OS에 system call한다. OS 또한 DNS 기록을 캐시로 갖고있음
3) 라우터 캐시. 컴퓨터에도 없으면 라우터와 브라우저는 커뮤니케이션한다.
4) ISP 캐시. ISP는 kt, sk와 같은 Internet Service Provider를 말함. ISP는 고유의 DNS 서버를 갖고 있다.

이렇게 많은 레벨의 캐시가 있는 이유는 네트워크 트래픽 조절과 데이터 전송 시간을 개선하는 데 필수적이기 때문이다.

3. 캐시에서 찾지 못하면, ISP의 DNS 서버는 DNS쿼리를 시작.

- DNS 쿼리의 목적은 url과 일치하는 ip주소를 찾을 때까지 DNS 서버들을 검색하기 위함

- 도메인 아키텍처를 기반으로 DNS 검색을 재귀적으로 수행

- root domain → top-levels domians → second-level domains → third-level-domains

- 위 순서로 네임 서버가 리다이렉트되고 마지막 네임서버가 ip주소를 찾아 리턴한다. 이 ip 주소는 브라우저로 보내진다. (콜스택처럼 쌓였다가 마지막에 반환값 쭉쭉 돌아오듯이 인듯)

4. 브라우저가 서버에 TCP 연결 시작

- 브라우저가 ip 주소를 수신하면 ip 주소와 일치하는 서버와 연결하려고 함

- 서버와 연결하기 위해 인터넷 프로토콜을 사용한다.

- 여러 프로토콜들이 있지만 HTTP 요청에 가장 보편적인 프로토콜이 TCP이다.

- TCP/IP three-way handshake를 사용해 연결될 수 있다.(SYN ↔ ACK)

1) client → server 연결을 요청하기 위해 SYN패킷 보냄
2) server → client 연결을 받을 수 있다면 SYN/ACK 패킷 응답
3) client → server 응답 받았음을 ACK패킷을 보내서 알림

5. 브라우저가 웹서버에 HTTP 요청 보냄

- TCP 연결이 되면 데이터 전송을 시작해야 한다.

- 브라우저는 웹서버에 GET요청을 보냄(form을 보내거나 기밀정보에 들어갈 땐 POST요청)

- 헤더에 여러 정보를 담아 보내고, 브라우저가 도메인에 대해 쿠키를 갖고있다면 쿠키 정보다 전달한다.

6. 서버는 요청을 처리해 특정 포맷(json, xml, html)으로 응답을 보냄

7. 서버가 HTTP 응답 전송

- 요청한 웹페이지뿐만 아니라 상태 코드, 압축 타입(Content-Encoding), 캐시 방법(Cache-Control), 쿠키, 개인 정보 등을 포함해 응답한다.

8. 브라우저가 HTML 컨텐츠를 단계적으로 보여준다

1) HTML 뼈대가 렌더링
2) 태그를 체크하고 추가 요소에 대한 GET 요청(이미지, CSS파일, JS파일 등)
3) 정적 파일들은 브라우저에 캐시돼서 다음 번엔 다시 fetch하지 않아도 된다.

[LeetCode_JS] 75. Sort Colors _array

이브✱ — Sun, 18 Jul 2021 00:37:42 +0900

문제

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) continue;   // *
        } 
        else if(nums[i] === 2) {
            nums[i] = nums[twoP]
            nums[twoP] = 2;
            twoP--;
        }
        if(nums[i] === 0 || nums[i] === 2) i--;  // **
    }
};

zeroP의 왼쪽은 모두 0이고, twoP의 오른쪽은 모두 2만 있을 수 있다.

즉, 0 다음 인덱스를 가리키는 포인터가 zeroP이고, 2 이전 인덱스를 가리키는 포인터가 twoP이다.

i는 반복문을 돌면서 원소 하나씩 돌면서 체크하고, 0이나 2일 경우 swap한다.

이 때, (**)swap한 이후 바뀐 값(nums[i])이 또 0이나 2일 수 있다!

그래서 마지막에 if문으로 검사해주고, i가 증가하지 않은 상태에서 한 번 더 swap할 수 있도록 한다.

(*)zeroP와 i가 같을 때는 바뀐 nums[i]값이 무조건 0이므로 바로 i++이 될 수 있도록 continue해준다.

(nums[i]값을 if문으로 체크해 i--가 되지 않도록. 즉, i가 그대로인 상태에서 또 체크하지 않도록)

리팩토링 전 풀이

위처럼 풀기 전에, i--하면 i값은 그대로인 상태에서 for문을 한 번 더 돌게 되는데 이걸 생각을 못 하고....

함수로 빼서 재귀를 돌도록 했었다..

var sortColors = function(nums) {
    let zeroP = 0;
    let twoP = nums.length - 1;
    
    for(let i = 0; i < nums.length; i++) {
        const res = check(nums, i, zeroP, twoP);
        if(!res) break;
        [zeroP, twoP] = res;
    }
};

const check = (nums, i, zeroP, twoP) => {
    if(twoP < i) return null;
    else if(nums[i] === 0) {
        nums[i] = nums[zeroP]
        nums[zeroP] = 0;
        if(zeroP === i) return [zeroP+1, twoP];
        zeroP++;
    } 
    else if(nums[i] === 2) {
        nums[i] = nums[twoP]
        nums[twoP] = 2;
        twoP--;
    }
    if(nums[i] === 0 || nums[i] === 2) check(nums, i, zeroP, twoP)
    return [zeroP, twoP];
}

코드가 지저분할 뿐더러 런타임은 72~124까지 왔다갔다하고, 메모리는 7%..;;

그래서 리팩토링을 해서 위코드로 바꾼 것.

지저분한 코드이고 부끄럽긴 하지만 그래도 기록해놓는 게 좋을 것 같아 올려는 놓는다.

참고

유튜브 - 코드없는 프로그래밍 Sort Colors