Bottlesun의 개발일기

본문 바로가기

가상돔(Virtual DOM) Virtual DOM웹 성능 최적화를 위한 DOM관리 방법으로 웹 어플리케이션의 상태 변경 시 ,객체 형태의 가상 DOM을 통해 변경된 부분만 찾아내어 실제 DOM에 적용하는 것.Virtual DOM의 동작순서Diffing 이란?가상 돔에서 변경점을 찾아내는 과정Reconciliation 이란?Diffing 으로 찾아낸 변경 점을 실제 돔에 적용 하는 과정Virtual DOM의 동작예시어플리케이션이 렌더링 될 때, 어플리케이션의 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성한다.어플리케이션이 실행되면서 state나 props가 변경되는 부분이 있는 경우 새로운 버전의 Virtual DOM을 메모리 상에 하나 더 생성합니다.새로운 돔이 생성 된 후 이전 버전의 Virtual DOM과 비교.. 2024.08.01
Reflow ,Repaint Reflow ,RepaintReflow란?웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을때, 변화된 레이아웃을 다시 계산 하는 과정을 말한다.크기 관련 속성width , height , padding , margin 등위치 관련 속성position , top , left 등레이아웃 속성display, flex, grid 등폰트 크기 관련 속성font-size , font-weight 등Repaint 란?웹 페이지 내에서 요소의 시각적인 표현에 변화가 있을 때 변화된 표현을 다시 계산하여 렌더 트리에 적용하는 과정색상 관련 속성color , background-color 등테두리 관련 속성border-color , border-radius 등Reflow 와 Repaint 의 성능상 차이점Reflow.. 2024.08.01
모던 자바스크립트 | 전역 변수의 문제점 전역 변수의 문제점전역 변수의 무분별한 사용은 위험하다. 전역변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역변수를 사용해야 한다.변수의 생명 주기지역 변수의 생명 주기변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 사용이 된 블럭을 빠져나가게 된다면 사라지게 된다.변수가 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 종료되면 소멸한다.function foo() { var x = 'local'; // 변수 생성 시점 console.log(x); // local return x; .. 2024.08.01
모던 자바스크립트 | 스코프(scope) 스코프란?스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.스코프의 이해가 부족하면 다른 개념을 이해하기 어려울 수 있다.더욱이 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다.function add(x,y){ //매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x,y) // 2 , 5return x + y}// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.console.log(x,y) // ReferenceError : x is not defined변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도 선언할 수 있다.이때 코드 블.. 2024.08.01
모던 자바스크립트 | 원시 값과 객체의 비교 원시 값변경 불가능한 값원시 타입의 값은 변경 불가능한 값이다. (읽기전용) 변경 불가능 하다는 것은 변수가 아니라 값에 대한 진술이다.원시 값 자체를 변경 할 수 없다는 것이지 변수 값을 변경 할 수 없다는 것은 아니다.변수는 언제든지 재 할당을 통해 변수 값을 변경 할 수 있다.변수의 상대 개념인 상수는 재할당이 금지된 변수를 말한다. 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있다.// const 키워드를 이용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수다.const o = {};// const 키워드를 사용해 선언한 변수에 할당한 원시 값(상수)은 변경할 수 없다.// 하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.o.a.. 2024.08.01
프론트엔드 예상 질문 1 기술면접 준비REST ful APIREST ful API 는 HTTP 프로토콜 기반의 웹서비스 아키텍처 이다.REST API 를 제공하는 웹서비스고, HTTP 메소드(CRUD) 를 제공해 준다.클라이언드 - 서버 간의 통신을 가능 하게 하며, 일관적인 컨벤션을 통해 호환성을 높이기 위해 사용한다.HTTP 메서드GET : 서버에서 데이터를 요청하는 메소드이다.POST : 서버에 데이터를 전송하는 메소드이다.PUT : 서버에 데이터를 업데이트 하는 메소드 이다.DELETE : 서버에 있는 데이터를 삭제하는 메소드 이다.async / await비동기를 처리 할 수 있는 문법이다.async는 함수를 정의 할때 사용 하며, async로 정의 한 함수 내부에 await 키워드를 이용해 작업을 제어한다.await 가.. 2024.08.01
모던 자바스크립트 | 객체 리터럴 객체 리터럴객체란객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key), 값(value)으로 구성된다.const parson = {name : 'Lee', // name - key , 'Lee' - valueage : 20 // age - key , 20 - value}객체 리터럴에 의한 객체 생성C++ 나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다.객체 리터럴Object 생성자 함수생성자 함수Object.create 메서드클래스이러한 객체 생성 방법 중.. 2024.07.23
모던 자바스크립트 | 단축 평가 단축 평가논리 연산자를 사용한 단축평가'Cat' && 'Dog' // 'Dog''Cat' || 'Dog' // 'Cat'논리곱(&&) 연산자는 두 개의 피연산자가 모두 true 일때, true를 반환한다. (좌→우 로 평가 진행)논리곱 연산자는 첫번째 피연산자가 true일때, 두번째 피연산자가 true이면 두번째 피연산자의 문자열을 그대로 반환한다.논리합 연산자는 두개의 피연산자 중 하나만 true 여도 true로 반환이 된다. (좌→우 로 평가 진행)논리 연산 결과에 첫번째 피연산자가 true이면 두번째 연산자가 true 여도 첫번째 피연산자를 반환한다.두번째 피연산자만 true 일경우 두번째 피연산자를 반환한다.이처럼 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 반환 하는 것을 단축 평.. 2024.07.23
모던 자바스크립트 | 명시적 타입 변환 명시적 타입 변환명시적으로 타입을 변경하는 방법에는 표준 빌트인 생성자 함수(String, Number, Boolean) 를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법 등이 있다.문자열 타입으로 변환String 생성자 함수를 new 연산자 없이 호출하는 방법// 숫자 -> 문자열 타입String(1) // '1'String(NaN) // 'NaN'String(Infinity) // Infinity// 불리언 -> 문자열 타입String(true) // 'true'String(false) // 'false' Object.prototype.toString 메서드를 사용하는 방법// 숫자 -> 문자열 타입(1).toString(); // '1'(NaN).toString() //'NaN'.. 2024.07.23
모던 자바스크립트 | 암묵적 타입 변환 암묵적 타입 변환자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환(암묵적 타입 변환)할 때 가 있다.// 피연산자가 모두 문자열 타입이어야 하는 문맥'10' + 2 // -> '102'// 피연산자가 모두 숫자 여야 하는 문맥5 * '10' // -> 50// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥!0 // -> trueif(1){}표현식을 평가할 때 코드의 문맥에 부합하지 않는 다양한 상황이 발생 할 수 있다.자바스크립트에선 에러를 발생하지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다. (쓰레기 언어네)암묵적 타입 변환이 발생하면 문자,숫자,불리언 과 같은 원시 타입 중 하나로 타입이 자동 벼환한다.문자열 타입으.. 2024.07.23
[데이터베이스시스템] 회복 시스템 회복시스템의 개념회복의 역할예상치 못한 HW 고장 및 SW 오류가 발생→ 사용자의 작업에 대한 안정적 디스크 반영 여부 보장이 불가능오류 발생 이전의 일관된 상태로 데이터베이스를 복원시키는 기법이 요구→ 시스템 내의 고장 원인 검출, DBMS의 안전성 및 신뢰성을 보장데이터베이스는 데이터 복원 절차 내재화시스템 실패(ststem failure)의 유형트랜잭션 실패→ 논리적 : 잘못된 데이터 입력 , 부재 , 버퍼 오버플로, 자원 초과 이용→ 시스템적 : 운용 시스템의 교착상태시스템 장애→ 시스템의 하드웨어 고장, 소프트웨어의 오류→ 주기억장치와 같은 휘발성 저장장치의 내용 손실디스크 실패→ 비휘발성 디스크 저장장치의 손상 및 고장으로 인한 데이터 손실회복 데이터의 구성백업(Backup)→ 데이터베이스의 .. 2024.05.25
[데이터베이스시스템] 동시성 제어 동시성 제어 규약동시성 제어의 개념트랜잭션 직렬화와 회복화는 스케줄이 데이터 일관성에 영향을 미치는 여부를 판별하고 일관성이 유지되는 상태로 복원시키기 위해 정의한 개념일관성 훼손을 발생시키는 트랜잭션에 대해 동시성 제어를 통해 일관성 유지에 개입→ 트랜잭션 간 연산의 순서를 제어→ 어떠한 데이터 읽기, 갱신 연산에도 무결성을 유지→ 동시에 실행되는 트랜잭션 수를 증가동시성 제어 규약→ 락 기반 규약 , 타임스탬프 기반 규약 , 검증 기반 규약락 기반 규약 의 개념직렬 가능성을 보장하기 위해 락(잠금)을 사용하여 데이터 항복에 연산 적용 전 트랜잭션이 락을 획득하고 연산 후 반납하도록 하는 규약락의 종류→ 공유 락(shared lock : S) : 트랜잭션 T가 LS(Q) 명령으로 데이터 항목 Q에 공유.. 2024.05.25
[데이터베이스시스템] 트랜잭션 트랜잭션의 이해데이터 동시 접근의 문제동일 데이터에 다수 사용자의 접근 허용시 일관성이 훼손트랜잭션의 개념데이터 베이스를 조작하기 위한 하나의 논리적 단위를 이루는 일련의 연산의 집합→ 예시) 예금 인출작업 단위 : 예금 1000원 인출일련의 연산 : Read(A) , A= A-1000, Write(A)데이터베이스를 사용하여 처리하는 작업을 하나의 묶음으로 인식하여 묶음 단위로 실행되도록 정의한 개념트랜잭션의 특징다수의 연산으로 구성된 트랜잭션이 사용자에게 단일 작업처럼 다뤄지도록 ACID 특징을 준수ACID 특성→ 원자성(atomicity) : 하나의 트랜잭션에 포함된 모든 연산은 완전히 수행되거나 전혀 수행되지 않음→ 일관성(consistency) : 특정 트랜잭션이 수행되기 전과 후에 데이터 베이스.. 2024.05.25
[데이터베이스시스템] 해싱과 특수 인덱스 정적 해싱해싱의 개념해시(hash)탐색키에 산술적인 연산을 통해 버킷의 주소를 계산하는 해시 함수를 이용하여 데이터 배분 및 접근 하는 기법탐색키 → → 버킷ID버킷(bucket)→ 한 개 이상의 레코드를 저장 할 수 있는 저장 공간의 기본적인 단위→ 크기는 일반적으로 디스크 블록의 크기와 일치해시의 구조해시의 사용h(K3) = h(K7) = 3해시 함수의 역할여러개의 레코드와 여러개의 버킷이 있을 경우최상의 경우모든 버킷에 균등하게 위치 할 수 있게 나눠주는 경우최악의 경우한 버킷에 모든 레코드를 넣어주는 경우일반적인 경우여러 버킷 적당히 분배가 되는 경우 한쪽으로만 몰리지 않도록 해준다.정적 해싱의 특징버킷의 개수가 고정된 해싱 기법키 값이 Ki인 레코드 삽입→ h(Ki)를 통해 Ki 에 대응하는 .. 2024.05.25
[데이터베이스시스템] 인덱싱 인덱스의 이해인덱스의 개념데이터 검색에서 발생하는 비효율적인 데이터 입출력 문제를 해결하기 위한 목적으로 시작→ 인덱스 : DBMS에서 요청된 레코드에 빠르게 접근 할 수 있도록 지원하는 데이터와 관련된 부가적인 구조→ 인덱싱 : 인덱스를 구성하고 생성하는 작업인덱스의 탐색키를 이용하여 해당 레코드가 저장된 블럭을 디스크 저장장치 또는 메모리에서 파악하여 해당 블럭을 빠르게 적재탐색키란?파일에서 레코드를 찾는데 사용되는 컬럼이나 컬럼의 집합인덱스 종류인덱스의 종류→ 순서 인덱스 : 특정 값에 대해 정렬된 순서 구조→ 해시 인덱스 : 버킷의 범위 안에서 값의 균일한 분포에 기초한 구조로 해시 함수가 어떤 값이 어느 버킷에 할당 되는지 결정인덱스의 평가기준→ 접근 시간 : 데이터를 찾는 데 걸리는 시간→ 유.. 2024.05.25
[데이터베이스시스템] 데이터 저장과 파일 물리적 저장장치물리적 저장장치의 구성물리적 저장장치는 데이터 접근 속도, 용량을 기준으로 다양한 장치로 구성← 속도, 가격레지스터 - 캐시 - 메인메모리 - 자기디스크 , 플래시메모리 - 광학디스크 자기 테이프→ 저장용량물리적 저장장치 별 특징휘발성→ 캐시 : 고비용 저장장치로 빠른 접근 속도를 보장→ 메인 메모리 : 실제 프로그램과 데이터 적재 공간비 휘발성→ 플래쉬 메모리 : 메인 메모리와 유사하나 비휘발성→ 자기 디스크 : 데이터베이스 전체를 안정적으로 저장→ 광학 디스크 드라이브 : CD , DVD , Blue-ray 등→ 테이프 장치 : 용량이 크고 저렴하나 순차 접근 방식으로 속도가 느림파일데이터베이스 구성데이터베이스논리적이고 추상적으로 데이터들을 묶어 놓은 사용자 들을 위한 단위파일데이터를 .. 2024.05.25
[데이터베이스시스템] 정규화 잘못된 데이터베이스 모델링데이터의 중복일관성 유지의 어려움저장 공간 낭비갱신 이상삽입 이상 - 레코드 추가 시불필요한 컬럼의 값이 없이는 추가하지 못 하는 경우삭제 이상 - 삭제 시 의도하지 않았던 다른 데이터가 삭제 되는 경우수정 이상 - 중복 저장된 레코드를 수정 시 모두 반영이 안되어 데이터베이스의 일관성이 깨지는 경우좋은 릴레이션의 개념컴퓨터 프로그래머적 관점에서의 모델링→ 어떻게 데이터를 저장해야 하는가?릴레이션의 스키마가 얼마나 효율적으로 실세계를 반영하고 있는지 평가고려사항→ 한 릴레이션 내의 컬럼 간의 관계 분석→ 원하지 않는 데이터의 종속과 중복 제거→ 새로운 컬럼들이 데이터베이스에 추가될 때, 기존 컬럼과의 관계 수정을 최소화함수적 종속성함수적 종속성의 정의릴레이션 인스턴스를 분석하여 .. 2024.05.25
[데이터베이스시스템] SQL(3) 데이터 검색집계 함수특정 컬럼에 집계 함수를 통해 다양한 통계 연산을 수행할 수 있는 기능SELECT 절 또는 HAVING절에 기술집계 함수의 종류→ COUNT : 컬럼에 있는 값들의 개수→ SUM : 컬럼에 있는 값들의 합→ AVG : 컬럼에 있는 값들의 평균→ MAX : 컬럼에서 가장 큰 값→ MIN : 컬럼에서 가장 작은 값집계 함수의 사용SELECT COUNT(단과대학) FROM 학과그룹 질의특정 기준으로 레코드를 그룹화하고 각 레코드 그룹에 대해 집계 함수를 적용하는 질의구문 형식SELECT 질의 GROUP BY 컬럼[주의] SELECT 절에 그룹의 기준과 집계 함수 이외의 컬럼은 포함될 수 없음HAVING 절그룹 질의의 결과 레코드에 대해 출력 조건을 기술하기 위한 절구문 형식 SELECT.. 2024.05.25
[데이터베이스시스템] SQL(2) 데이터 삽입, 수정, 삭제INSERT 문테이블에 새로운 레코드를 삽입하는 명령문→ 테이블에 새로운 레코드를 삽입→ 모든 속성 또는 부분 속성에 대한 속성값을 삽입구문 형식INSERT INTO TABLE_NAME VALUES(value1, value2, ... valueN)INSERT INTO TABLE_NAME(column1,column2...columnN) VALUES(value1, value2, ... valueN)질의1 ) 학과이름’영어영문학과’ , 단과대학 , ‘인문과학대학’ 주소 ‘a’ , 전화번호 ‘02-1234-1234’ , 졸업학점 135인 레코드를 학과 테이블에 삽입 하시오.INSERT INTO 학과 VALUES('영어영문학과', '인문과학대학' , 'a' , '02-1234-1234',.. 2024.05.25
[데이터베이스시스템] SQL(1) 데이터베이스 언어SQL의 개요SQL(Structured Query Language) 은 관계 대수에 기초하여, RDBMS 의 데이터 관리를 위해 설계된 언어1986년 ANSI, 1987년 ISO에서 표준으로 제정→ SQL - 86, SQL - 89 , SQL - 92 , SQL : 1999 , SQL : 2003, SQL : 2008→ 상용 DBMS의 특성에 맞게 국제 표준을 확장한 독자적 버전이 존재특징→ 비절차적(선언형) 언어, 필요한 데이터만 기술→ 인간의 언어와 매우 유사하고 간단, 명료SQL의 구성데이터 정의 언어 (DDL : Data Definition Language)→ 데이터 베이스 내의 객체를 생성 및 삭제하고 그 구조를 조작하는 명령어의 집합→ 데이터가 준수해야 하는 제약조건을 기술→ .. 2024.05.25

728x90

티스토리툴바