![]()
이제 만든 라이브러리를 배포해 보자.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보다 모바일 환경에서 지원되는 기능이 많다는 느낌을 받았었다. 그렇다면 이 차이는..
