Web is 뭔들- 플랫폼의 역습 -

자기 소개 ZeroPage 24 기 정회원 , 25 기 회장

컴퓨터공학부 11 학번

심신 안정을 위해서 4 학년 휴학 중 ( 준 프로 꿀빨러 )

현재 , 브릴리언트 앤 컴퍼니에서 근무 중

내년 (17 년 ) 에 강해져서 돌아올 예정

Web?

WWW – World Wide Web 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간

인터넷 != 웹 컴퓨터 간의 정보를 주고 받는 네트워크 = 인터넷 인터넷 상의 정보를 보여주는 시스템 = 웹

Web?

웹인터넷

인터넷

컴퓨터 간에 정보를 주고 받는 네트워크

다른 플랫폼 간에 정보를 주고 받을 수 있나 ? 내 컴퓨터에서는 보이는데… .. PC 로 접속해주세요 크롬이 지원되지 않습니다 모바일 페이지로 이동합니다 기타 발암… . 인터넷 익스플로어

Internet Explorer

컴퓨터가 윈 10 인데

애플 앱스토어를

보고 싶어요 ㅜㅜ

안돼 안 보여줘

돌아가

유감

통신 프로토콜 ( 규약 ) 컴퓨터나 원거리 통신 장비 사이에서

메시지를 주고 받는 체계

대표 기관 : ISO, IEEE

예시 : HTTP, HTTPS, FTP, SSH, SSL 등등

통신 프로토콜 ( 예시 )

http://naver.com

접속HTTP Request

HTTP Response

OSI 7 계층

물리 계층데이터 링크 계층

네트워크 계층전송 계층세션 계층표현 계층응용 계층

물리 계층데이터 링크 계층

네트워크 계층전송 계층세션 계층표현 계층응용 계층

OSI 7 계층

물리 계층

데이터 링크 계층

네트워크 계층

전송 계층

세션 계층

표현 계층

응용 계층

프로그램

논리적인 통신

물리적인 통신

간단한 용어 설명 ? IP 주소 (Internet Protocol)

컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호

Ex) 165.194.1.1

MAC 주소 (Media Access Control Address) 네트워크에 사용되는 장비에 존재하는 고유 번호 Ex) AB:CD:EF:00:11:22

네트워크 구조

IP – 2M - B

IP – 3M - C

IP – 5M - F

IP – 4M - D

IP – 1M - A

IP – 7M - G

IP – 6M - E

IP – 8M – J

Com1

Com2

Com3

Com5

Com6

Com4

라우터 컴

OSI 7 계층탕 !

난 IP 가 A 인데IP 가 B 인 녀석한테석양 배달 좀

라우터 : OK

석양 배달이요 !

라우터 : OK

IP 가 B 인 녀석이석양이란 걸 주는데 ?

오버워치

웹

세션 계층

표현 계층

응용 계층HTML 문서

인터넷 익스플로어Internet Explorer

플랫폼 vs 프레임워크 vs 라이브러리 플랫폼 : 어플리케이션을 동작시킬 때 기반이 되는 OS 와 그 밖의 환경 , 설정

J2EE (Java 2 Platform for enterprise Edition) – 5 부터 Java EE 5 윈도우 7, 8, 10….

프레임 워크 : 일반적인 기능을 가진 코드를 유저가 선택적으로 덮어쓰거나 특화한 것 스프링 Flask

라이브러리 : 클래스나 서브루틴의 모임 . 대상 플랫폼에서 바로 실행됨 안드로이드 plot 라이브러리 ( 그래프 ) 스프링의 restTemplate 라이브러리 ( 통신 )

플랫폼의 역습 ? 웹은 플랫폼에 영향이 없는 거 아닌가요 ?

완전 독립 X 웹 표준을 준수합시다 !!

웹 표준 웹을 서술하고 정의하는

공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어

정부도 안 지키는데 굳이 실습에서 지킬 필요는… .

CRUD C : Create

R : ReadU : UpdateD : Delete

대부분의 웹 페이지는 CRUD 로 이루어짐 HTTP 에서의 CRUD

C : POST methodR : GET methodU : PUT methodD : DELETE method

실습 내용 클라우드 서비스 (PaaS) 중

1 년 간 무료인 AWS( 아마존 웹 서비스 ) 에 프레임워크인 스프링 ( 웹 서버 ) 를 올려서회원관리를 하는 API 서버를 만들어 보자 !

+ 사이트까지도… .?

실습을 위한 Tool 리스트 JDK 7 설치 – tomcat7 을 사용하기 때문에… .

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

STS(Spring Tool Suite) 설치 – 이클립스기반 스프링 개발 툴https://spring.io/tools/sts/all

Apache maven 설치 – 라이브러리 관리 및 빌드 툴https://maven.apache.org/download.cgi

실습을 위한 Tool 리스트 STS 와 Maven 은 압축파일을 해제만 하면 됨 폴더를 하나 생성해서 둘을 같은 폴더에 넣어주는게 좋음 파일질라 설치 (FTP 용 )

https://filezilla-project.org/download.php?type=client

