Wendy 기술블로그

안녕하세요 밥한그릇입니다.

저는 현재 m1 맥북을 사용하있고, 개발할 때도 많이 사용하는 편입니다.

그런데, 다른 pc의 리눅스 환경에서 진행하고 있는 개발을, 제 m1 노트북에 가져와서 이어서 작업하고 싶은데 개발환경이 다르다보니 쉽게 그럴 수가 없더라구요. 더군다나 m1은 apple silicon칩 기반의 새로운 운영체제를 사용하기도 해서, 아직 지원하지 않는 소프트웨어가 꽤 많기 때문에 호환성도 떨어져요... (ㅠㅠ)

그래서 가상 환경으로 리눅스를 설치하고자 고생을 많이 했습니다.

가상머신을 지원하지 않는 경우가 대부분인데다가, 열심히 알아보아 겨우 설치하더라도 나중에 좀 이상해지는 경우가 있었어요. (sudo apt install 과정에서 계속 의존성 관련 오류가 생기는 등)

그래서 이번에 새로 vmware fushion을 통해 kali linux를 깔아봤는데, 결과는 대 성공이었습니다 ㅎㅎㅎ

mac m1에서의 리눅스 가상환경 설치 방법은 아래 더보기를 클릭하세요.

vscode 설치

그러나 한가지 문제가 있는게, 아무리 노력해도 vscode 설치가 되지 않아 힘들었어요.

구글링에서 나온 그대로 어떤 경로 설정 등등을 해서 sudo apt install code를 해도 패키지를  다운받을 수 없었구요. 직접 리눅스용 vscode 파일을 다운받아준 다음 sudo apt install ./code~~~ 이렇게 해도 에러가 나서 깔 수가 없었어요. 갖은 방법을 써보고 구글링해봐도 답이 없더라구요.

그런데, arm64에 맞는 .deb 파일로 깔아봤더니 vscode 설치에 성공했습니다! 원래는 그냥 저기 커다란 .deb 버튼을 눌러 amd64용 파일을 다운받고는 설치가 되지 않아 애먹었는데.. 그동안 너무 삽질만 했네요 (ㅠㅠ) 저같은 사람이 생기지 않기를 바라는 마음에 포스팅을 작성했습니다 (...)

** 참고 : 이 vmware-fusion에 깔아준 m1용 kali-linux는 arm 체제 기반이거든요. 그래서 반드시 amd가 아닌 arm64로 깔아주어야하는 것이랍니다.

저 빨간 박스로 표시해놓은 부분을 클릭하여 설치한 뒤, 다운로드한 폴더로 들어가 파일을 설치해주면 됩니다.

터미널을 클릭하여 띄운 뒤 다음의 명령어를 입력해줍시다.

cd ~/Downloads
sudo apt install ./(다운로드 받은 파일 명)
code # vscode 실행

다운로드 받은 파일 명은 sudo apt install./ 까지 치고 탭 치면 자동완성 되어 나올 거에요.

(저는 amd용 설치파일과 arm용 설치 파일이 총 2개가 있어서 2개가 검색 되었지만, 파일이 하나만 있다면 하나가 바로 자동완성 되어 나옵니다)

설치 후, 터미널에 code 라고만 입력해주면 vscode 창이 뜹니다.

와~ vscode가 잘 설치된 모습을 볼 수 있죠?

그전에 정말 갖은 뻘짓을 많이 하느라 고생했었는데 드디어 성공해서 정말 좋네요...

(그전엔 vscode 설치가 되지않아 vscodium을 설치했다가 github 연동이 잘 되지않아 포기하고 vscode 설치로 다시 돌아오는 등.. 많은 뻘짓을 했습니다)

바로가기 설정

그런데 아직 바로가기가 설정되지 않았습니다.

작업바나 아니면 바탕화면에 vscode 바로가기 아이콘이 생기면 정말 좋을텐데요.. 그렇죠?

바탕화면 바로가기 추가부터, 작업바에도 바로가기 아이콘을 추가한 모습입니다.

이제 사용하기 더욱 편하겠네요 ^^

