👐 수업소개
남의 문제를 통해서 코딩을 배우려는 학생이 아니라
나의 문제를 코딩으로 해결하려는 엔지니어로 상상한다.
🤫 프로젝트의 동기
개발자로서 이 사이트를 만든배경을 알려주는수업.
📝 기획
우리가 만든 웹사이트를 기획.
무엇인가를 만들기 전에 무엇을 만들 것이가를 미리 상상하고,계획해보는 과정이 필요하다.
이런 과정을 기획이라고 한다.
💻 코딩과 HTML
기획을 끝냈으니 구현을 할차례이다.
오른쪽이 사람이 하는 일이면서 원인이고, 그것에 대한 결과가 왼쪽이면서 기계가 하는일이다.
사람이 하는 일 다시 말해서 원인을 부르는 여러 표현이 있다.
부호 또는 신호라는 의미의 코드(code)
원천이라는 뜻의 소스 (Source),약속이라는 의미에서 언어 그중에서 컴퓨터 언어라고 한다.
기계 가 하는 일
다시 말해서 결과를 부르는 여러 표현이 있다.
- 애플리케이션
- 응용 프로그램
- 프로그램
웹에서는 결과를 웹 페이지,
웹페이지가 모여있으면 웹사이트라고 한다.
기능이 좀 많으면 웹애플리케이션이라고 한다.
줄여서 웹앱이라고도 한다.
즉,원인인 코드를 통해서 결과를 만든다는 것이 코딩을 이해하는 핵심이다.
세상엔 다양한 종류의 코드들이있다.
c,c++,java,javascript,python,php,sql
코드마다 역할이 다르다.
하고자 하는일에 따라서 적당한 코드를 선택해야 한다.
그중에 웹페이지를 만드는 코드는 무엇이냐면 HTML이다.
HTML은 두가지면에서 중요하다.
1.쉽다.
2.중요하다.
웹은 퍼블릭 도메인(Public Domain)이다.
저작권이 없는 것들을 퍼블릭 도메인이라고 한다.
웹은 어떠한 저작권도 존재하지 않는 완전한 자유를 의미하는 퍼블릭 도메인으로 선언했다.
그렇기 때문에 구글과 마이크로소프트와 애플과 네이버가 웹브라우저를 만들 수 있고,우리는 똑같은 웹페이지를 여러 웹브라우저에서 볼 수 있는것이다.
👍 HTML 코딩 실습 환경 준비
코딩을 하기 위해선 에디더(Editor)라는 프로그램이 필요하다.
각자의 운영체제에는
이미 에디터가 준비되어 있다.
- 윈도우 - 메모장
- 맥 - 텍스트 편집기
- 리눅스 - gedit, nano, vim
에디터마다 사용법이 다르기 때문에 통일하겠다.
이 수업에서 채택한 에디터는 github.com에서 만든 Atom(아톰)이다.
하지만 난 전에쓰던 Visual Studio가 편하기 때문에 이것으로 진행하기로했다.
✅ 기본 문법-태그
이제 진짜로 코딩을한다.
우리가 만들었던 기획서다.
이런 모양의 웹페이지를 한 번에 만들수는 없다. 조각조각 구현하면서 전체적으로 완성해 나가면된다.
strong 태그 : 진하게
u태그 : 밑줄
위의 그림에서 strong이라는 것을 HTML에서는 문법적으로 태그라고 부른다.앞에 있는 태그를 열리는 태그 뒤에 있는 태그를 닫히는 태그라고 구분해서 부르기도 한다. 닫히는 태그는 태그명 앞에 /를 붙인다.<strong>creating<u>web</u>pages</strong>을 보시면 알겠지만, 태그는 중첩해서 사용할수도 있다.
태그라는 말을 들어본적있지않은가?
옷을살때 붙어있는것이 태그다.
태그가 하는 역할이 무엇인가 . 그 옷을 설명한다.
다시 HTML의 태그로 돌아와서
HTML과 같은 언어를 만든 사람들은 이 언어를 만들 때 자신들이 만든 문법을
사람들이 쉽게 이해하기를 원했다. 그래서 일상에서 자주 쓰는 말 중에 이 문법과 비슷한 말을 찾았다.그래서 찾은 비유,은유가 바로 태그이다.
정보기술은 역사가 길지 않다.좋게 말하면 최신이고,안 좋게 말하면 근본이 약하다.부족한근본을 어디서 빌려왔을까? 많은 것이 일상에 대한 비유와 은유 이다.그런 점에서 컴퓨터는 하나의 거대한 시이다.컴퓨터가 차갑게 느껴질 수 있지만,컴퓨터 공학은 사실 낭만적이다.
🌈 혁명적인 변화
h1태그 - 제목
검색의 중요성을 알려주는 강의
📈 통계에 기반한 학습
오늘날 HTML은 약 150개가 넘는 태그가 존재한다.그럼 그 많은 태그를 다 외워야 할까?..
앞에서 우리가 살펴본 혁명적인 변화로 인해서 태그가 무엇인지를 알고 있다면우리는 모든 태그를 다 알고있는 것과 다름이없다.1분이면 찾을 수 있다.
https://advancedwebranking.com/html/
쉬운것이 사소한 것이라는 해로운 인식이 생길수있다.
이런상태에 오래 노출되면 어려운 것은 중요한 것이고,쉬운것은 사소한 것이라는 해로운 인식이 생기게 된다. 그런데 사실은 쉽고 단순한 것들을 합성해서 무언인가를 만들어내는 수련은 결코 쉬운 것이 아니다. 같은 말이지만,이 수련을 충분히 한다면 어느 순간 실력은 폭발적으로 늘어난다.지금 우리가 배우고 있는 것들을 쉽다고 무시하고말자.1990년부터 지금까지 복잡해진 거대한 웹은 지금까지 배운것들의 토양 위에 서있다.지금까지 배운것이 없다면 뒤에서 배우는 것들은 존재하지 않는다.
✅ 줄바꿈
br태그와 같이 무엇인가를 설명하지 않는 태그들은 닫아주지 않아도 됩니다.
우리가 줄바꿈 한 이유는 단락을표현하기 위해서이다.
단락을표현하는 태그 검색 (paragraph)
p태그
p태그는 br태그와 다르게 하나의 단락을 그룹핑 할 수 있도록 열고,닫는 태그가 존재한다.
단락표현할떄 : p태그 > br 태그
이유: 단락에 단락 태그를 사용하는 것이 웹페이지를 정보로서 보다 가치있게 해주기 때문이다.
br 태그는 줄바꿈을 의미할 뿐이다.
p 태그의 단점 : 단락과 단락의 간격이 고정되어 있기 때문에 시각적으로 자유도가 떨어진다.
반면에 br 태그는 쓰는만큼 줄바꿈이 되기 때문에 원하는 만큼 간격을 줄 수있다. 라는 장점이 있다.
그래서 많은 사람들이 br 태그를 선호한다.하지만 웹에는 css라는 기술이 있다.
.css를 이용하면 p태그의 한계를 극복할 수 있다.
p 태그를 통해서 단락의 경계를 분명히 하면서 CSS를 통해서 p 태그의 디자인을 자유롭게 변경할 수 있기 때문에 br 태그 보다 p 태그가 더 좋은 선택이다.
💡 HTML이 중요한 이유
블로그, SNS, 이메일과 같은 서비스들은 글쓰기 기능이 있다.
그 글쓰기 기능으로 우리는 우리도모르게 html을 생성하고있었다. 공부를하면 보이지않던것들이 보이기시작한다. 우리는 글쓰기기능이 html로 만들어진다는 것을 공부를 통해 알아냈다.
공공의 약속인 html의 태그를 적절히 사용한다면 검색엔진이 나의 정보에 접근하기 더 쉽게 만들 것이다.
✅ 최후의 문법 속성과 img
속성(Attribute)이 필요한 img 태그
✅ 부모 자식과 목록
✅문서의 구조와 슈퍼스타들
✅ HTML 태그의 제왕
📌 웹사이트 완성
🛖 원시웹
🔑 인터넷을 여는 열쇠 : 서버와 클라이언트
💻 웹 호스팅 github pages
나의 컴퓨터는 현재로서는 컨텐츠를 서비스 할 수 없다. 우리는 github의 pages 기능을 이용했다.github에 파일들을 업로드하고, pages 기능을 활성화하면 github의 서버 컴퓨터에 웹서버가 켜진다. 그리고 우리에게 웹서버의 주소를 알려준다.
이제 웹서버의 주소를 방문자에게 알려주면 방문자는 나의 컴퓨터가 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 된다.
웹서버를 직접 운영 하는것에 비해서 웹호스팅을 이용하면 쉽다.
단점은 인터넷의 원리가 감춰져 있다는 것이다.
하지만 현업에서 웹서버를 직접 운영하는 경우는 많지 않다.
웹서버를 운영하기 위해서는 많은 노하우가 필요하다.
👨💻 웹 서버 운영하기(2022년 수정판)
웹브라우저 -"제품군"
웹서버 -"제품군"
웹서버라는 제품군에는 여러 제품이있다.
Apache IIS Nginx
이중에서 우리가 사용할 소프트웨어는
Web Server for Chrome이다.
크롬의 확장 기능이다.
우선 해야할 것은 누군가 웹서버를 접속했을 때 어느 디렉토리에서 파일을 찾을지를 웹서버에 알려줘야한다.
2번 CHOOSE FOLDER을 선택하고 우리가 만든 Web 폴더를 선택한다.
이제 웹서버는 이 폴더 안에서만 요청한 파일을 찾아서 응답한다.
그리고 1번의 스위치를 누르면 웹서버가 실행된다.
Web Server URL(s)를 보면
http://127.0.0.1:8887 이라는 주소가 보인다.
이 주소를 웹브라우저의 주소창에 입력한다.
우리의 웹사이트가 보인다.
우리는 웹서버를 통해서 웹페이지를 가지고왔다.
확인하는 좋은방법은 웹서버를끄고 접속하는거다.
웹사이트가 열리지 않는다.
웹서버를 통해서 웹페이지를 여는 것과
파일찾기를 통해서 웹페이지를 여는 것은 구체적으로 어떤차이가 있을까?
주소를 비교해보겠다.
파일 찾기:file:///C:/Users/dddda/OneDrive/%EB%B0%94%ED%83%95%20%ED%99%94%EB%A9%B4/Web/index.html
웹 서버:http://127.0.0.1:8887/index.html
웹 서버로 접속한 주소를 자세히 보겠다.
http는 웹페이지를 주고받기 위한 통신 규약인
http를 이용해서 통신하겠다는 뜻이다.
127.0.0.1은 Internet Protocol Address로서 인터넷에서 상용하는 주소를 의미한다.
IP Address는 0.0.0.0부터 255.255.255.255까지의 주소가 존재한다.
약 42억개의 주소가 존재한다. 이렇게 많은 주소 중에서 127.0.0.1은 내컴퓨터 자신을 가르키는 특별한 주소이다.
Port는 지금 몰라도 된다.
그런데 같은 컴퓨터에 설치된 웹브라우저와 웹서버가 정보를 주고받는 것은 현실 세계의 웹과는 다르다.
서로 다른 컴퓨터끼리 정보를 주고 받을 수 있어야 한다.
우리는 스마트폰으로 그것을해보겠다.
우선 해야할일은 스마트폰과 컴퓨터를 같은 네트워크에 연결해야 한다.
쉽게 말해서 같은 와이파이에 접속해야한다.
우선 웹서버를 끄고
이 옵션을 켠다.
그러면 새로운 아이디 주소가 나타난다.
이 주소가 같은 네트워크 안에서 사용 할 수있는 웹서버가 설치된 컴퓨터의 IP 주소이다.
스마트폰에 브라우저에서 주소를 입력한다.
정상적으로 내가 만든 웹페이지가 작동한다.
이것으로 전세계에 있는 수많은 컴퓨터를 마치 내 컴퓨터 인것처럼 사용할수있게 된 웅장한 진보를 목격한 것이다.
👋 수업을 마치며 1
이 그래프의 x축은 진도이다.
진도가 나아갈수록 중요도는 급격히 떨어진다.처음에 배우는 것은 모든 것의 공통분모이고 뒤에서 배우는 것은 특수한 상황에 유용한 것들이다. 진도가 나아갈수록 난이도는 급격히 높아진다.
이 두선의 교점을 중심으로 앞쪽은 본질을 배우고 뒤쪽은 혁신을 배운다. 또 앞쪽은 교양이고, 뒤쪽은 직업이라는 생각이 들었다. 교양은 쉽지만 매우 중요한 것을 배우고, 직업은 어렵지만 덜 중요한 것들을 배운다.
그리고 이 선을 하나로 퉁칠 수 있다.
교양은 조금만 공부해도 할 수 있는 것이 기하급수적으로 많아진다.반면에
직업은 아무리 노력해도 실력이 잘 늘지 않는다. 생각해 보면 우리 마음이 힘든것은 교양에 있을 때 빠르게
높아지는 능력의 속도를 보지 않고 낮은 능력을 보기 때문이 아닐까? 또 직업에 있을 때는 높아진 능력을 보지 않고
느려진 속도를 보기 때문이 아닐까?
자괴감,소외감,불안함과 같은 감정은 실력향상에 도움이 된다.
하지만 만족감,자신감,기대감 같은 긍정적인 것도 실력향상에 도움이 된다.
그렇다면 굳이 부정적인 마음에 기대서 공부할 필요가 있을까 ? 이 수업을 들으면서 난 부정적인 마음을 많이 기대던것 같다. 취직,내가할수있을까 와같은.. 부정적인 마음 하지만 점점 공부하고 몰랐던 지식들로 채워지면서 기대감,만족감과 같은 감정들도 생겨난다.뇌를 괴롭히면 빨리성장할수는 있어도 오래성장할수는없다..공부는 평생해야한다.
이 WEB1 수업을 들으며 직업으로 시작해야겠다고 전부터 생각하긴했지만 난 더욱 확고해졌다.
내가 무언가를 만들고 사람들에게 공유,도움을 줄 수 있다는것이 마음에든다.재미있다.
앞으로 공부가 어렵고 힘들고 그럴때가 있을 수 있다. 하지만 나는 내가 이 수업을 들으며 다짐한 나의목표 마음가짐을 잊지않겠다. 다시 이글을보며 다짐할수있도록 하겠다. 화이팅!!!!!!!!!!!!!
👋 수업을 마치며 2
이 수업은 강의를 멈추고 내가 여태 배운 것을 가지고 프로젝트를 진행하라하지만..
나는 시간이없기에 더 나아갈려고한다.
1개의 체크박스의 경우의수 : 2
2개의 체크박스의 경우의 수: 4
3개의 체크박스의 경우의 수: 8
50개의 체크박스의 경우의 수 : 2^50 약:1조개의 경우의수가생긴다.
하지만 사용자는 50개의 체크박스도 못다루는 자신을 비판한다.. 눈에 보이지 않는 복잡함 때문에 좌절xxxxx.
눈에 보이지 않는 복잡함 때문에 좌절하지말고 끝까지 열심히히자.내 탓이 아니다.
공부도 마찬가지이다. 개념을 알게 된다는 것은 체크박스가 늘어나는 것이다.자신도 모르게 머리 속이 기하급수적으로 복잡해진다.공부 한것은 바로바로 정리하자.
👋 수업을 마치며 3
공부의 효용은 최소한으로 배워서 최대한으로 써먹을 때 드러난다.
웹사이트를 아름답게 -> CSS
사용자와 상호작용하는 웹페이지 ->JavaScript
만약 1억개의 웹페이지로 만들어진 웹사이트를 운영하고 있다고 쳐 보자.
그런데 어떤 이유로 웹사이트에 있는 웹페이지에 h1 태그를 h2 태그로 바꿔야 한다면 1억 개를 변경해야 한다.
하나의 페이지에 0.1초가 걸린다고 해도 1억 개면 115일이 걸린다.즉 생산서의 한계에 봉착한다.
이 한계를 극복하기 위해서는 백엔드 기술을 배워야 한다. 백엔드 기술을 이용하면 파일 하나를 변경하면
1억 개의 웹페이지가 한번에 변경된다.PHP JSP NodeJs Express Python Django Ruby on Rails ASP.net과
같은 기술들은 이런 목적을 위한 기술들이다. 이 기술들은 서로 경쟁관계에 있고,이 중 하나를 공부하면된다.
하나를 공부하면 나머지를 공부하는 게 어렵지 않다. 이 기술을 위해서 종사하는 엔지니어들을 백엔드 엔지니어라고 부른다.
알고 있는 것을 공고히 하는 두가지방법:
1. 하나를 알고 있는 지식을 이용해 프로젝트를 하는 것
2.다른 하나를 알고 있는 지식을 컨텐츠로 만드는 것.(블로그도 해당)
둘다 자기가 무엇을 알고 있는지를 자신과 타인에게 확인시켜 줄수있다.
'강의 정리 > 생활코딩' 카테고리의 다른 글
| WEB2 - CSS 강의 중요내용 (0) | 2022.12.02 |
|---|
