개발 일기

갤럭시( dex)로 python 공부하는법

jonghyuck.hong — Mon, 22 Mar 2021 13:33:38 +0900

이번에 본가에 잠시 올라오게 되었는데 맥북을 놓고 왔다. 아이패드라도 있었으면 blink앱으로 ssh 터미널상에서 끄적거리기라도 해볼텐데 핸드폰 빼고 아무것도 가져오지 않았다. 그래서 오늘은 이런 상황에서 어떻게 코딩 공부를 할 수 있는지에 대한 방법을 적어보려고 한다.

우선 이 방법은 최신 갤럭시모델을 사용하는 사람만 가능한 방법이다.

갤럭시에는 dex라는 기능이 있는데 갤럭시를 외부 모니터에 연결하면

이렇게 dex기능이 활성화 되면서 간이 desktop을 사용할 수 있다. 다행히 우리 집에 맥북도 없고 아무것도 없지만 맥북 연결을 위해 모니터에 usb c타입 허브가 있었고 블루투스 키보드와 마우스도 구비되어 있었기에 아무 문제 없이 사용할 수 있는 기능이다. 최소한 usb c 에서 hdmi라도 연결할 수 있는 환경이라면 키보드만 하나 구해서 사용하면 마우스는 휴대폰으로 대체가 가능하니 나름 괜찮은 기능인 것 같다.

아무튼 이렇게 연결이 됬으면 두가지 방법이 있다.

1. 평소 공부하던 aws와 같은 서버가 있는 경우

2. 그런거 없다.

1. 평소 공부하던 aws와 같은 서버가 있는 경우

먼저 1번의 경우는 터미널 어플을 설치한 후 ssh 접속을 통해 python을 실행할 수 있다. tumux라는 유명한 어플이 있어서 설치를 해봤다.

우리가 알고 있는 익숙한 터미널이 나온다. 여기서 ssh를 통해 연결해 주기만 하면 된다.

우선 pem키가 있어야 aws에 접속이 가능하기 때문에 구글 드라이브에 저장되있던 pem키를 download폴더에 다운받아 주었다.

그리고 해당 디렉토리로 이동한 후

ssh -i code-server.pem ubuntu@ip주소

위와 같이 써주기만하면

이렇게 우리가 평소에 쓰던 환경 그대로 접속이 가능하다. 즉 휴대폰만 있어도 어디서든 공부를 할 수 있는 환경이 된것이다.

하지만 여기에는 한가지 문제점이 있다. 아직 내가 tumux 사용에 익숙하지 않은 탓인지 모르겠지만 복사 붙여넣기가 되지 않는다는 치명적인 문제가 있었다. 또한 평소 vi에디터가 익숙하지 않은 사람들은 매우 불편할 것이다. 나도 그렇다.

그래서 다른 방법을 생각해보다가 jupyter notebook이 생각 났다.

2. 아무것도 없는 경우

구글링이나 유튜브를 보면 안드로이드에도 python과 jupyter 서버를 열 수 있는 방법들이 나와있다. 하지만 궂이 이렇게 복잡하게 하지 않아도 구글의 colab을 사용하면 클라우드 jupyter notebook을 사용할 수 있다.

----------------------------------------------------------------

위 방법도 물론 좋은 방법 들이지만 사실 구름 ide와 같은 클라우드 ide를 사용하는 방법도 좋은 방법인것 같다!!

[IT/SW] comento 후기 feat.파이썬으로 배우는 백엔드 개발 실무 : API 개발, 구현, 배포 등

jonghyuck.hong — Mon, 22 Mar 2021 12:10:46 +0900

약 5주간의 코멘토 수업이 끝난지 벌써 3주가 지났다. 늦은감이 있지만 오늘은 수업을 하면서 배웠던 점과 느낀점을 정리해보려고 한다.

혹시나 해서 내 이모지를 워터마크로 박았다.

결제 내역

위 사진처럼 나는 1/14일에 코멘토라는 사이트에서 직무관련 교육을 찾아다녔고 한 강의를 발견했다.

[ 파이썬으로 배우는 백엔드 개발 실무 : API 개발, 구현, 배포 등 ]

comento.kr/edu/learn/ITSW/SW%EA%B0%9C%EB%B0%9C-G816

파이썬으로 배우는 백엔드 개발 실무 : API 개발, 구현, 배포 등 | 코멘토 직무부트캠프

[ 차시별 과제 소개 ]Python은 빅데이터, 인공지능 등 다양한 분야에서 널리 사용될 뿐만 아니라, 웹 개발에서도 유연함과 강력함을 인정받고 있습니다.해당 캠프는 1주차에 기초

comento.kr

그리고 1/31~3/7까지 약 5주간 교육을 받았고 많은 것을 배울 수 있었다.

우선 이 강의는 내가 지금까지 배웠던 공부했던 방식과 비슷했다. 멘토는 멘티들에게 매주 1개의 과제를 내준다.

'과제의 양은 결코 적지 않고 처음하는 사람에게 자세한 설명같은 친절함도 없었다.'

하지만 아이러니 하게도 이 점이 가장 매력적이었던것 같다.

지금도 데이터 관련 인터넷 강의를 수강하고 있지만 수업을 듣고 따라하는 것과 아무것도 모르는 상태에서 하나씩 자신이 궁금한 점을 찾아보고 정리하며 공부하는 것은 각각 장단점이 있다. 이 수업은 후자의 경우이다.

내가 수강을 했을때는 약 5명정도의 인원과 멘토가 진행을 하게 되었었고 그 중에서는 파이썬에 대해서 1도 모르는 학생과 이미 배포경험이 많으며 다수의 프로젝트를 경험했던 사람도 섞여 있었다. 이런 와중에 학습 전에 배포해주신 과제 내용을 살펴보았다.

1주차 과제 : Django를 시작하기 전, python 기초 지식 쌓기

python 설치와 기본 문법 익히기
기초적인 알고리즘 문제

2주차 과제 : 현업에서 장고 개발을 위한 기본적인 MTV(MVC) 패턴의 이해와 부트스트랩으로 자신의 Resume 페이지 구현하기

장고 설치와 웹 개발 디자인 패턴 익히기
본인의 웹 페이지 디자인과 개발 및 Github 업로드
(선택) 예제에 요구 사항을 모델에 반영하여 Django extension을 통한 ERD 그리기

3주차 과제 : DRF(django rest framework)를 이용한 API 개발

개발 환경 구성
API 설계
DRF를 활용한 API 개발 및 Github 업로드
(선택) OpenAPI Specification를 통한 API 문서 만들기

4주차 과제 : API 구현 및 배포

요구 사항을 통한 API 최종적으로 개발
클라이언트 개발자와 소통할 수 있는 API 문서 제작
(선택) 배포하기(배포환경 자유)

