1주차 - Day 5 환경세팅 (VS, Git repository 연동)

OS

• OS 통합 개발 장점
  • 개발자 비용 절감
    • 다양한 OS로 나뉘어 있으면 OS별 개발자가 따로 필요하기 때문
  • 사용자 사용성 향상

---

Visual Studio

• Visual Studio 설치
  • Open editor: 현재 열려있는 작업물
  • Extension
    • material icon theme: 아이콘 가독성 있게 바꿔줌
    • live server: 실시간 개발 서버 (인터넷 창으로 불러와서 프리뷰)
    • live preview: live server랑 비슷하지만 VS 내에서 프리뷰 가능
• html 문서 작성
  • 줄바꿈(enter/tab): 가독성을 위해 해주는 것이 좋음
  • 뷰포트에 있는 내용은 무조건 바디에 있어야 함
  • 태그는 클로드 등에서 물어봐서 카피해서 쓰면 됨
  • 텍스트 표현 태그
    • 번호 없이 불렛포인트로 표현됨
  • 이미지 표현 태그
    • 원하는 사진을 현재 사용중인 폴더에 넣어서 경로 설정
    • 클로드에 태그 물어봐서 받은 태그를 가지고 앞에 / 붙이면 경로 설정할 수 있음
  • 오디오 표현 태그
  • 비디오 표현 태그
    • 미디어를 태그하고 싶으면 속성과 value를 여는 태그에 넣어줘야 함
    • 문자를 하이퍼링크 하고싶으면 여는태그와 닫는태그 사이에 해당 문자 넣어주기
    • 안된다 싶으면 일단 프리뷰창을 껐다 켜보기

<h2>텍스트 표현 태그</h2>
     <ul>
        <li>문자</li>
        <li>정수</li>
        <li>실수</li>
     </ul>
<h2>이미지 표현 태그</h2>
     <img src="/html_ex/images/cat2.jpg" alt="고양이2">
<h2>오디오 표현 태그</h2>
     <audio controls>
    <source src="media/aaa.mp3" type="audio/mpeg">
    브라우저가 오디오를 지원하지 않습니다.
</audio>
 <h2>비디오 표현 태그</h2>
     <iframe src="https://www.youtube.com/embed/Xmn1jgD_x6s" 
        width="560" 
        height="315" 
        frameborder="0" 
        allowfullscreen>
</iframe>

결과물

• 용어
  • view port: 사용자가 보고 있는 화면의 현재 영역을 의미
  • CDN (Content Delivery Network)
    • 장점
      • 개발속도 빨라짐
      • 리소스 줄여줌
    • 단점
      • 서버가 죽으면 내 페이지도 영향을 받음
• 단축어
  • html+enter: html 기본바탕
  • ctrl+/: 주석
  • shift+alt+ ↓ : 아래로 복제
  • shift+tab: back tab
  • F12: 개발자모드
  • p: 본문
  • ul: 순서가 없는 문자를 표현할 때
  • ctrl+x: 줄 삭제
  • li: 불렛포인트
  • a: 앵커태그 (링크 연결 태그)
  • target="_self": 창이 바뀌면서 열리는것

---

웹표준

• 마크업 언어
• 프로그래밍 언어
  • 제어문
    • 조건문
    • 반복문

---

CSS

• 형식: selector{속성:value}
• 전체 h2 태그에 색상 적용 (lightblue)

h2 {background-color: lightblue}

• 가운데 정렬

h2 {background-color: lightblue; text-align: center}

• 부트스트랩 이용
  • 아코디언, 폼 컨트롤, 네비게이션바
    • 본문 내용 복사 후 body 안에 붙여넣기
    • 첫 페이지에 있는 CDN css코드, js코드 복사해서 헤드태그 안에 각각 붙여넣기 (주의: 다른 코드 안에 삽입되지 않게 주의하기)
     

아코디언

 

폼 컨트롤

네비게이션바 (바디)

홈페이지 결과물

---

Git

• 깃허브 가입 및 로그인
• 사용 이유
  • 버전 관리: 문서를 수정할때마다 언제 수정헀는지, 어떤 것을 변경했는지 구체적으로 기록 가능
  • 백업: 현재 컴퓨터의 자료를 인터넷 상의 공간(원격 저장소)에 백업
  • 협업: 원격 저장소를 기준으로 여러 사람이 함께 일할 수 있음. 누가 언제 어느 부분을 수정했는지 기록됨
• 스테이지와 커밋
  • Working Directory: 파일 수정, 저장 등의 작업을 하는 디렉터리. 우리 눈에 보이는 디렉터리
    • add
  • Staging Area: 스테이징 영역 (확인: git status)
    • commit
  • .git directory: 버전을 만들어 대기하는 곳 (확인: git log)
    • push/pull
  • Remote (Github): 스테이지에 있는 대기 파일을 버전으로 만들어 저장하는 곳
• Git Bash: Windows 환경에서 Unix/Linux 스타일의 커맨드 라인 경험을 제공하는 애플리케이션
  • CLI (Command Line Interface): 터미널 창에 직접 명령을 입력해서 깃을 사용하는 방식. 시작하긴 어렵지만 익숙해지면 빠르게 깃을 다룰 수 있음. 특히 반복해야 할 일을 자동화시키거나 서버 환경에서 깃을 사용하는 등 다양한 활용이 가능함.
• Git 연결 방법
  1. Git 저장소 만들기
  2. 버전 만들기
  3. Github ssh로 연결하기
     1. SSH (Secure Shell) 키 확인
     2. SSH (Secure Shell) 키 생성
     3. Github ssh로 연결하기
     4. ssh로 Git Permission Deny 문제 해결
  4. Github 업로딩 테스트 해보기

느낀점

알고있던것을 했던 어제와는 다르게 오늘은 그냥 로그인하고 연동한것밖에 없는 것 같은데 생각보다 어려웠다.

중간에 문제도 많았고 문제 해결하는데도 꽤 오래걸린것같다. 시작부터 너무 어렵다는 생각도 들기도 하면서 문제해결 해나가면서 성취감도 들었다..!