이 포스팅이 도움이 되었다면 좋아요 버튼 눌러주세요~

댓글 또는 지적 항상 환영합니다 ^^

지난 포스팅에는 깃이란 무엇인지, 깃에서 기본적으로 알아야하는 용어가 무엇인지 정리해보았다.

근데 지난번꺼는 사실 다 의미없다. (예...?)

그러니까 내 말은, 백번 들어봤자 한번 해보는 것만 못하다는 얘기다!

이 포스팅을 보며, 꼭 직접 따라해보며 차근차근 날 따라오시라.

이번 편에서는 vs코드와 터미널을 사용해서 깃허브에 코드를 올리는 법을 소개한다.

사실상 가장 중요한 파트다!!!!!! 직접 해봐야하는 부분이니, 무조건 하나하나 해보며 따라와라.

노트북 준비!! 보면서 열심히 따라해야하니 손가락 스트레칭 미리하고 오시오!

(왕초보한테는 시간이 걸리는 게 당연한거다. 인내심을 가지고 끝까지 따라해보자.)

깃허브에 코드를 올리고 싶어요

깃이고 깃 용어고 뭐고 다 필요 없다. 결국 우리의 목적은 깃허브에 코드를 올리고 관리하는 거다.

처음에 깃허브를 시작하는 목적은 다들 비슷하다. 협업이나 그런 것에 앞서서, 주로 자기 코드를 올려서 보관하고, 포트폴리오처럼 가꾸고, 남의 코드도 구경하기 위함이 아닌가?

본론으로 돌아가서, 깃허브에 코드를 올리는 방법은 3가지가 있다.

(일단 깃허브 회원 가입-로그인은 미리 하고 와라)

모든 방법에 앞서, 일단 레포지터리를 만들어야한다.

먼저 프로필에서, 상단 바의 Repository 라는 메뉴를 클릭해준다. 아래 사진에서 아래에 빨간 선 그어져있는 메뉴이다.

그럼 레포지터리 목록이 뜨는 데, 이때 저 New 버튼을 눌러서 새 레포지터리를 생성해줄 수 있다. 

New 버튼을 누르니 위와 같은 화면이 나온다. 저기 Owner 이름 옆에 Repository name 이라고되있는 칸이 보이는가? 여기에 새로 만들 레포 이름을 적어준다. 그냥 바탕화면에 새로운 폴더 추가 - 이름 지어주기 이런 과정과 똑같다고 봐도 무방하다. 중복되지 않은 이름을 지어준 후, 맨 밑의 "Create repository" 버튼을 눌러주자.

일단 레포를 생성했으면 아래와 같은 화면이 뜬다.

이제부터 우리의 작업이 시작된다. ((두둥))

깃허브에 코드를 올리는 3가지 방법 (각자 다름)

1. 드래그-드롭으로 올린다.

2. 터미널에서 명령어 사용1 - git init -> git remote add origin "레포 주소" -> git push

3. 터미널에서 명령어 사용2 - git clone -> git add -> git push

1. 드래그-드롭으로 업로드한다

가장 쉬운 방법이다... 그런만큼 여러 단점이 존재한다..

레포를 처음 생성한 아까 그 상태에서, 저 빨간 박스에 있는 것 중 "uploading an existing file"을 클릭해보았다. 

그리고 choose your files를 클릭해 파일을 업로드하거나 아니면 직접 드래그-드롭하여 예시 파일을 업로드 해주었다.

commit changes를 눌러 작업을 완료한다.

그럼 다음과 같이 업로드가 완료된다. 이 방법은 가장 간단하다.

그러나 이 방식으로는 나중에 파일의 수정/삭제가 많이 불편하다. 또 이 방법만 사용하다보면, 여기 파일들을 폴더 안으로 옮겨서 정리하거나하는 그런 이동 작업들이 아주 힘들어진다. 자유롭고 편한 작업을 위해서는 명령어로 업로드하는 법을 반드시 알아놓아야한다.

2. 터미널에서 명령어 사용1 - git init -> git remote add origin "레포 주소" -> git push

"터미널 사용? 명령어?? 이게 다 뭐냐... 이번엔 진짜 관둬야겠다."