아주 마음에 들었다. 그런데 1주차가 지나고 문득 의구심이 들었다. 1주차의 양이야 조금 많긴 했지만 처음 수업을 듣는 사람도 충분히 따라올 수 있을만한 수준이었다. 하지만 앞으로는 1주마다 django, DRF, API배포까지 진행해야 하는데 아직 CLI가 익숙하지 않은 초보자가 과연 1주만에 이걸 따라갈수 있을까? 이 수업은 따로 수업이 없었다. 그저 2주에 한번씩 피드백시간만 있을 뿐이었고 저 모든 과정에서 할 수 있는 정보는 스스로 구글링을 해서 찾아야 하는 수업이었다. 나 역시 python과 django는 조금 공부했었지만 API가 뭔지 restapi는 다른건지 모든 지식이 없는 상태에서 저걸 할 수 있나? 했었던것 같다.

예상대로 2주차가 지나 3주차부터 문제가 생기기 시작했다. 멘토님께 단톡에서 질문을 할 수도 있었지만 특정 개념을 물어보면 대략적인 참고자료를 알려주시는 분이셨고

ex.

나 : django에 접속할때 포트번호를 제외하고 url을 입력하고 싶은데 어떻게 할 수 있을까요?

내가 원했던 대답 : A를 이용해서 할 수 있습니다. 원리는 B입니다.

실제 대답 : 리버스 프록시 서버를 공부해보세요.

이런 식이었다. 처음엔 많이 당황스러웠다. 수업도 안하는데 질문을 해도 명확한 답변이 아니라 관련된 지식에 대한 정보 조각을 던져주고 공부를 하도록 유도하는 방식은 생소한 방식이었다. 하지만 결과적으로는 정말 좋은 경험이었던것 같다.

멘토님의 의도는 너무 명확했다. 스스로 학습하는 방법을 알고 익숙해지기를 바랬던 거였다. 이런 방식은 처음엔 많이 힘들수 있어도 시간이 지나면 성장에 있어서 엄청난 효과를 볼 수 있다. 추가로 하나부터 열까지 모든걸 스스로 해결해야 하기 때문에 1주에 금요일까지 매주 상당한 집중력을 발휘해서 과제를 했었던것 같다.

사실 수업을 들으면서 이런 생각도 많이 들었다. 내가 18만원을 주고 수업을 듣는데 내가 얻을 수 있는 정보가 생각보다 없는데? 이럴꺼면 혼자 하는거랑 뭐가 다르지?

목표를 설정하고 그 목표를 기간안에 달성하고 달성하기위해서 어떤 과정을 거쳤는지 또 미달성시 그 이유와 보완해야 할 점은 무엇인지를 자연스럽게 파악할 수 있었다.
교육이 끝난 뒤에도 어떤식으로 공부를 해야 좋을지 모르는게 있으면 어떻게 찾아봐야 하는지에 대한 공부 방법이 익숙해졌다.

이 두가지가 가장 나에게 도움이 많이 되었고 앞으로 공부방법에 적용시킨다면 학습능률이 많이 올라갈것 같다.

이런 후기를 처음 쓰다보니 어떻게 마무리를 해야 할지 모르겠다.

'본 후기는 직무부트캠프를 직접 구매하고 수항한 후 작성하였으며, 후기 작성 이벤트에 참여하여 소정의 원고료를 받았습니다.'

개발자가 되기 위한 공부

jonghyuck.hong — Fri, 19 Mar 2021 17:23:44 +0900

작년 말쯤 개발자가 되려는 마음을 잡고 현재인 3월 19일까지 짧은시간이지만 100일이 넘는 시간동안 나름 열심히 공부를 해왔다. 요즘 집중도 잘 안되고 뭔가 초심이 많이 흐려진 기분이 들어 부끄럽지만 한번 지금까지는 어떻게 했는지 앞으로는 어떻게 할것인지 생각을 정리해보기로 했다.

처음 개발자가 되기로 한 이유

사실 작년까지는 개발자라는 직업에 대해서 진지하게 생각해 본적이 없었다. 학교에서 C++, C를 배운적은 있어도 개발자가 되기 위한 과정 보다는 간단한 프로그래밍을 배우는 느낌으로 배운게 전부였다고 생각했다. 그러다 우연히 지인이 python강의를 배우는데 (지인은 비전공자였다.) 도와줄 수 있냐는 부탁을 받았고 python 강의를 듣는내내 충격을 받았다.

내가 들었던 수업은 타 대학의 수업이었고 비전공자를 위한 수업이었기에 우선 코딩에 대한 관심을 이끌어내는것부터 수업이 시작되었다. 그리고 내가 배웠던 딱딱한 원서를 읽으며 문법 하나하나를 이해하기를 강요하는 수업이 아니라 반복문과 조건문을 통한 간단한 게임 만들어보는 등의 흥미 유발을 통해 접근하는 방식이었다. 장단점은 있었다. 당연히 깊이를 기대할 수는 없었고 이 코드를 사용했을때는 어떤 문제가 일어날 수 있겠다는 설명은 없었던것 같다.

원래 나는 코딩이 재밌었다. 뭔가 멋있어보이기도 하고 내 생각대로 움직이는 모터같은 것들을 보면 내가 뭔가 하나 해냈다는 성취감도 좋았던것 같다. 하지만 그다지 특출나지는 않았다. 캡스톤 디자인 과목이나 마이크로 프로세서 수업에서 대부분의 코딩을 내가 맡아 진행했을 정도로 못하지는 않았다고 생각하지만 엄청난 흥미도 실력도 없었다. 다만 재밌어 하기는 했던것 같다. 한줄한줄 추가될때마다 눈으로 확인되는 성취도가 좋았던것 같다.

다시 수업으로 돌아와서 대학에서 배운 C와 C++외의 언어는 처음이었지만 python을 배우는데는 처음 C라는 과목을 배울때보다 훨씬 쉬웠고 새로운 언어를 배우는데 두려움을 많이 줄여줬던것 같다. 이 무렵 나는 콘티넨탈이라는 자동차 전장 회사에서 인턴쉽을 하고 있었는데 당시 코딩에 재미를 처음 붙이고 소프트웨어팀 인턴 N양에게 이것저것 물어보며 개발자라는 직군에 처음 눈독을 들이기 시작했다.

