개발새발 로그

브라우저의 렌더링 과정 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트파일 등 렌더링에 필요한 리서스를 요청하고 서버로부터 응답을 받는다. 2. 브라우저의 렌더링엔진은 서버로부터 응답된 HTML과 CSS를 파싱 하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성한다. 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 SCCOM은 다시 렌더 트리로 결합된다. 4. 렌더트리를 기반으로 HTML 요소의 레이아웃을 계산하고, 브라우저 화면에 HTML요소를 페인팅한다. 파싱과 렌더링의 차이 파싱은 텍스트 문서..

그래프 - 정점과 정점사이를 연결하는 간선으로 이루어진 비선형 자료구조 - 정점 집합과 간선 집합으로 표현할 수 있다. - ex) 지하철 노선도, 페이지랭크 알고리즘 그래프의 특징 - 정점은 여러개의 간선을 가질 수 있다. - 크게 방향그래프와 무방향 그래프로 나눌 수 있다. - 간선은 가중치를 가질 수 있다. - 사이클이 발생할 수 있다. 무방향 그래프 - 간선으로 이어진 정점끼리는 양방향으로 이동이 가능하다. - 표현하기에 (A,B)와 (B,A)는 같은 간선으로 취급된다. 방향 그래프 - 간선에 방향성이 존재하는 그래프 - 양방향으로 갈 수 있더라도 와 는 다른 간선으로 취급된다. 연결 그래프 -모든 정점이 서로 이동이 가능한 상태 그래프 - 특정 정점에서 다른 특정 정점까지 모든 경우의 수가 이동가..

해시테일블은 사물함이라고 생각하면 된다. 사물함 각 칸에는 이름과 번호가 있어서 쉽게 위치를 찾을 수 있다. 해시테이블은 한정된 배열 공간에 key를 index로 변환하여 값들을 넣게된다. 그럼 index는 어떻게 구할까? 해시테이블 - 키와 값을 받아 키를 해싱하여 나온 index에 값을 저장하는 선형자료구조 - 삽입은 O(1)이며 키를 알고 있다면 삭제, 탐색도 O(1)로 수행한다. 해시 함수 - 입력받은 값을 특정 범위 내 숫자로 변경하는 함수 - 해시함수는 특정한 구현 방법이 있지 않아서 사용자 임의대로 만들면 된다. - 예를 들어 입력받은 문자열을 각 문자열의 아스키코드를 더한 값을 해시로 정할 수 있다. 해시테이블의 문제점 만약 해시 함수의 결과가 동일하여 겹친다면 문제가 생긴다. -> 이를 ..

큐 - First In First Out이라는 개념을 가진 선형 자료구조이다. - Linear Queue(선형 큐)의 Circular Queue(환형 큐)가 존재한다. Linear Queue Array로 표현하기 -Linear Queue를 Array로 표현할 수 있다. - EnQueue가 계속 되어 한정된 공간인 배열이 꽉 차게 된다면 더이상 큐에 값을 추가할 수가 없습니다. - 자바스크립트에서는 배열의 크기가 자동적으로 증감되기 때문에 이러한 문제가 없지만 Front나 Rear의 인덱스 값이 무한정 커질 수 있다는 문재가 있다. -> 공간을 더 활용하기 위해 데이터를 앞당기는 작업이 필요하다. -> 이 작업을 수행하면 선형시간이 소요된다. -> 이런 문제를 해결하기위해 연결리스트로 큐를구현해야한다. A..

만약에 아래와 같이 코드가 형성되어있을 때 import { useState } from "react"; 부분을 지워버리면 어떻게 될까? -원래는 useState를 사용하는 코드에 오류가 생겨야하는데 아래와 같이 보이지 않는 상황이 생긴다. 이는 ESlint를 설정해주지 않아서 생기는 현상이다. 원래 주로 React앱을 사용할 때는 자바스크립트가 아닌 타입스크립트를 사용하기 때문에 이런부분에 ESlint를 설정안해줘도 오류를 잡아주지만 현재 자바스크립트인 상황이기 때문에 ESlint를 설정해주면 좋다. ESlint 설정 방법 1. 모듈 설치 npm install -D vite-plugin-eslint eslint eslint-config-react-app [참고] npm install -D ... => [..

Vite를 이용해서 React를 설치하고 App.jsx파일에 들어갔는데 아래와 같은 오류가 떴다. 이 오류는target="_blank" 에서 생기는 오류이다. 이 코드를 사용하려면 꼭 같이 써야하는 코드가 있다 바로 rel="noreferrer" 이다. (다른 속성도 가능하다.) 이 속성은 아래 링크에서 자세히알아보자 https://3rabbitz.com/blog_ko/08d34c69855fbcad 쓰리래빗츠 블로그 3rabbitz.com https://dirask.com/posts/HTML-open-link-in-new-tab-j4Z4dD HTML - open link in new tab In this article, we would like to show you how in a safe way cre..

리액트를 사용할 때 아래와 같이 React를 import해오면 오류가 뜨게된다. eslint에서 오류를 보여주는 것인데 jsx로 처리되는 변수들은 shadowing이 되서 eslint가 못찾아 낸다고 한다. 해결방법 1. 주석처리로 하는 방법 에러나는 줄 옆에 다음과 같은 주석을 단다. // eslint-disable-line no-unused-vars 나는 이 방법을 일일이 적기에는 너무 귀찮다고 생각했다. 2. eslintrc.cjs 파일에 아래와 같은 코드 추가 나는 현재 vite를 이용해서 react를 설치해서 eslintrc.cjs에 아래 코드를 추가했다. 처음에 구글링했을 때 ./eslintrc에 해라 .eslintrc.json 에 해라. 등등 각각의 방법이 있었지만 다 다른 것 같다. 나는 ..

스택 Last In First Out이라는 개념을 가진 선형 자료구조 스택 메모리 스택을 Array로 표현하기 push : 배열에 순차적으로 값을 삽입한다. pop : 가장 마지막 요소를 제거한다. 이런 방식은 배열의 단점인 중간요소 추가, 삭제 로직이 전혀 사용되지 않기 때문에 굉장히 유리한 방식이다. 또한 자바스크립트에서는 배열의 크기가 동적으로 변하기때문에 더 편하게 구현이 가능하다. 물론 자바스크립트의 배열은 Array타입은 아니므로 컴파일러언어보다는 성능이 떨어질 수 있다. Linked List로 표현하기 스택을 Linked List로 표현할 수 있다. 이 경우 연길리스트의 haed가 Top이라고 할 수 있다. 자바스크립트에서 stack 사용법 const stack = []; // Push 사용..