멋쟁이사자처럼 프론트엔드 스쿨 2기 3_Day

1. 형상 관리 핵심툴인 Git과 GitHub.
   1) git clone
   2) git pull
   3) git add
   4) git commit
   5) git push
2. HTML 태그
   1) <ifram>
   2) <form><label></label><input></form>

1. Git과 GitHub

Git은 개발 도중 발생하는 소스코드 및 파일들의 버전을 로컬에서 관리되는 시스템이다.
GitHub는 Git을 관리해주는 웹 호스팅 서비스이다.

1) git clone

사진과 같이 해당 repository 주소를 copy하여 터미널에 입력한다. clone은 해당 저장소를 처음 불러올 때만 사용한다.
git clone <repository 주소>

2) git pull

git pull은 다른 사람이 git push를 진행한 경우, 저장소에서 소스코드와 데이터들을 가져올 때 사용한다.
git pull <원격 저장소 명> <branch 명>으로 사용한다.

3) git add

git add는 내 로컬 저장소에서 github로 올릴 데이터들을 선택하는 것이다.
git add .으로 모두 준비시키거나, git add <파일명>으로 특정 파일만 준비시킬 수 있다.

4) git commit

git commit은 git add로 선택한 데이터들을 github로 보낼 준비를 하는 것이다. 커밋을 하게되면 새로운 버전이 만들어진다.
git commit -m "<comment>" 으로 사용합니다.

5) git push

git push는 커밋으로 준비된 데이터들을 github 원격 저장소로 보내는 것이다. git pull <원격 저장소 명> <branch 명>으로 사용한다.

6) 파일 이동 경로 및 상태

---

2. HTML 태그

오늘도 많은 태그를 배우지 않았지만, 중요한 태그들을 배웠다.
<iframe> 과 <form>태그이다. 특히, 서버와 데이터를 주고받는 form 태그에 집중이 필요하다.

1) iframe

<iframe> 태그는 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용한다. src 속성으로 불러올 HTML링크를 설정할 수 있으며 보통 youtube 영상을 불러올 때 많이 사용한다. 댓글에 <iframe> 태그를 허용하게 되면 해킹이 가능하니 주의해야 한다.

<iframe>, <audio>, <video> 태그 autoplay 속성은 브라우저 정책상 일부 모바일 브라우저에 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 한다. 모바일 환경에서 autoplay 기능으로 인한 의도하지 않은 트래픽 유발을 방지하고 접근성 측면에서 좋지 않기 때문이다.

2) form

<form>은 정보를 입력하는 영역이다. 로그인 화면에서 아이디와 비밀번호를 입력하는 것, 회원 가입할 때 정보를 입력하는 양식 등은 모두 폼을 이용한다. 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송되고 웹 서버 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송한다. 즉, 클라이언트 <-> 서버 사이에서 데이터를 주고받을 때 사용하는 태그라고 보면된다.

  <!-- method="post" -->
  <form action="서버명" method="get"> 
        <label for="라벨명"></label>
         <input type="text" id="라벨명"> 
    <!--type="password" , type="tel", type="email"-->
         <button type="submit"></button>
    </form>

보통 위 소스코드와 같이 사용되며, label태그는 없어도 상관없다. 만약, label태그를 사용했다면 input태그의 id 속성값과 label태그의 for 속성값은 같아야 한다.

위 사진에서 <form> method 속성은 서버로 데이트를 어떤 방법으로 보낼지 정의하는 속성이다. get과 post 방법이 있으며, get은 URL에 Query String으로 데이터가 입력된다. 따라서, 패스워드나 중요한 내용을 get 방식으로 보내면 안 된다. 방대한 양을 서버에 요청할 경우에도 URL이 길어지기 때문에 지양하는게 맞다. get 방식은 일반적인 페이지 요청할 때 사용하면 된다. post 방식은 body 값으로 보낸다. 노출되면 안 되는 정보들 요청할 때 사용한다. CRUD 중 C(Create)에 해당한다.

---

3. 마무리

학습 진도 측면에서 많이 공부했다고 볼 순 없지만, 하나하나 기초부터 깊게 학습하고 있다는 느낌이다.