프론트엔드, 백엔드라는 말은 들어본적도 없었고 웹개발자, PM(projectmanager), SRE, DevOps, Data Engineer 등등 개발자라는 직업은 엄청나게 포괄적인 단어였다. 내가 뭘 할 수 있을까 어떤 종류의 개발자들이 있고 무슨일을 하는지에 대해서 조사하는데만 2달정도의 시간이 걸렸던것 같다. 이렇게 오래 걸린 이유는 내 주변에 단 한명의 개발자도 없었기 때문이다. 회사에서 일을하며 틈틈히 찾아서 정리하고 모르는게 있으면 구글링과 유튜브를 통해 조사해봤지만 php, java가 뭐가 다른지도 모르는 사람이 처음 듣는 직군을 한번에 이해하기는 그만큼 어려웠다. 그리고 웹개발자 중에서도 백엔드를 선택하게 되었다. 사실 처음에는 감히 풀스택이 되고 싶었지만 미적감각도 없는 내가 프론트를 할 수 있을까 하는 생각도 들었고 백엔드가 마치 전자기기에 회로처럼 안보이는 데이터를 다룬다는 것이 더욱 매력적으로 다가왔기 때문이다.

백엔드? 어디부터 해야 하지?

그렇게 백엔드 개발자가 되기로 결심을 한게 2020년 12월 정도였던것 같다. 구글에 백엔드 개발자가 되는법이라고 검색을 하고 닥치는대로 정보를 모으기 시작했다. 어떤 언어와 프레임워크를 배워라 이런 정도의 말들만 있을뿐 구체적인 방법이 없었다. 애초에 기대도 하지 않았지만 생각보다 더욱 정보가 없어 당황스러웠던 기억이 난다. 그러다 github에 backend 2021 roadmap이라는 글이 있는것을 발견했다.

차라리 정보가 없었던때가 그리웠다. 이게 인간이 다 공부할 수 있는 양인가 싶은 생각이 먼저 들었고 기본지식도 없는 내가 개발자가 될 수 있을지 두려움이 밀려왔다. 위에 사진에 내가 아는 단어가 몇단어나 있을까...... 하지만 포기하기보다는 태어나서 처음으로 내가 하고싶은 일이 생겼고 목표로 가기위한 구체적인 로드맵이 생긴데에 감사하며 하나씩 준비해보자 라고 마음을 먹었다. 그리고 독학을 시작했다.

jump to python의 처음부터 끝까지 모든 코드를 손으로 다시 타이핑해보고 django도 배워보고 웹서버가 뭔지 nginx가 뭔지 인터넷에 대한 기본적인 지식도 쌓아보고 모든게 새로웠기에 어렵지만 그만큼 재미있었다. 그리고 공부를 하면서 이길이 내 길이 맞는지 확신이 들기 시작했다.

초심을 유지하기가 어렵다.

3달에서 4달정도가 지났다. 사실 뭐 하나 배우기도 짧은 시간이었지만 내 나름 많은것을 공부했다고 자부할 수 있다. 하루 8시간씩 일을 하며(사정상 4월까지는 일을 계속 해야 한다.) 짬나는 시간마다 또 잠을 줄여가며 공부를 했고 3월중순부터 이렇게 블로그도 만들어 관리하기 시작했다. 하나 후회되는 점이라면 그동안 했던 모든것들을 그때그때 블로그에 올리지 않았다는 점이지만 앞으로 할게 저렇게 많은데 조금 못한것 정도는 괜찮다고 생각한다. 하지만 문제는 체력이다. 아니 정신력인가? 잘모르겠다.

분명 지금은 처음보다 많은 지식이 쌓였고 이제 본격적으로 속도가 붙어야 할 타이밍인데 이상하게 요 몇일간 정말 집중이 되지 않는다. 지금까지의 내 몸 상황을 봤을때 어딘가 나사하나가 빠진것 같았다. 오늘만 쉴까 그동안 열심히 했잖아 라는 생각이 언젠가부터 머리속에 들기 시작하면서 점점 몸을 좀먹고 있는것 같다. 고작 3개월 4개월좀 했다고 이래도 되는걸까 하는 죄책감이 머리속에 떠나질 않고 쉬어도 쉬는것 같지가 않고 오히려 자는 시간은 늘어났는데 더 피곤한것 같다. 하루 14시간씩 일을 해도 짬내며 공부했던 당장 저번주만 해도 이러지 않았던것같은데...... 이건 정신상태 문제라는게 내 결론이다. 정신차리자. 늦게 시작한건 죄가 아니지만 오늘일을 내일로 미루는건 죄다. 그만좀 미뤄라 인간아.

오늘은 그냥 이런 의미없는 글을 쓰며 마음을 다잡기로 했다. 내일부터 하루에 하나씩 포스팅을 하는걸 목표로 다시 열심히 달려봐야 겠다.

앞으로는?

최근 comento라는 비대면 강의를 들으며 공부방법에 대해 깨달은 바가 있다. 일주일 단위로 목표를 세우고 그 목표는 반드시 끝내야 한다. 아주 간단한 방법 같지만 말처럼 간단하지는 않다. 프레임워크 하나를 한주만에 끝낼수 있다면 좋겠지만 불가능하다는것은 나도 알고있다.(난그렇다.) 하지만 효과는 정말 좋았다. 그래서 앞으로 한주한주 계획을 세우고 챌리저스라는 챌린지 어플을 통해서 계획을 강제로 이행해야 겠다. 나는 그게 제일 효과적인 인간인것 같다. 뭔가 앞으로 거창한걸 하겠다고 말할것처럼 써놓고 이렇게 써놓고 보니 뭐지 했지만 무슨상관인가 그냥 내 마음 다잡는 글인데.

웹호스팅이란 뭘까?

jonghyuck.hong — Thu, 18 Mar 2021 05:54:01 +0900

호스팅이란 말의 뜻은 어떤 서비스를 빌려서 사용한다는 말이다. 그럼 웹 호스팅은? 말 그대로 외부의 서버를 빌려서 기능을 사용한다는 말을 의미한다. 호스팅은 웹호스팅, 서버호스팅, 클라우드호스팅과 같은 종류가 있는데 한번 알아보도록 하자.

1. 웹호스팅

ozhome.co.kr/hosting/about.html

웹호스팅이란? - 오즈웹

웹호스팅 개념 설명 및 홈페이지 만들기 위한 절차 안내

ozhome.co.kr

나는 전문가도 아니고 웹 호스팅이 뭔지 알기 위해서 서비스를 하고 있는 회사의 설명을 빌리기로 했다.

웹 호스팅의 설명은 위와 같이 나와있는데 쉽게 말해서 내가 HTML이나 CSS와 같은 코드를 이용해서 웹 페이지를 만들었다고 치자. 웹페이지를 하나 제작했다고 해서 누구나 내 사이트에 접속할 수 있는 것이 아니다. 배포과정을 거치고 도메인까지 연결을 해야 비로소 하나의 웹 페이지가 웹 사이트로 거듭나는 것이다. 이 배포 과정을 전문 업체에 맡기는 것이다. 물론 이 과정은 직접 할 수도 있지만 개인이 서버를 구매하고

2. 서버 호스팅

그렇다면 서버 호스팅은 웹 호스팅과 무엇이 다른가?

