01. [HTML] Hello World?

"웹 세계에 오신 것을 환영합니다!"

​

​

처음 코딩을 배웠을 때 웹상에서 띄운 결과값이었다.

​

​

그저 알파벳만 적었을 뿐인데

강사님이 나보고 잘했다고했다.​

 

정말 뿌듯뿌듯

코딩은 어려운 것이고 못할 것이라 생각했는데

나도 할 수 있었다!

일단 글을 웹에 띄워는놨잖아?;;

 

---

"개발자의 자세"

​

​

개발자의 자세는

무엇인가를 만들기 전에

무엇을 만들 것인가를 미리 상상하고,

계획해야 한다고 했다.

그리고 이것을 '기획'이라고 부른다.

그럼 전문적으로 하는 사람들은? '기획자'라고 부르겠지?

​

​

먼저 해야할 일은

내가 생각하는 웹사이트의 모습을

눈으로 보이게 그려보는 것이다.

​

​

나는 쌩초보이므로, 강사님이 그려놨던 것을 참고하기로 했다.

 

 

1 - 전체 제목

2 - 목차 (이 목차에는 링크가 걸려있고 클릭할 시, 링크에 해당하는 콘텐츠가 오른쪽에 표시된다 )

3 - 본문(상단에 제목이, 하단에 본문 글이 나와있다)

 

 

---

"원인(코드) - 결과(웹페이지)"

​

​

우리가 적는 건 코드(code)이자 소스(source)이며

이것을 '컴퓨터 언어'라고 한다.

​

​

그리고 내가 모르는 정보들도 함께 알았다.

​

​

웹에서의 결과: 웹 페이지

웹페이지가 모여있으면: 웹사이트

기능이 좀 많으면: 웹애플리케이션(줄여서 웹앱)

​

​

이라는 것!!

즉 원인인 코드를 이용해서 결과를 만드는 것이다.

 

 

---

 

"HTML?"

​

​

세상에는 다양한 종류의 코드들이 있다.

C, C++, Java, JavaScript, Python, PHP, SQL...

코드마다 역할이 달라서

하고자 하는 일에 따라서 적당한 코드를 선택해야 합다

​

그중에 웹페이지를 만드는 코드는 바로, HTML이다.

가장 쉽고, 중요한 코딩언어이다.

 

---

"Visual Studio Code"

​

​

디자인 - 포토샵, 일러스트 등

코딩? - 비주얼 스튜디오 코드(줄여서 VSC) (이외에도 더 많음) 

​

​

★TAG(태그) :HTML의 문법, 명령어라고 생각하면 된다.

쉽게 말하면 옷을 살 때 태그가 있다.

그 태그에는 옷에 대한 정보가 나와있다.

마치 그런 원리!

​

---

"나는 공부를 좋아한다"

​

​

이 설명을 잘하는 강사님은

의외로 학창시절 때 공부를 못했다고 한다.

특히 논리적인 것을 요구하는 수학은 더했고

수업시간에 자꾸 다른 생각을 하다보니

선생님 목소리가 스쳐지나가듯이 들렸다고한다.

​

​

하지만 다른 생각들을 함으로써 궁금한 점을 웹에서 찾아보고

정보를 계속 얻다보니

나중에는 아는 게 많아졌다고 한다.

그런것들이 진정한 공부이고,

문제를 탐험하고 해결하는 과정이 즐겁다면

나는 이미 공부를 좋아하고 잘하고 있는 것이라고한다.

​

​

나도 공부를 잘하는 편이 아니었다.

수업시간에 딴생각 하고, 집중도 잘 안됐다.

모든 과목이든, 하다보면 재밌지만

공부를 하는 의미와 동기가 없어서 그냥 자꾸 놓았다.

 

한 가지 아쉬운 것은

학생들이 어떤 것을 좋아하는지 찾을 수 있도록

선생님들이 지도하는 게 훨씬 도움이 되었을텐데 허허...

 

 

---

"눌렀을 때 링크 이동도 가능하다!!"

​

나는 천재다

눌렀을 때 링크 이동을 할 수 있도록 만들었다.

<a href="링크"> 를 넣으면 하이퍼링크로 페이지가 이동한다.

여기서 기능을 더 살려서

​

새 창 만들기 : target="_blank"

텍스트에 마우스 오버 시, 어떤 파일인지, 링크인지 알 수있는 : title="파일이름"

​

를 배웠다.

​

새로 배우는 태그가 계속 생겨서

전에 배웠던 태그를 기억 못할 줄 알았는데

생각보다 80프로가 기억이 났다.

​

​

나 자신에게 뿌듯하다.

 

---

"초보자가 알아야할 기본 웹의 역사"

​

​

웹을 처음 배우는 사람들은 전체를 못 본다.

