환경 설정 및 초기 셋팅

[minjeongHEO]

✅ TODO

• [x] Vite 프로젝트 생성
• [x] Vite 포트 번호 설정
• [x] Styled Component 설치

✏️ 기능 설명

⚓Git Brach Team Convention

fe/init 브랜치 생성하기

master 브랜치로 이동: ```bash git checkout master ``` master 브랜치의 최신 상태를 가져옵니다 (원격 저장소에서): ```bash git pull ``` 새로운 branch를 생성하고 해당 branch로 이동합니다 ```bash git checkout -b *fe/init* ``` 이제 new-branch에 master 브랜치의 모든 데이터가 복사되었습니다. 필요에 따라 원격 저장소에 새로운 branch를 푸시할 수 있습니다. 새로운 branch를 원격 저장소에 푸시합니다: ```bash git push -u origin *fe/init* ```

Vite 프로젝트 생성

Vite guide

vite 로 프로젝트를 생성 시, 상위 폴더 생성없이 해당 디렉토리 (FE 디렉토리)에 바로 셋팅하려면

~$ npm create vite@latest~

이 명령어로 실행하지 않고, 아래 명령어로 실행합니다.

$ npm init vite .

📦issue-tracker
 ┣ 📂.git
 ┣ 📂**FE**
 ┃ ┣ 📂public
 ┃ ┃ ┗ 📜vite.svg
 ┃ ┣ 📂src
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┃ ┗ 📜react.svg
 ┃ ┃ ┣ 📜App.css
 ┃ ┃ ┣ 📜App.jsx
 ┃ ┃ ┣ 📜index.css
 ┃ ┃ ┗ 📜main.jsx
 ┃ ┣ 📜.eslintrc.cjs
 ┃ ┣ 📜.gitignore
 ┃ ┣ 📜index.html
 ┃ ┣ 📜package.json
 ┃ ┣ 📜README.md
 ┃ ┗ 📜vite.config.js
 ┗ 📜README.md

$ npm install

$ npm run dev

Port setting

Vite local port 는 기본적으로 3000 이 아닌, 5173 이므로

vite.config.js 파일에서 포트 번호를 설정해줄 수 있습니다.

server: {
        port: 3000,
    },

Port 종료시키기

Windows에서 포트 사용 중인 프로세스 찾기 및 종료하기

1. **명령 프롬프트에서 사용 중인 포트 찾기** : - `cmd`를 열고 다음 명령어를 입력합니다. ```bash netstat -ano | findstr :YOUR_PORT_NUMBER ``` - 여기서 `YOUR_PORT_NUMBER`는 확인하고자 하는 포트 번호입니다. 예를 들어, 포트 3000이 사용 중인지 확인하려면: ```bash netstat -ano | findstr :3000 ``` 2. **프로세스 종료하기**: - `netstat` 명령의 결과에서 마지막 열에 있는 PID(프로세스 ID)를 확인합니다. - `Task Manager`를 열거나 다음 명령어로 해당 PID의 프로세스를 종료합니다. ```bash taskkill /PID YOUR_PID_NUMBER /F ``` - 예를 들어 PID가 1234인 프로세스를 종료하려면: ```bash taskkill /PID 1234 /F ``` ### macOS와 Linux에서 포트 사용 중인 프로세스 찾기 및 종료하기 1. **터미널에서 사용 중인 포트 찾기**: - 터미널을 열고 다음 명령어를 입력합니다. ```bash sudo lsof -i :YOUR_PORT_NUMBER ``` - 예를 들어, 포트 3000이 사용 중인지 확인하려면: ```bash sudo lsof -i :3000 ``` 2. **프로세스 종료하기**: - `lsof` 명령의 결과에서 `PID`를 확인합니다. - 다음 명령어로 해당 PID의 프로세스를 강제 종료합니다. ```bash kill -9 YOUR_PID_NUMBER ``` - 예를 들어 PID가 5678인 프로세스를 종료하려면: ```bash kill -9 5678 ``` 이러한 단계를 통해 포트를 사용 중인 프로세스를 찾아 종료할 수 있습니다. 명령어 사용에 주의해야 하며, 필요한 경우 관리자 권한으로 실행해야 할 수도 있습니다.

📕 참고할만한 자료

https://ko.vitejs.dev/guide/ https://velog.io/@wynter24/Vite-local-port-변경