yarn berry를 사용하여 typescript 개발 환경을 만들어보자 yarn berry 설정 패키지 매니저 버전을 yarn berry로 변경하기 위해, 아래 명령어를 수행한다. yarn set version berry 위 명령어가 수행이 되면, .yarn 폴더, .yarnrc.yml 파일이 생성된다. 프로젝트 생성 yarn init 명령어를 사용하여, 프로젝트를 생성한다. yarn init -y package.json을 보면 packageManager 부분이 yarn@3.x.x과 설정되어 있는 것을 확인 할 수 있다. (3버전이 berry) { ... "packageManager": "yarn@3.3.1", ... } typescript 설정 기본적으로 프로젝트가 설정되었으니 typescript를 ..

프로젝트 생성 본 글에서는 ui라는 이름의 디렉토리를 생성하여, esm 모듈을 만든다. mkdir ui cd ui 패키지 관리툴은 yarn berry 버전을 사용하기 위해, 아래 명령어를 수행한다. yarn set version berry package.json을 생성한다. yarn init -y { "name": "ui", "packageManager": "yarn@3.2.1", "version": "0.0.1", "main": "lib/index.js", "scripts": { "build": "" } } react 모듈을 만들기 위해, react와 react-dom을 의존성에 추가한다. yarn add --dev react react-dom package.json 에 react와 react-dom에..

yarn berry를 처음 사용해보면서, prettier와 eslint를 사용하려고 했다. 우선 prettier 와 eslint를 설치하고, $ yarn add --dev prettier eslint WebStorm에서 Actions on save 설정을 하려고 했으나, WebStorm에서 방금 설치했던 package를 찾지 못하는 이슈가 있었다. 추측하기론 .yarn/cache를 보면 패키지들이 .zip 형태로 압축되어 있는데, WebStorm에서는 패키지가 압축되어 있어서 찾지 못하는것 같았다. 방법이 없나 삽질을 하다가, jetbrain 문서에서 해결방법을 찾았다. https://www.jetbrains.com/help/webstorm/installing-and-removing-external-so..

배포할 프로젝트 생성 create-react-app 또는 yarn init으로 리액트 프로젝트를 생성한다. (본 글에서는 생략, 아래 글 참고) 2020.06.15 - [Front End/React] - 리액트 설치 및 처음 시작하기 리액트 설치 및 처음 시작하기 NodeJS 설치 https://nodejs.org/ko/ 에서 node.js를 설치한다. 2020/06 기준 최신버전은 14.4, Stable 버전은 12.18이다. 본 글에서는 12.18버전으로 설치한다. 터미널에서 npm -version 을 입력해보자 # npm -v.. memostack.tistory.com 2022.01.06 - [Front End/React] - babel, webpack 으로 react 프로젝트 생성하기 babel,..

목표 babel과 webpack을 이용하여 컴파일 및 번들링을 한다 컴파일 및 번들링이 완료된 컴포넌트를 npm에 배포한다 React 프로젝트 생성 본 글에서는 npm 대신 yarn을 이용한다 package.json 생성 yarn init 명령어를 사용하여, package.json을 생성한다. $ yarn init yarn init v1.22.17 question name (simple-component): simple-component question version (1.0.0): 0.1.0 question description: simple component for deploy test question entry point (index.js): src/index.js question repositor..

목표 프로젝트를 생성 prettier와 eslint를 설정 프로젝트 생성 react-create-app으로 프로젝트를 생성한다. 아래 명령어 수행 $ yarn create react-app todo-app 생성 후 실행 확인해보자. 아래 명령어 수행 후 localhost:3000으로 접속 $ cd todo-app $ yarn start (리액트 로고가 뱅글뱅글 돌아가는 화면이 나온다) vscode에서 prettier와 eslint 설정 본 프로젝트는 vscode를 이용해서 개발할 예정이므로, vscode 환경에서 본 글을 작성한다. prettier와 eslint의 설정은 필수는 아니지만, 가독성 좋고 좋은(?) 코드를 작성하기 위해서 사용합니다. 특히 협업으로 개발할때는 거의 필수적으로 사용한다고 보면 ..

registry 설정과 마찬가지로 사내에서 개발하다보면 proxy를 설정해야하는 상황이 발생하기도 한다. proxy 설정을 할때는 npm config set 또는 yarn config set을 이용한다. 프록시 설정 본 글에서는 npm과 yarn을 사용해서 프록시 설정하는 방법을 모두 소개한다. using npm > npm config set proxy http://username:password@host:port > npm config set https-proxy http://username:password@host:port using yarn > yarn config set proxy http://username:password@host:port > yarn config set https-proxy ..

혼자서 개발할때는 필요없는 설정이지만, 인터넷이 막혀있는 사내에서 개발할때는 필요할 수 있다. 사내 넥서스 설정 기본적으로는 https://registry.yarnpkg.com 을 바로보게 되어있다 아래 명령어를 통해 확인 가능 > yarn config list registry의 값을 사내 저장소의 url로 바꿔주면 된다. 바꾸는 방법은 아래 명령어를 이용한다. > yarn config set registry https://your.company.registry.com 그리고, 다시 yarn config list 명령어로 제대로 바뀌었는지 확인해 본다. 만약에 잘못 설정했다면 yarn config delete registry 명령어를 이용하면 된다.

Nodejs 설치 아래 사이트에서 설치 파일 다운로드 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2021.07.08 기준으로 LTS 버전은 14.17.3이다. 본 글에서는 14.17.3을 다운로드 받는다. 설치가 끝나면 cmd 창에서 node -version 명령어를 입력해본다 > node --version v14.17.3 위와같이 버전이 나오면 설치 성공 Yarn 설치 (필수 아님) node 모듈을 다운로드 받을때 npm 을 이용해도 되지만, npm 보다 빠르고 의존성까지 한번에 받아주는 yarn 사용하면 편하다. 필수는 아니기 때문에 설치하..

NodeJS 설치 https://nodejs.org/ko/ 에서 node.js를 설치한다. 2020/06 기준 최신버전은 14.4, Stable 버전은 12.18이다. 본 글에서는 12.18버전으로 설치한다. 터미널에서 npm -version을 입력해보자 # npm -version 6.14.4 위와 같이 나오면 설치 완료 참고 yarn 설치 yarn은 npm과 같이 패키지 매니저 프로그램으로 개발자 취향에 맞게 nbm을 쓰거나 yarn을 쓴다. 설치는 자유 (npm을 사용해도 됨) 본 글에서는 homebrew를 이용해서 yarn을 설치한다. # brew install yarn 리액트(React) 프로젝트 생성 npm 또는 yarn을 이용하여 react 프로젝트를 생성한다. 아래 명령어는 npm 또는 ya..