리액트로 내 사이트 만들기

정유진·2026년 5월 1일

내 사이트 만들기

목록 보기
1/1

내 컴퓨터에서 새로운 파일 yujin_portfolio를 만들고
해당 파일을 visualstudio_code로 열었다.

그런 다음 이미 설치된 react가 있기 때문에, 바로 프로젝트 생성을 했다.

❶ 프로젝트 생성하기

% npm create vite@latest 

해당 명령어를 입력하게 되면

쥬륵주륵 설치가 될거고

이렇게 local: http://localhost:5713/
이 나오면 프로젝트가 생성되고 실행된 것
(접속하려면 command누른채로 커서 클릭해야함!!)


접속하게 되면 리엑트 자체의 기본 화면이 나온다
(이 화면이 나오면 성공)


하나의 터미널에서 서버를 띄운 상태로 개발은 이어갈 수 없음.
그래서 서버를 닫아야하는데, 그때는 컨트롤c를 누르면 됨 !!


그리고 개발을 계속 하는 전공자나,
팀프로젝트로 진행되는 프로젝트로 하는 거라면 git을 사용하는게 좋다.
(팀프로젝트가 아니더라도 이 프로젝트의 과정을 처음부터 끝까지 남기기 위해선?..)

그치만 깃이 은근.... 비전공자가 사용하기엔 위험도 있고,
공부는 필요해서 구조 다 잡고 배포할 때 그때 깃에 올려도 충분함!

그래서 지금 적는 깃 설정은 건너 뛰어도 됨!//

❷ git 연결해두기

우선, 정말 처음이라 깃 계정도 없다 !
하면 https://github.com 여기서 가입부터 해야함

계정이 있다면 바로 시작

레포지토리에 들어가서 오른쪽 상단을 보면 new 버튼이있음

이름 설정하고 하단에 readme on으로 켜주고,
다른 사람들한테 이 파일 보이지 않게 하려면 private로 바꿔주면 된다!
(전 이게 개인 프로젝트니까 private로 생성했습니다)


❸ 프로젝트에 깃 연결하기

yujin_portfolio % cd yujin_blog
yujin_blog % git init
yujin_blog % git remote add origin https://github.com/yujining3827/yujin-site.git

origin 뒤의
https://github.com/yujining3827/yujin-site.git 이 링크는

여기서 바로 복붙 아이콘 눌러서 가져오면 됩니다.

yujin_blog % git add .
yujin_blog % git commit -m "init: react project"

초기 프로젝트 세팅을 저장하는 명령어고

yujin_blog % git push -u origin main --force

함부로 쓰면 안되는 git 명령어지만, 지금 로컬을 전체 덮어쓰기로 올리는 명령어입니다ㅎ,,

명심할게 정말 함부로 쓰면 안된다 !! 이정도??

이렇게 하면 정상적으로 깃에 반영됨

깃헙 해당 레포에서 실시간으로 확인 가능 !

profile
개발전공 대학생

0개의 댓글