분류 전체보기 380

[HUFS/자료구조] #10 그래프

그래프 그래프란 연결되어 있는 객체 간의 관계를 표현하는 자료구조이다 그래프 G는 (V, E)로 표현되며 ‘정점(vertices) or 노드’ / ‘간선(edge) or 링크’ 간의 관계를 의미한다 그래프의 경로: 정점 간 거쳐가는 경로 ex) B -> A -> C -> D 그래프의 길이: 경로 사이의 간선 개수 ex) 3 그래프의 표현 그래프의 탐색 그래프의 탐색은 시작 정점부터 차례대로 모든 정점들을 한 번씩 방문하는 방법으로, 깊이 우선 탐색(DFS)과 너비 우선 탐색(BFS)이 있다 신장 트리 신장 트리란 그래프 내의 모든 정점을 포함하는 트리로 사이클을 포함하면 안된다 위상 정렬 위상 정렬이란 방향 그래프에 대해 정점들의 선행 순서를 위반하지 않으면서 모든 정점을 나열하는 것 가중치 그래프 간선..

[TIL] 첫 React 백엔드 연동

해당 글은 hoops 프로젝트 테스팅을 위해 클라이언트를 서버와 연동하는 과정을 기록했습니다. 프론트엔드 React/Apollo GraphQL, 백엔드 Node.js/Express/PostgreSQL을 활용하는 프로젝트로, 변수가 많은 연동 작업인 만큼 해당 글의 방식은 참고만 하되, 항상 옳은 방법이 아님을 미리 알려드립니다. DB 생성 1. pgAdmin4(PostgreSQL)를 실행하고 비밀번호 입력 후, Servers > Databases 우클릭 2. Create > Database > 아무 이름 입력 > Save해서 DB 생성 백엔드 Repository 연동 1. 백엔드 repository를 최신 상태로 git clone 해주고 IDE로 열어준다 2. 가장 상위 폴더에 .env 파일 생성하고 다..

Front-end/React 2021.12.06

[HUFS/데이터베이스] #16 질의어 처리

질의어 처리 SQL(고급 질의어)가 scanner를 거치면서 token(의미)이 생성되고 내부 형태 질의문으로 변환된다 내부 형태 질의문(= tree -> 관계 대수)이 질의어 최적기를 거쳐 plan으로 선택된다 plan이 질의문 실행 코드, DB 처리를 거쳐서 결과적으로 질의어 결과를 도출한다 질의어 최적화 중간 과정의 질의어 최적화란? 더 성능이 빠른 (효율적) 실행을 위해 디스크 I/O횟수, 중간 결과의 크기, 응답시간을 감소시킨다 ‘질의문 내부표현 -> 효율적 내부형태로 변환 -> 후보 프로시저 선정 -> 평가 및 결정’ 질의문 트리의 단말 노드에는 피연산자인 릴레이션이, 내부 노드에는 관계대수 연산자가 들어간다 질의문 트리는 상향식으로 실행되며, 마지막으로 루트 노드가 실행되며 질의문 결과를 출..

[HUFS/자료구조] #9 탐색 트리

탐색 트리 탐색 트리란 탐색을 위한 트리 기반의 자료구조이다 삭제 연산의 3가지 경우 삭제하려는 노드가 단말(가장 마지막) 노드인 경우 삭제하려는 노드가 왼쪽이나 오른쪽 중 하나의 서브트리를 가지는 경우 (자식이 하나) 삭제하려는 노드가 2개의 서브트리를 모두 가지고 있는 경우 (자식이 둘) 이진탐색트리를 활용해 맵 클래스를 구현해보자 균형이진탐색(AVL)트리 AVL 트리는 모든 노드에서 왼쪽 서브트리와 오른쪽 서브트리의 높이 차가 1을 넘지 않는 이진탐색트리 * 평균, 최선, 최악의 경우 모두 시간 복잡도 O(logn)을 보장 탐색 연산은 기존 방식과 동일하지만 삽입/삭제 연산의 경우 균형 상태가 깨진다면 불균형 상태의 조상 노드(균형 인수 +-2)의 서브 트리들이 다시 재균형 (회전) + Red-Bl..

[HUFS/자료구조] #8 트리

