분류 전체보기 97

Proxy(Object.defineProperty와 비교)

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

CS/프로그래밍 2024.06.12

정규화(Normalization)

정규화 란?정규화는 관계형 데이터베이스에서 데이터를 구조화하고 중복을 줄이며 데이터의 일관성을 유지하기 위한 과정이다.이를 통해 데이터베이스의 성능을 향상시키고 데이터의 무결성을 확보할 수 있다.정규화는 주로 엔티티 간의 관계를 분석하여 데이터를 논리적인 단위로 나누는 작업이다.정규화의 기본 목표는 테이블 간에 중복된 데이터를 허용하지 않는다는 것이다.중복된 데이터를 허용하지 않음으로써 무결성을 유지할 수 있으며, DB용량 역시 줄일 수 있다.  정규화 단계정규화는 여러 단계로 진행되며, 각 단계는 정규형(Normal Form)이라고 불리는 기준을 충족해야 한다.각 정규형은 데이터의 구조를 조금씩 변경하여 중복과 종속성을 제거하며, 더욱 높은 수준의 일관성을 유지한다. 제 1 정규화제 1 정규화란 테이블..

카테고리 없음 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