공부

이제 만든 라이브러리를 배포해 보자.npm에 업로드를 할 수도 있고, github를 통해 배포도 가능한데, npm을 통해 배포하는 법에 대해 알아보려 한다. 먼저 배포를 위해 package.json 파일을 수정해주자. ... "name": "패키지명, 대충 지으면 스팸이라고 막힐 때 있음", "version": "0.0.1", // 버전 "description": "react button", // 설명 "keywords": [], // 검색 키워드 "author": "제작자명", "license": "ISC", // 라이센스 지정 ... 상기 내용 외 contributors나 repository 등도 작성이 가능하다.  자세한 내용은 홈페이지 참조. 작성이 완료되었으면 npm 홈페이지에 회원..

tsconfig의 설정까지 끝냈다면 이제 컴포넌트를 만들고, 번들링을 해보자. 우선 프로젝트에 리액트를 설치하고, 기본적인 파일들을 생성해 준다.npm i --save-dev react react-dom @types/react  본 글에서는 버튼 라이브러리를 만들 예정이므로 컴포넌트 생성 후, src/components/Button/index.tsx와 src/index.ts에서 각각 default를 export 해주었다.이제 프로젝트 번들링 및 배포를 위한 번들러를 설치해야 한다. 아래와 같이 롤업 플러그인을 설치해주자.npm i --save-dev tslib @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rol..

리액트 프로젝트를 만들고 환경 설정을 하는 방법에 대해 알아보자.오늘은 타입스크립트를 설치하며 tsconfig에 대해 알아보려고 한다. 먼저 아래명령어를 통해 프로젝트를 생성한다.npm init 아래와 같은 질문이 나오며 초기설정을 할 수 있게 되어있는데, 해당 과정을 넘기려면 npm init -y 명령어를 사용하면 된다.  package name프로젝트명version버전description프로젝트 (패키지) 설명entry point프로젝트 (패키지) 실행 파일test command프로젝트 생성 후 테스트로 입력할 메세지git repository프로젝트 gitkeywords프로젝트 키워드author프로젝트 작성자license저작권 관련 정보  package.json이렇게 해서 프로젝트를 생성하면 폴더 내..

리액트 프로젝트를 생성하는 방법에는 여러가지가 있다. 특히 CLI (Command Line Interface)를 많이 사용하는데, 복잡한 밑작업 필요없이 커맨드 한 줄로 프로젝트를 간편하게 생성할 수 있는 마법의 명령어이다. 대표적인 CLI로는 CRA (create-react-app)와 Vite가 있는데, 대략 아래와 같은 차이가 있다.  요약하자면 CRA는 커뮤니티가 활성화되어있고 많은 기능을 제공하는 대신 속도가 느리고 커스터마이징이 어려운 반면, Vite는 사전 제공 기능은 덜 풍부하지만 커스터마이징이 비교적 자유롭고 빌드 속도가 빠르다는 장점이 있다. 실제로 사용해 보았을 때, CRA는 빌드 속도가 느린 대신 Vite보다 모바일 환경에서 지원되는 기능이 많다는 느낌을 받았었다. 그렇다면 이 차이는..

큐 (Queue) 큐는 선입선출 (FIFO, First-In First-Out) 형식의 자료 구조로, 후입선출 (LIFO, Last-In First-Out) 배열인 스택과는 반대되는 개념이다.BFS 문제를 풀 때 주로 사용하게 되는데, JS에는 dequeue와 동일한 역할을 하는 shift 메소드가 존재하지만, 시간 복잡도가 O(n)인 관계로 배열의 길이가 긴 알고리즘 풀이에 활용하려면 큐를 직접 구현할 필요가 있다...   코드class Node { constructor(data) { this.data = data; this.next = null; }}class Queue { constructor() { this.head = null; this.tail = null; t..

힙 (Heap) 힙은 트리 기반의 자료구조로, 완전 이진 트리 자료구조 (마지막 레벨을 제외하고 모든 레벨이 채워져있으며, 마지막 레벨은 왼쪽부터 채우는 트리 구조)이다. 또한, 힙은 최소 힙(Min Heap)과 최대 힙(Max Heap)으로 구성되는데, 최대 힙은 부모 노드가 항상 자식 노드보다 값이 커야 하며, 최소 힙은 반대로 부모 노드가 항상 자식 노드보다 값이 작아야 한다. # 힙의 인덱스 관계좌측 자식 노드의 인덱스 = 부모 노드의 인덱스 * 2 + 1우측 자식 노드의 인덱스 = 부모 노드의 인덱스 * 2 + 2부모 노드의 인덱스 = (자식 노드의 인덱스 - 1) // 2 우선순위 큐 (Priority Queue)우선순위 큐란 우선순위가 가장 높은 데이터를 가장 먼저 삭제하는 자료구조로, 다익..