생활코딩 - 웹 애플리케이션 만들기

1.웹 어플리케이션을 만드는 순서

start small, 작게 시작해서 내 서비스의 반응을 살펴보고 점차 확대해가는게 바람직하다. 기능을 추가할때마다 뒤따르는 작업량이 지수폭발 하듯 많아지기 때문에 신중해야 한다.

기획 -> 디자인,개발 -> 테스트 -> 반복,수정

QA(QualityAssurance): 테스팅 전문직

2.구상

3.기획

-개념: 

UserInterface 모델링 - 사용자 입장에서 동작하는 기능을 가상으로 만들어보는 것

-사용 도구

손으로직접

파워포인트

펜슬(무료)

팔사믹(유료)

4.인터넷과 웹의 역사

인터넷은 환경, 웹은 그 안에 있는것

웹서비스란?

컴퓨터와 컴퓨터가 웹페이지 정보를 주고 받을 수 있도록 고안 된 네트워크 환경

HTTP는 웹브라우져와 웹서버 간의 통신규약이다.

HTML은 실제 정보를 담고 있는 웹페이지를 만드는 프로그래밍 언어

도우미 - css, javascript, php, MySQL

FTP - 파일 전송

5.서버와 클라이언트

개념:

웹서비스는 서버와 클라이언트라는 체계 안에서 동작한다.

서버와 컴퓨터 동작 원리는 같으나 서버는 안정성을 높인 것.

클라이언트: 웹브라우져가 설치되어 있는 컴퓨터, 요청하는쪽

서버: 웹서버가 설치되어 있는 컴퓨터, 응답하는 쪽

웹브라우져에 주소입력 -> 클라이언트가 주소가 위치한 서버에 정보를 요청한다.

-> 서버에 저장되어있는 문서를 읽어서 클라이언트에게 전송한다.(응답한다.)

웹서버의 종류:

Apache(오픈소스)

Nginx(오픈소스)

IIS(마이크로소프트)

bitnami: 서버 소프트웨어를 쉽게 설치하도록 도와주는 프로그램(APM SETTUP-국내)

http://bitnami.com/stack/wamp

6.웹서버 설치

localhost/index.html

localhost: 주소에 해당하는 서버 찾는다.

/index.html: 서버(htdocs폴더)에 저장소에 있는 파일(index.html)을 요청 하는 것

htdocs - Document Root는 웹서버가 문서를 찾는 최상위 디렉토리, 위치는 변경가능

인코딩은 UTF-8으로 설정

7.서버 제어

8.프로그래밍 언어

9.HTML 이론

HyperTextMarkupLanguage

HyperText - 문서와 문서가 링크로 연결되어 있다.

MarkupLanguage - 

링크는 HTML의 본질

태그

10.HTML 실습

아톰에디터, http://atom.io

11.개발도구

버전 관리 시스템 - 변경된 코드들의 역사를 기록하는 시스템 문제가 어디에서 발생했는지 탐색하게 해주고 작성된 코드를 별로도 저장해주는 역할을 해줌.

협업과정에서 참여자가 파일 수정시에 질서를 잡아주는 역할도 함.

http://opentutorials.org/course/1492

12.CSS 이론

Cascading Style Sheet

개념:

디자인을 위한 언어, HTML을 기반으로 사용가능

<style> (내용) </style>

13.CSS 실습

14.프로그래밍(JS, PHP 이론)

웹이 등장 후, HTML 언어가 가장 최초로 사용됨.

CSS - 비주얼 보완하는 웹디자인 등장

Javascript - 웹페이지가 사용자에 동작에 따라서 상호동작

php, jsp, 장고, 루비온레이스? - 웹페이지 생산성 증가

MySQL, 오라클 - 데이터 베이스 관리, 암호화

웹서버에서 동작하는 언어

웹서버가 PHP 인터프리터 혹은 엔진에 요청

