티스토리

CS겸 취준까지

검색하기

블로그 홈

CS겸 취준까지

together-cs.tistory.com/m

H.E 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Proxy(Object.defineProperty와 비교) 프록시(Proxy)Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로,가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달 되기도 함 Proxy의 사전적 뜻은 '대리인', '대리'라는 뜻으로 자바스크립트에서도 대리인의 역할을 수행함 프록시 객체(Proxy object)는 대상 객체(Target object) 대신 사용됨대상 객체를 직접 사용하는 대신, 프록시 객체가 사용되며 각 작업을 대상 객체로 전달하고 결과 다시 코드로 돌려줌 이러한 방식을 통해 프록시 객체는 자바스크립트의 기본적인 명령에 대한 동작을 사용자 정의 가능하도록 함객체 자체가 처리하는 특정 명령을 정의할 수 있게 되는 것이런 명령의 종류는 속성검색.. 공감수 0 댓글수 2 2024. 6. 12.
정규화(Normalization) 정규화 란?정규화는 관계형 데이터베이스에서 데이터를 구조화하고 중복을 줄이며 데이터의 일관성을 유지하기 위한 과정이다.이를 통해 데이터베이스의 성능을 향상시키고 데이터의 무결성을 확보할 수 있다.정규화는 주로 엔티티 간의 관계를 분석하여 데이터를 논리적인 단위로 나누는 작업이다.정규화의 기본 목표는 테이블 간에 중복된 데이터를 허용하지 않는다는 것이다.중복된 데이터를 허용하지 않음으로써 무결성을 유지할 수 있으며, DB용량 역시 줄일 수 있다. 정규화 단계정규화는 여러 단계로 진행되며, 각 단계는 정규형(Normal Form)이라고 불리는 기준을 충족해야 한다.각 정규형은 데이터의 구조를 조금씩 변경하여 중복과 종속성을 제거하며, 더욱 높은 수준의 일관성을 유지한다. 제 1 정규화제 1 정규화란 테이블.. 공감수 1 댓글수 3 2024. 6. 12.
브라우저 살펴보기 - 컴포지터가 사용자 입력을 받았을 때(3) 기술글을 보고 정리하였음(https://d2.naver.com/helloworld/6204533)이 글은 사용자 입력(input)을 받았을 때 컴포지터가 어떻게 부드러운 상호작용이 이루어지게 하는지 알아보고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문) 컴포지터가 사용자 입력을 받았을 때▶ 브라우저 관점에서 입력 이벤트'입력 이벤트(input event)'라는 말을 들었을 때 입력란에서 일어나는 값 입력이나 마우스 클릭만 생각할 수 있음하지만 브라우저의 관점에서 입력이란 모든 사용자의 제스처를 의미마우스 휠을 스크롤하는 것도 입력 이벤트이고, 화.. 공감수 0 댓글수 1 2024. 6. 8.
브라우저 살펴보기 - 렌더러 프로세스의 내부동작(2) 기술글을 보고 정리하였음(https://d2.naver.com/helloworld/5237120)이 글은 렌더러 프로세스가 HTML 문서를 받았을 때 어떤 절차를 거쳐 화면을 구성하는지 설명하고 있음기술글이 2019년도에 작성된 글이기 때문에 현재와는 많이 다른점이 있을것이기에 이런 흐름으로 만들어졌다고 이해하고 현재와 다른점이 있다는것을 생각하면서 봐야함(크롬에 많은 버전 업데이트가 있었기 때문) 렌더러 프로세스의 내부 동작렌더러 프로세스는 여러 측면에서 웹 페이지의 성능에 영향을 끼침 ▶ 렌더러 프로세스는 웹 콘텐츠를 처리메인 스레드와 워커 스레드, 컴포지터 스레드, 래스터 스레드가 있는 렌더러 프로세스렌더러 프로세스는 탭 내부에서 발생하는 모든 작업을 담당렌더러 프로세스의 메인 스레드가 브라우저로 .. 공감수 0 댓글수 1 2024. 6. 8.
브라우저 살펴보기 - 내비게이션 과정에서 일어나는 일(1) 기술글을 보고 정리하였음(https://d2.naver.com/helloworld/2922312)저번에 이어 웹 사이트를 표시하기 위해 각 프로세스와 스레드가 어떻게 통신하는지 좀 더 깊게 알아보고 있음기술글이 2019년도에 작성된 글이기 때문에 현재에는 사용되지 않는 이벤트등이 기재되어있어 이런 흐름으로 페이지 이동을 한다고 생각하면 될듯 (크롬에 많은 버전 업데이트가 있었기 때문)내용을 알기 전에 브라우저 동작과정과 프로세스와 쓰레드에 대한 기본 지식을 가지고 읽어야 이해하기 좋음 내비게이션 과정에서 일어나는 일브라우저의 주소 표시줄에 URL을 입력하면 브라우저가 인터넷에서 데이터를 가져와서 페이지를 표시함이 동작에서 사용자가 사이트를 요청하고 브라우저가 페이지 렌더링을 준비하는 과정(= 내비게이션 .. 공감수 0 댓글수 0 2024. 6. 8.
ArrayList vs LinkedList ArrayList 란?ArrayList는 배열의 상위호환 버전 정도로 이해하면 된다.기존의 배열만으로는 자료를 담고 관리하는데 약간 불편함이 있어서 나온 것이 ArrayList이기 때문이다.ArrayList는 내부적으로 배열을 사용하여 구현되어 있지만, 동적으로 배열의 크기를 바꿀 수 있다.ArrayList는 초기에는 일정한 크기의 배열을 생성하고, 요소를 추가할 때마다 내부 배열의 크기를 자동으로 조정한다.요소를 추가할 때 내부 배열이 가득 차게 되면, ArrayList는 현재 배열의 크기를 늘려 더 많은 요소를 수용할 수 있는새로운 배열을 생성한다.그리고 기존의 요소들을 새 배열로 복사하고, 새로운 요소를 추가한다.이렇게 배열의 크기를 동적으로 조정하여 ArrayList가 동적으로 요소를 추가, 제거.. 공감수 0 댓글수 0 2024. 6. 7.
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 .. 공감수 0 댓글수 2 2024. 5. 22.
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.. 공감수 0 댓글수 0 2024. 5. 20.
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.. 공감수 0 댓글수 0 2024. 5. 8.
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단계 수행 > 생성.. 공감수 0 댓글수 0 2024. 5. 8.
JS, StructuredClone() 객체를 복사하려고 한다면 깊은 복사와 얕은 복사라는 개념을 알아야 함JS에서 데이터는 두가지 주요 유형으로 나눌 수 있음. 바로 원시값과 참조값임 원시값은 변수에 할당될 때 해당 변수에 직접 값이 저장됨참조값은 객체로 새로운 변수에 원본 객체에 주소가 복사되어 두 변수가 같은 객체를 가리키게 됨따라서 원본 객체를 변경하면 복사본도 영향을 받게 되는 것. 이것을 얕은 복사라고 함복사본의 영향이 가지 않도록 만들기 위해 객체의 내용을 완전히 새로운 메모리에 저장하는 것을 깊은 복사라고 함이렇게 깊은 복사로 복사된 객체는 원본 객체와는 별개의 독립적인 객체로 원본 객체의 영향을 끼치지 않음 객체를 복사할때 단순히 전개연산자(spread operator)를 사용하여 복사해 원본객체의 영향을 끼치지 않도록 복사할.. 공감수 0 댓글수 1 2024. 5. 1.
INP란 무엇인가? 개요INP의 정의크롬 개발자 도구를 통한 INP 개선 방법 응답성(페이지가 인터렉션에 얼마나 빠르게 응답하는지)은 사용자에게 매우 중요하다. ✅ INP의 정의📦 INP (Interaction to Next Paint)다음 페이지와의 상호작용이라는 의미의 INP는 반응성을 평가하는 실험 지표로써 페이지에서 발생하는 모든 상호작용을 측정하여 페이지의 전반적인 응답성을 측정하며 이를 통해 시간을 최소화하는 것이 목표이다.INP는 페이지 수명동안의 모든 상호작용 요소를 관찰하고 가장 긴 응답 시간(지연 시간)이 가진 것을 보고한다.INP가 낮으면 페이지의 대다수의 상호작용이 대부분 빠르게 반응한다 -> 좋은 응답성을 가진다. 🎉 지연 시간이란?더보기단일 상호작용의 지연 시간은 상호작용의 일부인 어떠한 이벤트.. 공감수 0 댓글수 0 2024. 5. 1.
애자일(Agile) 방법론과 TDD & Scrum [ 애자일(Agile) 방법론 ] https://velog.io/@iamminzzy/애자일Agile-방법론-이란-BDD부터-TDD까지 소프트웨어 개발 방식의 하나로, 작업 계획을 짧은 단위로 세우고 제품을 만들고 고쳐 나가는 사이클을 반복함으로써 고객의 요구 변화에 유연하고 신속하게 대응하는 개발 방법론 쉽게 말하면, 일정한 주기를 가지고 빠르게 제품을 출시하여 고객의 요구사항, 변화된 환경에 맞게 요구를 더하고 수정해나가는 탄력적인 방법론 Agile는 기민한, 날렵한이라는 뜻으로 좋은 것을 빠르게 취하고 유연하고 효율적으로 개발할 수 있도록 만드는 다양한 방법론을 통칭해 일컫는 말임 애자일 프레임 워크 애자일 방법론을 따르는 개발 기법 ex) Scrum, kanban, XP(eXtreme Program.. 공감수 1 댓글수 0 2024. 4. 17.
[Typescript] Generic과 forwardRef 개요 1. 제네릭함수와 forwardRef의 문제점 2. 해결 방안 ✅ 제네릭함수와 forwardRef의 문제점 📦 기본적인 예제 (Table) const Table = (props: { data: T[]; renderRow: (row: T) => React.ReactNode; }) => { return ( {props.data.map((item, index) => ( ))} ); }; 위 예제는 간단히 제네릭함수를 통해서 구현된 Table이다. 현재 Table 컴포넌트를 사용하는 것을 통해서 어떻게 추론이 되는지 알아보겠습니다. { (parameter) row: string return {row}; }} />; 여기서 알 수 있듯이 data로 전달된 Array형태에서 타입이 추론이 되고, 그 추론된 타.. 공감수 0 댓글수 0 2024. 4. 17.
DX UX(User Experience)는 고객이 이용하는 서비스에 대한 사용자 경험의 만족도를 의미함 UX 개선 작업을 통해 고객들의 서비스 만족도를 개선하고 이는 곧 더 많은 사용자 유입으로 이어지며 나아가 해당 비즈니스의 수익 증진으로 이어지게 됨 DX는 이러한 UX에서 U(User)를 D(Developer)를 대입한것으로 개발자들이 본인의 업무 환경에서 서비스를 개발하며 느끼는 경험의 만족도이며, 이를 개선하는 작업을 통해 팀과 프로젝트에 지속적으로 긍정적인 영향을 미치는 것을 말함 SW 개발은 결국 사람(개발자)들의 지적 활동이기 때문에 사람들이 어떤 생각을 가지고 일하고 있으며 동기를 부여하고 더 나은 참여도를 이끌어내는 것이 중요함 심리학의 관점에 따라 개발자 경험(DX)을 세가지 분류로 나눌 수.. 공감수 0 댓글수 2 2024. 4. 3.
useLayoutEffect의 활용 개요 1. useLayoutEffect 2. Usage 3. useLayoutEffect의 성능저하 4. SSR에서 사용이 가능한가? ✅ useLayoutEffect란? 📦 useLayoutEffect(Setup, dependencies?) 브라우저가 화면을 다시 채우기 전에 실행되는 useEffect이며, 성능 저하를 유발할 수 있어 가급적 useEffect를 사용할 것을 공식문서에서는 권장하고 있다. 리랜더링 시: (클린업함수가 정의되어있을 시)cleanup 함수(이전 값ㅋ) → setup함수(새 값) → ( 컴포넌트가DOM에서 제거되기 전) cleanup 함수 실행 의존성을 이전 값과 비교하여 실행할지 말지를 결정하며, 인수가 생략되었을 시 렌더링할 때마다 실행된다. 📦 Usage 대부분의 컴포넌트.. 공감수 0 댓글수 2 2024. 4. 2.
Zustand란 무엇인가? 개요 1. Zustand의 특징 2. 다른 라이브러리와 비교 3. 사용 방법 ✅ Zustand 우리는 Client state를 관리하기 위해서 상태 관리 라이브러리를 사용해야하는데 현재 update가 활발하게 이루어지고 있으며 사용량도 꾸준히 증가하고 있는 Zustand에 대해서 알아보겠습니다. (Jotai를 개발한 회사에서 만들었다고 한다.) 📦 Zustand의 개발 이유 React에서 일어나는 3가지 문제점에 대한 해결책을 제시하기 위해 제작되었다고 한다. Zombie children: 하위 컴포넌트인 "A"에서 실행하던 어떠한 일이 끝나기 전 상위 컴포넌트가 unmount되었을 시에 A가 작업을 끝낸 후 화면세엇 사라져도 메모리를 지속적으로 잡아먹는 문제 React concurrnecy: 우선순위를.. 공감수 0 댓글수 0 2024. 3. 23.
MSA(마이크로서비스 아키텍처) [ MSA(마이크로서비스 아키텍처) ] MSA는 여러 개의 작은 서비스로 구성되어 각 서비스가 독립적으로 개발되고 배포되는 구조 즉 하나의 큰 어플리케이션을 여러개의 작은 어플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍쳐 ▶ MSA의 등장배경 Monolithic Architecture는 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어있는 형태 아직까지는 많은 소프트웨어가 Monolithic 형태로 구현되어 있음 소규모 프로젝트에는 Monolithic Architecture가 훨씬 합리적임 간단한 Architecture이고, 유지보수가 용이하기 때문 하지만 규모가 커지게 되면Monolithic Architecture 단점이 명확함 서비스/프로젝트가 커지면 커질수록, 영향도 파악 및 전체 시.. 공감수 0 댓글수 0 2024. 3. 23.
디자인 패턴 - 팩토리 패턴 / 전략 패턴 / 옵저버 패턴 1. 팩토리 패턴(Factory Pattern) 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다. 상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가지며 상위 클래스에서는 인스턴스 생성 박식에 대해 전혀 알 필요가 없기 때문에 더 많은 유연성을 갖게 됩니다. 그리고 객체 생성 로직이 따로 떼어져 있기 때문에 코드를 리펙토링하더라도 한 곳만 고칠 수 있게 되어 유지 보수성이 증가된다. 예를 들면, 라떼 레시피와 아메리카노 레시피, 우유 레시피라는 구체적인 내용이 들어 있는 하위 클래스가 컨베이어 벨트를 통해 전달되고, 상위 클래스인 바리스.. 공감수 0 댓글수 1 2024. 3. 22.
SOLID 원칙 개요 1. SOLID 원칙이란? 2. 단일 책임 원칙 (SRP) 3. 개방 폐쇄 원칙 (OCP) 4. 리스코프 치환 원칙 (LSP) 5. 인터페이스 분리 원칙 (ISP) 6. 의존관계 역전 원칙 (DIP) ✅ SOLID 원칙이란? 소프트웨어 개발의 다섯가지 설계 원칙을 나타내는 약어로 각 원칙을 통해 소프트웨어의 재사용성, 유연성, 확장성을 높일 수 있으며 이는 쉬운 유지 보수를 가능하게 한다. 단일 책임 원칙 (SRP, Single Responsibility Principle) 개방 폐쇄 원칙 (OCP, Open Close Principle) 리스코프 치환 원칙 (LSP, Liskov Substitution Principle) 인터페이스 분리 원칙 (ISP, Interface Segregation Pr.. 공감수 0 댓글수 2 2024. 3. 16.
메모리 관리 [ 메모리 관리 ] 각각의 프로세스는 독립된 메모리 공간을 갖고, 운영체제 혹은 다른 프로세스의 메모리 공간에 접근할 수 없는 제한이 걸려있음. 단지, 운영체제 만이 운영체제 메모리 영역과 사용자 메모리 영역의 접근에 제약을 받지 않기 때문에 운영체제에서 메모리를 관함. 또한, 멀티프로그래밍 환경으로 변화하면서 한정된 메모리를 효율적으로 사용해야 했고, 운영체제가 이를 어떻게 관리하는지에 대한 관리방법이 중요해짐 즉, 어떤 프로그램이든 프로세스가 되어 프로세서에 적재되기 위해서는 메모리에 적재되어야 실행이 가능함 따라서 메모리는 중요한 작업 공간이고 한정된 메모리를 다중 프로그래밍 환경에서 이용하기 위해서는 여러 프로세스가 함께 메모리를 사용하므로 효율적인 관리를 해야함 이러한 메모리 관리를 위해 메모리.. 공감수 1 댓글수 0 2024. 3. 10.
EC2란? 1. EC2란 무엇인가? 3. 마무리 ✅ EC2란 무엇인가? Amazon Elastic Computed Cloud의 준말로 AWS 클라우드에서 온디맨드 확장 가능 컴퓨팅 용량을 제공하여 하드웨어 비용 절감 및 빠른 애플리케이션 배포를 목적으로 사용하는 클라우딩 컴퓨팅 서비스 사용한만큼 비용을 지불하기에 Elastic(탄력적)이라는 용어가 붙었으며, 비용뿐만아니라 성능, 용량 또한 자유롭게 조절할 수 있다. 우리는 물리적으로 서버를 구축하여 사용하는 것보다 더욱 빠르고 간편하고 적은 비용을 들이고 효율적으로 서버를 구축하기 위해 클라우딩 컴퓨팅 서비스를 이용할 수 있다. 📌 온디맨드 확장 가능하다? 더보기 사용자가 필요할 때마다 실시간으로 컴퓨팅 리소스를 추가하거나 줄일 수 있다는 의미로 이러한 유연성을 .. 공감수 0 댓글수 0 2024. 3. 10.
JWT - 어떻게 사용해야하는가? 1. JWT란 무엇인가? 2. 왜 JWT를 사용해야하는가? 3. JWT는 안전한가? 4. 토큰 탈취는 어떻게 이루어지는가? 5. 나는 어떤 방법으로 보안을 강화해야할까? ✅ JWT(JSON Web Token)란 무엇인가? 웹에서 사용되는 JSON 형식의 토큰에 대한 표준 규격으로 사용자의 인증, 인가 정보를 서버와 클라이언트 간에 안전하게 주고 받기 위해 사용되는 토큰이다. header, payload, signature로 구성되어 있으며 Base64-URL 문자열 형태로 "."을 통해서 구분되어 있다. 📦 header 일반적으로 토큰 유형과 서명 알고리즘으로 구성되어 있으며 JWT의 첫 번째 부분을 구성한다. { "alg": "HS256", "typ": "JWT" } 📦 payload 세가지 유형의 클.. 공감수 0 댓글수 1 2024. 3. 6.
Jotai 상태관리 라이브러리란? Jotai는 Daishi Kato에 의해 만들어졌으며, React 상태 관리의 단순성과 효율성을 개선하려는 목적에서 만들어졌다. Recoil과 MobX와 같은 기존 상태 관리 솔루션들이 제공하는 강력한 기능을 유지하면서도, 단순하고 직관적인 API를 제공하여, 개발자들이 쉽게 상태 관리를 할 수 있도록 설계되었다. Jotai는 일본어로 '상태'를 의미하며, Jotai는 그 사용성과 유연성으로 인해 빠르게 인기를 얻었고, 다양한 규모와 유형의 프로젝트에서 사용되고 있다. npm trend에서 recoil과 비교하면 recoil을 역전한 것을 볼 수 있는 꽤 핫한 라이브러리이다. 1. jotai의 기본 개념과 atom 생성 방법 Jotai는 atom개념을 사용하며, atom은 작은 데이터를 담고 있다. us.. 공감수 0 댓글수 9 2024. 3. 2.
메모리 메모리 계층 구조(Memory Hierarchy)는 여러가지 기억장치를 필요에 따라 속도, 용량, 성능에 따라 계층적으로 나누어 둔 것을 의미함. 하위 계층으로 갈수록 용량이 늘어나고 가격이 저렴하지만 속도가 느리며 상위계층으로 갈수록 용량이 작고 가격이 비쌈 이를 보완하기 위해 메모리 계층 구조를 사용함 레지스터와 캐시 CPU 내부에 존재(CPU에 아주 빠르게 접근할 수 있음) 메모리 = 주기억장치 CPU외부에 존재(레지스터와 캐시보다 더 느리게 CPU에 접근) 하드디스크 = 보조기억장치 CPU가 직접 접근할 방법조차 없음 CPU가 하드 디스크에 접근하기 위해서는 하드디스크의 데이터를 메모리로 이동시키고 메모리에서 접근해야 하기에 아주 느린 접근만 가능함 ▶ 보조기억 장치 보조기억장치는 물리적인 디스크.. 공감수 0 댓글수 0 2024. 3. 2.
메모리와 캐시 메모리 ✅ RAM의 특징과 종류 📦 RAM의 특징 실행할 프로그램의 명령어와 데이터가 저장되는 메모리로 전원을 끄면 저장된 명령어와 데이터가 날아가는 휘발성 저장 장치로 CPU는 보조기억장치에 직접 접근을 하지 못하기에 실행하고 싶은 프로그램이 보조기억장치에 있다면 RAM으로 복사하여 저장한 뒤 실행한다 즉 실행할 대상이 저장되는 공간이다. 📌 비휘발성 저장 장치 더보기 하드 디스크, SSD, CD-ROM, USB 메모리와 같은 보조 기억장치로 전원이 꺼져도 저장된 내용이 유지된다. 📦 RAM의 용량과 성능 RAM의 용량이 작다면 보조기억장치에서 실행할 프로그램을 가져오는 일이 잦아 실행 시간이 길어지기에 RAM의 용량이 크면 많은 프로그램들을 동시에 빠르게 실행하는데 유리하다. RAM의 용량에 비례해서 실행 .. 공감수 0 댓글수 0 2024. 3. 2.
CPU의 작동 원리 ✅ ALU와 제어장치 📦 ALU 1+2라는 연산을 수행하기 위해서는 피연산자(1, 2)와 수행할 연산(+)이 필요하기에 ALU는 레지스터를 통해 피연산자를 받고 제어장치로부터 제어 신호를 받아 산술, 연산, 논리 연산 등을 수행하는 장치이다. 결과값은 특정 숫자, 문자, 메모리 주소가 될 수 있다. 이 결과값은 메모리에 저장되지 않고 레지스터에 저장된다.(CPU는 메모리에 접근하는 시간이 레지스터보다 느리기에 추가적으로 다른 레지스터에 사용하거나 메모리에 담는 것인 이후에 실행) 부가적인 정보인 플래그를 추가적으로 내보낸다. 다양한 계산을 위한 회로를 가지고 있다.(덧셈: 가산기, 뺄셈: 보수기, 비트의 이동: 시프터, 오버플로우 검출기) 📌 플래그 더보기 위 보기와 같이 CPU에 숫자가 이진법으로 저장.. 공감수 1 댓글수 1 2024. 3. 2.
CPU, 메모리 개념 [ CPU ] CPU는 각종 연산을 수행하고 기억장치에 기억되어 있는 명령어들을 수행하는 컴퓨터 시스템을 이루는 핵심 부품 즉, CPU는 컴퓨터의 두뇌로 메모리에 저장된 명령어를 읽어 들이고, 읽어 들인 명령어를 해석하고 실행하는 부품 ▶ CPU 구조 내부 구성은 크게 산술/논리 연상 장치(ALU), 제어 장치와 레지스터로 구성되어 있음 산술논리 장치(Arithmetic Logic Unit, ALU) 쉽게 말해 계산기로 가산기, 보수기, 누산기, 기억레지스터, 데이터 레지스터 등으로 구성 캐시나 메모리로 부터 읽어 온 데이터는 레지스터에 저장 숫자의 산술연산과 배타적 논리합, 논리곱 같은 논리연산을 계산을 담당하는 장치 배타적 논리합 - true 연산, 배타적 논리곱 - and 연산 레지스터(Regist.. 공감수 0 댓글수 0 2024. 3. 2.
디자인 패턴 - 싱글톤 패턴 1. 디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여, 해결 할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것을 의미한다. 2. 싱글톤 패턴(singleton pattern)이란? 싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는데 쓰이며, 보통 데이터베이스 연결 모듈에 많이 사용된다. class Singleton { static instance; constructor() { if (Singleton.instance) { return Singlet.. 공감수 0 댓글수 3 2024. 2. 28.
브라우저 렌더링 원리 브라우저 렌더링 원리를 알아야 하는 이유 C는 직접 운영 체제에서 실행되고, Java는 가상 머신 위에서 실행된다. C는 컴파일 언어로, 소스코드가 기계어로 변환된 후 실행된다. Java는 소스코드가 바이트코드로 컴파일되어 JVM에서 해석 및 실행된다. 반면 JavaScript는 웹 브라우저에서 실행된다. (물론 Node.js를 통해 서버 사이드에서도 실행될 수 있다.) JavaScript를 클라이언트 사이드에서 사용할 경우 웹 브라우저에서 HTML, CSS, JavaScript가 실행되므로 브라우저 렌더링 원리를 이해하는 것은 중요하다. 더보기 -(JVM이란?) JVM은 하드웨어와 운영 체제 사이의 추상화 레이어로 작동하는 소프트웨어이다. 보통 자바 개발 키트(JDK)에 포함되어 컴퓨터에 설치된다. -.. 공감수 0 댓글수 0 2024. 2. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.