CS 94

Proxy(Object.defineProperty와 비교)

프록시(Proxy)Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로,가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달 되기도 함 Proxy의 사전적 뜻은 '대리인', '대리'라는 뜻으로 자바스크립트에서도 대리인의 역할을 수행함 프록시 객체(Proxy object)는 대상 객체(Target object) 대신 사용됨대상 객체를 직접 사용하는 대신, 프록시 객체가 사용되며 각 작업을 대상 객체로 전달하고 결과 다시 코드로 돌려줌 이러한 방식을 통해 프록시 객체는 자바스크립트의 기본적인 명령에 대한 동작을 사용자 정의 가능하도록 함객체 자체가 처리하는 특정 명령을 정의할 수 있게 되는 것이런 명령의 종류는 속성검색..

CS/프로그래밍 2024.06.12

브라우저 살펴보기 - 컴포지터가 사용자 입력을 받았을 때(3)

기술글을 보고 정리하였음(https://d2.naver.com/helloworld/6204533)이 글은 사용자 입력(input)을 받았을 때 컴포지터가 어떻게 부드러운 상호작용이 이루어지게 하는지 알아보고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문) 컴포지터가 사용자 입력을 받았을 때▶ 브라우저 관점에서 입력 이벤트'입력 이벤트(input event)'라는 말을 들었을 때 입력란에서 일어나는 값 입력이나 마우스 클릭만 생각할 수 있음하지만 브라우저의 관점에서 입력이란 모든 사용자의 제스처를 의미마우스 휠을 스크롤하는 것도 입력 이벤트이고, 화..

CS/브라우저 2024.06.08

브라우저 살펴보기 - 렌더러 프로세스의 내부동작(2)

기술글을 보고 정리하였음(https://d2.naver.com/helloworld/5237120)이 글은 렌더러 프로세스가 HTML 문서를 받았을 때 어떤 절차를 거쳐 화면을 구성하는지 설명하고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문) 렌더러 프로세스의 내부 동작렌더러 프로세스는 여러 측면에서 웹 페이지의 성능에 영향을 끼침 ▶ 렌더러 프로세스는 웹 콘텐츠를 처리메인 스레드와 워커 스레드, 컴포지터 스레드, 래스터 스레드가 있는 렌더러 프로세스렌더러 프로세스는 탭 내부에서 발생하는 모든 작업을 담당렌더러 프로세스의 메인 스레드가 브라우저로 ..

CS/브라우저 2024.06.08

브라우저 살펴보기 - 내비게이션 과정에서 일어나는 일(1)

기술글을 보고 정리하였음(https://d2.naver.com/helloworld/2922312)저번에 이어 웹 사이트를 표시하기 위해 각 프로세스와 스레드가 어떻게 통신하는지 좀 더 깊게 알아보고 있음기술글이 2019년도에 작성된 글이기 때문에 현재에는 사용되지 않는 이벤트등이 기재되어있어 이런 흐름으로 페이지 이동을 한다고 생각하면 될듯 (크롬에 많은 버전 업데이트가 있었기 때문)내용을 알기 전에 브라우저 동작과정과 프로세스와 쓰레드에 대한 기본 지식을 가지고 읽어야 이해하기 좋음 내비게이션 과정에서 일어나는 일브라우저의 주소 표시줄에 URL을 입력하면 브라우저가 인터넷에서 데이터를 가져와서 페이지를 표시함이 동작에서 사용자가 사이트를 요청하고 브라우저가 페이지 렌더링을 준비하는 과정(= 내비게이션 ..

CS/브라우저 2024.06.08

ArrayList vs LinkedList

ArrayList 란?ArrayList는 배열의 상위호환 버전 정도로 이해하면 된다.기존의 배열만으로는 자료를 담고 관리하는데 약간 불편함이 있어서 나온 것이 ArrayList이기 때문이다.ArrayList는 내부적으로 배열을 사용하여 구현되어 있지만, 동적으로 배열의 크기를 바꿀 수 있다.ArrayList는 초기에는 일정한 크기의 배열을 생성하고, 요소를 추가할 때마다 내부 배열의 크기를 자동으로 조정한다.요소를 추가할 때 내부 배열이 가득 차게 되면, ArrayList는 현재 배열의 크기를 늘려 더 많은 요소를 수용할 수 있는새로운 배열을 생성한다.그리고 기존의 요소들을 새 배열로 복사하고, 새로운 요소를 추가한다.이렇게 배열의 크기를 동적으로 조정하여 ArrayList가 동적으로 요소를 추가, 제거..

CS/프로그래밍 2024.06.07

ZUSTAND

ZUSTAND에 관심을 갖게 된 이유npm trends에 따르면 redux 다음으로 가장 핫한 상태관리 라이브러리,꾸준하게 상승중이고 상승폭도 가장 커 다음 프로젝트에는 Zustand를 사용해보려고 한다. 왜 ZUSTAND가 핫할까?https://zustand-demo.pmnd.rs/  Zustand zustand-demo.pmnd.rs 1. 직관적이고 간편한 사용법ZUSTAND 메인페이지와 Documentation에서 사용법을 살펴보면npm install zustand import { create } from 'zustand'const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 ..

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..

Jotai

JotaiJotai는 React State Management Libarary 중 하나이고 Recoil, Redux와 같이 상태 관리에 필요한 편의 기능을 제공하는 라이브러리Jotai는 Recoil과 같은 Atomic 접근 방식으로 React에서 사용되는 state와 비슷하게 리액트 트리 안에서 상태를 저장하고 관리하는 방법임 Jotai 특징https://jotai.org/ Jotai, primitive and flexible state management for ReactJotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by c..

CS/프로그래밍 2024.05.08

AWS S3 + CloudFront 배포

개요1. AWS IAM 설정2. S3 생성 및 설정3. CloudFront 설정4. Github Action으로 CI / CD 구축 ✅ AWS IAM 설정📦 IAM(Identity and Access Management)이란?AWS리소스에 대한 엑세스를 안전하게 제어할 수 있는 웹 서비스로 AWS 계정을 최초로 생성할 때 만들어지는 루트 사용자는 모든 엑세스 권한을 가지기에 보안에 주의해서 사용해야하므로 IAM을 통해 리소스를 사용할 수 있는 인증 및 권한 부여된 대상을 제어한다.리소스에 대해 여러 사람에게 다양한 권한을 부여할 수 있다.사용자에게 직접 정책을 설정할 수도 있지만 그룹에 대해서도 부여할 수 있다. 📦 IAM 사용자 추가하기AWS > IAM > 사용자 생성 > 1 ~3단계 수행 > 생성..

CS 2024.05.08

JS, StructuredClone()

객체를 복사하려고 한다면 깊은 복사와 얕은 복사라는 개념을 알아야 함JS에서 데이터는 두가지 주요 유형으로 나눌 수 있음. 바로 원시값과 참조값임 원시값은 변수에 할당될 때 해당 변수에 직접 값이 저장됨참조값은 객체로 새로운 변수에 원본 객체에 주소가 복사되어 두 변수가 같은 객체를 가리키게 됨따라서 원본 객체를 변경하면 복사본도 영향을 받게 되는 것. 이것을 얕은 복사라고 함복사본의 영향이 가지 않도록 만들기 위해 객체의 내용을 완전히 새로운 메모리에 저장하는 것을 깊은 복사라고 함이렇게 깊은 복사로 복사된 객체는 원본 객체와는 별개의 독립적인 객체로 원본 객체의 영향을 끼치지 않음 객체를 복사할때 단순히 전개연산자(spread operator)를 사용하여 복사해 원본객체의 영향을 끼치지 않도록 복사할..

CS/프로그래밍 2024.05.01