PHP 엔진은 HTML 속에 위치한 <?php (문법 내용:데이터 베이스의 어떤 내용을 가져온다.) ?>태그 안에 적혀있는 문법을 실행한다.

이 후 웹서버가 최종적으로 HTML 전체 내용을 클라이언트에게 보여준다.

15.Javascript vs PHP

16.웹페이지에 코드 삽입하기

php - 서버에서 PHP 인터프리터가 코드를 해석한 결과가 웹브라우져에 출력된다.

Javascript - 웹브라우져에서 바로 태그의 시작과 끝부분을 자바스크립트가 코드를 해석하게 하고 그 결과는 웹브라우져(클라이언트)에서 바로 출력된다.

17.데이터타입과 연산자

Javascript - ducument.write("10" + "10"), 결과는 1010, 그 이유는 "10"는 텍스트이기 때문에

php - "10" + "10" , 결과는 20, 그 이유는 연산자+가 들어가 있어서 자동으로 숫자로 인식하기 때문

"10"."10" -> 1010, 중간에 .점을 넣으면 텍스트를 붙여서 출력한다.

18.디버깅

 Javascript - 메뉴 - 도구 더보기 - 개발자 도구 - 상단에 elements 우측 옆에 Console을 클릭

php - 폴더 안에 에러 로그 확인

19.변수

개념:

바뀔 수 있는 값, 어떤 값을 제어하기 위해선 변수로 지정해줘야 한다.

javascript - 변수 = "값"

php - $변수 = "값"

%name = "hello";

echo "안녕하세요.".$name;

20.비교

boolean -> True or False?

21.조건문

22.로그인하기

javascript - prompt

<script>

passworld = prompt("비밀번호");

if(passworld == 1111) {

ducument.write("안녕!");

}else {

ducument.write("누구세요?");

}

</script>

23.반복문

24.배열

개념:
Array, 연관된 정보들을 담는 그릇

javascript - list = newArray("one","two","three");

php - $list = array("one","two","three");

25.함수

javascript - function function_name(){

}

function_name();

php - function function_name(){

}

function_name();

26.UI와 API

User Interface: 사용자 편의

Application Programming Interface:프로그래밍 편의

interface: 접점

프로그램이 만들어지고 사용자에게 전달되는 과정

사용자

↓

UI

↓

Web Application

↓

웹 브라우져

↓

운영체제

↓

프로그래밍 언어

↓

어셈블리어

↓

기계어(low level technology) ex.10010001

↓

전자공학

↓

전기공학

↓
물리학

27.프로그래밍 접근방법

수단과 목적을 구분해야 한다.

언어를 배우기 위해 공부하는 것이 아니라

원하는 프로그램을 만들기 위해 언어를 공부하는 것이다.

언어를 공부하는 동시에 직접 프로그램을 만들어본다.

1.API를 탐험

2.프로그래밍 언어로 API조합해서 어플리케이션을 만든다.

3.그것을 좋아할 관객을 찾는다.

4.한계를 경험한다. 

5.더 잘할 수 있는 방법을 연구하고 찾는다.

예시) 알고리즘,데이터 스트럭쳐, 디자인 패턴, 프래임 워크, 컴퓨터 구조

28.자바스크립트 실습

29.PHP 실습

30.데이터베이스(MySQL)이론

데이터 베이스란?:
정보를 관리하는 전문 어플리케이션

파일 - 가장 원시적인 데이터 관리 수단

데이터베이스 - 안전하다. 암호화, 백업 시스템

   인덱스가 빠르다. 저장된 정보를 빠르게 찾을 수 있도록 정리

   프로그래밍적 제어가 가능

   ex)MySQL, MSSQL, Oracle

MySQL:

웹과 함께 성장했다. 오픈소스로 가장 많이 이용된다.

(MySQL에서 나온 엔지니어들이 MariaDB를 만들었다.)

테이블 시스템 - 구조화된 정보

Structured 구조화된
Query 질의,질문하다

