vsc 설치와 같은 내용은 다루지 않습니다.
vsc가 설치되어 있지 않고 한번도 사용해보지 않았다면 다음 글을 참조하길 바랍니다.
VSCode 설치와 편리한 확장프로그램 및 코드실행
https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite
dys-r.tistory.com
들어가기 전에
npm이 뭐고 node.js랑은 어떤 연관이 있는 걸까?
npm(Node Package Manager)은 Node.js에서 사용되는 패키지 관리자이다.
Node.js는 서버 사이드 JavaScript 런타임 환경으로, JavaScript 코드를 서버에서 실행할 수 있게 해줍니다.
이 때 Node.js는 JavaScript 모듈 시스템을 사용하여 필요한 코드를 가져오는데, 이 때 사용되는 모듈들은 일반적으로 npm을 통해 관리됩니다.
즉, Node.js에서 사용되는 패키지들을 관리하는 것이 npm의 역할이며, Node.js를 사용하는 개발자들은 npm을 통해 필요한 패키지들을 쉽게 설치하고 관리할 수 있습니다. 따라서 Node.js를 사용하는 개발자들은 npm을 필수적으로 사용하게 됩니다.
1. Node.js 설치
아래 링크에서 node.js를 다운 받는다
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
최신버전이 아닌 대다수의 사용자에게 권장되는 왼쪽 "18.14.2 LTS"를 다운 받고 실행해준다.
설치파일을 실행하고 부터는 기본적인 설치 동의 과정을 거치면 된다.
2. Terminal 실행
terminal 실행
command + space bar > terminal 검색
npm이 잘 설치 되었는지 확인(node.js 설치 패키지 파일 안에 내포)
% npm -v
3. React app 설치
% npm install -g create-react-app // 에러 발생 시 맨 앞에 sudo를 입력하고 재실행
/*
'npm install -g create-react-app' 명령어는
Node.js의 패키지 매니저인 npm을 이용하여
create-react-app 패키지를 전역으로 설치하는 명령어이다.
*/비밀번호 입력이 나오면 비밀번호를 입력해준다.
*sudo란?
sudo는 유닉스 계열 운영체제에서 다른 사용자의 권한으로 명령어를 실행할 수 있도록 하는 명령어이다. "Superuser do"의 줄임말이라고도 한다.
보통 유닉스 계열 운영체제에서는 시스템 관리자나 root 사용자만이 시스템의 중요한 부분을 제어할 수 있다.
따라서 일반 사용자로 로그인한 상태에서는 일부 명령어를 실행할 수 없는 경우가 있다.
하지만 sudo 명령어를 사용하면 일반 사용자도 root 권한으로 명령어를 실행할 수 있다. 이를 통해 일반 사용자도 시스템의 중요한 부분을 제어할 수 있게 되는데, 이 때 sudo를 사용할 때는 비밀번호를 입력하여 인증을 받아야 한다.
예를 들어, npm 패키지를 전역으로 설치할 때는 일반 사용자 계정으로는 권한이 없기 때문에 sudo 명령어를 사용하여 root 권한으로 실행해야 한다.
앱 설치를 해주었으니 설치가 잘 되었는지 확인해주자.
% create-react-app -V // V는 대문자
4. Workspace 만들기
React프로젝트 파일들을 관리 할 워크스페이스를 원하는 경로에 만들어주자.
터미널에서 방금 생성한 폴더로 이동해주자.
% cd 파일경로파일 경로를 입력하기 힘들다면 폴더를 터미널로 드래그 앤 드랍 하면 경로가 입력이 된다~! 오우예쓰~!
본인이 생성한 프로젝트 폴더의 디렉토리로 이동을 했다면
이제 해당 디렉토리에서
% create-react-app . // .앞에 띄어쓰기 있음
/*
create-react-app은 React 애플리케이션을 쉽게 생성할 수 있도록 도와주는 도구이다.
이 도구는 React 개발환경을 설정하는 데 필요한 설정 파일과 폴더 구조를 자동으로 생성해주고,
개발에 필요한 라이브러리와 빌드 도구를 자동으로 설치해준다.
따라서 create-react-app을 전역으로 설치하면
어느 디렉토리에서나 create-react-app 명령어를 실행하여 React 애플리케이션을 생성할 수 있습니다.
예를 들어, 새로운 React 프로젝트를 생성하기 위해서는 다음과 같이 create-react-app 명령어를 실행한다.
create-react-app my-app
위 명령어를 실행하면 my-app이라는 이름의 새로운 React 프로젝트가 생성된다.
이후에는 생성된 프로젝트 디렉토리에서 npm start 명령어를 실행하여 개발 서버를 시작할 수 있다.
*/
설치가 완료되면 폴더안에 아래와 같이 파일들이 생성되는 것을 확인할 수 있다.
만약 아래 숨김글에 있는 오류가 발생했다면 당황하지말고 순서대로 해결해보자.
오류 숨김글
나에게 발생했던 오류의 경우는 생성했던 프로젝트 폴더가 삭제가 되버렸고, 아래와 같은 오류 안내가 나왔다.
npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /Users/dullin_k/.npm/_cacache/content-v2/sha512/9f/67 npm ERR! errno EACCES npm ERR! npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which has since been addressed. npm ERR! npm ERR! To permanently fix this problem, please run: npm ERR! sudo chown -R 501:20 "/Users/dullin_k/.npm" npm ERR! A complete log of this run can be found in: npm ERR! /Users/dullin_k/.npm/_logs/2023-02-24T02_20_53_043Z-debug-0.log Aborting installation. npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed. Deleting generated file... package.json Deleting workspace_react_test/ from /Users/dullin_k Done.
무엇인고 하니
해당 오류는 npm의 캐시 폴더에 루트 소유의 파일이 포함되어 있기 때문에 발생한 것으로 보였고, 이는 이전 버전의 npm에서 발생하는 버그로 인해 발생할 수 있다고 한다.
해결 방법 중 하나는, 해당 캐시 폴더를 현재 사용자가 소유하도록 변경하는 것이다.
% sudo chown -R $(whoami) ~/.npm // 현재 사용자에게 ~/.npm 폴더의 소유권을 부여하겠다.
이후에 다시 npm install 명령어를 실행해보세요.
이제 오류가 해결되었다면
VSCode 를 실행시켜주고 생성했던 프로젝트 폴더를 열어주자.
5. React 실행
프로젝트 파일을 열었으면
하단 바를 올리거나 상단에 터미널을 통해 vsc내에 있는 터미널을 열어주고
프로젝트 파일을 실행시켜보자.
% npm run start
이후 창이 새로 열린다.