웹 호스팅의 경우 서버중 '일부'만 빌리는 서비스라면 서버 호스팅은 서버 하나를 통째로 구매할 수 있으며 서버 운영에 필요한 인프라와 기술력까지 제공받을 수 있는 서비스이다. 전자의 경우 저렴한 가격으로 서버 및 인프라의 구축이 필요 없지만 서버의 일부분만 사용하기 때문에 사용량이 제한되고 서버 관리 권한이 없다. 따라서 소규모 웹사이트에 주로 사용되고 후자의 경우 서버 관리에 대한 직접권한을 갖고 서버를 단독으로 사용하기 때문에 보안상으로도 유리하지만 초기 구축단계에서 웹호스팅에 비해 시간과 비용이 많이 든다는 단점이 있다. 이 경우에는 주로 회사의 인터라넷, 대형 쇼핑몰 등 고정적으로 대용량 트래픽과 DB가 많이 사용되는 곳에 사용 된다.

3. 클라우드 호스팅

클라우드 호스팅은 웹호스팅의 장점과 서버호스팅의 장점을 모두 가지고 있는 호스팅이며 최근 많은 주목을 받는 호스팅 방법이다. 아마존의EC2 와 구글의 클라우드 플랫폼 등 다양한 서비스가 존재하며 장점을 나열해보자면 앉은자리에서 클릭 몇번으로 10분안에 누구나 서버를 생성하고 관리할 수 있으며 트래픽의 변동에도 유연하게 대처할 수 있기 때문에 일시적인 이벤트나 인프라가 유동적인 곳에 사용하기 편리하다는 장점이 있다. 단점도 있지만 점점 클라우드 호스팅의 변화로 단점이 사라지고 있는 추세이다.(딱히 치명적인 단점은 발견하지 못했다. 아는사람 있으면 댓글을 달아줬으면 ..)

마지막으로 정리하자면

개인 블로그나 소규모 트래픽이 필요한 곳 : 웹 호스팅

트래픽과 DB의 사용량이 많아 서버 관리 인프라가 같이 필요한 곳 : 서버 호스팅

트래픽의 변화에 유동적인 대처가 가능하며 빠른 시간안에 서버를 구축할 수 있는 서비스 : 클라우드 호스팅

도메인 이름 이란?

jonghyuck.hong — Mon, 15 Mar 2021 22:54:37 +0900

jonghyuck.tistory.com/20?category=985119

DNS, 그리고 동작 방식

DNS란 뭘까? DNS가 뭔지 모르는 사람일지라도 한번도 사용해보지 않은 사람은 없을 것이다. DNS란 Domain Name System의 줄임말이며 호스트의 도메인을 네트워크 주소로 변환하거나 그 반대의 역할을 수

jonghyuck.tistory.com

DNS에 대해 공부하며 도메인 이름에 대한 개념을 잠시 접했었다. 오늘은 이 도메인 이름에 대해 알아보려고 한다. 참고로 도메인 이름과 도메인 네임이 번갈아가며 나오는데 둘은 그냥 한국어명칭과 영어명칭의 차이이며 궂이 수정하지 않고 포스팅을 다루었다.

도메인에 대해서는 알았는데 도메인 이름(도메인 네임)은 또 뭐야?

도메인이 인터넷의 주소( IP지만 도메인 역시 주소로 생각할 수 있으니 여기서는 주소라고 표현하겠습니다.) 이라면 도메인의 구성 요소에도 각자 이름이 정해져 있다.

https://www.google.com
https://naver.com

https://www.google.co.kr

위 주소는 구글과 네이버의 주소이다. 이 주소들은 자세히 보면 dot으로 구분되어져 있는 것을 알 수 있다.

google을 예시로 들어보면 www / google / com 이 모두 dot(점)으로 구분되어져 있는데 이는 오른쪽부터 각각 1,2,3단계로 구분되어 있다. 그리고 1단계에서 3단계로 갈수록 도메인의 범위가 작아지게 된다.

어? 그럼 www.google.com은 3단계 도메인 이름으로 이루어져 있는거야?

아니다. www.의 경우 도메인 이름에 포함되지 않는 '호스트 명' 이다. 따라서 www.google.com의 경우 총 2단계의 도메인 네임으로 이루어져 있음을 알 수 있다.

www.google.co.kr은 뭔데?

이 주소도 같은 구글의 주소이다. 차이점은 com과 co.kr의 차이인데 전자의경우 최상위 도메인(.com & .net & .org등)인 .com을 사용한것이고 후자의 경우 국가 정책에 따른 국가 최상위 도메인을 사용한 것이다. 쉽게 말하면 우리나라 인터넷 환경에서 google.com으로 접속시 자동으로 google.co.kr로 접속되는 것이다.

1단계 : 국가도메인(kr)

2단계 : 도메인의 성격(해당도메인이 사업체의 도메인이라는 것을 알려주는 co)

3단계 : 도메인 네임을 등록하는 사람이 원하는 이름

이렇게 총 3단계로 이루어진 것이다.

서로 다른 집이 같은 주소를 가질 수 없듯이 도메인 역시 전 세계에서 유일하게 존재해야 하므로 도메인 네임이라는 규칙이 존재하게 된 것이고 이는 사용자가 임의로 변경 및 생성이 불가능하다. 모든 도메인은 Root 도메인(최상위 도메인) 과 이하에 역트리 구조를 가진 계층적 구조로 이루어져 있다.

1단계 도메인 or Root Domain 을 우리는 TLD(Top-Level Domain)이라 하고

2단계 도메인을 SLD(Second-Level Domain)이라고 부른다.

.com, .net과 같은 TLD는 등록 요건을 갖춘 후 2단계에 원하는 이름을 바로 사용할 수도 있으며 국가 정책에따라 2,3단계를 거쳐 도메인을 설정할 수 있다.

DNS, 그리고 동작 방식

jonghyuck.hong — Mon, 15 Mar 2021 22:09:30 +0900

DNS란 뭘까?

DNS가 뭔지 모르는 사람일지라도 한번도 사용해보지 않은 사람은 없을 것이다.

DNS란 Domain Name System의 줄임말이며 호스트의 도메인을 네트워크 주소로 변환하거나 그 반대의 역할을 수행하는 시스템이다.

DNS 서버는 클라이언트가 도메인 이름을 브라우저에 입력하면 사용자를 어떤 IP주소에 연결할 것인지를 제어해주고 이 요청을 쿼리라고 부른다.

왜 사람들은 DNS를 사용할까?

이유는 아주 간단하다. 지난번 인터넷이 어떻게 동작되는가?jonghyuck.tistory.com/16에서도 언급했지만 우리의 기억력이 아주아주 좋아서 내가 접속하는 곳의 IP 주소를 알고있다면 참 편할 것이다. 하지만 그게 말이 되는가? 다음과 같은 모습을 상상해보자.

인터넷이 어떻게 동작하는가?