Language 언어

데이터베이스들은 표준화된 프로그래밍 언어로 구현되어 있다.

MySQL Client에서 내린 명령이 MySQL Server로 전달된다.

그리고 서버는 테이블 형태의 정보를 클라이언트에게 보낸다.

서버와 클라이언트는 변할 수 있는 상대적인 개념.

-MySQL Monitor 실행 명령어

mysql -hlocalhost -uroot -p

-p와 비밀번호를 같이 입력하면 해킹 위험이 있다.

31.관계형 데이터베이스 이론

-관계형 데이터베이스(MySQL, MSSQL, Oracle)

개념: 테이블의 중복되는 특정 데이터를 JOIN함수로 연결해서 가상의 테이블을 만드는 것?

SELECT title,name FROM topic LEFT JOIN user ON topic.author = user.id

객체형 데이터베이스

계층형 데이터베이스

NoSQL

32.관계형 데이터베이스 실습

33.보안

Javascript는 사용자 컴퓨터에서 정보를 빼오거나 사용자를 특정페이지로 보낼 수 있다. 그 특정페이지를 사용자가 이용하려는 홈페이지와 똑같이 만들고 정보 입력을 유도하고 결과적으로 정보를 빼올 수 있다.

사용자가 입력한 코드가 작동하지 않고 그대로 출력하도록 만든다. 

echo htmlspecialchars('<script>alert(1);</script>');

태그는 출력하고 싶지 않을때 - strip_tags

34.라이브러리

개념:

중복해서 사용되는 로직을 재사용 할 수 있도록 모듈화 시킨 것.

다양한 프로젝트에 재사용 할 수 있다.

중복의제거 - 유지보수의 편의성,코드 양의 감소, 가독성 향상

35.라이브러리2

36.인터넷

IP 주소 - Internet Protocol Address, 

클라이언트와 서버 둘다 IP를 가지고 있어야 통신이 가능하다.

-서버 IP 확인하기

ping 서버이름

ctrl + C로 종료

-클라이언트 IP 확인하기

my IP 검색?(보통은 컴퓨터에 연결되어 있는 공유기의 IP주소)

도메인 네임 - IP 주소는 기억이 어렵다는 단점이 있어서 도메인 주소를 사용한다.

 하지만 접속은 오직 IP 주소를 통해서만 가능하다.

DNS - Domain Name System, 도메인 주소로 접속을 가능하게 하는 시스템    

   클라이언트는 네임 서버에 먼저 접속해서 도메인 주소에 해당하는 IP주소를 요     청하고 해당 서버로 접속하게 된다.

42억개의 기존 IPv4주소가 부족해졌다.

공인 IP - 순수한 IP(주로 공유기에 부여됨)

공유기를 사용하면 보안상에 장점이 있다. 바꿔말하면 외부연결이 까다롭다.

사설 IP - 공유기 안에서 만들어진 IP

유동 IP - Dynamic Address, 사용자가 인터넷을 사용하지 않으면 기존 IP를 회수하                  고 다시 사용할때에는 새로운 IP를 부여한다. (통신사가 가지고 있는 IP가 한              정적이기 때문이다.)

통신사에 별도로 고정IP를 요청할 수 있다. 또한 호스팅 서비스는 고정IP이다.

DDNS - Dynamic Domain Name System, 도메인과 호스트(서버)의 IP를 지속적으로              동기화 시켜주는 것.

DDNS 설정하는 방법 - 공유기 관리자페이지 또는 별도의 서비스로 설정할 수 있다.

포트포워딩 - 공유기(공인IP)로 접속한 사용자를 사설IP로 연결해주는 것.

IP주소가 할당된 서버(컴퓨터)는 포트를 가지고 있고 서버의 IP주소와 포트 번호를 입력하면 해당 포트와 연결된 컴퓨터로 접속할 수 있다.