웹이 세상에 처음 왔을때 도착한다면, 웹의 본질이 있을것이다.

​

인터넷,웹이 어떻게 세상에 등장했는지를 알면 정보 기술을 아는 관점이 될 것이다.

우리가 소비자라면 필요없을것이지만, 우리는 인터넷,웹 같은것들을 혁명적으로 만들려면 자세히 들여다봐야한다,

​

​

인터넷 / 웹은 다르다

​

예시 1.

-인터넷 : 도시

-웹: 도시 위의 건물 하나

​

예시 2.

-인터넷:도로

-웹:도로 위를 달리는 자동

​

예시 3.

-인터넷: 운영체제

-웹: 하나의 파일

​

​

즉,

*인터넷(에는)

-FTP (인터넷을 통해 다른 컴퓨터로 파일을 전송할 수 있도록 하는 방법, 프로그램)

-WEB

-EMAIL

​

​

​

1960년 (처음 '인터넷' 등장)

: 핵 전쟁 후, 핵에 대한 공포감 증가

:미국에서 핵 시뮬레이션을 해본 결과, 통신이 마비되는 상황.

:핵 공격시 이겨낼 수 있는 강력한 시스템 구비.

:당시 인터넷은 중심이 없고, 분산하여 전화국과 같은 역할을 해서 점 하나가 사라져도 나머지가 통신할 수 있는 시스템이었다.

:전 세계적으로 확산 (30년 동안)

:인터넷은 기업, 연구소, 대학, 군대 에서 관리하는 통신 시스템 이었음.

​

-1980년

-'팀 버너스 리'는 프로그래머 비정규직으로 취업한다. 입자 연구소에서 "enquire"이라는 프로그램을 만든다.

무엇이든 물어보세요~ 라는 뜻의 책이다.

결국 enquire 이라는 프로그램을 누구한테 맡기면서 떠났는데 사라져서 지금은 존재하지 않는다.

연구소를 들락날락하면서 웹의 전신이 되는 프로그램을 10년동안 만든다.

​

​

- 1990년 ('웹' 등장)

- 인터넷이 들어와서 팀버너스 리는 기존의 것과 합친다.

:스위스에서 처음 웹 출현한 이유 - 스위스 제네바에 '유럽 입자 물리 연구소'라는 물리학 연구소가 있다.

이 연구소엔 강입자 가속기라는 장치가 있는데 이 장치는 가장 거대하고 비싸고 복잡한 장치 중에 하나이다.

아주 작은 입자를 보는 장치인데, 둘레만 27km임.(대박 크다..)

원리는 입자를 고속으로 회전해서 입자끼리 충돌시킬 때 어마어마한 에너지가 방출되면서 작은 입자를 발견할 수 있다는 가설을 세웠다.

그 입자가 '힉스 보선'

​

​

*힉스란?

:1960년에 피터 힉스 박사는 '자기가 생각한 세상이 맞다면 이런 물질이 존재할 것'을 예견했다.

당시 실험적으로 확인할 방법이 없어서 가설로만 존재했고, 이후에 확인할 수 있는 때가 되었을 땐

전세계의 엔지니어, 과학자들이 돈 쏟으면서

이 장치를 만들면서 그 물질의 존재 유무에 대해 연구한다.

몇 년 전 입자 물리 연구소에서 피터힉스가 '힉스가 존재'한다는 중대발표를 한다.

​

​

호기심은 이런 것이다!

단지 호기심때문에 이런 혁명을 만들어낸다.

​

​

World Wide Web 만었고

웹서버 프로그램 만들었다. 그것이 아래에 있는 사이트!

 

 

 

웹의 메소포타미아에 왔다 (메소포타미아: 세계 최초의 문명을 비유적으로 이른 말)

http://info.cern.ch/

 

 

 

내가 지금 만든 것과 별반 다르지 않아서 좀 놀라웠고

나도 앞으로 더 많은 걸 할 수 있을 것이다.

시작은 나와 똑같으니까.

 

 

그렇게 인터넷과 웹은 대중화가 되어가고 성장을 해서 지금에 이르게 됐다.

 

 

내가 해야 할 일은 전자문서를 전세계인들에게 누구나 컴퓨터, 인터넷, 웹이 있다면

자신의 컴퓨터의 문서마냥 볼 수 있도록 하는 방법을 알아야 한다.

그러기 위해선 인류를 바꿔놓은 인터넷이 무엇인지 알아야 한다.

 

 

---

 

"인터넷을 여는 열쇠 (서버와 클라이언트)"

 

 

웹디자인 자격증을 딸 때 공부를 했었는데

지금 다시 공부하니까 더 흥미진진하고 이해도 더 잘 됐다.

아무래도 강사님이 설명을 너무 잘하셔서 그렇다.

 

 