참고 문헌: developer.mozilla.org/ko/docs/Learn/Common_questions/How_does_the_Internet_work 인터넷은 어떻게 동작하는가? - Web 개발 학습하기 | MDN 인터넷은 어떻게 동작하는가? 이 글에서는 인터넷의 개념..

jonghyuck.tistory.com

예시 :

(가명) 창모는 아침에 네이버에 접속하기 위해 PC를 켜고 네이버의 주소인 192.492.482.184를 쳐서 들어갔다. 하지만 자신이 찾는 정보가 없어서 구글에 접속하기 위해 183.274.592.184를 주소창에 검색하고 들어갔다. 그런데 뭔가 접속이 되지 않았고 찾아보니 주소가 183.274.592.184 가 아닌 183.274.592.183으로 어제 변경되었다고 한다.결국 창모는 내가구글 IP주소가 변경된것까지 알아야 하냐?하고 불평을 하고 PC를 끄고 그날 하루를 날렸다.

정말 말도 안되는 예시일 수도 있지만 이는 충분히 가능한 일이다. 실제로 특정사이트의 IP는 변경되는경우도 많은데도 우리가 즐겨찾기나 google.com과 같은 주소로 접속할 수 있는것은 누군가(개발자) 바뀐 IP를 도메인에 다시 연결시켜주었기 때문이다. 심지어 더 최악의 경우도 발생할 수 있다. 그럼 왜 DNS를 사용해야 하는지 알았으니 어떻게 DNS가 동작하는지도 살펴보자.

동작방식

출처 : https://www.netmanias.com/ko/post/blog/5353/dns/dns-basic-operation

위 한장의 그림으로 도메인에 대한 동작을 알 수 있다.

PC 브라우저에서 www.naver.com 을 입력한다. 그러면 PC는 미리 설정되어 있는 DNS (단말에 설정되어 있는 이 DNS를 Local DNS라 부른다, 각 PC에는 고유의 설정된 Local DNS값이 존재한다.)에게 "www.naver.com이라는 hostname"에 대한 IP 주소를 물어본다.
Local DNS에는 "www.naver.com에 대한 IP 주소"가 있을 수도 없을 수도 있다. 만약 있다면 Local DNS가 바로 PC에 IP 주소를 주고 끝나고 없다면 아래 과정을 따른다.
Local DNS는 이제 "www.naver.com에 대한 IP 주소"를 찾아내기 위해 다른 DNS 서버들과 통신(DNS 메시지)을 시작한다. 먼저 Root DNS 서버에게 "너 혹시 www.naver.com 에 대한 IP 주소 아니?"라고 물어본다. 이를 위해 각 Local DNS 서버에는 Root DNS 서버의 정보 (IP 주소)가 미리 설정되어 있어야 한다.
여기서 "Root DNS"라 함은 좀 특별한 녀석인데 이 Root DNS 서버는 전세계에 13대가 구축되어 있으며, 미국에 10대, 일본/네덜란드/노르웨이에 각 1대 그리고 우리나라의 경우 Root DNS 서버가 존재하지는 않지만 Root DNS 서버에 대한 미러 서버를 3대 운용하고 있다. 즉, 이 Root DNS란 전세계에 분포되어 있는 거대한 전화번호책 같은 존재이다.
Root DNS 서버가 "www.naver.com의 IP 주소"를 모른다면.Local DNS 서버에게 "난 www.naver.com에 대한 IP 주소 몰라. 나 말고 내가 알려주는 다른 DNS 서버에게 물어봐~"라고 응답을 하게 된다.
이 다른 DNS 서버는 "com 도메인"을 관리하는 DNS 서버이다..
이제 Local DNS 서버는 "com 도메인을 관리하는 DNS 서버"에게 다시 "너 혹시 www.naver.com에 대한 IP 주소 아니?"라고 물어본다.
여기서도 "com 도메인을 관리하는 DNS 서버"에도 해당 정보가 없다면 . 이 DNS 서버는 Local DNS 서버에게 "난 www.naver.com에 대한 IP 주소 몰라. 나 말고 내가 알려주는 다른 DNS 서버에게 물어봐"라고 응답을 한다. 이 다른 DNS 서버는 "naver.com 도메인"을 관리하는 DNS 서버이다. (아니라면 계속 위 과정을 거쳐 찾아낼 것이다.)
이제 Local DNS 서버는 "naver.com 도메인을 관리하는 DNS 서버"에게 다시 "너 혹시 www.naver.com에 대한 IP 주소 있니?"라고 물어본다.
"naver.com 도메인을 관리하는 DNS 서버"에는 "www.naver.com 호스트네임에 대한 IP 주소"가 있고 Local DNS 서버에게 "응! www.naver.com에 대한 IP 주소는 222.122.195.6이야~"라고 응답을 해 준다.
이를 수신한 Local DNS는 www.naver.com에 대한 IP 주소를 캐싱을 하고(이후 다른 넘이 물어보면 바로 응답을 줄 수 있도록) 그 IP 주소 정보를 단말(PC)에 전달해 준다.

이처럼 Local DNS 서버가 여러 DNS 서버를 차례대로 (Root DNS 서버 -> com DNS 서버 -> naver.com DNS 서버) 물어봐서 그 답을 찾는 과정을 Recursive Query라고 부른다.

http://www.naver.com/index.html -> URL
www.naver.com -> HOST NAME
.com -> Top-level Domain Name
.naver.com -> Second-level Domain Name

위 내용은 www.netmanias.com/ko/post/blog/5353/dns/dns-basic-operation에 유창모 님이 설명하신 내용입니다. DNS에 대한 개념을 쉽게 설명해주셔서 참고 했습니다. 좀 더 구체적으로 들어갈수도 있겠지만 우선 이정도만 알고 다른 지식을 쌓는것도 좋은것 같아서 여기까지 설명하겠습니다.

브라우저, 그리고 동작 방식

jonghyuck.hong — Mon, 15 Mar 2021 21:31:01 +0900

우리는 매일 휴대폰, 노트북을 통해서 인터넷을 사용하고 이는 브라우저를 통해서 이루어지는 행동이다. 브라우저가 뭔지 모르는 사람도 있다면 우리가 인터넷을 사용하기 위해서 누르는 크롬, 익스플로러, 사파리등이 모두 브라우저라는 프로그램이다.

브라우저는 사용자가 보고자 하는 페이지를 서버에 요청하고 서버에서 받은 응답을 브라우저에 표시해주는 것이다.

주요 기능

브라우저는 HTML 과 CSS 면세에 따라 HTML 파일을 해석해서 표시하며 이는 웹 표준화 기구인 W3C (World Wide Web Consortium) 에서 정한다. 이는 과거에 브라우저들이 일부 명세만 따르고 독자적인 방법으로 브라우저를 확장시킴으로써 호환성에 심각한 문제를 겪으며 최근에 와서는 대부분의 브라우저가 W3C의 표준 명세를 따르게 되었다.

