[TXS] node + react + vite + git 실행환경 구축

안녕하세요 오늘은 mac에서 git 연결 + node npm + vite + tailWindCss 구축하고

intelliJ로 로컬 실행을 해보려고 합니다.

---

git 설정

 

1. git Repository 생성

Repository를 구축하면 연결 시 필요한 url를 얻게 됩니다.

만약, 터미널에 git 연결을 처음하신다면 tokenKey를 얻어야합니다.

 

2. TokenKey 얻기

프로필 > setting > Developer settings > Personal Acess Tokens > Generate new Token 으로 키를 얻습니다.

Key는 한번 보면 다시 볼 수 없으니 꼭 다른 곳에 저장을 해놔야 합니다.

 

 

구축

 

1. 파일 만들기

원하는 경로에서 workspace 파일을 만들고 그안에 구축을 했습니다.

mkdir workspace // 파일 생성
cd workspace	// 이동

workspace로 이동하고 그안에 프로젝트 폴더를 생성합니다.

 

2. git 연결

git status // git 상태를 확인합니다.

git repository가 없네요. clone이 필요합니다!

git clone https://github.com ~ (아까 repository url를 작성합니다)

만약 Invalid username or password 에러가 뜬다면 설정을 해줘야합니다.

 

2-1. git 연결 오류 시 설정(Invalid username or password)

clone시 오류 없이 넘어가면 2-1은 넘어가면 됩니다.

Git Credentials on MacOS — Caching, Updating, and Deleting Your GitHub Account Credentials

위 링크는 터미널에서 git 계정을 기억하게 해주는 방법에 대해 잘 설명이 되어있습니다.

 

아래 명령어 입력 후 git 계정을 입력해주면 연결 완료됩니다.

git config --global credential.helper osxkeychain
git config --global user.email [깃계정이메일]
git config --global user.name [이름]
git config --global --unset credential.helper

 중간에 비밀번호, token을 물어보면 작성하면 됩니다.

git clone https://github.com (~ giturl 작성)

clone 완료!

저의 git repository 이름은 react-playground라서 clone이 잘 됐다면 react-playground 폴더가 생성된 것을 확인 할 수 있습니다.

 

3. npm 만들기

cd react-playground

생성된 react-playground로 들어간 후 npm package를 생성합니다.

 

npm init

npm이란 Node.js로 만들어진 package(Module)을 관리해주는 툴입니다.

init을 하게되면 package name 등등 작성하는 칸이 나오고 잘 맞춰서 작성하면됩니다.

init이 완료 되면 작성한 내용들 다 맞는 지 확인하고 맞으면 yes를 작성합니다.

package가 잘 만들어 졌는지 확인합니다.

ls

ls는 현재있는 폴더에 있는 파일,폴더를 확인합니다. package.json 파일이 잘 만들어져 있네요.

(저는 npm init을 git 연결보다 먼저해서 git에서 연결한 react-playground라는 폴더가 안보입니다. 순서대로 했으면 git연결한 폴더도 같이 보여요)

 

** npm install을 통해 package를 설치합니다.

npm install

 

4. vite 만들기

비트(vite)는 기존의 프런트엔드 개발 경험을 향상시켜줄 새로운 프런트엔드 툴입니다. Vue 창시자 에반 유가 만들었으며 현재 Vue, React, Svelte 등의 주요 프레임워크 커뮤니티에서 주목하고 있는 도구입니다. 

간단히 말해 vite는 엄청난 용량의 소스를 필요한 부분만을 골라 정리하여 배포 가능합니다.

vite에 더 자세한 내용은 하단 링크를 통해 확인하시면 됩니다.

Vite

 

vite 생성

npm create vite@latest

Ok to proceed? y -> name, framework, variant 를 프로젝트에 맞게 작성해주시면 됩니다.

 

5. tailwindcss 연결

Installation - Tailwind CSS

TailwindCss란 모든 css가 미리 생성되어 있고 원하는 css를 className에 넣어주기만 하면 됩니다.

npm install -D tailwindcss
npx tailwindcss init

 터미널에서 명령어를 입력해 주면 tailwind.config.js와 src/input.css 에 설정만 해주면 됩니다.

 

IntelliJ 실행

 

1. IntelliJ 실행

저는 이미 연결을 해놔서 react-playground가 보이지만 처음 시작 시 open을 클릭하여 본인이 생성한 폴더를 열면 완료입니다.

 

2. 로컬 서버 실행

npm run dev

npm run dev를 터미널에서 실행하면 끝입니다.

 

긴글 읽어주셔서 감사합니다

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)