Progamming93 Browser Event, Event object, Event handler 들어가기 전에어떤 영역을 마우스 클릭하거나, 화면을 스크롤하거나 하는 작업에 따라서 브라우저는 반응한다. 이런 것들을 모두 브라우저가 Event 기반으로 동작되게 만들어졌기 때문이다. 다양한 Event를 알아보면서 웹프론트엔드 개발을 이해해보자. 학습 목표1. Event listener 무엇인지 이해해보자.2. Event 객체를 사용해보자. 핵심 개념- Event listener- addEventListener- event object Event- 브라우저에는 많은 이벤트가 발생한다. 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.- 이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤 일을 하라고 할 일을 등록할 수 있다. 다.. 2019. 1. 20. DOM과 querySelector 들어가기 전에우리는 댓글을 입력할 때 댓글이 바로 화면에 추가되는 것을 볼 수 있다. 이 외에도 받은 이메일함의 개수가 증가하기도 한다. 이렇게 HTML 내의 구조와 데이터는 변경된다. 자바스크립트로 이를 변경시킬 수도 있는데, DOM을 이해하면 된다. 학습 목표1. DOM(Document Object Model)을 이해한다. 핵심 개념- DOM Tree- DOM API- querySelector DOM- 브라우저에서는 HTML 코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장한다. 그렇게 저장된 정보를 DOM Tree라고 한다.- 결국 HTML element는 Tree 형태로 저장된다.- 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현.. 2019. 1. 20. window 객체 (setTimeout) 들어가기 전에전역객체(window)에 속한 메서드에는 경고창을 띄워주는 alert, 그리고 setTimeout이라는 메서드 등이 있다. 이를 어떻게 사용하는지 그리고 다른 함수와 조금 다르게 동작하는 setTimeout의 특성을 이해해보자. 학습 목표1. setTimeout을 필요한 곳에 사용할 수 있다.2. 비동기가 무엇인지 기본개념을 이해한다. window 객체- 브라우저를 개발하다 보면, window라는 전역객체가 있다.- window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있다.window.setTimeout();setTimeout(); //window는 전역객체라서 생략가능cs- window는 디폴트의 개념이므로 생략할 수 있다. setTimeout 활용- setTimeout은 낯설게.. 2019. 1. 20. 자바스크립트 함수 호출 스택 들어가기 전에함수는 연속적으로 불려질 수 있다. 자바스크립트에서 이를 처리하는 방법을 이해해보자. 학습 목표1. 자바스크립트의 call stack을 이해한다. 핵심 개념- call stack 함수 호출- 함수 하나에 모든 로직을 다 넣지 않는다. 함수는 연속적으로 호출가능하다.- 자바스크립트 함수 호출은 이렇게 불려진다.12345678910111213function printName(firstname) { var myname = "hzoou"; return myname + "," + firstname;} //13→7→8→9→{1→2→3→4}→9{result}→10→11function run(firstname) { firstname = firstname || "Youn"; var result = print.. 2019. 1. 20. 자바스크립트 함수 들어가기 전에"자바스크립트 잘 이해하고 있다는 것" === "자바스크립트 함수를 잘 이해하고 있다" 학습 목표1. 자바스크립트의 선언방식들과 그 차이점, 반환값, hoisting을 이해한다. 핵심 개념- Function- Hoisting- arguments- 기본 반환값(undefined) 함수 - 함수의 선언- 일반적인 선언 ex) function inner() { }- 함수는 여러 개의 인자를 받아서, 그 결과를 출력한다.- 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다.· 만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미더(매개변수)는 undefined 라는 값을 갖게 된다. 이는 변수는 초기화됐지만, 값이 할당되지 않았기.. 2019. 1. 19. 자바스크립트 비교-반복-문자열 들어가기 전에이번에 나오는 자바스크립트의 문법들은 다른 언어와 유사하다. if, switch 분기문이나, for, while 문은 크게 다른 부분은 없다. 문자열처리는 정규표현식이라는 막강한 방법도 제공하지만, 그전에 문자열에서 제공하는 다양한 함수들을 잘 다룰 필요가 있다. 중요한 몇몇 메서드만 기억하면 되므로 너무 걱정하지 않아도 된다. 학습 목표1. 분기, 반복문을 다룬다.2. 간단한 자바스크립트 문자열 조작(parsing)을 할 수 있다. 핵심 개념- if- switch- for- while- String replace 메서드 비교문- if, if else, else 를 통해서 다양한 비교문을 사용할 수 있다.· 빈 문자열은 false의 조건 분기 - switch- 로직을 분기하기 위해서 if문 .. 2019. 1. 19. 자바스크립트 변수-연산자 타입 들어가기 전에컴파일 단계가 없는 자바스크립트의 type(형)은 실행단계에서 타입이 결정된다. 변수선언은 어떻게 정의하고, 자바스크립트의 타입은 어떤 것들이 있는지 확인해보자. 학습 목표1. 자바스크립트 변수 선언, 연산자 사용, Type을 이해한다. 핵심 개념- 변수선언- 연산자- Type 종류- Type 확인 방법 자바스크립트의 버전- 자바스크립트 버전은 ECMAScript(줄여서 EC)의 버전에 따라서 결정되고, 이를 자바스크립트 실행 엔진에 반영한다.- ES5, ES6(ES2015).. 이런 식으로 버전을 일컫는다.- 2018년을 중심으로 ES6을 지원하는 브라우저(크롬, 파이어폭스)가 많아서 몇 년간 ES6 문법이 표준으로 쓰이고 있다.- ES6는 ES5 문법을 포함하고 있어 하위 호환성 문제가 .. 2019. 1. 19. Request, Response 객체 이해하기 들어가기 전에클라이언트가 서버에게 보낸 요청을 추상화한 객체 HttpServletRequset 와 서버가 클라이언트에게 응답하기 위한 정보를 추상화한 객체 HttpServletResponse에 대해 알아보자. 학습 목표1. HttpServletRequest 객체를 이해한다.2. HttpServletResponse 객체를 이해한다. 핵심 개념- HttpServletRequset- HttpServletResponse 요청과 응답- 웹 브라우저에 URL을 입력하고 Enter를 입력하면, 웹 브라우저는 도메인과 포트 번호를 이용해 서버에 접속한다. 그리고 나서 path 정보, 클라이언트의 IP, 클라이언트의 다양한 정보를 포함한 요청 정보를 서버에게 전송하게 된다.- WAS는 웹 브라우저(클라이언트)로 부터 S.. 2019. 1. 17. Servlet 라이프 싸이클 들어가기 전에어떤 객체의 생성부터 소멸까지의 과정을 라이프 사이클(Life Cycle)이라고 한다. 학습 목표1. 서블릿의 생명주기(Life Cycle)를 이해하자. 핵심 개념- init- service- destroy Servlet 생명주기- 서블릿 생명주기를 확인할 수 있는 LifecycleServlet을 작성한다.- HttpServlet의 세가지 메소드를 오버라이딩한다.· init()· service(request, response) : 요청이 들어왔을 때 응답해야되는 모든 내용은 service() 메서드에서 구현· destroy() : 웹 어플리케이션이 갱신되거나 WAS가 종료될 때 호출- servlet은 서버에 servlet 객체를 여러개 만들지 않는다. 요청이 여러 번 들어올 때마다 매번 생성.. 2019. 1. 16. 이전 1 ··· 5 6 7 8 9 10 11 다음