현재 대부분의 브아우저는 서로의 장점을 모방하며 발전해왔고 현재와 같은 모습이 되었다. HTML5의 명세를 살펴보면 주소표시줄, 상태표시줄, 도구 모음과 같은 범용적인 요소를 제외하면 필수 UI를 정의하지 않았으며 각 브라우저는 이 표준외에 각자만의 특화된 기능을 통해서 사용자를 유치하고 있다고 할 수 있다.

www.html5rocks.com/en/tutorials/internals/howbrowserswork/

How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks

In this comprehensive primer, you will learn what happens in the browser between when you type google.com in the address bar until you see the Google page on the browser screen.

www.html5rocks.com

이곳을 보면 브라우저에 대한 상세한 설명이 나와있는데, 한번 살펴보도록 하자.

기본 구조

유저 인터페이스 : 이전, 다음, 새로고침, 북마크와 같이 페이지를 보여지는 부분외에 브라우저를 사용하는 모든 유저에게 동일하게 보이는 부분
브라우저 엔진 : 유저 인터페이스와 렌더링 엔진 사이에 쿼리를 전달할 수 있게 조작을 담당
렌더링 엔진 : 사용자가 요청한 페이지를 화면에 나타내기 위해 HTML과 CSS를 분석
네트워킹 : http를 요청하고 네트워크 호출에 사용
자바스크립트 해석기 : javascript 코드를 해석 및 실행
UI 백엔드 : 기본적인 UI들 그리는데 사용. 보통 콤보 상자와 창과 같은 기본 위젯을 그리는데 사용
자료 저장소 : 쿠키와 같은 자원들을 저장한다.

그럼 이 모든 과정을 다 알아야 할까?

기본적인 작동과정을 알았다면 중요한게 어떤 부분인지를 먼저 알아야 한다.

위 구조에서 가장 중요한것은 어디일까? 바로 웹서버로부터 응답받은 내용을 UI상에 나타내주는 Rendering engine일 것이다.

어떻게 렌더링 엔진이 작동되는지 알아볼 필요가 있다.

렌더링 엔진의 작동 방식

브라우저가 여러개 있다면 모든 브라우저가 동일한 렌더링 엔진을 사용할까? 당연히 그렇지 않다. 대부분의 브라우저들은 각자의 렌더링 엔진들을 사용하며 이 엔진에 따라 브라우저의 성능이 달라지기도 한다. 대표적으로

Firefox : 모질라에서 만든 Gecko 엔진

Safari & Chrome : Webkit 엔진( opensource)

하지만 렌더링 엔진이 다를지라도 대부분의 동작과정이 비슷하다.

동작과정

HTML 파싱 후 돔트리 구축
렌더 트리 구축
렌더 트리 배치
렌더 트리 그리기

HTML, CSS는 각각의 파서가 존재하며 HTML은 각 태그들로 DOM트리 구성, CSS도 스타일 규칙에 맞게 파싱한 후 같이 '렌더 트리'를 생성
그 후 배치가 시작되는데, 각 노드가 화면의 정확한 위치에 표시되는 것을 의미
그리기 과정 시작
모든 내용을 한번에 파싱된 후 페이지를 보여주기에는 속도가 느릴 수 있으므로 기다리지 않고 파싱된 순으로 배치가 이루어진다
네트워크로부터 나머지 페이지가 전송되는 동안 받은 내용을 먼저 화면에 표기해준다

위 그림 두개는 Webkit 과 Gecko의 렌더링 엔진 구조이다.

위 구조를 보면 다른 용어를 사용하지만 결국 기본적인 흐름은 동일함을 알 수 있다.

1. HTML 파싱 후 돔 트리 구축

HTML 파서는 HTML 마크업을 파싱 트리로 변환한다.

DOM(Document Object Model)은 마크업과 1:1 관계를 맺는다.

2. CSS 파싱 후 렌더 트리 구축

3. 렌더트리 배치

위에서 만든 렌더트리는 이 배치 과정을 통해 각 노드들에게 스크린의 어느 공간에 위치할지 각각의 크기와 위치값을 부여받는다.

4. 렌더트리 그리기

렌더 트리가 만들어지고 레이아웃이 구성되었다면 UI 백엔드가 동작하며 각 노드들을 스타일, 크기, 위치에 맞게 화면에 배치한다. 이 과정이 빨라야 페이지의 로딩이 빠르다고 느끼기 때문에 모든 HTML과 CSS파일의 요소들을 한번에 렌더링엔진으로 넣어 출력하지 않고 일부 콘텐츠가 트리과정을 거쳤다면 먼저 스크린에 띄우고 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어 들어오는 순차적으로 입출력을 진행한다.

HTTP와 응답코드

jonghyuck.hong — Mon, 15 Mar 2021 20:34:49 +0900

HTTP란 Hyper Text Transfer Protocol 의 약자이다.

사실 위 단어에 모든 뜻이 담겨있다. 말 그대로 텍스트 기반으로 인터넷에서 데이터를 주고받을때 사용하는 텍스트기반의 프로토콜이다.

이는 웹에서 사용하는 프로토콜인데, TCP/IP를 기반으로 한지점에서 다른지점으로 데이터를 전송할때 사용된다.

여기서 데이터의 전송은 request와 response로 이루어지는데 이는 아래 동작을 보면 간략히 설명되어 있다.

동작

클라이언트가 브라우저를 통해서 url을 요청(request)하면 해당 서버는 request에 맞는 결과를 응답(response)하는 형태이다.

또한 텍스트 기반으로 통신을 한다고 했는데 Plain text로 부터 JSON, XML, HTML과 같은 형태의 정보를 주고 받을 수 있으며 보통은 클라이언트가 어떤 정보를 어떤 형태로 받고싶은지 명시하여 사용한다.

특징