트리(Tree) 계층적인 자료의 표현에 적합한 자료 구조 ex) 조직도, 가계도 지금까지 배운 선형 자료 구조들과 다르게 비선형 자료 구조 노드의 ‘부모/자식/형제’ 관계와 ‘조상(부모 이상)/자손’ 관계가 정의된다 계층에 따라 위부터 레벨이 나눠지며 트리의 높이는 최고 레벨 값이다 더 이상 자식이 없는 노드는 단말 노드이며 그렇지 않은 노드는 비단말 노드이다 자식 노드의 수가 해당 노드의 차수이며 트리의 차수는 노드 차수들 중 최대 차수이다 이러한 노드 구조들을 통틀어 포레스트(forest)라고 한다 이진 트리 서브트리는 공집합일 수 있으며 이진 트리는 순환적으로 정의된다 트리의 각 레벨에 노드가 꽉 차있다면 포화 이진 트리이다 * 단, 완전 이진트리의 경우 마지막 레벨 h에서는 노드가 좌측부터 순서대..

[노마드코더] #3 CRA, Effects

Create React App create-react-app은 React에 개발 서버 접근, 자동 새로고침 및 다양한 사전 설정을 제공 node.js 설치 및 create-react-app 생성 -> src에서 index.js, App.js만 남기고 삭제, 내용 정리 ReactDOM.render( , document.getElementById('root') ); 마찬가지로 index.js에서 index.html의 root에 App 컴포넌트를 렌더링하고 있다 import PropTypes from "prop-types"; import styles from "./Button.module.css"; function Button({ text }) { return {text}; } Button.propTypes ..

Front-end/React 2021.11.17

[HUFS/데이터베이스] #15 인덱스

B-트리 데이터가 입력되는 순서대로 쌓이는 순차 방법은 레코드들의 논리적 순서가 저장 순서와 동일 ~ 물리적 순서대로 레코드에 접근하며 파일 복사, 순차적 일괄 처리에 응용 인덱스의 종류) 기본키에 대한 인덱스라면 기본 인덱스, 아니라면 보조 인데스 레코드가 키 값 순으로 정렬되었다면 집중 인덱스, 아니라면 비집중 인데스 모든 키에 대해서 인덱스 엔트리가 있다면 밀집 인덱스, 아니라면 희소 인데스 * 인덱스 엔트리: 레코드 키 값 + 포인터 디스크에 인덱스를 만들 때, 데이터를 저장하는 탐색 트리 m-원 탐색 트리 중 모든 자식 노드가 균형을 유지하는 경우 B-트리라고 한다 B-트리의 조건) 공백이거나 높이가 1이상인 m-원 탐색 트리 루트와 리프를 제외한 내부 노트는 최소 m/2, 최대 m개의 서브트리..

[노마드코더] #2 State & Props

State Counter 버튼을 누르면 counter가 하나씩 증가하는 페이지를 구성하는 경우, 첫 렌더링 이후 계속해서 값을 띄우기 위해 render() 함수를 만들어 반복 실행했다 여기저기서 render() 함수를 호출하는 것은 매우 비효율적인데,, useState를 활용하면 데이터와, 데이터의 업데이트 함수를 바로 생성할 수 있다 이전 값을 활용해 State를 변경하려면 setState()함수에 직접 넣어줘도 되지만,, setCounter(counter+1); State가 다른 곳에서 변경될 수도 있기 때문에 current 함수로 처리하는 것이 안전하다! setCounter((current) => current + 1); Super Converter JSX 상에서는 일부 HTML 코드를 변환해 사용..

Front-end/React 2021.11.16

[노마드코더] #1 Introduction

Why React? 2021년 말 기준 상위 1만개 웹사이트 중 44.76%가 React JS 사용 페이스북의 막대한 투자와 지속적인 업데이트 프론트엔드 JS 라이브러리 중 가장 큰 JS 커뮤니티 Start React! CRA 없이 React를 사용하려면 우선 index.html에서 React JS와 ReactDOM 코드를 import해준다 React JS는 element를 생성하고 이벤트 추가, ReactDOM은 element들을 HTML로 바꿔준다 element는 createElement로 생성되며 ‘HTML 태그/props를 포함한 object/content’로 구성 ReactDOM이 body의 id가 root인 비어있는 div에 생성된 element들을 랜더링한다 addEventListener나 ..

Front-end/React 2021.11.13