용어를 정리하기 앞서 프론트엔드가 진행되는 과정을 알아야한다.
step 1. 사용자가 주소창에 주소를 입력한다.
step 2. 브라우저가 해당 주소에 연결된 정보를 통해 서버에 요청을 날린다.
step 3. 서버는 브라우저의 요청에 응답한다. ( 배포된 html, css 코드를 전달 - 호스팅 )
step 4. 브라우저가 서버로부터 전달받은 코드를 실행한다.
step 5. 웹페이지에 표시된다.
1. Deploying ( 배포 ) 란?
html, css, javascript로 작성된 code를 서버에 옮기는 행위를 뜻한다.
2. hosting ?
서버에 저장된 코드를 사용자(브라우저)에게 제공하는 것을 의미
3. 실습생략
# nettify 보고 배포하고 도메인 만들기 가능
# 기본적으로 nettify에서 배포하면 https형태로 배포가능
# 참고
https가 중요한 이유는 예전 사용하던 http는 기밀성이 보장되지 않는다.
기밀성이란 웹 페이지에서 데이터가 오고갈 때 비밀이 보장 되는가?에 대한 문제인데
http는 평문 전송이기 때문에 보안이 취약하다.
4. favicon이란
웹페이지바에 있는 아이콘을 뜻하고 https://favicon.io/favicon-converter/
Favicon.io - The Ultimate Favicon Generator (Free)
With Favicon.io you can quickly generate a favicon for your website for free!
favicon.io
와 같은 사이트에 이미지 파일을 첨부하여 만들어서 프로젝트 이미지 파일에 넣고 link 태그로 연결하여 활성화 시킬 수 있다.
5. 상대경로 vs 절대경로
상대경로 : 현재위치 ( or 디렉터리 )에 존재하는 파일을 상대적으로 나타냄
ex) index.html
절대경로 : 파일의 절대적인 경로를 뜻함
ex) /styles/traing.css
언제씀?
웹페이지가 커지면 html파일을 많이 만들게 되는데 이때 하위폴더에
html파일을 저장하게되면 서버가 찾을 때 혼동될 수 있어 절대경로로 알려주면 됨
( 뭔가 스타일이 적용되지 않거나 css파일 못찾을 때 경로 유심히 보는 습관 들이는게 좋을듯 )
참고로 link등으로 파일 연결할 때 서버는 기본적으로는 .html파일을 찾아서
.html있는 파일 경로만 알려줘도 알아서 연결함 디폴트가 .html임