1-1. Introduction
1-2. Visual Studio Code
- 코딩을 도와주는 editor 가 필요하다. Atom 이나 Bracket 도 있지만 나는 VSC 를 사용하기로 했다.
그리고 설치하면 다양한 부가 extention 을 설치할 수 있는데 그 중에서 "prettier" 를 설치하면 입력하는 코드를 보다 더 예쁘게 보여지고 (형형색색으로 보여진단거) 줄바꿈이 자동으로 가능한 특징이 있다.
그 밖에 다른 것은 아직 잘 모름.
Install Prettier 단, VSC 설치가 선행되어야 함.
Prettier help 설치 후 settings 에서 작동 원활하게 도와주는 방법에 대한 유튜브 동영상.
1-3. What is Git and Why is it awesome?
-
Git 란? : 내가 파일에서 만든 변경사항을 추적하는 시스템 (e.g : word, image, photoshop, source code, html, css, javascript)
-
모든 파일들의 변경사항들을 추적한다. 그리고 변경사항들을 다 알려준다.
-
즉 다시 말해서 우리 파일의 변경사항을 추적해 놓은 시스템이며, 생성한 파일의 History 를 보여준다.
예시) 내 컴퓨터에 기깔나게 작업해 놓은 자기소개 웹 페이지. 다 만들었으니 한 잔 하러 가보자! 아싸~~
집에오니 컴퓨터를 누가 훔쳐감 (응??) >> 하지만 우리에게는 배포되어진 (distributed) 버전 컨트롤이 있다.
우리가 push 해서 올리면, 모든 변경사항과 내용들이 클라우드 서버에 저장되는거다 어디에? 우리가 잘 알고 있는 (나는 아직 잘모르겠는) Github 에!! 이렇게 하면 코드가 공유되므로 팀으로 일하기에 유용하다.
-
생성한 파일은 그러니까
1) 개인 컴퓨터에 저장할 수 있고 (잃어버리면 끝)
2) 클라우드에 올릴 수 (Push) 있다.
3) 서버에 올려서 변경사항을 백업할 수 있다 (Github)
1-4. Version Control : Repositories, Commits, Branches.
- Repository : 소스 코드를 저장하는 폴더. 컴퓨터에 저장하면 Git은 나의 파일을 체크하고 변경사항을 추적할 것이다. (Git의 속성)
- Commit : 파일 변경 기록함 (File change Registry), 깃이 기록한 파일 변경사항 기록함이다. 프로젝트의 상황창 같은 것.
예) 카카오 채팅창의 "header" 부분을 새로 추가함.
변경사항의 내용, "카카오 채팅창의 헤더를 새로 추가했음" 이라고 기록하는 것이 Commit! - Branch : 나무의 가지. 처음 디폴트 브랜치는 Master branch 이다. 마스터 브랜치에서는 나의 모든 Commit이 반영되어 있다. Master 는 건들이지 않고 새로운 기능이나 실험을 하고 싶을 때 Branch 를 생성한다. 그럼 그동안 유저들은 마스터를 쓰겠지?
즉, 새로운 실험이나 기능을 추가해보고 싶다! 단 마스터는 건들지 않고! 할 때는 Branch!과정
1) Make Branch
2) Hold Master Branch (Never touch)
3) Finish Network on Branch
4) Combine Branch with Master
요약하자면,
1. Repository : 코드를 저장하는 폴더이며 깃은 그것을 추적하고 있다.
2. Commit : 깃 파일 (변경사항) 의 보관함이여서 무엇이 변경되었는지를 기록한다.
3. Branch : 마스터의 복사판, 새로운 것을 테스트 해보고 싶을 때 사용한다.
1-5. Git vs Github (서로 다른 개념임)
- Git : 코드의 변경사항을 추적하는 시스템. 코드가 언제, 어떻게, 누구에 의해 변경되었는지 추적하는 시스템. ( git is the system we use to keep track of our code )
- Github : Git 과 같은 변경사항들을 클라우드에 올리는 곳이다. 인터넷의 저장소라 보면 되며, 깃 파일을 올리고 관리하는 곳.
1-6. Git + Github Desktop
Git 을 활용해서 코딩하는 2 가지 방법
1. 콘솔 (mac에서는 terminal 이라 하던가..)을 활용하는 방법 : 보이기엔 약간 프로그래머 같아 보일 것 같긴 한데, 좀 어려워 보이고 지루하게 생겼다.
2. Github Desktop 사용 : 깃허브가 만든 소프트웨어. 코드의 변경사항을 보기 쉽게 색상으로 알려주면서 깃허브 웹사이트와 연동시킨다.
즉, 내가 작성한 코드를 비쥬얼 하게 잘 보여주기 위한 소프트 웨어 이다.
1-7. Your first Github Repo
- Create new repository 눌러서 저장 경로 설정해 주고, initialize this repo with a Readme 체크 해 놓고 만든다.
- VSC 내에서 수정을 하면 자동적으로 수정사항이 반영 되어서 어떤 수정이 이루어졌는지 본인이 코멘트와 설명을 작성할 수 있으며 Commit > Push 로 이어진다.
1-8. Meeting our Heroes : HTML + CSS
- HTML, CSS 는 둘다 프로그래밍 언어는 아니다.
- Hypertext Markup language : 마치 책을 읽고 있는데 이 부분은 xx 중요해! 하고 밑줄을 긋는 거 같은 느낌. 브라우저~슈나우저야~ 이건 제목이고, 이건 링크, 이건 리스트, 여기부터 여기까진 문단이야 이러면서 각각 무엇인지 html 로 알려주는 것. 마킹하는 언어.
- CSS 는 브라우저에게 각각 요소들이 어떻게 생겨 먹어야 하는지를 알려준다.
HTML ( mark-up ) : 이건 링크고, 이건 이미지야~~(브라우저에게 각 요소가 무엇인지 설명한다)
CSS ( design, style ) : 이 링크의 텍스트색상은 빨간색. 이미지의 크기를 키우고.. 등등 각 요소의 색상, 크기, 배경은 어떠한지 등등을 설명한다.
