[Hanaro] 6일차 / Git 기본, HTML5/CSS3 기초, 웹의 동작원리

Git stash와 clean

• 임시 저장
  • git stash [save “label”]
    • 임시 저장, 작업 내역 제거
    • 작업 중이던 내용은 stash로 임시저장되고 사라진다.
    • 여러개의 stash가 stack에 저장된다. (pop)
  • git stash list
    • stash 목록
  • git stash show
    • stash log
    • 상세 log는 git stash show -p <WIP>
  • git stash pop
    • LIFO
  • git stash drop
    • LIFO 삭제
  • git stash branch <branch>
    • 현재 작업 중인 내역으로 새로운 브랜치 생성
  • git stash apply [stashID]
    • stash로 임시 저장해놓은 작업 중인 상태로 복원
  • git clean -n
    • clean시 삭제될 파일 목록
  • git clean -d
    • untracked file 삭제
    • 뒤에 i 붙이면 ignore file외 untracked 모두 삭제(하위폴더 포함), f 붙이면 강제 삭제
  • git clean -x
    • 뒤에 i 붙이면 ignore file 포함 모든 untracked 삭제, f 붙이면 강제 삭제

 

Git merge와 rebase

• merge(병합)
  • git merge <branch>
    • 병합, 현재 branch로 커밋들 모두 복제
  • git merge —abort
    • 병합 취소
  • git branch —merged
    • merge 확인
  • git ls-files -u
    • 충돌 확인
• conflict(충돌)
  • conflict

  <<<< HEADD
  local(me) 변경 내역
  ============
  remote(others) 변경 내역
  >>>> shal id 
  

  • git ls-files -u
    • editor 에서 수정 및 저장
• merge by fetch
  • pull & auto-merge
    • git pull
    • cat 파일명
    • github에서 해당 파일 수정
    • git fetch
      • 임시 branch로 pull
    • cat 파일명 (변경 내역 안보임)
    • git log origin/master 파일명
      • show remote log (fetch 이후에만 보인다)
    • git merge origin/master
    • git log 파일명
    • cat 파일명
  • rebase merge (push 전에 rebase)
    • git rebase <rebase할 branch>
    • git add -A
      • mark merge
    • git rebase —continue
      • rebase 마무리
    • git checkout <rebase한 branch>
    • git merge <위의 branch>
    • git branch -d <위의 branch>

 

Git reset, revert, tag

• reset(복귀, 되돌리기)
  • reset (push된 내역은 reset 하면 안됨)
    • —soft
      • repo → stage
    • —mixed
      • repo → working directory
    • —hard
      • repo → 초기화 (수정전)
    • merge
      • merge 취소

 

 

[첫 웹페이지 따라하기]

웹의 동작 원리

• 웹의 동작 원리
  • Web Client (chrome, safari, firefox 등) → (request) or (respose) ← Web Server (Apache, Nginx, WEBTOBE) ↔ WAS(Web Application Server) ↔ DB 서버 (오라클, MySQL 등)
  • Web Client
    • 웹 브라우저를 생각하면 된다.
    • 웹 서버로부터 작성된 문서나 이미지 등을 받아 화면에 출력하는 프로그램
  • Web Server
    • HTTP 프로토콜을 기반으로 클라이언트의 요청을 서비스하는 기능 담당 (하드웨어, 소프트웨어 같이 동작, nginx, apache등이 WS)
    • WAS를 거치지 않고 바로 정적인 컨텐츠 제공하거나, 동적인 컨텐츠 제공을 위한 요청을 전달한다.
  • WAS(Web Application Server)
    • DB 조회나 로직 처리를 요구하는 동적인 컨텐츠 제공하는 Application Server (JSP, 서블릿 구동 환경 제공, tomcat이 WAS)
    • WAS = Web Server + Web Container
    • 웹 컨테이너 혹은 서블릿 컨테이너라고도 불린다. (컨테이너란 JSP, 서블릿 실행시키는 소프트웨어)
