# npx

53개의 포스트
post-thumbnail

[npm] reason: unable to get local issuer certificate 해결방법

문제상황 위의 명령어를 통해 prisma를 셋업하는 도중, 다음과 같은 오류가 발생하였다. 해결과정 1. npm strict-ssl 설정 변경하기 스택 오버플로우의 조언에 따라 위의 명령어로 npm config를 변경하였으나 오류가 해결되지 않았다. 만약 1번 과정으로 해결이 되지 않는다면 다음 방법을 써보자! 2. NODEEXTRACA_CERTS 환경변수 설정하기 이 방법은 Node.js와 NPM이 SSL/TLS 연결을 할 때 사용하는 인증서 목록에 루트 인증서를 추가하는 방법이다. 경로는 개인환경에 따라 상이할 수 있으니 인증서 경로를 확인한 후 명령어를 입력하자! 참고 https://stackoverflow.com/questions/36494336/npm-install-error-unable-to-get-local-issuer-certificate https

2023년 8월 31일
·
0개의 댓글
·

[Node.js_memo] npm, npx, yarn

이 글을 쓰게 된 이유 : 리액트를 설치하면서 npm, npx, yarn 이런 용어들을 보게 되었고, 대충 그냥 쓰면 되겠지 했다. 하지만 역시 알고 가야 뭘 어떻게 설치하고, 또 어떻게 나중에 디렉토리를 관리하면 되는지 알게 되었다. - NPM : node package manager - NPX: node package execute - yarn: yet another resource negotiator : 용어를 보면 말그대로 패키지를 관리하는 매니저다. 그렇다면 또 의문점이 생긴다. 패키지는 그럼 뭘까..? 패키지를 이해하려면 일단 모듈을 알아야한다. 모듈 : 함수들이 뭉쳐져서 하나의 파일안에 이루어진 것을 '모듈'이라고 한다. 패키지 : 여러개의 모듈을 그룹화화면 '패키지'가 된다. 그리고 패키지는 종종 라이브러리라고 불린다고 한다. 여러 함수들이 모여져 파일을 이룬 것을 모듈이라고 하고, 모듈들을 포함한 디렉토리를 패키지라고 생각하면

2023년 8월 4일
·
0개의 댓글
·
post-thumbnail

Vue - Node.js와 NPM

Node.js 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임 환경 런타임 환경: 동작할 수 있는 환경 NPM(Node Packaged Manager) Node.js로 만들어진 package를 관리해주는 툴 Node.js를 다운로드 받으면 자동적으로 NPM도 받아진다. npm init 프로젝트 초기화 (이제부터 프로젝트를 npm으로 관리하겠다.) 패키지 이름은 다른 패키지명과 중복되지 않게 만드는 것이 좋다. npm init -y를 사용하면 세팅을 묻지 않고 바로 생성된다. package.json 파일이 생성된다. npm install 패키지를 설치한다. npm install vue or npm i vue @를 활용해서 버전을 명시할 수 있다. npm i vue@3.2.9 개발 할 때만 필요한 패키지 설치 npm i serve --save-dev or npm i serve -D 패키지가 devDependencies

2023년 8월 1일
·
0개의 댓글
·
post-thumbnail

npm과 npx의 차이

프론트엔드를 공부하면서, 백엔드를 공부하면서 vscode 터미널이나 명령프로젝트 등에 npm과 npx의 관한 코드를 아무 생각없이 수도 없이 수도 없이 쳤다. 그러다 eslint를 공부하며 라이브러리를 설치하다 문득 떠올랐다. 이 과 가 정확하게 뭐지? 어떤 차이가 있지? 이렇게 시작된 npm과 npx 공부 DFS식 공부법 시작. ⚀ npm? > npm은 Node Packaged Manager의 약자이다. 즉, Node.js로 만들어진 패키지들을 관리하는 프로그램이다. 정의는 그래 그렇다 치자! 그래서 이걸 이용해서 뭘 할 수 있는데? 🂡 npm init 은 npm의 초기환경을 설정해줄 수 있는 을 만들어준다. 필자는 귀찮기 때문에 을 사용하지

2023년 7월 21일
·
1개의 댓글
·

React + Recoil + Typescript + styled-components 프로젝트 세팅

