어제보다 성장하기

index.jsp

모든 웹사이트의 기본이 되는 첫 시작페이지는 index페이지라고 한다.

네이버에서도 www.naver.com/index.html 에 실제로 접속한 것이라고 볼 수 있다.

1. index.jsp에서 로그인 화면으로 이동해라라는 구문을 작성

-location.href = 'login'.jsp; 를 작성 후 실행

-http 404 메시지 나옴(아직 옮겨갈 페이지 login.jsp가 없다는 의미)

-일단 최근에 많이 쓰이는 인코딩언어를 UTF-8로 바꾼다.

*link를 간단하게 설명하면 말 그대로 '외부에 있는 문서를 연결해준다.' 라는 뜻

*<link rel="stylesheet"> 스타일 시트로 css파일을 불러오기 위한 연결설정

2. loin.jsp 파일을 만든다.

-index.jsp 안에 기본구문을 같게 한다.

-로그인 디자인부터 만든다.

*부트스트랩은 bootstrap-3.3.7버전으로 다운 받았다.

압축풀기 및 폴더를 WEB CONTENT 안으로 폴더를 옮긴다.

*부트스트랩은 컴퓨터/핸드폰 등 어느 것으로 접속을 해도 해상도에 맞게 알아서

디자인이 환경에 맞게 변경된다. 그래서 하기처럼 meta구문작성

-반응형 웹에 사용 되는 메타택 즉 <meta>구문 추가

3. 애니메이션을 담당할 자바스크립트를 작성한다.

-제이쿼리를 특정 홈페이지에서 가져오도록 작성한다.

(jquery를 특정 홈페이지에서 가져오고 자바스크립트 참조하겠다는 구문작성)

-부트스트랩 안에 자바스크립트파일을 참조하겠다라고 작성을 한다.

(stylesheet를 참조 및 css안에 bootstrap.css를 참조하겠다는 구문 작성)

자바스크립트 및 부트스트랩 참조 구문 사진출력

4. 네비게이션 구성 및 버튼 구성

nav bar default 클래스를 작성한다. 하나의 웹사이트에 전반적인 구성을 보여 주는 개념이다. 그리고 홈페이지에 로고를 담는 영역 header구문에 속하는 버튼영역구문을 작성한다.

헤드 버튼영역구문 코드 사진

화면을 줄이면 아이콘 세 개 적용한 메뉴바 출력

5. 탑메뉴에 최신이야기 및 커뮤니티추천 그리고 우측상단버튼에 접속하기만 있도록 할 것

   접속하기 버튼에 로그인 및 회원가입 버튼 있도록 설정하기

탑메뉴 및 접속하기 버튼 코드변경

#바꿔본 것

다음과 같이 화면이 안줄어들어도 우측상단 버튼이 보이도록 코드를 수정했다.

홈화면출력

6. 로그인 페이지 작성

-로그인화면

-아이디/비밀번호 폼

-로그인버튼(submit버튼)

-로그인 아이디/비번 입력란

로그인버튼을 누르면 아직 내용이 없기 때문에 다음과 같은 화면이 나온다. 입력후 loginAction페이지 까지 확인

1. 서비스도입전략

2. 스토리지

3. 유튜브 인프라 설명

NAS

NAS(Network-attached storage)는 네트워크에 연결되어

이기종 클라이언트에 데이터 액세스를 제공하는 파일 수준의 컴퓨터 데이터 스토리지와 관련되어 있습니다.

NAS란 USB나 CD처럼 컴퓨터에 직접 연결하지 않고, 네트워크,

즉 인터넷을 통해 데이터를 주고받는 저장장치를 뜻합니다.

NAS를 이용하여 미디어를 플레이 한다.

여러명이 열면 백프로 실패한다.

음악이나 영화를 플레이를 하는 것은 만명 2만명, 1억명이 쓴다는 것은

그것만을 위한 장비 특정한 알고리즘이 끊임 없이 필요하다.

CDN (CDN CACHE=컨텐츠 딜리버리 네트워크)

-컨텐츠를 빠르게 전달하기 위해 주고 받기 위한 네트워크

-사용자, 서버 CACHE 가 있는데 망안에 있는 CACHE가 있는 영상을 재생 해보라고 할 것

*CACHE기능

-디스패치

-광고 뿌려주는 서버

-영상컨텐츠

-사진컨텐츠

-트래픽 및 ,연산과정을 cache에서 빠르게 전달한다.

가용성을 위한 오토스케일링

예) bts 이슈가 생길 때 늘렸다가 가라앉게

Scale in out (horizontally 수평적 확장)

-instance의 크기가 같다.

-자원의 크기가 안달라진다. 자원의 수량의 개수가 많아진다.

Scale up down (vertically 수직적 확장)

-instance의 크기가 다르다

-자원의 크기가 달라지고, 확장시 수량은 그대로이다.

 서버 하나가 과부하되면 다른 서버하나를 더 큰 것으로 한 개가 커지는 것

AWS elastic load balancing

-웹서버에 문제가 생기면 랜카드 가지고 본딩/이중화를 한 것에서 비롯해서

-Elastic load balancing을 통해 web instance에서 과부하 될 때즘 다른 web instance로 바꾸어준다.

SMTP(메일전송시킬 때)

1. 클라우드 엔지니어란

=>클라우드 서비스를 잘 쓸 수 있게 해주는 것이 클라우드 엔지니어

2. 기존 온프레미스시스템부터 hosting과 Iaas와의 차이점은 virtualization이다.

-host, domain, ip주소의 개념공부의 바탕이 되어야 한다.

3. 클라우드의 핵심 기술

-가상화

-분산컴퓨팅

-오픈API(어플리케이션의 인터페이스)

네이버에서 카카오톡에서 보내는 초당 메시지의 데이터가 얼만큼인지 확인하고 싶을 때

-오픈api로 확인가능

토스

- 다른 은행들의 계좌이체를 중간에서 도와준다.

- 오픈api이용 (멀티 클라우드서비스를 잘활용)

- 금융보안상 일부데이터는 자체 데이터센터(프라이빗클라우드)에 보관

CNCF

- 유엔같은 오픈소스재단

인프라와 서비스 영역 준비개념

인프라영역 - 하드웨어 준비

서비스 영역- 소프트웨어 준비 + 소프트웨어를 사용할 수 있게 런칭

SaaS 사례

-ERP,CRM,SCM 과 같은 서비스를 클라우드로 한다.

(사례 - salesforce.com - SaaS)

VDI

- 내용 알아 둘 것

-중앙서버에 연결 되어 있는 가상머신들이 있다.

-그 가상머신을 가져와서 네트워크로 쓴다.

batch

- 일괄처리

클라우드에서 사용하는 용어 및 기존 온프레미스에서 사용하던 용어를 알아야 한다.

처음부터 퍼블릭을 쓰는 곳은

- 소규모 기업

매출 3,4천억 되는 규모의 기업은 퍼블릭을 바로 못쓴다.

넷플릭스 - 단계적으로 퍼블릭 서비스를 점차 넓혀 쓰기 시작했다.

4. 클라우드 서버 개념

오픈스택에 메이저벤더가 참여함

서버리스 - 람다

데이터베이스 - 오로라

마이그레이션

클라우드 도입해서 클라우드화 하는 것

예)커머셜 소프트웨어를 오픈소스 소프트웨어로 바꾼다.