인덱스데이터를 좀 더 빠르게 찾을 수 있도록 도와주는 도구이다. 장점검색 속도가 빨라질 수 있다. 데이터의 중복성이 낮을수록 속도가 더 빠르다.쿼리의 부하가 줄어들어 시스템 전체 성능이 향상된다.단점데이터베이스 크기의 10% 정도의 추가적인 공간이 필요하다.데이터의 변경 작업(삽입, 수정, 삭제)이 자주 일어나면 성능이 나빠질 수 있다. 클러스터형 인덱스테이블 당 한 개만 지정 가능하고, 클러스터형 인덱스로 지정한 열에 맞춰 자동으로 오름차순 정렬된다.데이터 자체가 인덱스 역할을 한다.기본키로 지정하거나기본키로 설정된 열이 없을 때 유니크와 NOT NULL으로 설정한 경우자동으로 클러스터형 인덱스가 생성된다.기본키와 유니크 NOT NULL이 둘 다 있으면 기본키로 지정한 열에 클러스터형 인덱스가 생성된다..
프로젝트 생성프레임워크는 리액트, variant는 타입스크립트로 설정한다.npm init vite 사용할 패키지들을 설치한다.상태 관리 라이브러리인 redux와 drag and drop을 위한 react-beautiful-dnd, ts에서 스타일을 적용하기 위한 vanilla-extract 패키지를 사용한다.npm install @reduxjs/toolkit redux clsx @vanilla-extract/css @vanilla-extract/css-utils @vanilla-extract/vite-plugin react-icons uuid react-beautiful-dnd react-redux Redux 사용부모 컴포넌트와 자식 컴포넌트가 소통하려면 State와 Props를 사용해야 한다. 하지만..
새로운 게시물 추가입력창에서 엔터를 치면 바로 게시물이 추가되도록 form으로 구현했다.import React, { useState } from 'react';import { Button, Form, Container, Row, Col } from 'react-bootstrap';import TodoModal from './TodoModal';import './Todolist.css';type Todo = { id: number; text: string; isChecked: boolean;};const TodoList: React.FC = () => { const title: string = '오늘 할 일'; const [todos, setTodos] = useState([ ..
컴포넌트App() 함수에 모든 코드를 다 작성해도 동작하는 데에는 이상이 없지만 모듈화를 할 수 없고, 가독성이 떨어진다. 그래서 입력을 받아 출력하는 역할을 하는 컴포넌트를 사용한다. 클래스형리액트에서 클래스 컴포넌트를 만들려면 컴포넌트를 상속해야 한다. extends 키워드로 컴포넌트를 상속할 수 있다.그리고, 클래스 안에 render 메서드를 작성해야 한다. 해당 메서드에서 리턴하는 값이 화면에 보이게 된다.ClassCom.tsximport { Component, ReactNode } from "react";class ClassCom extends Component { render(): ReactNode { return ( 클래스형 ..
리액트 동작 원리HTML 파싱으로 DOM트리를 구축하여 브라우저에 렌더링 한다.리액트 컴포넌트의 상태나 프로퍼티가 변경되면 가상 DOM에 변화된 부분만 업데이트한다.이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 식별한다.변경된 부분만 실제 DOM에 업데이트한다.가상 DOM을 사용하지 않고 실제 DOM에 바로바로 업데이트하면 화면 깜빡임이 심하다. 그리고 변화된 부분만 DOM에 업데이트하기 때문에 렌더링 속도가 빠르다. 프로젝트 생성js 기반 리액트 프로젝트는 터미널에 다음 명령어를 입력하여 생성할 수 있다.npx create-react-app 프로젝트명ts 기반 리액트 프로젝트는 터미널에 다음 명령어를 입력하여 생성할 수 있다.npx create-react-app 프로젝트명 --tem..
const assertion원래 상수가 아닌 것을 상수로 선언해 주는 기능이다.const RGB = { red: 'FF0000', green: '00FF00', blue: '0000FF'};위 객체 내부의 요소들의 추론된 값을 보면 리터럴 타입이 아니라 원시 타입인 string으로 추론된 것을 볼 수 있다.RGB라는 객체는 const로 선언했지만 객체 내부의 값들은 바꿀 수 있기 때문이다. const assertion을 활용하면 객체 내부 요소의 타입을 리터럴 타입으로 지정할 수 있다. 닫는 중괄호 뒤에 as const를 적어주면 된다.const RGB = { red: 'FF0000', green: '00FF00', blue: '0000FF'} as const;위 사진과 ..
리터럴 타입특정 값을 나타내는 타입으로, 해당 값이 정확하게 일치해야 한다.리터럴 타입은 코드의 가독성을 높이고, 잘못된 값이 들어노는 것을 막을 수 있게 해 준다.문자형, 숫자형, 불리언형, 객체형이 있다. 문자열 리터럴 타입result에는 'success'라는 문자열과 'error'라는 문자열만 들어갈 수 있다. line 3처럼 다른 값을 넣으면 아래 사진과 같은 에러가 발생한다. 숫자형과 불리언형도 동일하게 사용하면 된다.let result: 'success' | 'error';result = 'success'; // 허용result = 'pending'; // 에러 객체 리터럴 타입객체 리터럴은 객체의 속성명뿐만 아니라 그 값 또한 일치해야 한다. line 3처럼 'Lee'와 30이 아닌 다른 값..
클래스구조체와 비슷하며, 멤버 변수와 멤버 함수로 구성된 사용자 정의 데이터 타입이다.사용자가 새로 정의한 데이터 타입이기 때문에 클래스를 추상적인 데이터 타입이라고 한다. 클래스는 아래와 같은 형태를 가진다.class 클래스 이름{ 접근 지정자 클래스 이름() { ... } // 생성자 접근 지정자 ~클래스 이름() { ... } // 소멸자 접근 지정자 데이터형 멤버 변수(필드); // 변수 선언 접근 지정자 데이터형 메서드(){ ... }; // 메서드 선언} 접근 지정자접근 지정자설명public누구나 접근 가능protected상속 관계에서 상속 받은 자식 클래스에서 접근 가능,그 외에는 접근 불가private그 클래스 내부에서만 접근 가능, 외부에서는 접근 불가 예시Dog라는 클래스를 선언하고, ..
함수 포인터함수도 변수에 담아서 사용할 수 있다.실행 시(런타임)에 어떤 함수를 가리키는지 결정되기 때문에 동적 바인딩 된다. 또한, 함수 포인터는 callback 함수를 구현할 수 있게 해 준다. 아래 코드의 main 함수에서 pFunc가 함수 포인터이며, add 함수를 pFunc라는 포인터 변수에 담아서 사용하고 있다.int add(int a, int b) { return a + b;}int main(void) { int a = 10, b = 20, result = 0; int (*pFunc)(int a, int b); // 함수 포인터 선언 pFunc = add; // 동적 바인딩 result = pFunc(a, b); printf("a + b = %d", result); return 0;} 구조..
반복문(break & continue)break반복문을 빠져나가게 해주는 명령어다. break를 만나는 순간 반복문을 벗어난다.while (true) { ... if (a > 10) break; printf("a: %d\n", a); a++; ...} continue반복문의 맨 위로 돌아가라는 명령어이다. continue를 만나면 continue 아래에 있는 코드는 실행되지 않는다. 아래의 코드는 continue를 사용하여 짝수단만 출력하는 프로그램이다.홀수단일 경우 continue를 사용하여 구구단이 출력되지 않도록 구현했다.#include int main(void) { for (int i = 2; i 함수함수는 나누어서 처리하기 위한 목적을 가진다.코드의 가독성이 좋아지고, 코드 유지 보..