React + Recoil + Typescript + styled-components 기반의 프로젝트 세팅 과정 프로젝트 생성 위 명령어 입력 시 아래와 같은 에러가 나옴 > 에러 메세지로 구글링 해보니 이 문제는 create-react-app이 5.0.x 버전으로 업그레이드 되면서 더이상 글로벌 환경으로 설치하는 것을 지원하지 않아 발생하는 문제로, npm이나 yarn 글로벌 환경에 이미 create-react-app이 설치되어 있다면 글로벌 패키지를 제거 후 재설치로 해결이 가능하다고 함. 그래서 아래 순서로 명령어 입력 3번째 명령어 입력 시 또 에러 등장 (이마짚..) ![](https://velog.velcdn

2023년 7월 16일
·
0개의 댓글
·
post-thumbnail

[React] npm 초기 세팅

npm 설치하기 node js 설치 nodejs 운영체제에 맞게 설치합니다. window+R 키로 cmd 창에 들어가서 node -v 를 입력합니다. 버전이 나오면 설치가 잘 되었다는 뜻입니다. npm 설치하기 마찬가지로 cmd 창에서 npm install npx -g를 입력해줍니다. 설치를 기다리면 끝!! 이렇게 하면 create-React-app을 위한 환경 세팅이 끝났습니다~ 프로젝트를 진행할 폴더를 만들고 그 폴더에서 shift+우클릭 후 '여기에 powerShell 창 열기' 를 선택하시고 powerShell에서 아래 명령어를 입력하시면 됩니다! ![npx 명령어](https://velog.velcdn.com

2023년 7월 5일
·
0개의 댓글
·
post-thumbnail

node.js, npm, yarn

node.js > Browser가 아닌 다른 서비스에서도 Javascript 기반 프로그램이 실행 가능하도록 만들어주는 실행 도구 npm > node package manager의 약자로 node.js 기반의 패키지를 제공하며, npm은 node.js를 설치하면 같이 설치된다. yarn > 페이스북에서 개발한 실행도구로 npm보다 빠르며, 설치는 npm 명령어로 한다. npx > npm 5.2.0버전부터 추가된 node.js 패키지를 실행시키는 하나의 도구 실행시킬 패키지가 로컬에 저장되어 있는지 먼저 확인 후 존재한다면 실행, 존재하지 않는다면 npx가 패키지의 최신버전 파일을 불러와 설치하여 실행시키고 실행된 이후에 해당 패키지를 제거하는 방식 npx는 결국 npm을 더욱 편리하게 사용하기 위해 나온 도구로서 업데이트의 경우 npm는 일일히 업데이트를 해줘야하기 때문에 모듈이 많아 업데이트가 잦은 create-react-app의 경우

2023년 6월 26일
·
0개의 댓글
·
post-thumbnail

이것저것 - 개발환경

메모를 이곳저곳에 해놔서 찾기 쉽도록 벨로그에 옮긴다! node.js 브라우저 밖에서 자바스크립트를 실행할 수 있게 해주는 자바스크립트 실행 환경 npm Package Manager, node를 설치하면 자동으로 설치됨 라이브러리를 쉽게 설치하고 버전 관리할 수 있게 해줌 npm을 사용하면 package.json이라는 것을 프로젝트에 만들게 되는데 프로젝트 이름, 버전, 사용하는 모든 외부 라이브러리를 명시하고 버전 관리를 할 수 있음 <img src="https://velog.velcdn.com/images/art11010/post/78d18fb9-c3c5-4c0d-a583-7688e6cc812e/image.j

2023년 6월 16일
·
0개의 댓글
·
post-thumbnail

CS 지식 + JavaScript 기본

세그먼트(segment) 영어 뜻 자체로 '분할, 단편, 구분' 등의 의미가 있습니다. 기하학에서는 서로 다른 두 점을 연결하는 가장 짧은 선인 선분입니다. CS에서는 구성 또는 분할의 개념에서 사용하는 기본 단위를 의미합니다. transport layer에서는 교환되는 데이터의 단위를 지칭합니다. TCP 세그먼트 양 끝단 간 연결된 TCP 세션 내 서로 교환, 전달되는 데이터 단위입니다. OSI 7 Layer 다른 시간과 다른 장소 간에 언제든지 자유롭게 데이터를 주고받고 통신할 수 있는 것은 네트워크로 연결된 수많은 장비들이 끊임없이 데이터를 전달해주고 있기 때문입니다. 하지만 이 과정은 우리 눈에 보이지 않죠. 이런 데이터 통신 과정을 체계적으로 정리하여 표준화시킨 것을 OSI 7 Layer 라고 합니다. 국제표준화기구(International Standard Organization, ISO)에서 1984년에 발표한 네트워크 표준 모델입니다. 네트워크 통신의

2023년 6월 4일
·
0개의 댓글
·

npx와 yarn 프로젝트 생성 차이

npx create-react-app과 yarn create react-app 모두 새 React 프로젝트를 만드는 데 사용됩니다. npx는 npm과 함께 제공되는 패키지 러너 도구이며 전체적으로 패키지를 설치하지 않고도 패키지를 사용할 수 있는 반면 yarn은 프로젝트의 종속성과 명령을 관리할 수 있는 패키지 관리자입니다. npx create-react-app은 최신 버전의 create-react-app을 다운로드한 다음 그 버전을 사용하여 지정된 디렉터리에 새 React 프로젝트를 만듭니다. 즉, 시스템에 전체적으로 create-react-app을 설치할 필요가 없습니다. yarn create react-app는 내 시스템에 이미 설치되어 있는 create-react-app 패키지를 사용하여 새로운 React 프로젝트를 만듭니다. 즉, yarn global add create-react-app을 사용하여 create-react-app을

2023년 5월 2일
·
0개의 댓글
·

npx

npx는 npm 레지스트리 위에 올라가있는 패키지를 쉽게 설치하고 관리 할 수 있도록 도와주는 CLI 도구 입니다. npm을 통해 어떤 하나의 패키지를 설치하려고 할 때, 그 패키지에 의존하는 모든 패키지들도 호환성 문제로 다운받아야 하므로 모든 패키지를 다 다운받아 버리면 여러모로 리소스 낭비가 생기기 마련입니다. npx는 npm 설치 방법과는 다르게 일일히 설치, 실행 제거를 할 필요 없이 일회성으로 원하는 패키지를 npm 레지스트리에 접근해서 실행시키고 설치하는 실행도구 입니다. 내가 패키지를 설치하고 실행시키지 않더라도 이미 npm 레지스트리에 올라가 있는 최신버전을 설치하여 실행시키면 끝인거죠. npx는 다음과 같은 상황에서 유용하게 사용 하실 수 있습니다. npm run-script를 사용하지 않고 로컬에 설치된 패키지를 사용할 경우 일회성 명령어로 패키지를 실행할 경우 gist-based script를 실행 할 경우 특정 노드 버전의 script를

2023년 4월 9일
·
0개의 댓글
·

npm과 npx 차이가 뭘까?

npm(Node Package Module): 자바스크립트 패키지 관리 모듈 비슷한거로 Maven, Gradle 프로젝트의 의존성 관리와 빌드 자동화를 지원하는 빌드 도구가 있다. 하지만 npx를 묻는거라면 다른 뜻으로서 차이를 말하겠지? 이 두개의 차이가 궁금한 것일 것이다. 여기서 두개의 역활 차이가 뭔지? npm은 의존성 라이브러리들을 설치만 해주고 땡이라고 보면 된다. npx는 쫌 더 정리해야겠다. Chat GPT 한테 물어본 결과를 볼까? npm과 npx는 모두 Node.js 패키지 매니저입니다. 하지만 둘 간에는 몇 가지 차이가 있습니다. 실행 방식 npm은 패키지를 설치한 후에 npm run 명령어를 사용하여 실행합니다. 반면에, npx는 패키지를 로컬에 설치하지 않고, npx 명령어를 사용하여 즉석에서 실행합니다. 패키지 버전 npm은 프로젝트에 의존성 패키지를 설치하면 해당 패키지를 로컬에 설치합니다. 따라서 각 패키지 버전을 따로 관리할 수

2023년 3월 26일
·
0개의 댓글
·
post-thumbnail

npm, npx, yarn

npm npm은 Node Package Manager의 약자로, Node.js로 만들어진 모듈을 웹에서 받아 설치하고 관리해주는 프로그램이다. 개발자는 CLI 를 통해 필요한 모듈을 설치하는 것이 가능하며, 이러한 모듈의 기능을 가져와 서비스 구현에 사용한다. 또한 모듈에 대한 버전관리도 지원한다는 점에서 메이븐과 매우 유사하다. package.json package.json 파일은 프로젝트의 정보와 의존성(dependency) 정보를 담은 파일이다. 프로젝트의 이름, 버전, 작성자 및 프로젝트에 필요한 패키지와 패키지에 대한 버전 정보를 가지고 있다. package.json 을 통해 프로젝와 프로젝트 모듈에 대한 의존성 관리와 버전 관리를 할 수 있으며, npm install 명령어를 통해 package.json에 지정된 의존성 패키지를 설치하는 것이 가능하다. package-lock.json package-lock.json 파일은 `pac

2023년 3월 22일
·
0개의 댓글
·
post-thumbnail

[튜토리얼] React 리액트 시작

🕵️‍♀️React 리액트란? 메타에서 개발한 오픈 소스 자바스크립트 라이브러리. 프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수는 Vue가 가장 많으며(2022년 12월 04일 기준 Vue는 201K, React는 199K, Angular는 59.4K), npm 패키지 다운로드 수는 React가 가장 많다. SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로

2023년 1월 31일
·
0개의 댓글
·

# React Basics

📌 React & ReactDOM React를 사용하려면 React와 ReactDOM이라는 라이브러리가 필요하다. >- React : UI를 만들기 위한 라이브러리 ReactDOM : UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리. (실제 HTML 요소를 화면에 불러옴) 참고 | react dom에 대해 이해하기, React 작동 방법 📌 React app 만들기 npm, npx, yarn npm : 패키지 관리 장점 : 배포가 쉽고 종속성을 쉽게 해결함. 단점 : 패키지가 중복으로 설

2023년 1월 24일
·
0개의 댓글
·
post-thumbnail

[React] 새 프로젝트 생성하기

1분 요약 >1. 원하는 경로에 새로운 폴더를 만드세요. 만든 폴더를 shift + 오른쪽 클릭하세요. 여기에 PwoerShell 창 열기를 클릭해 터미널을 켜세요. 터미널에 입력하세요! 1. Node.js 설치하기 https://nodejs.org/ko/ 위 링크에 방문하면 LTS 버전과 최신버전을 다운로드해서 설치할 수 있습니다. 안정적이고 신뢰도가 높은 LTS 버전을 추천합니다. 2. VS Code 설치하기 https://code.visualstudio.com/ Visual Studio Code는 코드를 편집하는 작업을 편리하게 만들어주는 편집기입니다. 위 링크에 방문하여 Visual Studio Code의 최신 안정화 버전을 다운로드 할 수 있습니다. 3. 새 React 프로젝트 생성하기 a. 새 폴더 만들기 ![](https://velog.velcdn.com/images/ej-rarus/post/a47

2022년 12월 24일
·
0개의 댓글
·

Prisma & ProgreSQL 초기 설정

0. 준비 node, progresql Prisma extension설치 후 settings.json에 아래 코드 추가해서 autoFormatting 세팅 tsc --init을 통해 tsconfig.json 생성 1. 패키지 설정 npm init -y npm i -D prisma typescript ts-node @types/node nodemon tsconfig.json 생성 npx prisma init --datasource-provider postgresql 생성된 .env 속 DATABASE_URL에 postgresql이름, 비번, 포트번호, 데이터베이스 이름 넣어서 수정 다 만들었으면 npx prisma migrate dev

2022년 11월 4일
·
0개의 댓글
·
post-thumbnail

[npm] 보일러 플레이트를 npx 로 설치

이글은 [Next.js] Custom Express Server 설정 (보일러 플레이트, boilerplate) 다음글이다. 개요 보일러 플레이트를 만든 이유는 매번 거의 똑같은 폴더 구조, 똑같은 패키지 들을 만드는것이 지루해서 보일러 플레이트를 만들었다. 이번 글도 비슷한데서 시작한다. 보일러 플레이트를 만들었다 한들 매번 똑같은 git clone 부터 저장소 연결을 끊고 새로 연결하는 작업을 매번 하기 싫어서 작성한다. 시작 이전글에서 만들었던 보일러 플레이트 프로젝트로 이동 후 package.json 파일과 새로운 파일 하나를 만들어야 한다 generate-app.js 파일에 내용은 아래와 같다. package.json 에 추가 generate-app.js파일의 내용은 아래와 같다. 필요한 패키지

2022년 9월 28일
·
0개의 댓글
·
post-thumbnail

NPM vs NPX

These packages are just these different node related libraries or files and folders that get created by different tool developers online that we can use to help us with our node projects or JavaScript base project What this will do is it will install and download Create React app locally into this folder. ![](https://velog.velcdn.com/images/sobaboy/post/bee4a30b-8ee9-42da-a6d9-da9de5189d1b/image.png

2022년 8월 25일
·
0개의 댓글
·
post-thumbnail

[리액트] npx를 써야하는 이유

npx를 써야하는 이유 npx란? npm을 통해 까는 것의 문제점 npx로 해결 npm 패키지 삭제 00 결론 => npx로 깔자 1. npx란? npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0버전부터 새로 추가된 도구 따라서 npm 버전이 5.2.0 이상이면 바로 사용 가능 2. npm을 통해 까는 것의 문제점 CRA에 포함된 수 많은 의존성 라이브러리들이 컴퓨터에 계속 남아있는다. CRA 버전 업데이트에 따라 변경된 사항이 있으면, 글로벌 설치된 CRA패키지를 지우고 다시 설치를 해야한다. 3. npx로 해결 npx 로 CRA를 설치하면, CRA패키지를 잠깐 다운받고 CRA 프로젝트를 생성 후, 다시 패키지를 삭제한다. 이러한 방식으로 PC에 CRA의 무거운 패키지들을 남기지 않게 되고, 항상 최신 버전의 CRA를 사용할 수 있다. 4. npm 패키지 삭제 **Create

2022년 8월 17일
·
0개의 댓글
·