• TCP/IP
  • 전송 제어 프로토콜(TCP, Transmission Control Protocol)
    • 인터넷 프로토콜(IP)의 핵심 프로토콜 중 하나로 TCP/IP 라는 명칭으로도 불린다.
    • 근거리 통신망, 인트라넷, 인터넷에 연결된 컴퓨터에서 실행되는 프로그램 간에서 순서대로 교환할 수 있게 한다.
  • TCP 프로토콜
    • 신뢰성, 무결성 보장하는 전송 프로토콜
  • IP 프로토콜
    • 패킷들을 가장 효율적인 방법으로 최종 목적지에 전송하는 프로토콜
  • TCP/IP의 계층
    • 4계층: 응용 계층(Application)
    • 3계층: 전송 계층(Transport)
    • 2계층: 인터넷 계층(Internet)
    • 1계층: 네트워크 인터페이스 계층(Network Interface)
    • 송신 호스트에서 데이터를 보낼 때는 4~1계층까지 순차적으로 거쳐서 데이터를 캡슐화해야 한다.
    • 수신 호스트에서는 이를 수신 받아 1~4계층까지 순차적으로 데이터를 역캡슐화해서 응용 계층에서 데이터를 수신받아 활용한다.
• HTTP(Hypertext Transfer Protocol)
  • 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜 (네트워크 통신 작동하게 하는 기본 기술)
  • 사용자가 웹 사이트 방문 시 사용자 브라우저가 웹 서버에 HTTP 요청→ 웹 서버는 HTTP 응답으로 응답
  • HTTP는 OSI 네트워크 통신 모델의 애플리케이션 계층 프로토콜이며 요청, 응답 정의 (예로 데이터 볼 때 GET 요청 전송, 양식 작성은 PUT 요청 전송)
  • 서버는 숫자 코드로 응답 전송
    • 200(정상), 400(bad request, 잘못된 요청), 404(not found, 리소스를 찾을 수 없음), 500(서버 오류)
  • http와 https의 차이점은 https는 정보 전송시 정보를 암호화해서 보낸다.
• Socket
  • 소켓은 프로세스가 네트워크로 데이터를 보내거나 데이터를 받기 위한 실제적인 창구 역할을 한다. 소켓을 열어서 소켓에 데이터를 써보내거나 소켓으로부터 데이터를 읽어 들여야 한다. (라이브러리)
  • 종류
    • 스트림(TCP)
      • 양방향으로 바이트 스트림 전송, 연결 지향성
      • 순서에 따라 데이터 수신
      • 대량의 데이터 전송에 적합
    • 데이터그램(UDP)
      • 비연결형 소켓
      • 데이트 크기 제한, 확실하게 전달 보장되지 않음
      • 주로 실시간 멀티미디어 정보 처리로 사용
• Port
  • 포트는 네트워크 상에서 통신하기 위해서 호스트 내부적으로 프로세스가 할당받아야 하는 고유한 숫자
  • 같은 컴퓨터 내에서 프로그램을 식별하는 번호
• Session
  • 세션은 사용자가 웹사이트에 로그인했을 때 사용자에 대한 정보를 일정 기간 동안에 서버에 기록하고 보관함으로써 사용자 관리 목적으로 사용되는 서버의 저장 공간
  • 쿠키와 차별점은 세션은 서버 영역에 저장된다는 것, 쿠키에 비해 보안이 뛰어난 것
  • 다른 의미로는 네트워크에서 사용자 간의 통신을 위한 인식 이후부터 통신을 마칠 때까지의 기간도 의미 (세션 만료 표현)
  • 최근에는 세션인증보다 토큰인증 방식을 많이 사용
• Cookie
  • 쿠키는 HTTP의 일종으로 사용자가 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일
  • 쿠키, 웹 쿠키, 브라우저 쿠키라고도 하며, 이 기록 파일에 담긴 정보는 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다.
  • 쿠키와 세션의 공통점은 사용자의 정보 저장, 차이점은 세션은 서버측에, 쿠키는 클라이언트 측에 저장된다는 점

 

