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

안녕하세요 Ayden 입니다.

오늘 학습 내용은 git과 HTML 태그들입니다.

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. 마무리

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