2020. 5. 14. 15:49ㆍ카테고리 없음
웹 브라우저와 웹 서버
*웹 브라우저 의미
: 인터넷 연결을 위해서는 반드시 웹 브라우저를 통해야만 인터넷 접속이 가능함. 이렇게 인터넷으로 연결해주는 프로그램을 웹 브라우저라고함.
-웹 브라우저의 종류
*웹 서버
: 웹 브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램
-주된 기능
: 웹페이지를 클라이언트에게 전달하는 것이고, 주로 그림, css, 자바스크립트를 포함함 HTML 문서가 클라이언트로 전달. 또한, 클라이언트로부터 콘텐츠를 전달받는 것도 웹서버의 기능에 속한다.
-웹 서버 종류
: 아파치 HTTP 서버, 마이크로소프트 인터넷 정보 서비스(IIS) , Google Web Server, Lighttpd, LightSpeed, Mongoose
크로스 브라우징과 벤더 프리픽스
크로스 브라우징(Cross Browsing)
: W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 기술로, 비슷하게 만들어 어떠한 웹브라우저 환경에서도 이상없이 작동되게 하는 웹페이지를 제작하는 방법.
쉽게 말해, 인터넷익스플로러(IE), 크롬, 사파리, 파이어폭스, 오페라 등의 브라우저 종류와 상관없이, 홈페이지를 이용할때 이상 없이 작동될 수 있도록 웹페이지를 제작하는 것.
벤더 프리픽스(Vendor Prefix)
: 세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있음. 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미.
즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용.
쉽게 말해,
CSS에 새로운 속성을 추가하기 전에, 일종의 테스트와 실험 기간으로 임시적으로 접두어를 사용하는 것. 표준으로 만들어지기 전에 일어날 문제들을 사전에 막기 위한 것.
-예제
: 브라우저 접두어를 앞쪽에 쓰고, 맨 마지막에 표준 속성을 씀.
접두어 버전을 사용하는 브라우저는 그것을 이용 할 것이고, 이해하지 못하는 브라우저는
그 속성을 무시. 표준을 지원하는 브라우저는 맨 마지막 있는 속성을 실행.
웹과 인터넷의 차이
인터넷>웹
인터넷 기능 중에서 HTTP 프로토콜을 사용하는 것이 웹이다.
1.인터넷/컴퓨터가 서로 연결되어 통신을 주고받는 컴퓨터끼리의 네트워크
전 세계 컴퓨터들을 하나로 연결하는 거대한 컴퓨터 통신망을 의미한다. 인터넷은 클라이언트와 서버로 구성되며, TCP/IP라는 기본 프로토콜을 통해 제공되고 있다.
1.1인터넷의 특징
- 인터넷은 서로 동시에 참여할 수 있는 양방향 통신을 제공한다.
- 메시지를 보내는 사람과 받는 사람 모두 시간에 제약을 받지 않고 컴퓨터가 네트워크에 연결만 되어 있다면 언제든지 메시지를 주고 받을 수 있다.
- 초기 인터넷에서는 텍스트로만 통신이 가능했지만 현재는 이미지, 음성, 동영상 등 다양한 포맷으로 통신이 가능하다.
- 인터넷은 서로 알 수 없는 익명성을 제공한다.
2.웹/ 인터넷상에 정보가 얽혀있는 무형의 정보 네트워크
월드 와이드 웹(World Wide Web)이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다. 간단히 줄여서 WWW나 W3라고도 부르며, 간단히 웹(Web)이라고 가장 많이 불린다.
2.1 웹의 특징
-웹은 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다. (*하이퍼텍스트(hypertext)란 문서 내부에 또 다른 문서로 연결되는 참조를 집어 넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술을 의미한다.)
이때 문서 내부에서 또 다른 문서로 연결되는 참조를 하이퍼링크(hyperlink)라고 부른다. 웹에서는 HTML이라는 언어를 사용하여 누구나 자신만의 문서를 작성할 수 있다. 또한, 이렇게 작성된 웹 상의 문서에 HTTP라는 프로토콜을 사용하면 누구나 검색하고 접근할 수 있게 된다.
3. 웹의 구성
웹에서는 HTML 언어를 사용하여 작성된 하이퍼텍스트 문서를 웹 페이지(web page)라고 부른다. 이러한 웹 페이지들 중에서 서로 관련된 내용으로 작성된 웹 페이지들의 집합을 웹 사이트(web site)라고 한다. 웹은 이렇게 작성된 수많은 웹 페이지들이 하이퍼링크(hyperlink)를 통해 서로 연결되어 구성된다.
*참고*
유저가 웹 페이지에 포함된 하이퍼링크를 따라 다른 웹 페이지로 계속 이동하는 것을 웹 서핑(web surfing)이라고 부르며, 이때 유저가 웹 페이지를 보기 위해 사용하는 프로그램을 웹 브라우저(web browser)라고 한다.
웹 브라우저ex) 인터넷 익스플로러, 크롬, 파이어폭스..
도메인과 UAL, 포트
1. 도메인
1.1아이피주소
-고유 식별 숫자 형태 (집 주소)
Ex)네이버의 IP주소는 222.122.195.6
1.2도메인
-인터넷상에서 개인이 소유하고 있는 인터넷 주소
- 사람이 인식하기 어려운 숫자형태의 아이피를 문자형태의 도메인으로 기억하여 연결 시켜주는 역할을 하는 주소 체계
Ex)네이버의 도메인은 www.com
*참고*
.com : 영리를 목적으로 하는 기업이나 단체
.net : 네트워크를 관리하는 기관
.pe.kr : 개인을 위한 도메인
.kr : 한국 대표 도메인
.go.kr : 정부기관
2. URL /Uniform Resource Locators
-인터넷 상의 파일 주소
2.2URL의 구조
*참고*
http : 통신규약, 통신프로토콜
http는 인터넷에서 서로 다른 컴퓨터끼리 데이터를 주고 받기 위한 규칙, 즉 통신 규약이다.
통신 규약 뒤에는 콜론(:)을 붙이고 도메인 네임이나 IP 주소를 더 써야 하는 경우에는 슬래시 두 개(//)를 덧붙인다.
이 아래 속한 웹페이지에 들어가게 되면 도메인 이름뒤에 슬래시가 더 붙게 된다.
포트(포트넘버)
논리적인 접속장소
포트번호는 인터넷이나 기타 다른 네트워크의 메시지가 서버에 도착하였을 때, 전달 되어야할 특정 프로세스를 인식하기 위한 방법이다
네트워크를 통해 데이터를 주고 받는 프로세스를 식별하기 위해 호스트 내부적으로 프로세스가 할당받는 고유한 값을 포트넘버라고 부른다.
ex) 포트넘버 : ftp://000.000.000.000:21
IP주소000.000.000.000 : 포트넘버: 21
*참고*
포트 종류3가지
0번 ~ 1023번 : Well-known port, 잘 알려진 포트
1024번 ~ 49151번 : registered port, 등록된 포트
49152번 ~ 65535번 : dynamic port, 동적 포트
JavaScript(자바스크립트)
자바스크립트(JavaScript)
자바스크립트는 웹 개발 스크립트 언어 중 가장 많이 쓰이는 객체지향 언어입니다. 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
현재 대부분의 웹 브라우저에서 자바스크립트가 내장되어 있습니다. 변수를 미리 선언하지 않아도 브라우저가 자동으로 파악하고인터프리터 언어로 컴파일 과정을 거치지 않습니다.
자바(Java)와 관계
자바와 자바스크립트는 이름만 놓고 서로 관련이 있는 언어로 생각되기 쉽습니다. 하지만 두 언어는 서로 관련이 없으며 모두 C언어를 기반으로 만들어져 문법상 비슷합니다. 자바는 대표적인 객체지향언이어고 컴파일 과정을 거치며 자바스크립트는 클라이언트용 언어로 인터프리터 언어로 컴파일 과정을 거치지 않습니다.
제이쿼리(jQuery)
제이쿼리는 자바스크립트로 만든 라이브러리로 생산성을 향상시켜줍니다. 선택자가 css와 동일해서 쓰기 편하고 배우기 쉽다는 장점이 있습니다.
HTML 파일에 임포트 시켜서 사용하고 간결한 코딩이 가능해 개발 속도가 빨라지는 장점이 있지만
처리 속도 부분에서 성능이 떨어지고 DOM 문제가 많아서 규모가 큰 프로젝트에는 사용하지 않는 것이 좋습니다. 문서구조가 복잡하고 특히 여러항목의 값을 동시에 처리할 때 JQuery는 속도가 느리고 Java script는 빠른 속도를 자랑합니다. 둘 다 적절하게 사용하는 것을 추천합니다. 평상시에는 jQuery를 쓰고 빠른 속도를 요하는 부분에서는 자바스크립트을 사용하는 것이 좋습니다.
평상시에는 jQuery 를 익혀 사용하다가도, 빠른 속도를 요하는 부분에서는 자바스크립트를 사용하는 것이 좋습니다.
HTTP
[ hypertext transfer protocol ]
요약 인터넷에서, 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약을 말한다.
그림) 서버와 클라이언트의 관계를 이해하고 HTTP을 통해서 서로 교환, 응답하고 있다.
인터넷에서 하이퍼텍스트(hypertext) 문서를 교환하기 위하여 사용되는 통신규약이다. 하이퍼텍스트는 문서 중간중간에 특정 키워드를 두고 문자나 그림을 상호 유기적으로 결합하여 연결시킴으로써, 서로 다른 문서라 할지라도 하나의 문서인 것처럼 보이면서 참조하기 쉽도록 하는 방식을 의미한다.
http는 1989년 팀 버너스 리(Tim Berners Lee)에 의하여 처음 설계되어 인터넷을 통한 월드 와이드 웹(World-Wide Web) 기반에서 전 세계적인 정보공유를 이루는데 큰 역할을 하였다. http의 첫번째 버전은 인터넷을 통하여 가공되지 않은 데이터를 전송하기 위한 단순한 이었으나, 데이터에 대한 전송과 요구·응답에 대한 수정 등 가공된 정보를 포함하는 프로토콜로 개선되었다.
인터넷 주소를 지정할 때 'http://www....'와 같이 하는 것은 www로 시작되는 인터넷 주소에서 하이퍼텍스트 문서의 교환을 http 통신규약으로 처리하라는 뜻이다.
HTTPS는 HTTP를 보완으로 나온 것으로 S(secure socket)을 추가한 것이다. 기본골격이나 사용목적은 서로 거의 동일하고 단지 데이터를 주고 받는 과정에 보안 요소가 추가된다는 것이다.
보안 기능이 추가된 만큼 처리 속도는 느릴 수 밖에 없지만 요즘 서버와 네트워크 상태가 우수하면서 HTTP와 HTTPS의 차이가 체감하기 어려워졌고, HTTPS를 사용하는 웹사이트가 많아졌다.
계속 HTTP를 사용한다면 가벼운 웹서핑은 괜찮지만 자료를 주고 받는 경우라면 심각한 개인 정보 유출로 이어질 수 있다. 그리고 정보검색시 “검색시 우선순위”에 밀리게 된다. 크롬 웹브라우저의 경우 ‘주의요함’이란 표시와 함께 HTTPS를 사용하지 않는 사이트라는 사실을 알려준다. 검색 엔진 최적화를 위해서도 HTTPS보안 접속을 적용해야 한다.
프론트엔드
사이트와 직접적으로 상호작용하게 되는 부분을 프론트 엔드라고 합니다.
즉, 사용자의 화면(브라우저)에 나타나는 웹 화면을 나타낸다고 볼 수 있는데, 그것에서 나아가 사용자가 사이트와 상호작용하는 모든 부분에 대한 개발, 관리, 유지 보수를 하는 것이 프론트엔드 개발자라고 할 수 있다. 프론트엔드 개발자는 백엔드 개발자가 만든 집의 내부 설계를 담당한다고 볼 수 있다.
프론트엔드 개발자의 종류
UX Designer : 사용자에게 최상의 편리함을 제공하기 위한 사이트의 구성 및 기능 담당
Web Deginer : UX Designer가 구성한 것을 토대로 디자인을 입히는 역할
Front-End developer : 위의 디자인을 웹 어플리케이션으로 구현
백엔드
백엔드(Back-End) 개발자는 눈에 보이지 않는 서버에서 작용하는 기술을 다루는 직군입니다. 백엔드는 UI나 GUI( graphical user interface, GUI)는 사용자가 편리하게 사용할 수 있도록 입출력 등의 기능을 알기 쉬운 아이콘 따위의 그래픽으로 나타낸 것) 로 구성된 화면의 통신이나 요청에 대하여 DB나 인터페이스 등을 통해 시스템 구성 실체에 접근하는 것입니다. 사용자와 만나지 않고 Front-End와 연동하여 기술적인 부분을 처리합니다.
백엔드 종류
서버관리자 : 서버 환경설정, 서버구성 관리
DB관리자 : DB 설계, Data 관리 및 최적화
Back-End developer : 서버 자체를 코딩
퍼블리셔
퍼블리셔는 앞서 설명한 퍼블리싱을 목표로 웹 디자인 작업과 코딩으로 웹 사이트를 제작하고 편집하는 일을 합니다. 퍼블리싱에 집중해서 일을 처리하는 사람을 웹 퍼블리셔라고 볼 수 있다.
퍼블리싱: 웹 사이트를 제작할 때, 웹 디자이너가 디자인한 것을 웹 표준성과 접근성에 부합하도록 재정리하는 것.
Full Stack Developer
프론트엔드 개발과 백엔드 개발 간에는 흑백 구분이 없는 경우가 종종 있습니다. 프론트엔드 개발자는 종종 추가 백엔드 기술을 습득해야하며 그 반대의 경우도 있습니다. 개발자는 여러 분야를 넘나들어야 할 때가 많아 종종 제너럴리스트가 되어야 합니다. 풀스택 개발자라는 호칭은 프론트엔드와 백엔드 모두에서 교차적으로 작업 할 수 있는 역할을 지칭하는 것. 말 그대로 풀패키지(full package)를 제공하는 개발자라는 뜻입니다.
<예시>
예를 들어 '회원 가입' 페이지를 만든다고 가정하면?.
- 웹 디자이너: 회원가입 페이지 디자인.
- 웹 퍼블리셔: 디자인 넘어온 것 자르고 분해해서 HTML 코드로 코딩. 물론 CSS도 함께 사용. 한마디로 psd를 HTML로 코팅한다고 봐도 된다.
- 프론트 앤드 개발자: 아이디가 숫자로 시작되지 않게 체크, 패스워드 두 개 동일하게 썼는지 체크, 주소 창 기능 만들기, 전화번호 입력에 숫자만 들어가게 하기, 유효한 이메일 체크, 빈 칸 없이 다 썼는지 체크 등 모듈 만들고, 때에 따라 적당한 팝업이나 메시지 뿌리고 등등 '작동하는 기능들' 제작.
- 백앤드 개발자: 뒷단에서 다시 한 번 데이터 체크. 아이디 중복 모듈 제작 등 DB 입출력. 회원가입을 할 때 저장되는 개인정보, 그리고 로그인을 할 때마다 각 계정의 정보가 불러와지는 과정 역시 백엔드 개발자 덕분
와이어 프레임
: 화면 단위의 레이아웃을 설계하는 작업. 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용(UX/UI 설계에 집중 )
즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 단순한 선과 회색박스들로 보일 수 있겠지만, 디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소를 모두 파악하여 전략적으로 설계되어야 하므로 중요도가 높습니다.
구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시될 내용) 및 기능(인터페이스의 작동 방식)을 설명하는 데 사용.
와이어 프레임 툴 : 손그림, 파워포인트 , 키노트, 스케치 , 일러스트, 포토샵 등
**와이어 프레임 제작 사이트
1. Moqups (https://moqups.com)
2. UXPin (http://www.uxpin.com)
3. Balsamiq (https://balsamiq.com)
4. Proto.Io (https://proto.io)
스토리보드
:디자이너, 개발자가 참고하는 최종적인 산출문서. 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능정의, DB연동 등 서비스 구충을 위한 모든 정보가 담겨있는 문서. (개발의 설계도이자 작업지침서 )
기획자에 의해 스토리보드가 작성되어지면 , 디자이너는 스토리보드를 보고 디자인을 하고, 프로그래머는 스토리보드를 보고 프로그램을 설계하고 코딩하게 된다. 따라서 스토리보드가 잘못되면 잘못된 디자인, 잘못된 프로그램이 나올수 있다. 그만큼 중요한 작업이다.
스토리보드 툴 : 파워포인트, 키노트, 스케치, axure