인터넷 동작에 필요한 컴퓨터 수는 최소 2대이다.

팀 버너스리는 총 2개의 프로그램을 만드는데

1.웹브라우저 (info.cern.ch/index.html)

2.웹서버 (info.cern.ch) - 하드디스크(이 안에는 index.html 이라는 파일이 저장돼있다)

인터넷으로 연결돼있음.

 

1이 2한테 전기적 신호를 보낸다.

그 신호에는

"나는 index.html 파일을 원한다"

라는 정보가 담겨져 있다.

 

 

웹서버는 하드디스크에서 "index.html"이라는 파일을 찾아서

웹브라우저로 보낸다. 그 전기적 신호에는

index.html 이라는 파일 안에 저장됐던 코드가 담겨져 있다.

 

 

 

그러면 웹브라우저에서 요청했던 코드가 도착하게 된다.

그 코드를 웹브라우저가 읽어서 해석 후 화면에 표시하면

우리가 알고 있는 웹이 동작하게 되는 것.

 

 

웹브라우저와 웹서버는 서로 정보를 주고받는다.

쉬운 말로 표현하기 위해

웹브라우저 = 웹클라이언트(정보 요청 / 고객: Client )

웹서버 = 서버 (정보 응답 / 서버(서비스 제공자):Server)

 

EX)

내가 만드는 시스템이 게임이라면? 게임이 인터넷 연결돼있으면

클라이언트 쪽 즉, 사용자들이 게임을 하는 컴퓨터&스마트폰에 설치된 프로그램은

게임 클라이언트.

 

게임회사가 가지고 잇는 서버 컴퓨터에 설치된 컴퓨터는 게임서버!

 

채팅 시스템 만든다 하면, 사용자들이 사용하는 프로그램은 채팅클라이언트.

채팅 회사가 갖고 있는 프로그램은 채팅 서버 라고 부를 수 있다.

 

 

강사님이 좋아하는 분 중에 한 분을 말하자면

컴퓨터를 만든 사람이 폰노이안(수학천재)한테 질문을 했다고 한다.

 

어떻게 그렇게 수학을 잘하세요?

"수학은 이해하는 게 아니라 익숙해지는 것"

 

우리가 공부하는 최종목표는 이해가 아니라 익숙해지는 것이다.

너무 감동적인 말이다....

익숙해지는 방법 중 하나가 이해일 뿐.. 와..

 

자꾸 얘기하고 생각하고 자꾸써보면 익숙해진다.

지금 막막하고 낯설게 느껴지는 건 당연한 것이겠지..

 

 

웹브라우저는 우리가 사용하는 거니까 충분히 알고 있지만 서버는 잘 모른다!

우리는 서버로 관심을 가져야 한다.

웹서버를 사용할 수 있는것은 내 컴퓨터에 있는 문서를

전세계 누구나 인터넷 연결된 컴퓨터에 웹브라우저 깔면

가져다가 볼 수 있도록 하는 아주 혁명적인 일을 우리가 하는 것이다.

 

두 가지 방법 중 하나만 쓰자면

 

1.내 컴퓨터에 웹서버 깔기 (어렵지만 인터넷 관련 여러 개념 학습 가능)

2.대행해주는 업체한테 맡기기(쉽지만 인터넷 동작 원리같은 게 감춰줘 있어 배울 건 적음)

:netlify.com / github.com

 

 

따라서

웹호스팅으로 쉽게 해보고 웹서버 통해 원리를 파악해보는 게 좋다.

 

 

---

 

"웹호스팅"

 

 

인터넷 연결된 컴퓨터 하나하나 : host(호스트)

 

컴퓨터 빌려주는 사업 호스팅. 요즘엔 클라우드라고도 불림.

호스팅 중 컴퓨터 웹서버와 같이 웹동작에 필요한 소프트웨어를 빌려주는 비즈니스 : 웹호스팅

 

 

웹호스팅의 무료, 유명한 서비스 : GitHub.com 깃허브

 

 

 

개발자들이 자신의 소스 코드를 안전하게 백업하고

백업된 소스코드를 매개로 해서 개발자들끼리 협업하기 위해 고안된

유명하고 중요한 사이트

(앞으로 계속 쓸 것이다.)

 

 

여기 사이트 기능 중 웹호스팅 기능 있음.

 

===> 악! 써보려고 했는데 유료화가 돼서 안 된다. ㅠㅠ

 

 

 

netlify.com 여기로 다시 시도해봤다.

 

 

 

바로 이 사이트가 운영되고있다.

 

정말 개쪽팔리지만 아무도 방문할 것 같지도 않기에.. ㅎㅎ

 

 

 

 

따라서...

my(index.html)→ hosting(web brower / 내가 netlify.com 으로 등록했던 웹사이트) → visitor(web server)

