컴포넌트 생성Modal Edit 생성task를 클릭하면 modalActive가 true로 설정되면서 모달창이 뜨게 된다. 이 모달창이 EditModal 컴포넌트이다.function App() { ... return ( ... {modalActive ? : null} ... )} store에 있는 모달의 정보를 가져오고, 이 정보를 새로운 state의 초기값으로 저장한다. 모달 창의 정보가 변경되면 새로 만든 이 state(data)에도 변화가 일어난다.일 수정하기 버튼을 누르면 store에 저장되어 있는 task를 업데이트하고, 로그를 추가해 주고, 모달 활성화 여부를 false로 변경하여 모달창을 닫는다.일 삭제하기 버튼을 누르면 현재 활성화되어 있는 게..
컴포넌트 생성빨간색 네모가 BoardList 컴포넌트, 파란색 네모가 ListsContainer 컴포넌트이다.function App() { const [activeBoardId, setActiveBoardId] = useState('board-0'); const boards = useTypedSelector(state => state.boards.boardArray); const getActiveBoard = boards.filter(board => board.boardId === activeBoardId)[0]; const lists = getActiveBoard.lists; return ( ... )} Boar..
인덱스데이터를 좀 더 빠르게 찾을 수 있도록 도와주는 도구이다. 장점검색 속도가 빨라질 수 있다. 데이터의 중복성이 낮을수록 속도가 더 빠르다.쿼리의 부하가 줄어들어 시스템 전체 성능이 향상된다.단점데이터베이스 크기의 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이 아닌 다른 값..
난이도: Lv. 2정답률: 49%문제: https://school.programmers.co.kr/learn/courses/30/lessons/152996 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 알고리즘duplication 맵과 cases 맵을 선언 한다.duplication 맵은 key를 몸무게, value를 그 몸무게를 가진 사람의 수로 한다. 중복을 체크하기 위한 맵이다.cases 맵은 몸무게에 x2, x3, x4를 계산한 값을 key로 가지고, 해당 값이 몇 개인지를 value로 가진다.파라미터로 주어진 weights 배열을 순회한다.dupl..
