본문 바로가기

전체 글282

브라우저 살펴보기4 - 컴포지터가 사용자 입력을 받았을 때 기술글을 보고 정리하였음(https://d2.naver.com/helloworld/6204533)이 글은 사용자 입력(input)을 받았을 때 컴포지터가 어떻게 부드러운 상호작용이 이루어지게 하는지 알아보고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문) 컴포지터가 사용자 입력을 받았을 때 ▶ 브라우저 관점에서 입력 이벤트 '입력 이벤트(input event)'라는 말을 들었을 때 입력란에서 일어나는 값 입력이나 마우스 클릭만 생각할 수 있음하지만 브라우저의 관점에서 입력이란 모든 사용자의 제스처를 의미마우스 휠을 스크롤하는 것도 입력 이벤트이고,.. 2024. 6. 5.
브라우저 살펴보기3 - 렌더러 프로세스의 내부동작 기술글을 보고 정리하였음(https://d2.naver.com/helloworld/5237120)이 글은 렌더러 프로세스가 HTML 문서를 받았을 때 어떤 절차를 거쳐 화면을 구성하는지 설명하고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문) 렌더러 프로세스의 내부 동작 렌더러 프로세스는 여러 측면에서 웹 페이지의 성능에 영향을 끼침 ▶ 렌더러 프로세스는 웹 콘텐츠를 처리렌더러 프로세스는 탭 내부에서 발생하는 모든 작업을 담당렌더러 프로세스의 메인 스레드가 브라우저로 전송된 대부분의 코드를 처리간혹 웹 워커나 서비스 워커를 사용하는 경우에는 워커 .. 2024. 6. 4.
브라우저 살펴보기2 - 내비게이션 과정에서 일어나는 일 기술글을 보고 정리하였음(https://d2.naver.com/helloworld/2922312) 저번에 이어 웹 사이트를 표시하기 위해 각 프로세스와 스레드가 어떻게 통신하는지 좀 더 깊게 알아보고 있음 기술글이 2019년도에 작성된 글이기 때문에 현재에는 사용되지 않는 이벤트등이 기재되어있어 이런 흐름으로 페이지 이동을 한다고 생각하면 될듯 (크롬에 많은 버전 업데이트가 있었기 때문)내비게이션 과정에서 일어나는 일브라우저의 주소 표시줄에 URL을 입력하면 브라우저가 인터넷에서 데이터를 가져와서 페이지를 표시함이 동작에서 사용자가 사이트를 요청하고 브라우저가 페이지 렌더링을 준비하는 과정(= 내비게이션 = 사이트간의 이동)에 초점을 맞춰 살펴볼것임▶ 브라우저 프로세스에서 시작 브라우저 프로세스가 탭 영.. 2024. 6. 4.
브라우저 살펴보기 - CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처 기술글을 보고 정리하였음(https://d2.naver.com/helloworld/2922312)Chrome을 중심으로 최신 브라우저를 들여다보며 웹페이지가 어떤 단계를 거쳐 화면에 그려지는지를 설명하고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문)CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처컴퓨터의 핵심은 CPU와 GPU브라우저가 실행되는 환경을 이해하려면 몇 가지 컴퓨터 부품과 그 기능을 이해해야 함▶ CPU CPU (central processing unit, 중앙처리장치)는 컴퓨터의 두뇌라 할 수 있음CPU 코어는 여러 종류의 작.. 2024. 6. 4.
브라우저 동작 오픈소스 렌더링 엔진의 소스코드를 분석하여 어떻게 브라우저가 동작하는지 파악한 이스라엘 개발자가 게시한 글을 번역한 기술글(https://d2.naver.com/helloworld/59361)을 공부하면서 작성한 글기술글이 2019년도에 작성된 글이기 때문에 내용이 옛날 내용이라는 댓글 발견(흐름은 그대로니 웹킷이나 파이어폭스가 어떻게 동작하는것보다 브라우저의 기본구조나 각 동작과정에 대해 이해하는 정도가 좋을듯!!)[ 브라우저의 주요 기능 ]브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브러우저에 표시하는 것자원은 보통 HTML문서지만 PDF나 이미지 또는 다른 형태일 수 있음. 자원의 주소는 URI에 의해 정해짐 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하.. 2024. 6. 3.
JS, 프로그래머스 - 2016 문제를 풀면서 메서드를 이용하여 간단하게 푸는것이 오히려 독이 될 수 있음을 깨달아 블로그 글 갱신 https://school.programmers.co.kr/learn/courses/30/lessons/12901# 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제는2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 로 문제는 배열과 패턴을 파악하여 금방 풀수 있었음 function solution(a, b) { l.. 2024. 5. 21.
jquery를 사용하지 않게 된 이유 [ jQuery ]jQuery는 JS를 작성하는것은 재밌어야 한다는 모토를 가진 JS 라이브러리적게 쓰고 많은 일을 하게(write less, do more) 도와주는 JS 라이브러리라고 생각하면 됨일반적으로 반복적인 작업을 수행하고 불필요한 마크업을 제거, 짧고 이해하기 쉬운 코드를 작성할 수 있게 해줌 예를 들어 jQuery가 등장하기 이전에는 XMLHttpRequest를 사용하여 비동기 통신을 처리해야 했음let xhr = new XMLHttpRequest();xhr.open('POST', '/test');xhr.send();xhr.onload = function () { if (xhr.status != 200) { console.error(`${xhr.status}: ${xhr.status.. 2024. 5. 20.
JS, 프로그래머스 - 멀리뛰기 피보나치수 처음에 한눈에 알아보기 정말 어려워.... https://school.programmers.co.kr/learn/courses/30/lessons/12914 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제는 효진이는 한 번에 1칸, 또는 2칸을 뛸 수 있습니다. 멀리뛰기에 사용될 칸의 수 n이 주어질 때, 효진이가 끝에 도달하는 방법이 몇 가지인지 알아내, 여기에 1234567을 나눈 나머지를 리턴하는 함수, solution을 완성하세요. 처음에는 문제는 이해해도 규칙성을 파악하지 못해 오래 걸림 n이 3,4,5... 일 경우 각각 답을 구해보.. 2024. 5. 9.
Jotai 리액트에서 훅의 개념으로 상태관리를 시작한 최초의 라이브러리 중 하나이며, 최소 상태 개념인 Atom을 처음 사용한 Recoil!! 많은 회사에서나 프로젝트에서 사용하는 전역 상태 관리 라이브러리임 하지만 20년 처음 만들어졌지만 아직 정식으로 출시한 라이브러리가 아니며 Recoil 팀에서는 리액트 18에서 제공되는 동시성 렌더링, 서버 컴포넌트, Streaming SSR이 지원되기 전까지는 1.0.0을 릴리스 하지 않을것이라고 함 따라서 실제 프로덕션에 사용하기에는 안전성, 성능, 사용성이 떨어질수 있음 또한 가장 큰 핵심 포인트는 핵심개발자가 이미 퇴사한 상태라고 함 원래 Recoil을 사용하는 기업들이 많았는데 현재 Jotai와 Redux, Zustand로 변경하는 모습도 보여 이참에 Recoil과.. 2024. 5. 8.

티스토리툴바