포트포워딩 하는 방법 - 공유기에서 할당해준 IP주소를 입력, 보통은 192.168.0.1

  공공시설의 공유기는 보통 접속할 권한이 없을 것이다.

아이디와 비밀번호 필요함.

NAT 라우터 관리에서 포트포워딩 설정

해당 컴퓨터의 사설 IP주소 입력(ipconfig으로 확인)

외부포트와 내부포트에 같은 포트번호를 입력

절대경로와 상대경로 

절대경로 - 주소 전체를 정확히 입력(외부 링크 가져올때 필수)

상대경로 

루트(최상위)- /나머지 주소

/ 앞은 나머지 주소가 위치한 곳에 최상위 디렉토리가 된다.

부모 -  ../나머지 주소

바로 위에 있는 상위 디렉토리

현재 - ./나머지 주소

     현재 디텍토리

대문페이지 설정

index.html 파일이 기본페이지로 설정되어 있다. 

기본설정을 변경할 수 있다.

37.호스팅과 클라우드

호스트 - 인터넷에 접속한 컴퓨터

호스팅 - 서버쪽에서 사용되는 컴퓨터 또는 소프트웨어를 제공하는 사업자

IDC - Internet Data Center, 서버가 동작하는 공간

웹 호스팅 - 웹 애플리케이션 운영을 위한 모든 것을 제공

   웹서버(Apache, NGINX)

   미들웨어(PHP, Java, Python, Ruby)

   데이터베이스(MySQL, ORACLE, SQL Server)

장점: 저렴하고 이용하기 쉽다.

단점: 웹 애플리케이션 외에 것은 할 수 없다. 컴퓨터를 공유하는 다른 유저의 웹 애플리케이션에 사용자가 몰리면 나에게 영향을 줄 수도 있다?

서버 호스팅 - 서버 컴퓨터를 제공

필요한 세팅을 직접해야 한다.

장점: 모든 것을 할 수 있다.

단점: 직접 운영해야 한다.

클라우드 컴퓨팅 -  가상화, 종량제로 비용효율적

왜?필요한 작업량에 따라서 그때그때 컴퓨터를 구입할 수 있다. 전통적인 모델은 증가한 작업량에 바로 대응하는데 시간이 걸리고 추가한 컴퓨터는 작업량이 적을때는 그만큼 손해가 된다.

전통모델 - 컴퓨터, 운영체제, 플랫폼, 소프트웨어 등 모든 것을 직접

Infrastructure as a Service, IasS - 컴퓨터와 운영체제 제공

Platform as a Service, PasS -컴퓨터, 운영체저, 플랫폼 제공

software as a Service, SaaS - 소프트웨어를 포함한 모든 것을 제공

가상머신 - VMWare, VirtualBox, Parallels

38.성장

스케일 업 - 컴퓨터 한대를 업그레이드 하는 전략

스케일 아웃 - 다수의 컴퓨터에 성능을 합치는 전략

웹서버 -> PHP -> 샤딩(컴퓨터1 마스터, 컴퓨터2 마스터2,) 컴퓨터3 슬레이브1, 컴퓨터4 슬레이브2....

샤딩 - 사용자를 나눠서 데이터베이스에 저장한다. 각 컴퓨터가 저장 된 사용자의 쓰기를 담당한다.

라운드로빈 - DNS를 요청한 사용자를 각 웹서버 컴퓨터의 분산하여 부하를 줄여준다.

로드밸런서 - 부하를 분산해주는 장비 또는 소프트웨어, 사용자는 로드밸런스에 접속하게 된다. 각 웹서버를 관리해주는 역할도 한다.

Scaleability - 클라우드 컴퓨팅은 기본적으로 로드밸런서를 제공한다.

수시로 전체 웹서버 컴퓨터의 상태를 체크하고 CPU 점유율이 일정기간 동안 높은 상태를 지속하면, 자동적으로 클라우드 컴퓨터를 추가하고 반대로 줄어들면 제거한다.

39.복습