이런 생각을 하고 있는 친구들이 꽤 많을 것이라 생각한다.....나 역시 그랬다.

근데 지금 이 명령어 달랑 몇 개만 외워두면 나중이 아~주 편해진다. 노후대비마냥 든든해진다... 진짜 날 믿어라!

특히 올리고 수정하고 그러는 파일이 많아질수록, 저 명령어들은 진정한 빛을 발한다.

자 그럼 시작한다. 

참고로 터미널은 명령어를 칠 수 있는 어떤 검은 화면.. 그런 것이라 생각하면 된다.

사전 준비 : git 설치, vscode 설치 (아래 더보기 누르기)

더보기

git 명령어를 사용하기 위해서는 먼저 컴퓨터에 git을 설치해야하겠다.

mac(애플)환경과 Window환경에 대해 git을 설치하는 방법은 다음 2개의 링크로 각각 알아볼 수 있다. 각자의 시스템에 맞는 링크를 클릭하여 git 설치를 해주자.

 

https://hanco.tistory.com/14

 

Mac Os 환경에서 Git 설치하기 / homebrew 설치

🌕 개발자라면 git과 github를 다루는데 익숙해야 한다고 하는데 공부할 일이 없다가 이번에 스터디를 하며 드디어 스터디원들과 함께 개발하며 github를 이용한 협업을 경험할 것 같다!! 😄 그 중

hanco.tistory.com

https://coding-factory.tistory.com/245

 

[Git] 윈도우 Git 설치하기 (Git for Windows)

GIt을 사용하려면 먼저 Git이 PC에 설치되어 있어야합니다. Git설치방법에 대해 알아봅니다. 윈도우버전 Git설치하기 1. Git 설치파일을 다운로드 받습니다. 아래에 링크되어 있는 페이지에 들어가서

coding-factory.tistory.com

우리는 위 링크를 이용해 깃을 설치했고, git bash를 실행하여 git config로 유저명, 유저이메일 설정까지 해준 상태가 되었다. 이젠 아주 든든~하다. 이걸로 터미널(검은 화면 같은거)에 명령어만 타닥 쳐주면 내 코드가 알아서 깃허브에 올라간다.

 

그런데 이때 훨씬 더 편하게 쓸 수 있는 방법이 존재한다!

그건 바로, 우리가 코드를 쓰고 편집하는 에디터에서 바로 올려주는 거다.

놀랍게도, vscode라는 편한 에디터에선 그게 가능하다! 여기에도 터미널이 붙어있기 때문이다.

이건 진짜 엄청 많은 개발자들이 사랑하는 개발도구다. 꼭! 깔기를 추천한다. 테마까지 적용하면 알록달록 아주 이쁜게 갑자기 코딩할 맛이 나기 시작한다. 게다가 liveshare같이 남을 내 코드스페이스로 초대해서 같이 동시코딩하는 확장팩 기능도 있고... 진심 잘 활용하면 엄청나진다. 기회가 된다면 vscode의 사용법 및 활용법도 포스팅하고 싶다.

 

vscode가 없다면 다음 링크를 눌러 지금 설치하자.

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

단축키 ctrl + '~' 을 눌러주면 하단에서 저렇게 터미널이 뿅 튀어나온다. 저기다가 명령어를 입력해주면 내 코드들을 바로 올려줄 수 있다는 거.... (와~신난다~)

 

참고로 이건 윈도우에 있는 vs코드다.

방금 윈도우에서 vs코드를 깐 사람은 알거다. 사실 저 사진에는 함정이 숨어있다...

내 예상컨데, 지금 막 vs코드를 깔은 님들은 윈도우 파워쉘 터미널을 쓰는 중이다. bash shell 터미널로 바꾸자.

다음 링크를 클릭해서 작업을 완료해주면 윈도우에서도 나와 같은 터미널을 볼 수 있을 것이다. 

(참고로 mac 운영체제에서는 원래부터 bash 쉘을 기본 터미널로 쓰기 때문에 따로 바꿔줄 필요없다.)

 

https://grahams.tistory.com/353

 

