[Vue.js] (1) 시작하며 - 개발환경 셋팅 (Github 연동까즤)

오늘부터 Vue.js를 활용해서 앱을 만들기까지,, 열심히 공부를 해보려고한다.
SI회사로 취업하게 되면서 iOS를 손에서 놓게 되기도 했고, 개발과는 조금 거리가 멀어지기도 했다.(회사에서 하는 개발은 개발이 아니다 ^^) 역시 회사는 내가 원하는 개발을 하진 못하더라 ㅠㅠ 이와 관련해서 많은 현타가 왔던것도 사실이다. 이건 차차 회고해보면서 설명해보고~ 이 고민의 결론은, 결국 그냥 스스로 열심히 공부해서, 다시 나의 것으로 만드는 방법밖에! 없는 것이다. 

앱개발이 재밌어서 플러터를 공부하고 싶었으나, 올해의 목표가 '업무 안정화'이기 때문에, 웹을 공부하는게 맞다고 판단했다. (회사에서 주로 웹+백엔드 개발을 담당한다.) 그래서 Vue.js로 결정! 시작해보자구

일단 나의 뷰공부 첫번째 시작은,캡틴판교의 Vue.js 인프런 강의와 함께 할 것이다. 화이팅~ 

1️⃣ Visual Studio Code 다운로드

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

그냥 가장 최근 버전인 1.86버전을 다운받았다.

2️⃣ Node.js 다운로드

https://nodejs.org/en

Node.js

20.11.0 LTS 를 다운받았다.

3️⃣ Vue.js dev tools 다운로드

chrome에서 사용하는 dev tools인가보다. 

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools

다운로드하고, chorme에 추가를 눌러주자.

4️⃣ 해당 강의에서 사용하는 레파지토리 git clone

캡틴판교가 예시 코드를 깃허브에 올려준 레파지토리를 clone 해줄 것이다. 

https://github.com/joshua1988/learn-vue-js

GitHub - joshua1988/learn-vue-js: 인프런 Vue.js 시작하기 강의 리포지토리

나는 git GUI tool로 Fork를 사용한다. (githubDesktop, SourceTree, Kraken을 사용해봤는데 아무래도 이게 젤 편하다...)
Fork를 활용해서 클론해줬다.

그냥 수업을 진행하면서 코드를 참고할 용도이기 때문에 따로 뭐 설정은 진행해주지 않기로 한다.  

5️⃣ github 셋팅

 자,, 대망의 깃허브 셋팅. 정말 오랜만이라 너무 떨린다. (어떻게 했더라? ㅋㅋ) 

⚫️ 일단 레파지토리를 만들자.

New를 클릭해서 간단하게 만들수 있쥬. gitignore은 vue.js는 어떤것을 넣어야하는지 몰라서 일단 암거나 넣어놨다. 이제 검색해서 수정해보자.

⚫️ 레파지토리를 git client Fork로 clone 해주자

클론이 완료된 Fork의 모습!

이렇게 폴더가 잘 로컬에 생성된 것을 볼 수 있다. 자 이제 로컬에서 해당 폴더를 VSCode랑 연결해주어야한다.

⚠️ Fork - Unbale to load repositories. Github Error: Bad credentials

아니,, git fork 클라이언트에 Accounts는 연결이 되어있는데 레파지토리 목록이 안뜬다. 뭔가 내가 생략한 모양이다.
지금까지 내가 진행한 순서는
- github에서 New repository 생성
- Git Fork Client에서 Clone
- VS Code 에서 clone한 로컬 디렉토리 열어주고
- 수정하고 커밋해봄.

내가 너무 단순히 생각했나!? 잠만,, remote 뭐 설정해줘야 했었나 (쩔,, 쩔,,.ㅁ.,.,, )
아아, 원인을 찾았다. 바로 github token이 만료 되었기 때문! 개발을 워~~~ 낙 오랜만에 해서,,,

[github] 들어가서 [Settings] - [Developer Settings] - [personal token] new generate 해주고 git fork 클라이언트에 Account생성을 다시해주었다.

여기서 + 눌러서 token입력해가지고 연결 완료. 그럼 레파지토리 정보와 게정정보가 다 뜬다. 

자 그리고 커밋 테스트!! clone해온 local 파일에서 readme 파일을 간단하게 수정해서 push해보았다.

오예 커밋 완료! 이제 개발 셋팅 완료우 ~  아맞다 하나 더남았다.

⚫️ gitignore 설정

뭘 넣어야할지 모르겠다구? 바로 이 사이트를 활용해보자. 어떤 똑똑이가 이런걸 만들어놧다.

https://www.toptal.com/developers/gitignore

gitignore.io

예전에 swift 프로젝트할 때, gitignore설정이 잘못되어서 좀 애먹었던 적이 있었다. 내 개인 뭐시기까지 전부 들어가서 커밋이되가지구 협업할때 문제가 됐었달까!!

아 이정도만 넣으면 되려나... 이렇게 하고 생성 눌러주면

gitignore은 github내부에서 수정해주었다. 그냥 그것이 편해서 ~ 코드 경로로 들억서 edit 눌러서 수정하고 main브랜치로 커밋해주면 된다~ 

 

자 다음편은 뭘까?  일단 개발환경 셋팅은 마무리.