본문 바로가기

프르미스 const p = new Promise((resolve, reject) => { }); p.then((result)=> { }) .catch((error)=> { }) const p = new Promise((resolve, reject) => { setTimeout(()=>{ var num = Math.random(); if(num >= 0.8) { reject("생성된 숫자 문제 :" + num); } resolve(num); }, 1000); p.then((result)=> { console.log("처리결과:", result); }) .catch((error)=> { console.log("오류:", error); }) 더보기
화살표 함수 const addItem = function(a,b) { return a+b; } const addItem = (a,b) => { return a+b; } const addItem = (a,b) => return a+b; 더보기
package.json 설치 명령어 npm install [패키지1] [패키지2] 현재 디렉토리의 node_modules 디렉토리에 패키지 설치 npm install -g [패키지1] [패키지2] 글로벌 영역 설치로 내 컴퓨터의 모든 프로젝트에 적용됨 npm install --save [패키지1] [패키지2] package.json에 의존성(dependencies) 저장 한다. 다른 컴퓨터에서 npm install 사용하여 패키지를 설치 할 수 있다. npm install --save-dev [패키지1] [패키지2] devDependencies 저장 설치 할 떄 --production 옵션을 주면 설치 않음. 더보기
https://unpkg.com/browse/@mui/material@5.15.1/Button/Button.d.ts https://unpkg.com/browse/@mui/material@5.15.1/Button/Button.d.ts UNPKG - @mui/material Version: 5.0.0-rc.05.0.0-rc.15.0.05.0.15.0.25.0.35.0.45.0.55.0.65.1.05.1.15.2.05.2.15.2.25.2.35.2.45.2.55.2.65.2.75.2.85.3.05.3.15.4.05.4.15.4.25.4.35.4.45.5.05.5.15.5.25.5.35.6.05.6.15.6.25.6.35.6.45.7.05.8.05.8.15.8.25.8.35.8.45.8.55.8.65.8.75.9.05.9.15. unpkg.com 더보기
A set of React components implementing Google's Material Design specification with the power of CSS Modules https://github.com/react-toolbox React Toolbox React Toolbox has 4 repositories available. Follow their code on GitHub. github.com 더보기
The repository for high quality TypeScript type definitions. DefinitelyTyped DefinitelyTyped Types for the masses. DefinitelyTyped has 22 repositories available. Follow their code on GitHub. github.com 더보기
github repository 삭제 리포지토리 삭제 GitHub.com에서 리포지토리의 기본 페이지로 이동합니다. 리포지토리 이름 아래에서 Settings(설정)를 클릭합니다. ... "위험 영역" 섹션까지 아래로 스크롤하고 이 리포지토리 삭제를 클릭합니다. 이 리포지토리를 삭제하겠습니다를 클릭합니다. 더보기
react-app-rewired 라이브러리? CRA에서 제공하는 eject와 react-scripts의 포크를 생성하지 않고 웹팩 설정들을 변경한다. no config라는 제한을 두지 않고 CRA의 이점을 제공한다. 사용자가 원하면 플러그인 및 로더들을 추가할 수 있다. 주의사항 해당 라이브러리를 사용하면 CRA가 제공하는 개런티를 깨트리게 된다. 사용하는 순간 설정 들을 소유하게 되는 것이기 때문에 지원되는 것들이 제공되지 않는다. 라이브러리를 설치 npm install react-app-rewired --save-dev // or yarn add -D react-app-rewired 최 상단 경로에 config-overrides.js라는 파일을 생성하고, 아래와 같이 코드를 입력한다. module.exports = function overrid.. 더보기
Lerna [사용안함....] 프로젝트를 Lerna로 초기화한다. cd path/to/your-project lerna init 다음과 같이 초기 디렉터리가 구성된다. lerna.json version: 각 workspace에 대한 버전을 관리할 수 있다. 개별로 관리하고자 할 때는 "independent"를 입력한다. npmClient: "npm" 또는 "yarn" useWorkspaces: npmClient의 workspace로 관리되도록 한다. workspace 추가 다음 명령을 실행해 새로운 workspace를 스캐폴딩할 수 있다. lerna create 다음과 같이 client workspace를 생성할 수 있다. lerna create client workspace에 의존성 추가 아래와 같이 client workspace에.. 더보기
오프라인 캐시 $ npm install -g yarn $ cd ../path/to/wms $ yarn init -y $ yarn set version berry 의존성을 추가하면 .yarn/cache 경로에 추가된다. .pnp.cjs .pnp.cjs 파일에는 모든 의존성에 대한 메타 정보(zip 경로, 의존성)와 함께 ZipFS에 대한 처리 코드가 들어있다. 따라서 Berry 기반의 프로젝트는 node src/main.js와 같은 명령으로는 실행할 수 없고 yarn node src/main.js와 같이 Yarn을 통해서 실행해야 한다. { "scripts": { "start": "node src/main.js" } } 위와 같이 package.json에 스크립트 명령을 작성한 경우에는 yarn start 명령을 사용할.. 더보기
React ref 사용, DOM 접근 방법 useRef Hook함수 사용 useRef는 current라는 속성을 가진 ref 객체를 반환한다. current의 초깃값은 useRef에 파라미터로 넘긴 값을 초깃값으로 가지고 있다. null로 초기화한다. import { useRef } from "react"; function App() { const inputRef = useRef(null); const onFocus = () => { inputRef.current.focus(); }; return ( focus the input ); } export default App; 더보기
yarn workspace yarn workspaces는 루트 경로의 package.json이 하위 폴더의 package.json에 정의된 종속성을 yarn install로 한번에 설치한다. 설치하는 과정에서 하위 폴더의 package.json의 종속성의 중복을 제거한 후 루트 경로의 node_modules로 호이스팅하여 설치한다. yarn init -y package.json packages 폴더 내의 모든 폴더가 workspace가 되도록 하려면 다음과 같이 설정한다. { "name": "Dana", "private": true, "version": "0.1.0", "license": "MIT", "workspaces": { "packages": [ "packages/**" ] } } mkdir packages packages.. 더보기