[vsCode]윈도우 powershell => git bash 로 바꾸기

윈도우를 쓰는 분들이라면 vs code에서 터미널을 켜면 powershell 이 나올겁니다. 하지만, 저는 약간 무거운 감이 있어 bash를 선호합니다. 맥도 사용하는 저로서는 되도록 동일 환경이 좋아서이기도

grahams.tistory.com

 

git 설치부터 vs코드 설치까지... 사전준비는 이제 진짜 다 끝났다.

~ 그럼 이제 본격적인 명령어 입력 시간이다~

나는 막 바탕화면에 example이라는 폴더(폴더 이름은 아무거나 상관 없다)를 만들었다. 그 안에는 예시 코드 파일들이 들어있다. 이걸 올리고 싶다. 

그럼 어떻게 해야하는 지 보여주겠다.

그냥 터미널이던 vscode의 터미널이던 상관없다. 터미널의 종류도 상관 없다. 일단 님들의 터미널을 지금 당장 켜라!

일단 지금 위치를 확인(pwd 입력)하고 그다음 Desktop(바탕화면) 위치로 이동해준다. cd는 change directory의 약자로, 이 디렉토리(폴더)에서 안에 있는 저 디렉토리(폴더)로 들어가겠다 이 말이다. 반대로, 뒤로 빠져나오고 싶을때는 cd .. 을 입력해주면 된다. 

그 다음 바탕화면에 있는 example 폴더로 이동한다. 그 폴더 안에서 ls로 현재 파일목록을 보니 코드 파일이 3개 있다.

여기서부터 우리가 알아야할 명령어가 나온다. 꼭! 지금 바로 vscode나 터미널을 켜서 따라해보아야한다. 그러면 백날 눈으로 보는 것보다 훨씬 잘 이해된다.

1. git init

git init이라는 명령어의 뜻은 "지금 이 폴더를 깃이 관리해주세요~"하는 것이다. 즉, 깃에 대한 초기화 작업이다. 우리가 가진 일반 폴더를 깃을 통해 업로드하려면 꼭 해줘야하는 첫 단계이다. 

2. git remote add origin (레포지터리 주소)

git remote add origin (레포 링크)는 "제 목적지는 이 레포에요~여기로 업로드할 거에요~"라고 올라갈 목적지를 명시해주는 명령어다. 

먼저 레포 링크를 복사해왔다. 그 다음 터미널에서 git remote add origin (레포 링크)를 입력해주었다.

git remote -v를 이용해서 다시 확인해봐도 잘 설정된 것을 알 수 있다.

3. git add *

"이 폴더 안의 모든 파일을 git이 관리하는 목록에 추가합니다~"라는 명령어다.

파일을 따로따로 추가하려면 'git add (파일명)'을 해주면 해당 파일만 git에 추가된다.

위의 실행화면을 보면, git add * 후에 git status를 실행하여 확인해주니, 세 파일 전부 git에 잘 추가된 것을 볼 수 있다.

4. git status 

지금 어떤 파일들이 git에 의해 관리되는 지와 같이 상태를 볼 수 있다. (그냥 확인해주는 정도의 용도다)

5. git commit -m "적고싶은 커밋 메시지"

참고로 커밋(commit)은, 지금 상태/버전을 사진찍듯이 체크포인트 만들어 저장한다는 거다. 

-m 옵션을 줘서 지금 당장 커밋메시지를 입력하지 않고 git commit만 입력하더라도, 무슨 커밋메시지 쓰라고 편집창이 따로 뜨기 때문에 귀찮다.

-m "커밋메시지"를 해주면 바로 커밋이 되서 편하다. 깃 커밋을 꼭 해줘야만 이 다음 단계인 깃푸시(업로드)가 된다.

6. git push

이제 올린다! 무슨 에러가 떠서 보니까 git push --set-upstream origin master을 입력하라한다. origin branch를 master브랜치로 설정해서 푸시한다는 뜻이다. 일단 이거 한번만 설정해주면 다음부턴 git push만 해도 쭉쭉 잘 올라갈 거다.

