본문 바로가기

웹 구축

(17)
【 JS 초급 】 함수 선언식과 표현식 함수선언식 ( Function Declaration ) 은 가장 대표되는 JS의 함수 선언 방식이다. function a() { return "hello world"; } console.log(a()); 일반적인 함수 선언식은 다음과 같은 구조를 가진다. 여기에 선언된 함수에 부합하는 호출을 두 번째 줄처럼 하여 사용하면 된다. 함수표현식( Function Expression ) 은 JS의 특징을 서술할 수 있는 방법이다. var a = function() { retrun "hello world";} consolg.log(a); 여기서 우리는 한 가지 특성을 발견할 수 있는데, 함수를 변수에 담아서 사용할 수 있다. 즉, 다시 말해 함수 역시 변수처럼 다룰 수 있다. 즉 다음과 같이 function a(..
【 JS 초급 】호이스팅 ( Hoisting ) 어떤 변수,함수가 초기화 및 선언될 때 변수, 함수등의 선언부를 스코프 최상단으로 끌어올리게 된다. function a(b){ return b; } console.log(a(b)); var b="hello"; 이런 간단한 함수가 작성되었다 하였을 때 b는 함수 뒤에 선언이 되었기 때문에 실행 오류를 내뱉는다고 생각될 수도 있지만 호이스팅이란 개념은 변수가 선언을 먼저 하도록 돕는다. 이는 함수나 변수가 3단계에 걸쳐 할당되기 때문이다. 1. 선언 2. 초기화 3. 할당 위 코드의 예제에서 var b="hello"; 는 실행했을 때 선언과 초기화 할당이 모두 동시에 일어난다고 보면 되고 호이스팅은 선언부를 스코프의 최상단에 올리게 된다. 즉 console.log(a(b)); 가 작동했을 때, 아직 변수는 ..
【 JS 초급 】Jquery 선택자 및 메소드 1 Jquery에서 HTML 태그 영역을 제어하거나 인자를 받기 위해 선택자를 사용할 수 있다. $("선택자명") 으로 작동되며 Jquery 이하의 메서드들을 사용하여 문서를 제어할 수 있다. 선택자의 취급방법은 CSS와 같은데 id 선택자 : #id명 class 선택자 : .클래스명 태그 선택자 : 태그명 예를들어, 자바스크립트에서는 document.getElementById("pass") 혹은 document.getElementClass("pass") 로 선택하였지만, Jquery에서는 $('#pass') 혹은 $('.pass') 와 같이 간단하게 정의 할 수 있다. 아래는 Jquery에서 사용되는 메서드들이다. $().메서드명() lenght : 개수를 구한다. get(i) : dom 객체에 접근한다...
패턴 URL패턴 디렉토리 패턴, 디렉토리 형태로 서버의 해당 컴포넌트를 실행하는 구조 http://localhost:8081/MessageSystem/join ex: ) /join 확장자 패턴, 확장자의 형태로 서버의 해당 컴포넌트를 찾아서 실행하는 구조 ex: ) *.do, hello.do FrontController join.jsp - 컨트롤러 login.jsp - 컨트롤러 update.jsp - 컨트롤러 delete.jsp - 컨트롤러 -> 중복되는 코드가 많음. (인코딩이나 세션 객체 선언) -> 파일이 여러개기 때문에 개발이 복잡함 -> Servlet이 무겁고 같은 기능의 반복으로 효율성 저하
【 JS 초급 】AJAX(Asynchronous JavaScript and XML) 기존 폼태그는 클라이언트 - 서버의 Request관계를 가진다. // 이는 서버로부터 응답받는 페이지는 중복되는 코드가 발생한다. 따라서 네트워크 부하가 커지게 된다. 예를들어, 내가 메인화면에 이메일 데이터를 바꾸고 싶다면 해당 html 문서의 모든 데이터를 갱신하여 주어야 한다. ajax를 활용하면 사용자 입장에서는 화면(html 문서)에 대한 갱신이 없고 요청과 응답 사이에도 다른 일을 할 수 있어 빠른듯한 환경을 느낄 수 있다. 기존 클라이언트-서버 관계에서의 서블릿을 사용한 동기식 통신 클라이언트가 id를 request 보내면 새로고침의 순간에 페이지를 잠시동안 참조 할 수 없다.(페이지 전환) AJAX의 비동기식 통신에서는 페이지 전환이 일어나지 않으며 사용자의 화면이 바뀌지 않으면서 요청 응..
JSP 3 쿠키, 세션 『 Response 객체 』 sendRedirect() - 현재 실행중인 JSP page의 실행을 중단하고 다른 web page가 대신 호출되도록 만드는 기능. ex : 어떤 사이트 갈래? 조건문에 sendRedirect 메서드를 사용해 해당 사이트로 가라고 응답하는 코드이다. HTTP 의 특성 - 비연결성(Connectionless) - 무상태(Stateless) 상태가 없기 때문에 페이지가 넘어가면 매개변수 전달이 되지 않는다. 쿠키(Cookie) - 클라이언트의 상태를 가지고 있는. 클라이언트(브라우저)에 저장되는 키와 값이 들어있는 작은 데이터 파일 쿠키는 생성된 이후 만료일자까지 살아있으며(EXpires/Max-Ages), 이 값은 수정 가능하다(Name,Value) 1. 클라이언트가 페이지 요..
JSP 2 - 지시자. 지시자 web container가 jsp page를 servelt class로 변환할 때 필요한 정보를 기술하기 위해 사용 지시자에 선언된 것들은 jsp 페이지에 필요한 태그들 page 지시자: *(기본, jsp페이지의 전반적인 환경설정) taglib 지시자: 태그를 사용하는 지시자 include 지시자 : 현재 페이지에 다른 페이지 삽입 『 page 지시자 』 jsp 페이지의 전체적인 환경설정을 할 때 사용 jsp 파일에서의 페이지 지시자. ContentType: 브라우저로 내보내는 내용의 MIME형식 지정 및 문자 집합 지정 (사용빈도 높음) - 위에서 charset=euc-kr 로 지정한 것이 콘텐츠 타입이다. import : 현재 JSP 페이지에서 사용할 Java 패키지나 클래스를 지정 ( 사용빈..
JSP 1 JSP (Java Server Page) 기존 Servlet 은 메서드와 사용자 뷰가 분리되어있어 1.코드가 수정되면 다시 컴파일하여 배포해야한다.[Class 별개] 2. Html 소스를 서블릿 클래스 내에서 관리해야 한다. "" 식으로 3. 프로그램이 복잡해지면 Servelt 을 통해 출력되는 HTML 페이지를 상상하기 어렵다. JSP는 클래스 내에 HTML 을 작성하는 Servlet 구조와 달리 HTML 안에서 Java 코드를 작성하게 된다. 확장자 .jsp 로 동작하는 동적 웹애플리케이션 컴포넌트이다. jsp -> 서블릿 -> 클래스 -> html 으로 변환되어 실행된다. 서블릿 : 복잡한 로직 구현에 적합 JSP : HTML 코드 중심이므로, 화면작성이나 수정에 용이 JSP 구성요소 스크립트릿(S..