memostack
article thumbnail
정말 쉽게 yarn berry와 typescript 환경 설정하기
Frontend/Typescript 2022. 12. 28. 23:03

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를 ..

article thumbnail
rollup을 이용하여 react 모듈 만들기 (yarn berry, babel)
Frontend/React 2022. 7. 11. 20:17

프로젝트 생성 본 글에서는 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에..

article thumbnail
yarn berry 환경에서 WebStorm, Actions on save 사용하기 (prettier, eslint)
Frontend 2022. 5. 26. 23:45

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..

article thumbnail
React 프로젝트 npm에 배포하기
Frontend/React 2022. 1. 6. 17:17

배포할 프로젝트 생성 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,..

article thumbnail
babel, webpack 으로 react 프로젝트 생성하기
Frontend/React 2022. 1. 6. 15:29

목표 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..

article thumbnail
React로 간단한 ToDo List 만들기 (#1 프로젝트 생성)
Frontend/React 2021. 7. 9. 00:53

목표 프로젝트를 생성 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의 설정은 필수는 아니지만, 가독성 좋고 좋은(?) 코드를 작성하기 위해서 사용합니다. 특히 협업으로 개발할때는 거의 필수적으로 사용한다고 보면 ..

article thumbnail
nodejs 프록시 변경 (yarn config set proxy, https-proxy)
Frontend/React 2021. 7. 8. 22:26

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 ..

article thumbnail
node 사내 저장소 바라보게 설정 (yarn config set registry)
Frontend/React 2021. 7. 8. 22:17

혼자서 개발할때는 필요없는 설정이지만, 인터넷이 막혀있는 사내에서 개발할때는 필요할 수 있다. 사내 넥서스 설정 기본적으로는 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 명령어를 이용하면 된다.

article thumbnail
Window에서 React 환경 구축하고 eslint 설정하기
Frontend/React 2021. 7. 8. 21:43

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 사용하면 편하다. 필수는 아니기 때문에 설치하..

article thumbnail
리액트 설치 및 처음 시작하기
Frontend/React 2020. 6. 15. 23:41

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..