인터넷프로그래밍 #1-1 인터넷 프로그래밍 개요 (비주얼 스튜디오 설치)

인터넷프로그래밍 
1-1 인터넷 프로그래밍 개요

 

단원 목표

1. 인터넷 프로그래밍의 개념과 HTML5, CSS#, JavaScript의 역할과 관계에 대해 설명할 수 있다.

2. 인터넷 프로그래밍의 구성요소를 나열하고 설명할 수 있다.
3. 비주얼 스튜디오 코드를 설치하고, 사용법을 설명할 수 있다.

 

 

인터넷(웹) 프로그래밍

1. HTML특징
2. 다양한 태그 요소 사용법
3. CSS의 다양한 선택지, 속성의 사용법
4. JS 의 문법과 문서 객체 모델 학습

 

*프론트엔드 프로그래밍 필수 요소 HTML+CSS+JAVA SCRIPT 학습

HTML - 문서의 구성과 뼈대
CSS 문서의 디자인 요소
JS - 문서의 동적 기능
(위 3가지 필수요소 + JQuery 라이브러리 + 부트스트랩 프레임워크 공부 => 효율적인 프로그래밍)
*실습을 통해 프론트엔드 개발자로 활동하기 위함 + 백엔드 개발자로써 기본 준비
*프론트엔드 관심 있으면 수강

 

인터넷프로그래밍 : 하이퍼텍스트 프로토콜(HeperText Protocol)을 활용하여 월드와이드웹을 통해 정보를 공유하는 환경을 구현하는 것

하이퍼텍스트 프로토콜 (HeperText Protocol)
하이퍼텍스트(HyperText)

-문서의 개체(텍스트, 이미지, 영상 등)가 서로 연결되어 있는구조
-하이퍼링크(Heperlink) : 문서와 문서 사이를 이동할 수 있는 기능
-링크, 글자/이미지 클릭으로 다른 문서로 이동 할 수 있게 되어 있는 문서

 

 

=> 하이퍼텍스트 프로토콜로 약속된 문서를 만들어 WWW 라는 통로를 통해 정보 공유. => 인터넷 프로그래밍(=Web 프로그래밍)

프론트엔드 : 사용자 입장에서 사용자가 대면할 수 있는 환경   

ex) html5, css3, js

사용자<-> 웹브라우저/모바일(웹)앱

백엔드 : 사용자의 요청 정보 가공/불러오기 -> 웹브라우저 (서버의 뒤에 존재하는 프로그램 환경)
ex) php, java(jsp), .net, python, node.js, MySQL

서버->파일서버  or  데이터베이스

프론트엔드      -       네트워크, 통신(Network, Communication)         -       백엔드


HTML5(HyperTextMarkupLanguage) 
하이퍼텍스트(HeperText) 마크업 언어(MarkupLanguage)

CSS(Cascading Style Sheets)
캐스케이딩 

-폭포처럼 순차적으로 정보 전달. 
-우선 순위에 따라 적용(태그들 적용 순서)
스타일시트 

-디자인 규약/문서
-웹페이지의 디자인(스타일)을 정의

*숫자는 업그레이드 버전 넘버임. 현재는 html은 5 css는 3

JavaScript(jQuery)
JS 

-동적기능 처리 (웹을 풍부하게 만들어주는 상대적으로 가벼운 프로그래밍 언어)
jQuery(JS library)
-자바스크립트 라이브러리
-자주 사용되는 자바스크립트 함수들을 모아 놓은 것
-자바스크립트보다 시간과 노력이 절약됨

*전형적인 프로그래밍 언어 - C, C++ C#, php, java, python

 

인터넷 프로그래밍의 구성요소
1. 웹브라우저(Web Browser) : 크롬-Google, 사파리-Apple, 엣지-Microsoft, 파이어폭스-Mozilla, 오페라-Opera Software
*크롬 사용자가 현재 압도적으로 많다.
2. 웹 편집기(Web Editor)
-텍스트 편집기 ex. 노트패드++, 에디트 플러스, 울트라
-코드 에디터,  ex.비주얼 스튜디오코드, 서브라임텍스트, 아톰, 브래킷, 드림위버
*비주얼스튜디오코드가 가장 많이 사용됨. 무료인데다가 웹 프로그래밍 뿐만 아니라 다양한 언어의 코딩이 가능
-웹기반 코드 편집기/통합개발환경(IDE: Integrated Development Environment)  ex. 코드펜, 라이브위브, 구름

3. 앱 개발 방식의 특징
Native App : 모바일 기기에 최적화된 언어로 개발된 앱
안드로이드 SDK 를 이용해 Jaca, Kotlin 언어로 만드는 앱
아이폰 앱 iOS SDK를 이용해 Objective-C, Swift로 만드는앱
-카메라, GPS, 주소록 등 모바일 기기에서 제공하는 하드웨어 서비스를 이용
-네이버 지도, 카카오톡, Youtube 등
Web App : 앱의 기반이 되는 콘텐츠 영역은 HTML 기반의 웹언어로 개발된 앱 
-HTML, CSS, JS 로 개발하여 모바일 기기에 맞게 재구성하여 개발 (적응형 앱 Adaptive App, 반응형 앱 Responsive App)
-별도의 설치과정 X, 모바일 기기의 하으뒈어 서비스 이용 불가
-크롬에서 접속한 네이버, 다음, 구글 등
Hybrid App : 모바일 웹과 네이티브 앱의 장점을 결합한 것
-HTML, CSS, JS 로 개발하여 모바일 기기의 하드웨어 기능(카메라, 음성검색 및 인식 등) 을 이용할 수 있도록 패키징 처리(Flutter, Cordova, Ionic 등)하여 앱으로 배포
-웹기술만으로 쉽게 개발할 수 있고, 모바일 하드웨어 기능을 제어할 수 있음
-구글 앱, 다음 앱, 네이버 앱 등
Progressive Web App: 하이브리드 앱의 단점을 보완한 것
-네이티브 앱의 느낌을 주면서도 설치과정 없이 "바로가기"로 사용 가능
-오프라인에서도 사용 가능
-다양한 플랫폼에서 실행 가능
-https를 통해 제공되므로 안정성 확보
-네이티브 앱보다 훨씬 저렴하고 빠르게 개발
-리액트, 앵귤러 등을 활용하여 개발 ex.Starbucks, Twitter, Pinterest, Uber 등

 

 

 

비주얼스튜디오
http://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

*system installer 추천

-확장팩은 개인 취향 껏. (Beautify, Html Preview, 한국어확장팩, Live Server 추천)

 

 

w3schools.com

도 활용해서 실습 할 수 있다.