Browser에서의 웹개발
- Javascript는 HTML 속 어디에든 존재할 수 있지만, 보통 Body 태그가 닫히기 직전 혹은 Body 태그 이후에 작성한다. (Body 태그 중간 중간에 자바스크립트를 삽입할 경우에 자바스크립트가 브라우저 렌더링을 방해하는 경우가 발생하기 때문이다.)
웹 서버 - 웹 서버는 소프트웨어를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말한다. 웹 서버의 가장 중요한 기능은 클라이언트가 요청하는 HTML문서나 각종 리소스를 전달하는 것이다. 리소스는 컴퓨터에 저장돼 있는 정적(static)인 데이터나 동적인 결과가 될 수 있다.
1) 정적인 데이터: image, HTML file, CSS file, Javascript file 등의 컴퓨터에 저장되어있는 파일들을 의미
2) 동적인 결과: 웹서버에 의해 실행되는 프로그램을 통해 만들어진 결과물 - 클라이언트와 웹서버 간에는 보통 HTTP(Hypertext Transfer Protocol)을 통해 통신을 하게 된다. HTTP는 인터넷상의 데이터를 주고받기 위한 프로토콜을 말하는데, 포로토콜이란 정해놓은 규칙, 규약을 의미한다.
- 가장 많이 사용하는 웹 서버 소프트웨어: Apache, Nginx, Microsoft, Google 웹 서버 등이 있다.
WAS(Web Application Server)
- DBMS(Database Management System): 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어.(MySQL, Oracle, MariaDB, PostgreSQL 등)
- 미들웨어(MiddleWare): 중앙에 있는 서버. 클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제가 발생한다. 때문에 비즈니스 로직을 클라이언트와 DBMS 사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 함. 따라서 프로그램 로직이 변경된다하더라도 모든 클라이언트를 다시 배포할 필요없이 미들웨어만 변경하면 된다.
- WAS는 일종의 미들웨어로 웹 클라이언트(웹브라우저)의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적을 가진다. WAS의 주요기능은 프로그램 실행 환경과 DB 접속 기능을 제공하며 여러 개의 트랜잭션(논리적인 작업 단위)을 관리하고 업무를 처리하는 비즈니스 로직을 수행한다. 또한 WAS는 웹 서버의 기능도 기본적으로 제공한다. 해당 강의에서는 별도의 웹 서버를 사용하지 않고 '톰캣'이라는 WAS만을 사용할 예정. (cf. 웹 서버는 보통 정적인 콘텐츠를 웹 브라우저에게 전송하는 역할을 하고, WAS는 프로그램의 동적인 결과(동적인 콘텐츠)를 웹 브라우저에게 전송하는 역할을 담당한다. 규모가 커질수록 웹 서버와 WAS를 분리한다. 그 목적은 장애 극복 기능(failover)인 경우가 많다.)
CSS 선언방법
- CSS의 선언: selector { property : value; } 와 같은 구성으로 이루어진다. ex) span { color : red; }
- style을 HTML페이지에 적용하는 3가지 방법:
a) inline: html > body 태그영역 안에다가 적용할 부분에 직접적으로 CSS를 넣는 방식
b) internal: html > head 태그영역에 style 태그로 지정하여 넣는 방식
c) external: 외부파일(.css) 즉 별도의 css파일을 생성 후 불러와서 쓰는 방식
cf. 위 세가지 방식을 같은 구역에 각각의 style 속성을 부여했을 경우 inline 방식으로 입력한 속성이 최우선적으로 적용된다. inter하지만, inline 방식은 구조와 스타일이 섞이게 되므로 유지보수가 어렵기때문에 스타일을 여러가지 적용할 경우 권장하지 않는 방식이다.
상속과 우선순위 결정 - 상위에 설정된 스타일을 하위에서도 쓴다.
- 우선순위
a. inline방식 > internal = external
b. id > class > element
c. 같은 구역에 부여한 다수의 element가 있다면 나중에 적용한 element 값이 최종 적용
d. 구역의 위치를 더 구체적으로 지명한 element가 우선적으로 적용됨 (ex: span { color : blue; } 보다 body > span { color : red; }가 우선적으로 적용.
CSS Selector - CSS selector: HTML의 요소를 tag, id, class, html 태그 속성 등을 통해 쉽게 찾아주는 방법
