하루죙일 노트북 앞에 앉아있음 거북이가 되.🐢
이번주에 배운 내용은 크게 두 가지 인데,
HTML/ CSS/ JS를 배우기 위한 기본기와 Git/ Github에 대해서 배웠다
1주차 공부 내용을 회고하며 다시 공부해보자!
1. HTML/ CSS/ JS를 배우기 위한 기본기
🔎 HTML/ CSS/ JS는 뭘까?
-
HTML (Hyper Text Markup Language)
HTML은 웹 브라우저 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다
우리가 보는 인터넷 화면의 뼈대라고 생각하면 된다 -
CSS (Cascading Style Sheets)
CSS는 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸미는 시각적 표현(정적)을 담당한다
뼈대(HTML)를 잡은 후 세부 사항을 꾸미는 디자이너와 같다 -
JS (JavaScript)
JS는 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적인 처리를 담당한다
실질적으로 우리가 아는 코딩 을 하게되는 언어가 JS이다
웹앱의 동작 원리
웹 앱이란?
웹 애플리케이션의 줄임말로 웹 브라우저에서 실행되는 소프트웨어를 말한다
우리가 일상에서 노트북이나 컴퓨터로 브라우저에 접속해서 보게되는 여러가지 사이트가 다 웹 앱인데, 사용자가 사이트에 접속해서 하는 모든 행동에는 다 동작 원리가 있다
대략적인 동작 원리는 다음과 같다
- 사용자(client)가 사이트 주소를 입력 혹은 접속 ⇒ [최초 요청 (request)] ⇒ 서버에 전달
- 서버 ⇒ [최초 응답(response)] ⇒ 사용자 브라우저로 전달
- 사용자가 추가 요청[ CSS, JS, JPG 등 ] ⇒ 서버
- 서버 ⇒ 추가 응답 [CSS, JS, JPG 등] ⇒ 사용자 브라우저
사용자(client)가 브라우저 접속이나 이후 클릭 등의 브라우저에서 행동하는 모든 것에 대한 요청을 서버에게 보내면 화면을 띄우거나 이미지를 보여주는 등의 그에 대한 응답을 해주는 원리이다!
HTML 기본 문법
위 이미지는 html의 가장 기본이 되는 구조이다
하나씩 알아보자!
- Doctype(DTD)
<!Doctype html>DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도이다
- HTML
<html> // 시작 태그 </html> // 종료 태그html 태그는 문서의 전체 범위를 의미하며 HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할을 한다
- HEAD
<html> <head> </head> </html>head 태그는 문서의 정보를 나타내는 범위로,
웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은 웹 페이지의 보이지 않는 정보를 작성하는 범위이다
- BODY
<html> <head> </head> <body> </body> </html>body 태그는 문서의 구조를 나타내는 범위로,
웹페이지의 보여지는 구조 (로고, 이미지, 버튼 등)를 작성하는 범위이다
HTML 핵심 요소
body 태그 안에 들어가는 여러가지 HTML의 핵심 요소에 대해서 살펴보자!
-
<div> _ division
블록 요소로 특별한 의미가 없는 단순 구분을 위한 요소이다 -
<h1> _Heading
div태그와 같이 블록 요소이며 제목을 의미한다
h1부터 h6까지의 종류를 가지고 있으며, 숫자가 작을수록 더 중요한 제목을 정의한다 -
<p> _Paragraph
블록 요소로, 문장을 의미하는 요소이다 -
<img> _image
인라인(글자) 요소로, 이미지를 삽입하는 요소이다
img 태그를 쓸 때 필수 속성은 다음과 같다
⇒ src : 삽입할 이미지의 경로
⇒ alt : 삽입할 이미지의 이름(대체 텍스트) -
<ul>
블록 요소로, 순서가 필요 없는 목록의 집합을 의미한다
ul 태그 내에는 li 태그가 한 개 이상 존재해야 한다 -
<li> _list item
ul 태그의 자식태그로, 목록 내 각 항목을 의미하며, ul 태그에 감싸져 있어야 한다 -
<a>
인라인(글자) 요소로, 다른/ 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소이다
⇒href 속성을 통해 경로를 명확하게 명시해야 한다
⇒target 속성을 사용하여 _blank 값을 주게 되면 현재 탭이 아닌 새 탭에서 링크가 열리게 된다 -
<span>
특별한 의미가 없는 구분을 위한 요소로, 글자들의 범위를 잡아낼 때 사용한다 -
<br> _break
줄바꿈 요소이다 -
<input/>
인라인 요소와 블록 요소가 결합한 인라인-블록 요소이다
인라인 요소긴 하지만, 블록 요소의 특징 몇 가지를 가지고 있다
input 태그는 사용자가 데이터를 입력하는 요소로 글자 요소처럼 수평으로 쌓이지만, 가로 세로(width, height)값과 여백(margin, padding) 값을 지정할 수 있다
input 태그는 많은 속성을 가지고 있는데, 속성 종류는 다음과 같다
- type : 사용자가 입력할 데이터의 타입을 지정
- value: 미리 입력된 값
- placeholder: 사용자가 입력할 값의 힌트
- disabled: 입력 요소 비활성화
- checkbox: 사용자에게 체크 여부를 입력 받음
- checked: checkbox가 이미 체크 되어 있는 상태
- radio: 사용자에게 체크 여부를 그룹에서 1개만 입력 받음
-
<label>
인라인 요소로, input태그와 해당 텍스트는 label 태그를 통해 하나로 묶게 된다 -
<table>
테이블 요소로, 행과 열의 집합이다
테이블은 항상 행이 먼저, 그 다음에 열을 작성한다
⇒ 행 : <tr>
⇒ 열 : <td>
CSS, JS 연결하기
HTMl을 작성하고, 이에 맞게 CSS, JS 코드를 작성했다면, CSS와 JS를 HTML에 연결해줘야 한다
CSS와 JS 모두 HTML 환경 위에서 구동되기 때문에 HTML 파일에 연결해야만 사용할 수 있다
- CSS
<head> <link rel="stylesheet" href="./main.css"> </head>css는 link 태그를 사용하여 연결한다
- JS
<head> <script src="./main.js"></script> </head>js는 script 태그를 사용하여 연결한다
상대 경로와 절대 경로
CSS와 JS를 HTML에 연결하다보면 경로 작성을 많이 하게 되는데 경로에도 두 가지 종류가 있다
-
상대 경로
⇒ ./
현재 폴더를 의미하며 생략 가능하다
⇒ ../
현재 폴더보다 바로 위 상위 폴더를 의미한다 -
절대 경로
⇒ / (//)
최상위 경로인 루트 경로를 의미하며 전체 환경을 말한다.
2. Git/GitHub
🔎 Git과 GitHub란?
간단하게 말하면, Git은 버전 관리 시스템이며, GitHub는 Git으로 관리하는 프로젝트를 올려둘 수 있는 사이트이다
이번주는 git의 대표적인 명령어와 git의 기본 지식에 대해 배웠다!
먼저 git의 명령어에 대해서 간단하게 알아보자
git 명령어
-
commit
의미 있는 수준의 수정 작업이 끝났다고 git에게 알려주는 작업
+) commit message
commit 할 때 메세지를 남길 수 있는데, 이는 수정한 내용을 간략하게 표현하기 위한 기록이다 -
branch
상태를 저장하는 독립적인 공간
⇒ master branch
init 명령으로 저장소가 만들어질 때 git은 master라는 이름의 브랜치를 기본으로 생성하고 이후 커밋 내용을 브랜치 기준으로 저장하게 된다
⇒master branch 외 새로운 브랜치 생성
master 브랜치와 완전히 동일한 상태를 가졌지만 master 브랜치에는 어떠한 영향도 주지 않는 독립적 공간이다
-
init
지정한 폴더의 변경 내용을 추적하기 위한 준비를 하는 명령어
git 저장소에서 지정한 폴더를 포함하여 하위 폴더의 모든 변경 내용을 commit 단위로 추적한다 -
checkout master
checkout을 통해 언제든 다른 브랜치로 이동 가능하다
+) checkout -b [브랜치명]
옵션 b를 추가로 사용하면 새로운 브랜치를 만들고 해당 브랜치로의 이동이 가능하다 -
merge (병합)
master 브랜치 외 다른 브랜치를 생성하여 작업 후 master 브랜치에 옮기고자 할 때, 새로 생성한 브랜치와 마스터 브랜치를 merge해준다
즉, 브랜치와 브랜치 간 내용을 병합해준다 -
pull
remote(원격) 저장소에서 변경 내용을 로컬로 적용하려고 할 때 사용한다 -
push
로컬에서 작업한 내용을 리모트 레포지토리로 보내는 작업이다 -
git add [파일명]
해당 파일을 추적하겠다는 명령어
보통은 add . 명령어를 통해 모든 파일을 추적한다 -
git log
commit 했던 history를 확인할 수 있다 -
git status
git의 현재 상태를 확인할 수 있다 -
git diff
different를 의미하며 비교를 해준다
즉, 이전 내용과 후 내용에서 무엇이 달라졌는지를 알려준다
git의 변경 사항 추적 방법
git은 어떻게 사용자의 파일 변경 사항을 알 수 있는걸까?
사용자가 현재 작업하는 디렉터리를 working directory라고 한다
git init을 통해 추적을 시작하면 .git이라고 하는 새로운 디렉터리가 생성된다. 이때, git 내부에는 working directory라고 하는 물리적 작업 공간 외에 staging area라는 논리적 작업 공간이 생기게 된다.
staging area는 사용자가 커밋 하기 전에 커밋 할 목록들을 git add를 통해 추가해두는 일종의 대기 공간 같은 곳이다
따라서 commit을 하고 나면 staging area는 깨끗이 비워진다
commit 후에 repository에는 commit한 항목에 대해서 해시값이 붙게된다
일종의 암호키 같은 건데 이를 활용하여 사용자의 변경 사항을 추적할 수 있는 것이다
해시(hash)에 대해서 간단하게 알아보자
hash 해시
- 어떤 정보를 입력값으로 주어주면 결과값으로 입력값을 전혀 예측할 수 없는 값으로 바꿔주는 것
- 같은 입력에 대해서 항상 같은 출력을 낸다
- 출력값을 이용하여 입력값 복원이 불가능하다
- SHA(해시 알고리즘)에는 종류가 여러가지인데 git은 SHA1 알고리즘을 사용하며 뒤에 붙는 숫자가 높을수록 해독이 불가능해지는 수준으로 복잡해진다
git은 이러한 hash를 이용하여 마지막 commit을 했을 때와 내용이 같냐 틀리냐로 판단하여 현재 상태를 알려줄 수 있다 즉, 변경 사항을 추적할 수 있다!
merge (병합)
merge도 단순 한 가지 방법으로만 이루어지는게 아니라 방법이 다양하다
-
Fast-forward
병합을 할 때는 항상 현재 브랜치의 커밋 트리와 대상 브랜치의 커밋 트리를 비교한 후 병합하게 된다
만약, 병합 대상 브랜치의 부모 커밋과 현재 브랜치의 부모 커밋이 같다면 병합을 할 필요가 없다! 따라서, 따로 병합하지 않고 브랜치의 참조의 이동만 발생한다.
즉, 참조만 변경하는 병합 방법이 Fast-forward 이다 -
--no-ff (no fast forward)
간단하게 fast forward 할 수 있음에도 강제로 새로운 병합 커밋을 생성하여 merge하는 방법이다 -
3-way merge
3-way merge는 브랜치를 병합할 때 세 가지 커밋을 이용해 병합하는 방법이다
1. 공통 조상: 두 브랜치가 갈라지기 전에 공유했던 마지막 커밋
2. 병합 대상 브랜치의 최신 커밋들: 병합하려는 두 브랜치의 각각 최신 커밋 (HEAD)
Git은 공통 조상과 두 브랜치의 최신 커밋을 비교하여 변경 내용을 합친다
rebase
git에는 병합 방법이 merge외에도 rebase와 squash가 존재한다
rebase 병합 방법에 대해서 알아보자!
Rebase
브랜치의 커밋 기록을 다른 브랜치의 끝으로 재배치하는 방식으로,
병합 후에는 마치 하나의 직선적인 커밋 히스토리를 가진 것처럼 보인다
ex)
- main 브랜치 :
c1 → c2 → c3- 다른 브랜치 :
c1 → c4 → c5- Rebase :
생성한 다른 브랜치가 main 뒤로 재배치된다
c1 → c2 → c3 → c4' → c5'Rebase의 특징
- 병합 커밋 없이 히스토리가 깔끔하게 정리된다
- 과거 커밋이 재작성되므로 협업 중일 경우 주의가 필요하다
1주차는 사실 첫 주라서 내용도 아직은 쉽고 공부할 양도 많지 않아서 힘들지 않았다!
다음주 부터는 온보딩 프로젝트 시작인데,, 걱정되긴 하지만
나만 그런것도 아닐테니 그냥 다같이 열심히 해봐야겠다! 👊🏻👊🏻👊🏻👊🏻👊🏻‼️‼️