http의 메시지는 서버와 클라이언트에 의해서 해석된다.
TCP/IP를 이용하는 응용 프로토콜 (Application protocol)이다.
연결 상태를 항시 유지하지 않는 비연결성 프로토콜이다. (Cookie와 Seesion이 이러한 단점을 보완

응답코드

이렇게 간략하게 설명을 했지만 클라이언트가 서버로 request를 보냈을 때 이 요청이 잘못되었는지 어떻게 확인 할 수 있을까?

클라이언트가 서버로 요청을 보내면 서버는 응답을 해준다. 이는 200번대, 300번대, 400번대, 500번대로 이루어진 응답코드로 부터 알 수 있다.

먼저 일반적인 경우이다.

성공 (Succes)

이 응답코드는 200번대로 이루어져 있다.

200 : 정상적인 요청을 받았고 본문에 요청받은 리소스를 포함하고있다.
201 : 정상적인 생성 작업 요청을 받았으며 생성작업에 성공했다.
202 : 요청은 정상적으로 이루어졌으나, 아직 동작을 수행하지 않은 상태
203 : 요청은 성공적으로 이루어졌으나, 요청에 대한 검증은 되지 않은 상태
204 : 요청은 성공적이지만 서버에 제공할 내용이 없음을 의미
205 : 204와 같은 상태이지만 새로고침을 통해서 새로운 내용을 확인할것을 의미
206 : 요청의 일부분만 성공했다.

리다이렉션(Redirection)

리다이렉션의 경우 300번대로 이루어져있다. 리다이렉션이란 보통 http로 접속시 https로 url을 변경시켜 접속시키거나 단축 url 서비스 사용시 실제 접속할 url로 접속시키는 것들을 말한다. 이에 대한 자세한 내용은 추가로 공부해보아야 할 것 같다.

300 : 클라이언트가 동시에 여러응답을 가리키는 URL을 요청한 경우 응답 목록과 함께 반환
301 : 번호가 바뀐 사람에게 전화했을때 바뀐 번호를 알려주는것 처럼 url이 옮겨진 경우 옮겨진 url과 함께 응답
302 : 301과 동일하지만 클라이언트는 여전히 옮겨지기전 url로 요청할것
303 : 요청을 수행하기 위해서는 다른 url로 요청해야 함을 의미
304 : 단시간에 반복적 요청을 할 경우 이전과 요청의 변화가 없을 시
305 : 직접적인 요청이 아니라 프록시를 통해 요청해야 함을 의미
306 : 302와 동일하지만 HTTP Method도 변경없이 요청하여야 함을 의미

에러(Client Error)

아마 서버를 다루는 사람이라면 가장 많이 보게 될 응답일 것이다. 클라이언트가 요청을 잘못했을 경우 에러에 대한 400번대 응답이 나온다.

400 : 클라이언트의 요청이 올바르지 않을 경우
401 : 요청을 위해서 권한 인증등이 요구되는 경우
402 : 결제가 필요한 요청의 경우. 이 코드는 구글 개발 API등에서 특정 개발자가 하루 임계 요청량을 초과한 경우 반환한다고 한다.
403 : 요청이 서버에 의해 거부되었을때, 보통 거부 이유를 숨기고 싶을 시 서버는 403 에러를 통해서 접속을 거절한다.
404 : url을 잘못 입력했을 때 요청한 url을 찾을 수 없음을 의미
405 : 요청한 url이 mothod를 지원하지 않음을 의미
406 : 클라이언트의 요청에 적절한 컨텐츠가 없음을 의미
407 : 401과 동일하지만 프록시를 통한 인증이 필요한 경우
408 : 요청에 응답하는 시간이 너무 많은 시간이 걸림을 의미
409 : 클라이언트의 요청에 대해 서버에서 충돌이 발생함
410 : 요청한 url이 더 이상 사용되지 않고 사라짐
411 : 클라이언트 요청에 Content-length 헤더가 포함되어야 함을 의미
412 : 클라이언트가 조건부 요청을 했는데 그 중 하나가 실패했음을 의미
413 : 요청이 너무 커서 서버에서 처리가 불가능한 경우
414 : 요청 url이 너무 길어서 처리 불가능한 경우
415 : 서버가 이해하지 못하는 유형의 콘텐츠를 요청한 경우
416 : 클라이언트의 요청 내용이 범위가 잘못되었음을 의미
417 : 클라이언트 요청 헤더의 Expect에 대해 서버가 만족 하지 않음을 의미

서버 에러(Server Error)

요청은 올바르지만 서버가 응답하지 않는 경우 500번대 응답을 통해 알 수 있다.

500 : 서버에서 오류가 발생하여 응답 할 수 없음을 의미
501 : 클라이언트 요청에 대한 서버의 응답 수행 기능이 없음을 의미 ( 405와 다른점은 서버가 지원하지 않는 새로운 Method를 사용하여 요청한경우를 의미한다. GET2,POST2와 같은 경우가 해당)
502 : 프락시나 게이트웨이등의 서버에서 응답하며 서버의 부모 서버에서 오류가 발생했음을 의미
503 : 현재 서버가 유지보수등의 이유로 사용이 불가능 한 경우
504 : 서버에서 다른 서버로 요청을 보냈으나 응답지연이 발생하여 처리가 불가능한 경우
505 : 서버가 지원할 수 없거나 올바르지 못한 프로토콜로 요청을 받음

이제 우리가 해야 할 일은 django와 같은 웹서버를 운영중인경우 위 코드에 맞게 오류 코드들을 지정해주어야 한다. 자동으로도 지원이 되지만 클라이언트에게 정확한 정보 전달을 위해서는 위 응답코드를 적재 적소에 사용할 줄 알아야 한다.

인터넷이 어떻게 동작하는가?

jonghyuck.hong — Fri, 12 Mar 2021 17:22:40 +0900

참고 문헌:

developer.mozilla.org/ko/docs/Learn/Common_questions/How_does_the_Internet_work

인터넷은 어떻게 동작하는가? - Web 개발 학습하기 | MDN

인터넷은 어떻게 동작하는가? 이 글에서는 인터넷의 개념과 작동 원리에 대해 설명합니다. 선행지식: 선행지식은 필요없습니다. 하지만 '프로젝트의 목표 설정에 대한 글(Article on setting project goa

developer.mozilla.org

인터넷은 웹의 핵심적인 기술이다. 인터넷의 가장 기본적인 것은, 컴퓨터들이 서로 통신 가능한 거대한 네트워크란 점이다.

인터넷의 역사는 자세히 알려지지 않았지만 1960년대 한 연구 프로젝트에서 시작되었다고 한다. 그리고 1980년대에 들어서 많은 지원이 추가되며 공공 기반의 서비스로 진화해왔다. 인터넷은 지금에 이르기까지 많은 진화를 해왔지만 작동방식 자체는 크게 변하지 않았다. 인터넷은 다수의 컴퓨터를 연결하고 어떤 일이 있어도 연결 상태를 유지할 수 있는 방법을 찾는 방법이다.

몇가지 예시를 살펴보면 현재의 인터넷이 어떻게 이루어져있는지, 왜 그렇게 변화할 수 밖에 없었는지에 대한 이해를 할 수 있다.

1. 단순한 네트워크

A와 B라는 pc가 통신을 하기 위해서는 한개의 통신케이블이 필요하다.

2. 다수의 네트워크

그렇다면 위 사진처럼 다수의 컴퓨터를 연결하는 경우에는 어떨까? 필요한 케이블의 수는 기하급수적으로 늘어나기 시작한다. 심지어 10대가 아닌 100대 1000대의 pc를 연결하기 위해서는? 이는 비용과 시간을 떠나 물리적으로 구현할 수 없을지도 모른다.

3. 라우터의 탄생

이 문제를 해결하기 위해서 네트워크의 각 컴퓨터는 라우터라는 소형 컴퓨터에 연결하기 시작했다. 라우터는 컴퓨터에서 다른 컴퓨터로 보낸 메세지가 올바른 대상으로 도착하는지 확인하는 일종의 우체국 같은 역할을 한다. 그럼 다시 그림에 라우터를 추가해보면 어떨까?

아주 깔끔하게 변했다. 10대의 pc를 연결하기위해서 10개의 케이블만 사용하도록 된 것이다. 하지만 아직 문제는 끝나지 않았다.

4. 네트워크 속의 네트워크

이제 케이블의 제한은 라우터로 해결되었다. 근데 라우터가 하나라면? 라우터 역시 pc 이다. 하나의 pc가 수천, 수억개의 케이블을 다 연결하기는 불가능하다. 과학자들은 다시 고민에 들어갔고 다시 해결책을 내놓게 된다. 라우터가 pc 라면 가까운 거리의 pc들을 라우터에 연결시키고 라우터끼리 연결시키면 되지 않을까??

이렇게 인터넷 비스무리한 규모의 네트워크가 탄생하게 되었다. 하지만 아직 조금 부족하다. 연결의 제약은 해결했지만 거리적 제한은 해결하지 못했다. 위와 같은 네트워크를 다른나라, 다른 지역과 연결하기 위해서는 어떻게 해야 할까? 우리들의 집에는 이미 전화기 기반의 시설이 설치되어 있다. 이는 이미 세계 어느 곳과도 연결되어 있기 떄문에 우리에게 필요한 배선이며 이를 이용할수만 있다면 전 세계와 연결할 수 있게 될것이다.

5. 모뎀의 등장

따라서 우리는 모뎀이라는 특수 장비를 만들었다. 이는 우리 네트워크의 정보를 전화 시설에서 처리할 수 있는 구조로 또 그 반대의 경우로 변환해 준다.

6. ISP

모뎀을 통해서 네트워크는 전화 시설에 연결이 되었다. 이제 우리의 네트워크에서 도달하려는 네트워크로 메시지를 보낼수 있을까? 그렇게 하기 위해서는 네트워크를 인터넷 서비스 제공업체 (Internet Service Provider, ISP)에 연결해야 한다. ISP는 모두 함께 연결되는 몇몇 특수한 라우터를 관리하고 다른 ISP의 라우터에도 엑세스 할 수 있는 회사이다. 따라서 우리 네트워크의 메시지는 ISP 네트워크의 네트워크를 통해 대상 네트워크로 전달된다. 인터넷은 이러한 전체 네트워크 인프라로 구성된다.

7. 컴퓨터 찾기

컴퓨터에 메시지를 보내려면 메시지를 받을 특정 컴퓨터를 지정해야 한다. 따라서 네트워크에 연결된 모든 컴퓨터에는 IP(Internet Protocol)라는 고유한 주소가 있다. 주소는 점으로 구분 된 4개의 숫자로 구성되어 있다.

ex. 192.168.0.1

이 IP주소만 있어도 다른 컴퓨터를 찾아가는데 아무런 문제가 없지만 주소의 이름은 사람이 읽기도, 외우기도 어렵다. 따라서 우리는 '도메인 이름' 이라는 사람이 읽을 수 있는 IP 주소의 이름을 지정할 수 있다.

도메인 주소 : https://www.google.com

Google

www.google.com

IP 주소 : 173.194.121.32 (실제 구글의 주소는 아님. 해당 사이트에 IP 주소를 확인하는 방법은 따로 있으니 관심이 있다면 찾아보자.)

위 두 주소를 통해서 똑같은 사이트에 들어갈 수 있다면 IP 주소보다는 도메인 이름이 사용성이 좋고 따라서 현재 우리가 아는 naver.com 이나 google.com과 같은 웹사이트가 등장할 수 있게 된 것이다.

HTML 공부하기 1 <HTML 시작>

jonghyuck.hong — Fri, 12 Mar 2021 15:46:31 +0900

tcpschool.com/html/intro

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

python을 공부할때 jump_to_python을 참조해서 공부했던 기억이 떠올라서 HTML에도 비슷한 site가 없나 찾아보던 차에 위 사이트를 발견하게 되었다. 우선 따라서 정리를 해보자.

HTML이란?

HTML은 HyperText Markup Language의 약자

웹페이지는 이런 HTML태그들로 구성되어 있다.

HTML 버전

대략적인 버전은 위와 같으며 현재는 HTML5가 사용된다. 자세한 사항은 W3C 공식 사이트에서 확인할 수 있다.

W3C란? World Wide Web Consortium의 약자로 월드와이드웹(www)를 위한 표준을 제정하고 관리하는 중립적인 기관

HTML, CSS, DOM, SVG, XHTML, XML 과 같은 대표적인 웹 표준을 관리한다.

HMTL의 기본 구조

<위 사진을 보면 h1, h2, h3, p가 보인다. 이를보고 마크다운과 비슷하다는 느낌을 받았다. h뒤의 숫자는 제목의 크기를 나타낸다.>

HTML 태그(tag)

tag는 이름을 <>로 감싸서 표현한다. 보통 start tag와 end tag가 쌍으로 존재하지만 태그에 따라서 end tag가 존재하지 않는 경우도 있다. 또한 end tag는 이름앞에 /를 덫붙여 구분한다.

<img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 합니다.

<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시합니다.

<html> : HTML 문서의 루트(root) 요소를 정의합니다.

<head> : HTML 문서의 메타데이터(metadata)를 정의합니다.

- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.

- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있습니다.

<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.

- 웹 브라우저의 툴바(toolbar)에 표시됩니다.

- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.

- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.

<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.

<h1> ~ <h6> : 제목(heading)을 나타냅니다.

<p> : 단락(paragraph)을 나타냅니다.

HTML 요소 구조 (element)

HTML의 요소(element)는 여러 속성(attribute)을 가지며 이는 해당 요소에 추가적인 정보를 제공한다. 이러한 element역시 시작 태그로 시작해서 종료 태그로 끝나게 된다.

주의 할 점은 다음과 같다.

속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며 속성 이름과 속성value로 표현된다.
속성은 언제나 소문자로 작성한다.(HTML5표준에서 속성이름에 대소문자는 구분되지 않는다.)
속성값은 항상 따옴표를 사용해주자.(따옴표 사용을 강제하지는 않지만 이는 오류를 발생시킬 수 있다.) (큰따옴표, 작은따옴표상관없지만 보통 큰 따옴표가 사용된다.)

--> 오류 의 예시

<img>태그의 alt 속성은 이미지를 불러올 수 없는 상황에서 이미지 대신 보이는 문자열을 설정할 수 있다.