실전 프로젝트 9Week

Web Architecture HTML & CSS

 

뷔페 식당에 들어가면서 뭐부터 먹을까 하는
그런 느낌의 수업이 진행된다.
정말 맛있게 즐길 것인가, 아니면 머뭇머뭇 거리면서
끄적끄적하고 말 것인가

 

금요일 수업 이전에 시청 동영상 하나 있음

화요일 수업 마다 짧은 예습 동영상을 제공할 예정

[알고 들어야 더 흥미도 생기고 재미있다]

일주일에 1 ~ 2개 정도 계속 올라올 예정이라고 하심!! (마감시간)

 

---

 

 

서버와 클라이언트 관계가 존재한다.

이런 관계가 없는 것을 P2P(Peer to Peer) 라고 불린다.

카카오톡은 P2P라고 생각하기 쉽지만 그렇지 않다.

서비스를 매개로 서버와 클라이언트가 움직인다. 그 관계가 WEB을 통해서 진행된다.

 

 

프로토콜(절차, 규칙, 약속)

•  웹서비스 안에서 진행되는 모든 절차를 http/https 라고 한다.
•  http(Hyper Text Transfer Protocol) : 80번 포트
•  https(Hyper Text Transfer Protocol Secure) : 443 포트
• 클라이언트의 Request로 요청이 도면 서버는 Response 하면서 진행이 된다.

https 의 자물쇠 표시

 

웹 서버

• IIS : Microsoft 에서 만든 서버
• Apache : 가장 많이 사용하고 있는 서버
• Nginx : 
• Tomcat : Spring 웹 서버, Java 웹 어플리케이션을 만드는 환경

 

---

 

 

 

개발자는 서버에 필요한 서비스를 만들어서 올려야 한다.

본인이 개발한 환경의 결과물을 ftp를 통해서 서버에 올린다.

웹 페이지를 보여주기 위한 서버가 웹 서비스이다.

ftp는 File Transfer Protocol 로 클라이언트가 웹 상의 문서를 다운할 경우 사용.

sftp는 마찬가지로 Secure 하게 서비스를 주고 받는다.

 

---

 

 

웹 서비스가 가능한 우리만의 공간이 마련되어 있어야 한다.

dothome.co.kr : 무료로 웹 호스팅을 하게 해주는 사이트

dothome APM 환경이어서 나중에 사용할 Tomcat과 다르다.

APM(Apache + PHP + MySQL)

 

HTML Snippets extension 다운로드 받아야 함

Sftp extension 도 설치해야 함.

 

 

 

---

 

 

너무 Front-end 에 치우치거나 Back-end 로 치우치는 것은 좋지 않다.

Front-end 개발이 할 수 있는 일이 많아졌다.

Back-end 개발 없이 Front 만으로 가능한 웹이 개발될 정도로 먹거리가 굉장히 많아졌다.

Framework로 가장 많이 쓰이는 것이 Spring 이다.

 

 

---

 

 

Front-End 기술이 되게 멋있어 보인다.

사실은 개발은 Back-end를 파고 들어가야 재미있다. Back-end를 보여주는 것이  Front 이고

전반적인 Full Stack을 다뤄봐야 좋은 경험이 될 것이다.

 

표준 코딩 (웹 서비스 표준 코딩에 대한 언어 공부)

: 인터넷 익스플로러, 사파리, 크롬 등 모든 브라우저에서 동시에 만족할 수 있게 만들어주는 코딩

: 알고리즘 코딩이 아니라 특정한 규칙과 문법에 맞춰서 문서를 만들어내는 작업

: 프로그램과 잘 맞는 것 같지는 않지만 이 분야에 대한 전문성을 키우는 것도 경쟁력

 

 

---

HTML / CSS 적용 사례

 

HTML 코딩으로만 만들어진 문서

 

내용은 같지만 스타일을 부여했다.

 

스타일2

 

스타일3

 

스타일4