Mysql Workbench 설치 (DB)https://www.mysql.com/products/workbench/

Putty, Puttygen (SSH, 키생성 )http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

AWS클라우드

RDB

AWS

Apache(Web Server)

Tomcat(WAS – Web Aplication

Server)+ Java 7 EE

Spring(Rest API Server)

DB(My SQL)

웹 서버 vs WAS 웹 서버 ( 아파치 )

SW : 브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고 요청에 대한 문서 (HTML) 를 반환하는 프로그램

HW : 그럼 프로그램을 실행하는 컴퓨터

WAS( 톰캣 ) HTTP 를 통해 사용자 컴퓨터나 장치에 Aplication 을 수행해주는 미들웨어 즉 , 동적인 역할을 담당한다 .

서버 설치 ( 인스턴스 생성 ) Instances – Launch Instance 클릭

서버 설치 ( 인스턴스 생성 ) 취향에 따라 고르세요 ( 무료로… .)

전 우분투로 ㅎㅎ 서버 타입은 역시 무료로 ㅎㅎ

서버 설치 ( 인스턴스 생성 ) Pem 파일 저장

( 잃어버리면 나중에 서버 비용이 와장창… )

Puttygen 으로 .ppk 파일 생성 실제 사례

http://blog.naver.com/PostView.nhn?blogId=kykkyn2&logNo=220706681302

서버 설치 ( 인스턴스 접근 ) Aws 에서 생성한 instance 에서

public DNS 입력 Instance 생성할 때 다운받은

.ppk 등록 로그인시 기본 계정은 ubuntu

서버 설치 ( 인스턴스 접근 ) 접속이 되었다면 성공 !

실패하면 .ppk 파일이 맞는지 public DNS 가 맞는지확인 !

서버 설치 Putty 에서 IP 에 Public DNS 로 접속해서 아래 내용 설치

(Public IP 도 미리 기억해두면 좋음 )

sudo apt-get update && sudo apt-get upgrade sudo apt-get install openjdk-7-jdk //Java 7 EE 설치

sudo apt-get install apache2// 아파치 2 설치

sudo apt-get install tomcat7 // 톰캣 7 설치

서버 설치 Security Groups 에서

inbound rules 추가(port open)

ICMP 는 ping 하기 위해서( 죽었나 살았나 )

서버 설치 ( 확인 ) 브라우저로 Public ip 접근하면 기본 화면이 보인다 예시 (tomcat, apache)

DB 생성 AWS – RDS 사용

DB 생성 Inbound rules 에 DB port 도 추가 !

DB 접근

User Table 생성 RDS 에서 instance 생성시 만든 test DB 사용

test 더블클릭 !!!( 해당 DB 를 사용하겠다 )

SELECT * FROM user; INSERT INTO user(email, password) VALUES(?, ?);DELETE FROM user WHERE id=?

서버

동작 과정 ( 단순 요청 )

아파치톰캣

HTTP Request( 메인 화면을 보여줘 )

HTTP Response( 메인 .html)

서버

동작 과정 ( 동적인 요청 )

아파치톰캣

HTTP Request( 가입 요청 )

HTTP Response( 어서오세요 . 호갱

님 )

쟤 가입시켜줘

ㅇㅇ 완료

개발환경 세팅 실습 예제 코드

https://github.com/kimhs327/devilscamp_spring

개발환경 세팅 STS 에 Maven setting 적용

로컬에서 실행 로컬에서 실행할 경우 public ip 대신 localhost 로 입력

Tomcat 에서 spring server 실행 프로젝트를 war 파일로 export 후 파일 질라를 통해 aws 서버로 이동

끝 ? That’s no no GET method 중 /users/{id} 에서

DB 에서 해당되는 id 가 있으면 email 을 return 해주고없으면 status = 404, msg = “parameter error” 를 return 해주자

Markup Language 문서나 데이터의 구조를 명기하는 언어의 한 가지 EX) HTML, JSON, XML

정보를 전달하는데 효율적인 방법 !

HTML 웹 페이지를 위한 마크업 언어 구조적인 문서를 만들 수 있다 .

JSON 속성 , 값 쌍으로 이루어진 정보를 전달하기 위해 사용 자바스크립트로 파생되었지만 언어 독립형 포맷= 즉 , 언어에 상관없이 사용할 수 있다 !

Parsing & Parser 말 그대로 , 구문 분석 마크업 언어를 분석하기 위한 방법 EX)

XML, HTML : <> 로 구별한다JSON : {}, [] 로 구별한다

웹 is 뭔들 ! 플랫폼에 영향력이 적다 ! 플랫폼의 춘추전국시대인 요즘 , 웹은 아주 중요하다 요즘 VR 도 별도의 플레이어없이 웹사이트를 통해서 볼 수 있다 ! 즉 , 가능성이 무궁무진하다 . 프론트보다 백엔드 (WAS) 가 중요하다 . 인터넷이 없어지지 않는 한 일자리는 계속 유지될 것이다 .

그러니 웹하세요 ㅎㅎ

감사합니다 피곤해서 질문은 받지 않습니다