Udemy Section5-6 (11일차) - 웹사이트제공 (호스팅, 배포) 파비콘
1. 섹션4의 경우 skip 해도 좋다 다만 첨부되어있는 파일은 한번 확인해봐용
ㄴ 나는 일단 섹션4는 스킵하고 바로 섹션 5로 넘어갈게 (9-10일차)
2. Section 5에서는 로컬컴퓨터는 여기까지하고 구축한 웹페이지를 가지고 오고 호스팅, 배포방법을 배울거야!
그럼 호스팅은 뭐고 배포는 뭘까?
1) 호스팅(Hosting) & 배포(Deployment)란 무엇일까요?
내가 만든 웹사이트를 가지고 와서 웹사이트에 올림(배포)으로써 전세계에 노출을 시킬수가 있는거지
부연설명) 이 코드는 '서버'라고 하는 원격컴퓨터로 옮겨주면 해당사이트를 담당하는 서버는 특정주소를 입력하여 웹사이트에 들어오는 방문자에게 코드를 제공하는거고, 즉 사용자가 모바일, pc, 컴퓨터를 이용하여 주소를 입력하면 브라우저는 원격컴퓨터, 즉 서버에 요청을 보내게 되고 호스팅 서버는 답과 함께 브라우저로 코드를 전송하여 사용자화면에 보이도록 하는것이지!
-> 이게 바로 웹이 작동하는 원리
즉, 호스팅은 서버에서 해당웹사이트의 코드를 저장하고 방문객에게 제공하는것을 이야기함
우리는 아래 호스팅서버로 Netlify App을 사용할거야!
----> https://app.netlify.com/drop
Netlify App
app.netlify.com
[Netlify App 사용법에 대해 잘정리되어있는 제3자 블로그 참고!]
https://penguingoon.tistory.com/260
짜잔 ! 전세계에서 볼수있는 나만의 웹사이트 url이 만들어짐!
https://tourmaline-malabi-51631b.netlify.app/
My Daily Challenge
SY'Challenge for Tuesday, Feb 9th Learn about the basics of web development - specifically dive into HTML & CSS.
tourmaline-malabi-51631b.netlify.app
ㄴ 도메인 주소명은 랜덤으로 생성됨
ㄴ URL은 https로 보안이 걸려있고 바로 사용할수 있음 (자동적으로 https를 쓰도록 되어있음)
3.사용자 지정 도메인 설정하는 방법
- 넷플리파이에서 도메인을 구매 (넷플리파이 한정으로 서비스되는 기능임)
4. 파비콘 추가하기 :)
개발자 도구에서 cosole 혹은 network 서버로 가면 강력새로고침후 아래와 같은 에러가 뜸
저 에러메시지는 파비콘이 찾는다는 뜻임
그렇다면! 웹사이트에 파비콘을 추가하는 방법은 ???
파비콘 생성기를 구글에서 검색한다 "favicon generator ..."을 검색창에 쳐보고 그들중 하나를 선택하면 됨!!!
나는 아래의 사이트로 선택하겠어!
Favicon.io - The Ultimate Favicon Generator (Free)
With Favicon.io you can quickly generate a favicon for your website for free!
favicon.io
이미지 파일을 끌어다가 넣으면 zip 파일을 다운받을수가 있는데 압축을풀고 끝에 ico로 끝나는 파일을 html에 적용한다!
파비콘 페이지 하단으쪽으로 스크롤을 내리면 head 영역에 꼭 입력시켜야하는 아래와같은 코드 가이드도 있음
5.상대경로, 절대경로
-> 페이지가 많아지고 웹사이트가 커지게되면 절대경로가 유용하게 쓰일것임
차이점을 아는것이 중요함!@
[정리되어있는 제3자 블로그 참고해보숑!]
6. 섹션 6 시작!
코드관리 어떻게 하는지 좋은지?
우리는 지금 여기에서 새로운 두가지 도구를 알아야함!
Git 과 Git hub! ==> 코드를 효율적으로관리할수 있음
git은 loca tool, 자동으로 리포지토리가 생김 (홀로 작업하는경우/적어도 첫단계에)
git hub는 git 과 별개의 도구고, 관련 1도 없음 git 리포지토리에서 클라우드 호스팅 제공자 역할 (세계에서 가장 큼)
버전제어는 또 뭐야?
사실은 모두 같은 파일에서 코드 수정이 이루어지잖아? 그래서 스냅샷을 찍는거라고 생각하면 되 !
그래서 버전제어 버전 관리를 알아야하는거고 시간경과에 따른 코드변경사항(사본을 만들지 않고)을 알수가 있어!
7. Human Computer Interaction
컴퓨터와 소통하는 방법에 대한것임
CLI 접근방식을 이해해야함
GUI : Graphical User Interface
ㄴ 쉽게 기계에 접근해 다양한 폴더와 다양한 프로그램을 열게 해줌 (컴퓨터와 인간의 상호작용을 쉽게 만들어줌)
CLI : Command Line Interface
ㄴ 명령프롬프터를 말함. 명령기반 상호작용 (마우스를 사용안하고 순수 키보드로)
** 102번 강의는 맥용이므로 윈도우는 103부터 들으면 됨