방문하는 사람(visitor)이 도메인 주소만 알고 클릭을 하면 웹서버가 index.html을 읽는다.

웹서버는 소스코드를 제공해준다.

 

---

 

"웹서버 운영하기"

 

 

대부분 호스팅을 많이 이용한다.

흔한 경우는 아니지만 이 원리를 알면

하나의 문제를 해결하더라도 많은 시간이 걸릴 것이고, 중급자가 되면 이게 일상이 될 것이다.

많은 지식과 경험을 얻게되고, 하나의 문제 해결해도 여러개의 문제를 해결할 수 있게 될 것이다.

 

 

웹서버는 제품군.

여기에도 많은 제품들이 존재한다. (ex. Apache IIS Nginx , Live Server)

나는 live server 다운을 했다.

live를 누르면 사이트가 보여지는 것이고, 다시 또 누르면 꺼진다.

 

또 두 대의 컴퓨터(하나는 노트북, 하나는 핸드폰)에 같은 네트워크(wi-fi)를 사용해서

IP를 따내고, 핸드폰 주소창에 그 주소를 옮기면

똑같은 화면이 나오는 걸 알 수 있었다.

 

이것이 가장 중요한 호스팅의 원리였다.

 

 

---

 

https://opentutorials.org/course/3084/18896

정신적으로 힘들 때 보면 좋을 것 같다

 

2,3까지 있으니 참고할 것!

 

---

 

Q&A

 

Q. 이미지 태그가 안되는 현상

A.

내가 만드는 웹상의 모든 파일소스들은, 내가 현재 만들고있는 파일에 위치한 폴더를 기준으로 한다.

따라서 이미지를 넣을 때 2가지 방법이 있는데

하나. 현재 파일이 저장된 위치에 이미지를 저장하고, 태그를 적으면 자동으로 밑에 파일명이 뜨게된다.

둘. 이미지를 웹으로 만들어서 첨부하는 방법

 

 

Q. <!doctype html> 태그의 뜻?

A.

doctype선언. 즉, 선언을 통해 구버전과 신버전에 알맞게 문법을 검사하는것

html 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 것.

대부분 꼭 넣어야 하는 태그이며, 브라우저에게 text를 어떻게 그려달라는지 말해주는 것.

이게 없으면 한글, 특수문자들이 깨질 수 있음.

브라우저에게 html의 버전 및 웹브라우저 내용을 잘 출력할 수 있도록 도와주는 역할

필수적으로 최상단에 들어가야할 태그라고 보면 된다.

 

 

Q. ctrl + 클릭 시 밑에있는 줄까지 한번에 잡아서 태그를 쓸 수 있게 하는법?

A.

ctrl이 아닌, alt키를 누르면서 클릭하면 쓸 수 있다.

 

 

Q. 태그 열 때 닫히는 태그가 자동생성돼서 계속 지워줘야한다. 그럴 땐 어떻게 해야할까?

A.

IDE(개발툴)는 자동화 기능이 있고 바꿀 수 없다. 모든 기능은 태그가 닫혀야 실행되기때문이다.

태그를 먼저 열고 그 안에 해당 내용을 넣는 습관을 들여야한다.

 

 

Q.파일-폴더 열기-그 폴더 안에 있는 모든 파일이 들어가있음. 보통 개발자들이 일할 때는 작업 폴더 안에

자기가 작업할 게 아니면 다른 폴더에다가 넣어놓는지? 그게 더 편한건지, 안그래도 상관없는지?

A.

보통은 그 안에 넣어서 사용한다. 예를 들어 danngol 이라는 폴더안에 가게앱, 고객앱 이렇게 있는데

고객앱에서 쓰는 이미지를 가게앱에서도 쓴다 라고 한다면 그 이미지는 public 이미지다 라고 개발팀끼리 명시를 하고

서버중에 이미지 서버라고 있는데, 거기에 올려서 공통으로 사용할 수 있게 만들어두기도 한다.

 

 

 

 

 

Q. IP주소를 따내는 과정에서 html 문서가 모바일에서 열리지 않았음. go live 버튼도 누르고 올바른 아이피를 적었는데 왜 안열리는 것일까? 다시 시도해봐야겠다..ㅠ

A.

Host Ip / Localhost IP는 다르다

코딩 짜놓은거 html 파일을 열었을 때 열리는 이유는 localhost ip를 사용해서 보고 있기 때문이다.

모바일에서 확인하고싶으면 Localhost Ip + port번호를 입력해야 볼 수 있다.

Go live는 서로가 같은 vsc를 켜놓은 상태에서 연결해주는 것. 예를들어 프론트/백엔드 서로 연동작업 해보자!

라고 할때 연동될 수 있게해주는 것.