etc/Web

window 객체 window는 전역 객체라 해서 window 안에는 많은 메서드들이 있습니다. 참고로 window는 디폴트값이므로 생략할 수 있습니다. setTimeout 활용 인자로 함수를 받고 있으며 보통 나중에 실행되는 함수를 콜백함수라 부릅니다. 자바스크립트는 함수를 인자로 받고, 함수를 반환할 수 있습니다. function run() { console.log("run start!"); setTimeout(function() { var msg = "hello codesquad"; console.log(msg); //이 메시지는 즉시 실행되지 않습니다. console.log("run ...ing"); }, 1000); console.log("run end!"); } run(); console.lo..

이제 본격적으로 웹 개발을 하기 위해서 개발환경의 구축이 필요하다. 본 강의에서는 이클립스를 사용하고 서버와 WAS를 위해서 Tomcat을 사용한다. 이를 위한 자세한 내용은 boostcourse에 자세하게 나와있다. 모든 개발환경을 갖추었다면 이클립스에서 Dynamic Web Project로 Sevlet 하나의 간단한 웹 서버를 만들 수 있다. package examples; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import ..

CSS 선언 방법 span { color : red; } span : selector color: property red : value style을 HTML페이지에 적용하는 3가지 방법 1. inline HTML태그 안에다 적용한다. 2. internal style 태그로 지정한다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 하지만 별도의 CSS파일을 관리하지 않아도 되고, 서버에 CSS파일을 부르기 위한 별도의 요청이 필요하지 않다. ... 3. external 외부파일 .css로 지정하는 방식이다. CSS 코드가 짧지 않으면 이 방법이 가장 이상적이다. 여러 개의 CSS파일로 분리하고 이를 합쳐서 사용하기도 한다. inernal코드와 같은 css코드를 구현하고, style.css와 같은 별도의..

HTML tag의 종류 anchor, img, ul/li, heading, p 태그 등을 자주 사용한다. div 태그는 black 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용한다. HTML Layout tag 웹 페이지의 구조는 크게 아래와 같은 구조로 이루어진다. 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리하고 각 영역안에 내용의 구조를 잡는 것이 일반적이다. 각 영역 안의 내용 역시 여러 가지 형태일 수 있고 이때마다 적절한 태그를 사용할 수 있다. ID 고유한 속성으로 한 HTML 문서에 하나만 사용가능하다. 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다. Class 하나의 HTML 문서 안에 중복해서 사용 가능하다. ..

웹 서버란? 웹 서버는 보통 소프트웨어를 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말하기도 한다. 웹 서버의 가장 중요한 기능은 클라이언트가 요청하는 HTML 문서나 각종 리소스를 전달하는 것이다. 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적인 데이터이거나 동적인 결과가 될 수 있다. 웹 크롤러 : 네이버나 구글같은 검색 사이트에서 다른 웹 사이트 정보를 읽어갈 때 사용하는 소프트웨어이다. 정적인 데이터는 이미지, HTML, CSS, JS 파일 등 컴퓨터에 저장되어있는 리소스이고, 동적인 데이터는 웹 서버에 의해서 실행되는 프로그램을 통해서 만들어진 결과물이다. 웹 서버 소프트웨어의 종류 가장 많이 사용하는 웹 서버는 Apache, Nginx, Microsoft IIS Ap..

브라우저의 동작 브라우저의 동작이 숨겨져 있고, 개발자의 의도와 다르게 브라우저가 다르게 해석해서 보여줄 때도 있었다. 그리고 자신의 소스코드가 브라우저에서 빨리 실행되고 효율성을 높이기 위해서는 어떻게 해야할까? 라는 궁금증으로부터 브라우저의 동작에 대한 관심이 생겨났다. 브라우저의 구조 User Interface : 인터넷 창에서 주소창이나 이전 페이지, 새로고침 등 사용자에게 보여지는 모든 부분을 나타낸다. Browser engine : 브라우저 소프트웨어를 동작 시켜주는 핵심 엔진이다. Rendering engine : HTML과 CSS를 parsing 해서 화면에 띄워주는 역할을 한다. Networking : HTTP를 통해 서버와 통신하기 위한 네트워크 모듈이다. JavaScript Inter..

웹프론트엔드? 사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등), 즉 리소스를 제공한다. 또한, 사용자의 요청에 반응해서 동작한다. 웹프론트엔드의 역할 웹 콘텐츠를 잘 보여주기 위한 구조를 만들어야한다. 적절한 배치와 일관된 디자인으로 가독성을 높여야한다. 사용자의 요청에 부드럽고 빠르게 반응해야한다. HTML 원하는 문서의 구조를 프로그래밍 언어로 표현해야하며 HTML으로 이루어진다. CSS 웹페이지를 꾸미기 위해서 각각의 HTML 태그를 꾸미기 위한 규칙이 필요하며 CSS를 통해 표현할 수 있다. Javascript 사용자의 반응에 따라서 동적인 제어를 할 수있는 프로그래밍 언어이다. 백엔드? 백엔드는 정보를 처리하고, 저장하며, 요청에 따라 정보를 내려주는 역할을 한다.

HTTP ( Hypertext Transfer Protocaol ) 란? HTTP는 서버와 클라이언트가 인터넷 상에서 데이터를 주고받기 위한 프로토콜이다. HTTP는 어떤 종류의 데이터도 전송할 수 있도록 설계되어있다. ( 이미지, 동영상, 오디오, 텍스트 문서 등.. ) HTTP 작동방식 HTTP는 서버/클라이언트 모델이다. 서버와 클라이언트가 연결되고 난 후 클라이언트가 서버에게 요청을 보낸다. 요청받은 서버는 클라이언트에게 응답하고 이후 연결을 끊어버린다. 응답 후 연결을 끊어버리기 때문에 무상태(stateless) 프로토콜이라고도 불린다. 장점 - 불특정 다수를 대상으로 하는 서비스에 적합하다. - ex) 윈도 공유폴더 : 최대 사용자가 10명일 때, 최대 연결할 수 있는 수가 10개이다. sta..