*리엑트 프로젝트 시작
-
cmd창을 열어
cd 경로를 입력하여 경로 설정
=> 위의 경우에는cd desktop을 입력하여 위치를 바탕화면으로 잡아줌
-
npx create-react-app 프로젝트명을 입력하면 열심히 Install하는 중이라고 뜰 것인데,
Install이 끝나고 나면 아래의 이미지처럼 Happy hacking!이라고 뜸
-
vs code로 프로젝트를 열어보면,
이렇게 폴더 및 파일이 보이는데, 잘 켜지는지 확인하기 위해 터미널 창을 열어 (단축키는 ctrl+j)
npm run start로 실행시켜준다.
터미널 창에 저렇게 sucessfully라고 적히며 열린 브라우저에
이렇게 뜨면 성공이니 다음으로 넘어가자.
-
아까 3번에서 확인했던 폴더 및 파일 중, src라고 적힌 폴더를 클릭하면 파일들이 많이 보이는데,
여기서 나에게 필요한 파일을 제외하고는 지워줌 (app.js와 index.js를 제외하고 삭제)
-
파일들을 삭제하면 당연하게도, Module not found라고 하며 에러가 뜨기 때문에 이를 처리해줌
App.js
index.js
삭제하여 경로를 찾을 수 없는 파일들을 써뒀기 때문에 오류가 발생했던 것,
위처럼 사용하지 않는 파일들을 삭제해주면 오류를 없앨 수 있음
이후에는 브라우저의 화면이 백지가 되기 때문에 평소 하듯이 진행하면 끝~^^
+) 깃허브와 프로젝트 연동하기
위의 react 프로젝트를 만드는 것까지 끝냈다면, 이제 깃허브와 연동은 누워서 떡먹기보다 쉬울 수 있음
위에서 이것저것 기본 세팅을 하다보면 아래 이미지처럼 되어있는 것을 볼 수 있는데,
이제 이를 저장소와 연동시켜두면 됨.
-
자신의 깃허브에 새로 레파지토리 생성을 해준 이후!
-
git remote add origin 저장소주소를 vs code의 cmd창에 입력
-
git add .으로 수정한 것 전체를 add 시켜두면 아래 이미지처럼 열심히 경고를 해주긴 함
-
git commit -m "코멘트적기"로 코멘트를 적어 커밋
이후에는 아래 이미지처럼 깔끔해짐
-
마지막으로
git push origin main(혹은 master)을 사용하여 push해주면 끝!
연동한 저장소를 확인해보고 잘 되어있으면 이제 정말 편하게 할 일을 하자!!