HTML5/CSS3 기초

• HTML5
  • 웹 프로그래밍 언어이며 텍스트, 하이퍼링크, 애플리케이션 표현 및 제공하는 언어
• 웹 접근성(Web Accessibility)
  • 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
  • 예로 오디오는 음성 정보를 문자로 제공, 마우스 사용할 수 없다면 키보드로 이용하도록 제공, 움직임이 느리면 시간조절기능 제공
• HTML5 기본 형식
• <!doctype html> html5 문서임을 나타냄 <html lang="ko"> 컨텐츠가 한글로 작성되었음을 의미 <head> <meta charset="UTF-8"> 문자셋이 utf-8임을 의미 <title>HTML5 Document type</title> </head> <body> 콘텐츠 영역 </body> </html>
• vscode html
  • vscode에서 html 기본 양식 자동 완성
    • ! 를 누르고 엔터 치면 html 양식 자동 작성된다.
  • <ul>의 <li> n개 자동 생성
    • ul>li*n 후 엔터
• Semantic Tag
  • 시맨틱 태그는 포함된 컨텐츠의 특정 의미를 정의하고 목적을 갖는 태그,
  • block element이면서 레이아웃을 설계하기 위해 존재
  • 시맨틱 태그의 요소
    • <header>, <nav>, <article>(뉴스기사나 블로그 같은 독립된 contents 표시), <section>(문서 영역 구성, H1~H6 와 함께 사용), <footer>, <main> 등
• CSS(Cascading Style Sheets)
  • HTML이나 XML로 작성된 문서의 전반적인 레이아웃과 스타일을 정의하는 스타일 시트 언어
  • HTML은 문서의 구조 정의, CSS는 문서의 디자인과 스타일 담당
  • CSS의 역할
    • 레이아웃 조정, 텍스트 스타일링, 색상 및 배경 관리, 애니메이션 및 전의 효과, 반응형 디자인
• CSS 선택자
  • HTML 또는 XML 문서에서 스타일 적용할 요소를 선택하는 방법을 지정하는데 사용
  • 전체 선택자(*)
    • 모든 요소를 선택
    • ex) * { margin: 0; }
  • 요소 선택자
    • 특정 HTML 요소 선택 (태그)
    • ex) p { color: blue; }
  • 클래스 선택자(.)
    • 특정 클래스를 가진 요소 선택
    • ex) .highlight { background-color: yellow; }
  • ID 선택자(#)
    • 특정 ID를 가진 요소를 선택
    • ex) #header { font-size: 24px; }
  • 자식 선택자(>)
    • 특정 부모 요소의 직계 자식을 선택
    • ex) nav > ul { list-style-type: none; }
  • 하위(후손) 선택자()
    • 특정 부모 요소의 모든 하위 요소를 선택
    • ex) article p { line-height: 1.5; }
  • 인접 형제 선택자 (+)
    • 같은 부모를 가진 특성 요소의 다음 인접 형제를 선택
    • h2 + p { font-style: italic; }
  • 일반 형제 선택자(~)
    • 같은 부모를 가진 특정 요소의 모든 형제 선택
    • ex> h2~p { color: green; }
• CSS 사용 방법
  • External CSS
    • 외부에 css파일을 만들어서 사용
    • 적용은 해당 html 파일 head 안의 <link rel="stylesheet" href="a.css(css 파일명)">
  • Internal CSS
    • html 문서내 <style></style> 태그 이용해 적용
    • head 태그 내 style 태그
  • Inline CSS
    • 태그 내 style 속성을 이용해서 스타일 적용
    • ex) <ul style="list-style: none; color: blue;">

 

Bootstrap을 이용하여 화면 만들기

• Bootstrap
  • 웹 개발을 빠르고 쉽게 할 수 있도록 도와주는 오픈 소스 프론트엔드 프레임워크
• Bootstrap Containers
  • .container
    • 양쪽에 여백이 있음
  • .container-fluid
    • 여백이 없음
• Grids
  • span 1~12
  • .col-