Web 프론트엔드 (1) / Git Hub 환경 세팅

 

데이터 아트 작업 중에서 관객이 직접 그 데이터에 관여하는 작업을 만들고 싶어졌다.

그 과정에서 웹/데이터베이스/서버... 등의 공부의 필요성을 느껴

당분간은 개발 공부만 해야할 것 같다. T-T (아이좋아)

 

프론트엔드 공부는 html, css만 따로 배웠을 뿐.. 아예 동작 원리에 감이 안잡혀서

클래스101 강좌들을 뒤적이며 어떻게 시작해야할지, 고민이 많았다.

그러던 중, 크리에이터 개발자 사관학교 강사님이 올려주신이 수업들이 전부 내가 찾던 내용과

딱 맞아 떨어졌고, 이 강좌를 쭉 들으며 프론트엔드 - 백엔드 - 배포까지! 한방에 쭉 달려볼 예정이다.

 

 

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!

https://class101.net/ko/products/5f53ae772e3e0d001cd99667

[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교

 

다음 강좌를 들으며 배운 내용들을 정리해보려고 한다.

강사님도 배운 내용를 매일 매일 정리하는 것이 중요하다고 하셨으니^^! 성실히 적어보기로 한다.

화이팅~!

 

 

 

 

CHAPTER1 : 개발하기 전 준비 및 워밍업

 

[2. 물어보는 기술도 능력 - 검색 방법과 공식문서]

 

보통 구글에 많이 검색하는데, 그외에도 개발자 분들이 많이 이용하신다는 

두가지의 사이트를 적어두려고한다.

 

 

1. stackoverflow

https://stackoverflow.com/

Stack Overflow - Where Developers Learn, Share, & Build Careers

 

- 다양한 개발 질문을 올리면 능력자분들이 답을 많이 해준다.

이미 올라와 있는 질문들도 많아서 원하는 답을 대부분 찾을 수 있을 것 같다.

 

또는 구글에 'font color change in css stackoverflow' 처럼 작성하면,

stackoverflow에 올라온 자료들이 우선적으로 뜨기도 한다.

 

 

 

 

2. MDN

https://developer.mozilla.org/ko/

MDN Web Docs

- 공식 문서 사이트로, css, html, javaScript등의 사용이 공식 자료들로 올라와 있다.

여기 사이트에서 먼저 검색해본 다음에 다른 자료들을 찾아보는게 좋을 듯 하다.

 

 

 

 

3. 구글 검색 결과 기간 변경

- 아무래도 개발의 경우 새롭게 업데이트 되면서 끊임없이 정보가 바뀌는 경우가 많다.

전에는 돌아갔던 코드가 버전이 바뀌면서 안돌아가기도 하고..

그렇다보니, 검색 도구에서 최신의 정보들이 먼저 뜨도록 바꾸는 방법도 유용하다.

 

 

 

 

 

 

 

[3. 명령어 치는 장소인 검은 화면과 친해지기]

 

맥북을 사용중이라면, Cmd+스페이스바를 통해 spotlight를 열어주고 

검색창에서 terminal을 검색해주면 터미널 창이 나온다.

 

하지만 윈도우에서는, 맥처럼 바로 터미널에 접근하기 위해서는 별도로

소프트웨어를 설치해주어야 하는 모양이다.

git bash로 설치하면 터미널도 사용할 수 있고, git도 바로 사용할 수 있다고 한다.

https://gitforwindows.org/

Git for Windows

 

 

 

이제 터미널의 간단한 명령어를 익혀본다.

 

 

1. ls -al : list all의 줄임말로 지금 터미널이 위치한 곳에 존재하는 모든 파일들의 이름들을 리스트업 해준다.

개 중에는 .localized나 .등 알 수 없는 파일도 뜨는데 굳이 신경쓸 필요는 없다고 한다.

 

2. cd Desktop : chnage directory의 줄인말로 뒤에 붙는 (여기서는 Desktop) 폴더로 들어간다.

cd뒤에 원하는 폴더명을 입력해서 들어갈 수 있다. 물론 지금 위치에서 찾을 수 있는 폴더여야 한다.

 

3. cd .. : 뒤로 돌아가기이다. 들어갔던 폴더에서 한단계 밖으로 나온다.

 

4. mkdir dirName : dirName이라는 이름으로 지금 위치에 폴더를 만들어준다.

마찬가지로 mkdir 뒤에 원하는 폴더 이름을 자유롭게 입력하면 된다.

 

5. touch README.md : touch명령어는 파일을 만들어주는 명령어이다.

READ.md라는 파일을 만들어준다.

 

6. rm -rf dirName : remove로 dirName파일을 지운다.

rf는 무슨 의미인지 잘 모르겠다.

다만 명령어를 입력하는 순간 정말 한순간에 사라져버리니, 사용에 유의해야 한다.

 

* 터미널 명령어는 띄어쓰기 하나 하나가 엄청 중요한 의미를 가진다.

띄어쓰기에 유의해서 입력하자!

 

 

 

 

 

 

 

[4. 코드 관리 - 깃허브 사용방법 및 프로젝트 생성]

 

깃허브를 사용해보는 시간이였다.

깃허브에 대한 얘기는 많이 들었고 한때 분명 사용했던 기억이 나는데..

내가 가진 이메일들을 다 입력해봐도 아이디를 찾을 수 없어, 결국 하나 새로 만들게 되었다!

 

https://github.com/

GitHub: Let’s build from here

 

 

 

깃허브 계정을 만들었다면 저장소를 하나 만들어준다.

저장소(Repositories)는 코드들을 모아놓는 곳이라고 생각하면 간단할 것 같다.

프로젝트 별로 하나씩, 또는 스터디별로 하나씩 만들면 좋을듯하다.

 

 

나는 sweetTomato로 별생각없이 유저이름을 지었는데.. 

나중에 취업 포트폴리오나 공동 작업할때를 위해 자신을 식별할 수 있는 유저 이름이 좋다고 한다.

T-T 신중하게 짓는 것을 추천한다... (물론 나중에 바꿀 수 있다고 한다!)

 

Your repositories를 들어가서 new를 눌러주면 새로운 저장소를 만들 수 있다.

Repository name에는 원하는 저장소 이름을, 설정은 Public으로 해주었다.

나머지는 모두 건들지 않고 Create Ropository를 눌러준다.

 

 

이제 해야할 일은 컴퓨터에 있는 폴더 중 하나를 방금 만든 Repository와 연결해서,

거기에 파일을 추가하면 바로바로 Repository에도 올려줄 수 있도록 설정해주는 작업이다.

 

강사님이 안내해준대로 하면 대부분 되는 것 같던데, 내 경우에는 쉽게 되지 않았고,

두시간 정도 씨름한 후에야 해결할 수 있었다!

 

그 부분을 포함해서 기록해본다.

 

 

1. 컴퓨터에 폴더 만들고 터미널에서 그 폴더로 들어간다.

이 부분은 위에서 설명한 cd ~ 명령어들을 통해 접근해주면 된다.

 

 

이런식으로 타고타고 들어갔다.

 

 

 

2. git 환경을 세팅해준다.

들어간 자리 그대로에서 git init 이라는 명령어를 입력해 초기화 해준다.

이때, git을 처음 사용하면 맥에서 뭘 다운받으라고 나오는데,

시키는대로 다운받으면 된다.

내 경우에는 해당 폴더가 이미 init이 되어 있어서 Reinitialized~가 나온것 같다.

 

성공적으로 진행됐다면, 터미널에 Initialized empty Git ~ 의 문장이 나타나는걸 볼 수 있다.

 

 

 

 

3. Repository를 폴더와 연결해준다.

 

아직 아무런 파일도 올리지 않은 Repository에 가보면, (연결을 원하는)

친절하게 터미널에서 어떤 문장을 써야 하는지 나와있다.

해당 부분을 복사해서 터미널로 돌아와 준다.

 

그대로 터미널에 Ctrl+C V 해준다.

새로운 test 폴더를 만들어 다시 init해준 뒤 진행했다.

아무말도 없으면 성공한 것 같다. ^^;

 

 

 

 

 

 

4. 폴더 속 내용물을 전체 선택한다.

 

 

아직 test 폴더는 텅텅 빈 폴더지만, 깃과 잘 연결이 되고 파일을 주고 받고 있는지 확인하기 위해

png이미지 하나를 폴더 안에 넣어주었다.

ls -al 명령어를 통해 test안에 파일이 잘 있는지 확인해보았다. (나머지 파일들은 안보이는 시스템 파일들인 것 같다.)

png이미지가 있는걸 확인했으니,

git add . 명령어를 통해 폴더 안 모든 파일을 git Repository에 옮겨줄 준비를 한다.

역시나 아무말이 없으니 무사통과한것 같다..

 

 

 

 

5. commit해준다.

이제 거의 다 왔다. git commit -m '원하는 메시지' 입력을 통해 commit해준다.

commit을 써주면 이제 진짜 되돌릴 수 없는 강을 건넌것과 마찬가지이다! 

완전 보내겠다는 뜻.

' ' 안에 메시지를 써서 이 파일을 보내는 목적/의도 등을 표현할 수 있다.

" "를 써야 된다는 말도 있었는데, ' ' 과 " " 내 경우에는 둘다 상관없었다.

 

 

다음과 같이 메시지가 뜬다면 잘 되고 있는 것이다. 

 

 

 

 

6. 마지막, push 작업

git push origin master 명령어를 입력하면 파일이 넘어가면서 끝이다!

여기서 master는 여러가지 파일 중 가장 메인이 되는 뿌리가 되는 파일이 master가 되고,

그 중심 작업을 주축으로 나머지가 Brench가 된다. 

지금 나는 협업하는 상황도 아니고, 메인 파일을 올리는 것이기 때문에 master로 입력해주었다.

 

 

이렇게 하면 되는데 나는 안되었다.

강사님은 이렇게까지 하셨을 때 무리없이 되시는 것 같았고 나머지분들두 그랬지만..

내 컴퓨터의 경우 빨간 글씨가 뜨며 주소를 찾을 수 없다고 나왔다.

 

 

 

 

 

6-1. 이 경우에 해볼 수 있는 방법 첫번째는 git remote -v 명령어를 입력해,

해당 폴더가 자신의 github Repository와 연결되어 있는지 확인한다.

 

확인해본 결과, 나는 잘 연결되어 있었다.

만약, 연결이 안되어있다면 아래 아무것도 뜨지 않는다.

혹시 다른 주소로 연결이 되어 있다면, git remote remove origin 명령어를 입력해, 연결을 해제해 준 뒤,

다시 위에 3번 과정으로 돌아간다.

 

 

 

 

 

6-2. 이렇게 해결되지 않는 문제라면 

내 경우에는 master 브랜치가 없어서 발견하는 오류였다.

git checkout -b 'master' 명령어를 입력해서 풀어준다.

그리고 나서 git push origin master를 다시 입력해주니, 문제가 해결되었다.

 

 

 

 

 

https://0ver-grow.tistory.com/1102

[해결방법] error: src refspec master does not match any

해당 블로그에서 도움을 크게 받았다.

부족한 내 설명보다는 위에 블로그가 더 도움이 될지도 모르겠다!

 

 

https://velog.io/@ddo_0/GitGithub-%EB%A7%A5-%ED%84%B0%EB%AF%B8%EB%84%90%EB%A1%9C-%EA%B9%83%ED%97%88%EB%B8%8C-%EB%A0%88%ED%8F%AC%EC%A7%80%ED%86%A0%EB%A6%AC%EC%97%90-%ED%8F%B4%EB%8D%94-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0

[Git/Github] 맥 터미널로 깃허브 레포지토리에 폴더, 파일 업로드하기-(1)

그 외에 명령어를 잘 정리해주셔서 도움을 많이 받은 블로그이다.

다음에 또 같은 과정을 반복할 일이 생기면 보고 참고하자!

 

 

 

 

 

 

 

 

터미널에서 잘 작업이 되었다면 해당 Repository에 파일이 잘 업로드된 것을 볼 수 있다!

 

 

 

 

 

 

 

7. 토큰 인증 로그인하기

하지만 처음에는 파일이 한번에 업로드 되는 대신에 다음과 같은 메시지가 터미널에 나타났었다.

 

Username for 그리고 Password for 이였다.

Username에 깃허브 유저네임을 쓰고 비밀번호에는 내 로그인 비밀번호를 입력했지만

에러메시지만 뜰 뿐 동작하지 않았다.

대충 내용을 해석해보니, 비밀번호로 인증하시는 방식은 이미 만료되었다. 

다른 방식으로 진행해야한다.. 라는 내용이었다.

구글을 뒤지다가 깃허브에서 토큰을 발급 받아 진행해야 된다는 것을 알게 되었다.

다행히도 한번만 인증하면, 이제 다시 유저 네임과 비밀번호를 입력해야 하는 수고로움은 없다.

 

 

해당 블로그에서 정말 잘 정리해주셔서 오류를 해결할 수 있었다.

직접 글을 보면서 하나하나 해결하니 되었다!

https://hyeo-noo.tistory.com/184

[Mac] GitHub push token 오류 해결

 

 

 

 

과정을 정리해보자면,

 

사용자버튼에서 Settings를 눌러준다.

 

 

왼쪽 탭바에서 Developer settings를 눌러준다.

 

 

 

다시 왼쪽 탭바에서 Tokens (classic)을 눌러준다.

(Fine-...어쩌구 토큰을 써도 되는지는 모르겠다. 베타라 불안해서 그냥 classic으로 했다.)

 

 

 

 

 

나는 이미 토큰을 발급받아 하나가 뜨는데 아직 받지 않았다면 비어있을 것이다.

Generate new token을 눌러준다.

 

그러고 나서 Note에 원하는 이름을 써주고, 

위에 분이 체크하신 부분들에 나도 사용 목적이 비슷해 체크표시를 해주었다.

repo, admin:repo_hook, gist, user, delete_repo 이렇게 선택했다.

중요한 것은 그다음에 절대 창을 나가지 말고 시리얼 넘버처럼 생긴 친구를 잘 복사해두어야 한다.

 

 

그 다음으로 윗 블로거분께서 키체인에 접근해, github.com이라고 써준 부분을 제거하라고 하셨지만,

나는 딱히 나오는게 없어 이 부분은 패스했다! 

(아마 깃 자체를 처음 사용해서 그런 것 같다.)

 

 

 

 

- 이제 다시 터미널로 돌아와, 해당 명령어를 입력해준다.

 

git config --global user.name "깃허브에서 내 유저이름 입력"

git config --global user.email "깃허브에 가입한 내 이메일 입력"

 

 

git --version을 통해 우선 git이 잘 설치되어 있는지 확인했다.

 

분명 user.name도 입력해줬는데 입력을 마치고 나니 사라져버렸다.

띄어쓰기에 유의하면서 입력하자!

 

 

이 과정을 마치고 난 뒤, git push를 해주면 아까와 마찬가지로

Username과 Password를 써주는 부분이 나온다.

이때, unsername에는 아까와 마찬가지로 자신의 깃허브 유저네임을,

password에는 아까 복사해 뒀던 Personal access token을 입력해주어야 한다!

 

여기까지 하자, 내 경우에는 정상 작동했다.

 

 

 

 

 

 

8. git Hub에서 파일 내려받기

파일을 올릴 수 있다면 파일을 내려받는것 역시 가능할 것이다.

내려받는 방법은 간단하다.

 

Repository에 가서 code버튼을 누르면 해당 파일들이 저장된 링크가 있다.

주소를 복사해 터미널로 돌아온다.

 

 

 

파일을 다운 받고 싶은 폴더까지 이동 한뒤 다음 명령어를 입력한다.

git clone 주소

 

 

 

해당 폴더에 들어가면 다운받은 폴더가 있는 것을 볼 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이상하게 코딩만 하면 온몸이 거부하듯 의자에서 튀어나가고 싶어진다..

하지만 그럴수도 없고 한 며칠 지나면 또 생각이 나는게

코딩의 매력이 아닐까 싶다...

사실 오늘 한 내용은 코딩?이라고 할 수 없지만

검은창에 글씨를 쓰는 것만으로도 몸은 코딩이라고 인식하는 모양이다.

아직 챕터1이 끝나지 않았지만 양이 너무 많아서 나눠서 써야할 것 같다.

 

 

 

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교