일단 입력해줬다. 그러니 처음엔 갑자기 안올라가고 가만히 있는다. 이때 github에서 vscode를 승인하시겠습니까? 이런 창이 뜬다. 이때 ok 해주고 그러니 잘 올라갔다.

3. 터미널에서 명령어 사용2 - git clone -> git add -> git push  (훨씬 더 쉬운 방법)

이번 방법은 유용하다. 빈 레포를 생성한 직후에 처음 업로드 할 때도 쓸 수 있고, 이미 만들어 올린 파일들이 있는 상태에서도 모두 쓸 수 있다.

일단 시작해보자.

먼저 저 code라는 초록블럭을 눌러 저기 나오는 링크(레포주소)를 복사해준다.

1. git clone (레포주소)

깃클론은 "저 레포를 그대로 복사해서 내려받아주세요~"라는 뜻이다. 이때는 깃으로 내려받음으로써 이미 깃이 관리하는 상태이기 때문에 git init을 하지 않아도 되서 편하다는 장점이 있다. 또 이미 내려받은 주소가 있기 때문에, 그 부분을 목적지로 push 해주게 된다. 따라서 git remote로 업로드할 목적지 설정을 할 필요도 없다.

그래서 그냥 git clone (레포주소)라고 쳐서 깃클론 받으려 했더니 현재 데스크탑에 example이라는 이름의 폴더가 존재한다고 튕겼다. 그래서 example2라는 이름으로 내려받아주었다. "git clone 레포주소 폴더명" 이렇게 입력하면 지정한 폴더명으로 내려받아진다. 이 폴더명은 무엇이든 상관없다. 어차피 깃허브의 내 레포 이름에는 영향을 안준다.

2. git add -> git commit -> git push

git add * 를 했을 때, 변경된 파일만 깃에 추가가 되는 것도 확인할 수 있다.

하여간 저 명령어들만 다다다 입력해주면 끝이다. 사실 난 코드를 올리는 3가지 방법 중 git clone을 통한 마지막 방법이 훨씬 간단하고 좋다 생각한다.

빈 레포에 처음으로 뭘 업로드할 때도 그렇고, 다른 컴퓨터에서 내 작업중인 파일을 받아서 작업하기도 편하고, 여러모로 쉽다. 난 그냥 애초부터 이 방법을 통해서 모든 파일을 업로드-다운로드한다. 깃remote는 사실 쓰기 불편하다 ㅋㅋ

"그럼 매번 코드를 올릴 때마다 저 모든 과정을 다해줘야하는 건가요?"

아니. 그럴 필요 없다.

일단 해당 폴더에서 git clone 또는 git init + git remote가 한번이라도 된 상태라면, 다음부터는 그냥 git add -> git commit -> git push만 해도 변경사항이 빠르게 업로드 된다.

또한 git 으로 관리되는 폴더에서는 그 안에서 계속 코드를 수정해도 git add * 하면 수정된 부분만 add 된다. 그래서 저렇게 수정한 부분만 커밋 되서, 내가 올린 커밋메시지와 올린 시각을 확인하면 어떤 부분을 새로 추가하거나 수정했는 지 알기가 편해지는 것이다.

그러니 해당 폴더 안에서 계속 작업해가며 업로드해도 되고, 바뀐 내용 확인하기도 정말 편하다.

아 그리고, 커밋을 하면 내 페이지 메인에 있는 이런 표가 초록색으로 칠해진다. 커밋한 날짜에 해당하는 칸에 저렇게 초록색 표시가 생기고, 커밋을 많이 하면 할수록 진한색으로 바뀌는 것이다. 그래서 이걸 주로 "잔디밭을 깐다"라고도 말한다. 매일매일 코드를 올리면서 저런 기록을 남기는 것만으로도 성취욕구를 자극할 수 있어 좋다는 것이다.

하여튼 이번 포스팅은 대략 이렇게 마무리할 수 있다.

그 외에도 vscode에서 코드를 컴파일하는 법, 확장팩 또는 테마를 설치하는 법은 구글에 치면 바로 나오니 잘 참고해서 순조로운 코딩생활 누리길 바란다~