본문 바로가기
개발/Web

웹개발 인트로 (개념, 구조, 공부방향)

by amkorousagi 2021. 2. 23.

왜 웹 개발을 해야 하나?

  1. 진정으로 univeral(디바이스에 비종속적인)한 UX(사용자 경험) 제공 가능.
  2. 자신의 아이디어를 서비스로 빠르게 개발하고 배포할 수 있다. 사업/창업에 적합.
  3. 웹 개발자에 대한 많은 수요와 넓은 시장.
  4. 자기 능력을 길러 프리랜서가 되면 억대 연봉도 받을 수 있다.

 

기본적인 서비스 스택

웹개발 인트로
서비스 스택

 기본적으로 웹은 UI를 만드는 것이다. (물론, 웹 개발에 쓰이는 언어로 back end도 만들 수 있다.)

 

웹 환경

웹개발 인트로
웹 환경

 HTTP라는 프로토콜(약속)로 서로 통신한다.

 request(요구)하는 쪽은 오직 User 쪽이고,

 response(응답)하는 쪽은 오직 Server 쪽이다.

 

 GET method를 통해 특정 resource(html 페이지, any data)를 얻기 위해 요청한다.

 기타 다른 method는 다음에 포스팅하겠다.

웹 브라우저의 동작 원리

웹개발 인트로

 웹브라우저는 요술상자가 아니다. 그냥 통신으로 text만 주고받는데 예쁜 웹 페이지가 뚝딱하고 나올 리가 없지 않나?

 

 웹브라우저는 parser와 constructor를 통해 html, css를 DOM tree, frame tree로 바꾸어 렌더링 한다.

 또, js는 js interperter를 통해 실행하여 내부적으로 동적인 페이지를 생산하고 유저 UI 이벤트 등을 처리한다.

 

 

각 언어의 기본 역할

Mozilla html example

 html은 - link(hyper text)와 text, image 등의 리소스를 표현한다.

 좀 밋밋하다.

 

My test page

Mozilla is cool At Mozilla, we’re a global community of technologists thinkers builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human col

mdn.github.io

 

Mozilla html + css example

 css - style을 꾸민다.

 좀 interactive 하지 않다.

 

My test page

Mozilla is cool At Mozilla, we’re a global community of technologists thinkers builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human col

mdn.github.io

 

Mozzila html + css + js example

 JS - 버튼 등 UI, 각종 dynamic 한 활동 등.

 완벽하다!

 

My test page

Mozilla is cool At Mozilla, we’re a global community of technologists thinkers builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human col

mdn.github.io

 

 

웹 개발자 로드맵

 

웹개발 인트로
로드맵

 html, css의 문법 자체는 5분만 봐도 파악할 수 있을 정도로 simple하다.

 모르는 keyword 등이 나오면  w3schools 에서 검색하면 모든 용법이 나온다.

 

 이후 JS 기본 문법을 익히고, 바로 React.js와 Node.js를 가르쳐 주는 무료 강의나 수업을 들으며,

 자기 웹 페이지 5개 정도 만들고 나면 익숙해질 것이다.

 3개월 정도 열심히(하루 8시간 정도) 독학하면 웬만한 신입 웹 개발자들보다 웹 개발을 잘할 수 있다.

 

 이후에는 TypeScript나 Web assembly를 익히는 걸 고려할 수 있다.

 

 모든 막히는 부분에서 구글은 좋은 선생이다. 구글에 다 쳐 보자.

 

HTML Tutorial

HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try it Yourself" With our "Try it Yourself" editor,

www.w3schools.com

웹에 관한 토픽

  • 웹 어셈블리 : web을 js가 아닌 c, c++ 같은 low level의 언어(웹 브라우저의 js 런타임 환경인 v8도 c++로 짜여진 것)로 개발하여 빠른 성능.
  • 크롬 os : 클라우드 컴퓨팅의 일종으로 되도록 설치 없이 웹을 통해 타 프로그램을 이용하는 os.
  • DB 리스 : DB를 개발자가 운영하지 않고, mongo altas 같은 플랫폼에 맡김.

 

개발 시작하기 좋은 곳

 생활 코딩 : html, css, js와 웹 전반 기초 지식 및 개발자 마인드를 배우기 좋은 곳

 

WEB1 - HTML & Internet - 생활코딩

--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여

opentutorials.org

 풀 스택 오픈 : 독일의 헬싱키 대학의 대중에게 개방된 온라인 강의. react, node 더 나아가 GraphQL, TypeScript 도 공부할 수 있다.

 

Full stack open 2020

Open online course on Javascript based modern web development by University of Helsinki and Houston Inc..

fullstackopen.com

 

마치며

 웹 개발을 처음 접하는 사람에게 조금이라도 도움이 되었으면 해서 포스팅하였다.

 꾸준히 성실히 한다면 누구나 웹 개발을 할 수 있다.

 미적 감각이 있는가는 또 사람마다 다르겠지만, 그 또한 개선될 수 있다고 본다.

 이 글을 읽었다면 당장 로드맵에 따라 행동하기 바란다.

 조던 피터슨이 말하기를

목표를 위한 더 많은 행동만이 너를 목표에 데려갈 줄 것이다.

라고 하였다. 조금씩이라도 행동하기 바란다.

'개발 > Web' 카테고리의 다른 글

DOM 은 무엇인가?  (0) 2021.02.28
웹팩과 바벨 개념과 역할  (0) 2021.02.28
JavaScript 기본 문법 정리  (0) 2021.02.21
CSS 기본 문법 정리  (0) 2021.02.20
html 기본 문법 정리  (0) 2021.02.19

댓글