리눅스(Linux) 리액트(React) 설치

리눅스에서 개발을 하면서 React에 도전해보기로 했다.

 

먼저 Node.js를 설치해준다.

Node.js — Node.js® 다운로드

Node.js — Node.js® 다운로드

공식 홈페이지로 가면 자기의 운영체제에 맞는 파일을 받을 수 있다.

 

나는 Ubuntu를 사용중이라서

Linux환경에서 nvm 방식으로 npm 을 사용해서 설치

로 자동설정 되었다.

이후 바로 아래 화면에 뜬 내용을 그대로 순서대로 입력했다.

# nvm 다운로드 및 설치:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Node.js 다운로드 및 설치:
nvm install 24

# Node.js 버전 확인:
node -v # "v24.11.1"가 출력되어야 합니다.
nvm current # "v24.11.1"가 출력되어야 합니다.

# Verify the Node.js version:
node -v # Should print "v24.11.1".

npm 버전 확인:
npm -v # 11.6.2가 출력되어야 합니다.

nvm 다운로드 및 설치까지 하고나서 nvm을 실행시켰을 때 아무런 반응이 없다면 터미널을 껏다가 다시 켜면 정상 작동했다.

 

이후 과정은 동일하게 해주면 된다.

이후 프로젝트 생성은 create-react-app 이라는 기능 대신 Vite 를 사용한다고 한다.

create-react-app은 리액트를 만든 페이스북에서 2022년 이후로 업데이트가 없다고...

 

폴더를 생성할 위치로 이동 후

npm create vite@latest [프로젝트명] -- --template react

 

를 입력해서 새로운 프로젝트를 생성해준다.

설치하면 무슨 scroll인가 써 볼것인지 묻는데 여기서 나는 no를 선택했다.

검색해보니 최신 실험 기능을 사용해볼 것인지 묻는 내용이었다.

 

이후 프로젝트 폴더로 들어가고

cd [프로젝트명]

 

필요한 라이브러리를 자동으로 다운 받는다.

npm install

 

그리고 구글이 만든 디자인 시스템인 Material UI 를 설치해준다.(같은 폴더에서 이어서 실행)

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

 

https://mui.com/material-ui/

Material UI: React components that implement Material Design

이 사이트에서 Material UI의 사용법에 대해서 알아볼 수 있다.

 

설치가 모두 끝나면

npm run dev

를 이용해서 내부 서버를 실행시킬 수 있다.

 

화면에도 뜰 텐데 h입력후 엔터를 입력하면 도움말을 볼 수 있다.

나는 주로 o로 인터넷창을 바로 열고, q로 열린 서버를 종료하는 정도만 사용한다.

 

리액트는 HTML, CSS, JS를 쉽게 사용할 수 있게 해주는 기능이라 하여 도전해보게 되었다.

내가 만드는 웹 프로젝트에 도움이 되면 좋겠다.