반응형

목차

1. 개요

2. Servlet 이란?

3. Servlet 동작 구조

4. 예제 및 실습

5. 실행화면


1. 개요

 저번 게시물에서 Spring MVC 모델에 대해 공부하던 중 Dispacher Servlet이란 개념이 애매모호한것 같아 이를 구조적으로 이해하기위해 선행 학습 개념인 Servlet에 대한 공부를 진행하였다.

 eclipse EE와 tomcat을 연동하여 WAS 구조를 만들고, Servlet을 이용하여 Client - Web Server - Web Container간 통신 구현 및 구조를 이해해보도록 하자.


2. Servlet 이란?

 Servlet이란 JAVA를 이용하여 동적 페이지를 생성하는 서버측 프로그램이다.

 CGI(Common Gateway Interface)라고도 하는데 CGI란 사용자의 입력을 받아 동적 페이지를 만드는 것이다.

 사용자의 입력에 따라 결과가 달라지는 것, 예를들어 쇼핑몰 로그인 후 나오는 자신의 닉네임같은 것이다.

 즉, JAVA로 구현된 CGI라고 생각하면 된다.

 

 개념은 알았으니 Servlet 동작 구조에 대해 살펴보도록 하자. 


3. Servlet 동작 구조

Servlet 동작 구조

 1) 클라이언트의 요청이 있으면 Web Server에게 요청이 전달된다.

 

 2) Web Server는 정적인 데이터(HTML, 이미지, css 등)만을 처리하고, 동적 데이터(Servlet, DB, 로직 등)는 Web Container에게 전달한다.

* Web Container : Servlet 클래스 또는 JSP 파일을 실행하기 위한 실행 환경을 제공하는 컨테이너

 

 3) Web Container는 web.xml파일을 참조하여 해당 Servlet에 대한 쓰레드를 생성한다. 그리고 httpServletRequest와  httpServletResponse 객체를 생성하여 이 쓰레드에게 전달한다.

 쓰레드를 생성하는 이유는 클라이언트에게 효율적으로 웹 페이지를 제공하고, 서버의 부하를 막기 위함이다.

 이로써 통신 객체를 가진 쓰레드가 만들어진다.

* 쓰레드 : 여러가지 작업을 동시에 수행할 수 있도록 복제(나눈)한 것

 

 4) Container가 Servlet을 호출한다. 

 

 5) 호출된 Servlet의 작업을 담당하는 쓰레드(3에서 생성된 쓰레드)는 로직이 정의된 doPost()doGet() 메소드를 호출한다. 이 두 메소드는 Servlet class에 정의되어있다.

 

 6) 호출한 메소드의 로직을 컴파일한 후 생성된 동적 페이지를 (3)번 에서 생성했던 httpServletResponse객체에 담아 Web Container에게 넘겨준다.

 

 7) Web Container는 전달받은 response 객체를 HTTPResponse 형태로 바꿔 웹 서버로 전송함과 동시에 생성했던 쓰레드와 httpServletRequest, httpServletResponse 객체를 종료 및 소멸시킨다.

 (HTTPResponse는 Web Server에서 Client 로의 응답 객체이다.)

 

 8) Web Server는 전송받은 HTTPResponse 객체를 HTTP 통신을 통해 클라이언트에게 전송하여 화면을 출력시킨다.


4. 예제 및 실습 (eclipes EE, tomcat 7.0)

 4.1) Dynamic Web Project 생성(web.xml 체크)

New - Dynamic Web Project
web.xml Check

 4.2) Servlet 생성

  - Package, class 이름을 입력.

  - class이름의 첫글자는 대문자로 입력.

create Servlet

 

 4.3) Servlet 코드 입력(test1.java)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package one;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
/**
 * Servlet implementation class Two
 */
@WebServlet("/Two")
public class Two extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Two() {
        super();
        // TODO Auto-generated constructor stub
    }
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
        PrintWriter out = response.getWriter();
        out.println("<html>"+"<body>"+"<h2>Hello World</h2>"+"</body>"+"</html>");
        
    }
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
}
 
 
 

 

4.4) web.xml 코드 입력

 <servlet-name> 태그에는 프로젝트의 이름을, servlet-class에는 클래스의 주소(Package.class형식)를 입력.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8"?>
  <display-name>test1</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
      <servlet-name>test1</servlet-name>
      <servlet-class>one.Two</servlet-class>
  </servlet>
</web-app>
 

5. 실행화면

Servlet에 들어있던 HTML 코드

 URL의 끝이 test1이 아니라 Servlet 명인 Two를 추가적으로 입력해야한다.

 URL 설정은 해당 Servlet 파일 또는 web.xml 파일 내에서 가능하다.

 

 페이지에 Servlet에서 정의한 로직이 출력되면 성공한 것이며, 이렇게 eclipse, tomcat을 사용한 Servlet 실습을 마치도록 하겠다.

반응형
반응형

목차

1. 개요

2. 스프링이란?

3. POJO란?

4. MVC 패턴이란?

5. MVC 패턴 구조

 

1. 개요

 대부분 웹 개발자들은 JAVA를 사용한다. 많은 기능과 메소드를 제공할 뿐 아니라 분업에 최적회된 OOP 구조이기 때문이다. 하지만 그만큼 복잡하고 어렵고 무겁다. 이러한 무겁고 어려운 웹 개발을 보다 쉽게 하기 위해 등장한 프레임워크가 바로 스프링이다.


2. 스프링이란?

 Java EE의 복잡하고 어려운 사용을 단순화시킨 프레임워크이다. POJO 기반이며, MVC 패턴을 사용한다.


3. POJO란?

 POJO란 Plain Old Java Object의 약자로 그대로 해석하면 (보거나 이해하기)분명한 오래된 자바 객체라는 뜻이다.

 프로그래밍적 용어로 해석하면 복잡하고 어려운 Java라는 녀석을 이해하기 쉽고 가볍게 가공한 것이다.

 Java EE와 같은 기존의 "무거운" 객체를 만들게 된 것에 반발해서 사용되게 된 용어라고 한다.


4. MVC 패턴이란?

 MVC 패턴은 Model, View, Controller의 약자로 각각은 다음의 의미를 갖는다.

약자 원형 의미
M Model 데이터 및 데이터베이스와 관련된 비지니스 로직을 처리하거나 이를 조회, 조작하는 부분 
V View 유저 인터페이스를 정의하는 부분
C Controller 분업된 비지니스 로직 및 DB접근을 효율적으로 관리하고, View와 Model의 연결단 부분

Controller의 '연결단' 이라는 표현이 조금 모호할 수 있으나 MVC패턴의 구조를 보면 이해할 수 있을 것이다.


5. MVC 패턴 구조

 1) Client에서 URL(데이터)을 요청한다.

 

 2) Dispatcher Servlet은 적절한 Controller에게 요청을 전달해야 한다. 이는 Handler Mapping을 이용하여 처리한다.

 

 3) Controller는 board, user, menu 등 하나의 큰 작업단위이다. 그 작업단위를 세분화 시킨 것이 Service인데 앞서 말한것 처럼 Handler Mapping을 이용하여 전달받은 내용을 적절한 Service에게 전달한다.

 

 4) Service는 비지니스 로직을 실행하며 DB에 대한 접근이 필요할 시 DAO라는 ConnectionPool 객체를 호출한다.

 

 5) VO(Value Object)는 DTO(Data Transfer Object)라고도 하며 SQL 쿼리문 담아 DB를 조회, 조작할수 있다.

 

 6) DB 접근을 마치면 결과가 출력되는데 이를 View(.jsp)와 결합한 형태로 Controller에게 다시 전달한다.

 

 7) Dispatcher Servlet에게 위의 정보가 다시 전달되며 이는 View에 접근하여 완성된 View의 정보를 사용자에게 response한다. 단, 회원가입 및 정보 수정 같이 보안상 보여줄 필요가 없는 부분은 다른 View로 대체 가능하다.

 

그렇다면 앞서 말한 연결단은 Model과 View를 연결시키는 의미를 말하며 아래와 같이 정리가 가능하다

 

Controller = 'Model과정을 거친 데이터'+'View'

반응형
반응형

목차

1. 개요

2. important

3. 예제 및 실행 화면


1. 개요

 css의 속성 중 !important가 있다. 단어의 뜻처럼 굉장히 중요해보이기에 포스팅을 한다.


2. !important

 !important는 말 뜻 그대로 '중요한 속성' 을 의미하고, 해당 속성이 변경되지 않도록 하는 역할을 한다.

 만약 변경하고 싶다면 똑같이 속성에 !important 속성을 삽입해주면 된다.

 


3. 예제 및 실행 화면

3.1) 예제 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>?</title>
        <style>
            p{
                background-color : red !important;
                float : left;                    
            }
 
            p{
                background-color : blue;
                float : left
            }
        </style>
    </head>
    <body>
        <p>!important</p>
    </body>
</html>
 

 7번 라인과 12번 라인에 <p> 태그의 css를 정의하였다.

 !important 속성이 없다면 <p> 태그의 내용은 12번

 라인에 의해 파란색이 되어야 하지만

 !important 속성에 의해 수정이 되지 않는 것을 확인할 수 있다.

 

실행 화면 1

 

3.2) 예제 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>?</title>
        <style>
            p{
                background-color : red !important;
                float : left;                    
            }
 
            p{
                background-color : blue;
                float : left
            }
 
            p{
                background-color : green !important;
                float : left
            }
        </style>
    </head>
    <body>
        <p>!important</p>
    </body>
</html>

17번 라인에 !important 속성을 삽입하였더니 <p> 태그의 내용의 배경색이 바뀐것을 확인할 수 있다.

실행 화면 2

 

반응형
반응형

목차

1. 개요

2. 예제

3. 실행 화면


1. 개요

 기본적인 css문법과 JQuery 문법의 간단한 사용법을 복습하기 위해 li태그 클릭 시 글자색과 배경색이 바뀌도록 하는 예제를 작성해보았다.


2. 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>?</title>
    <style>
        ul{
            float:left;
            list-style: none;
        }
        .change_back{
            background-color: red;
            color:white;
        }
    </style>
</head>
<body>
    <ul class = 'lang_list'>
        <li>HTML</li>
        <li>CSS</li>
        <li>bootstrap</li>
        <li>Javascript</li>
        <li>JQuery</li>
    </ul>
    <script>
        $('ul.lang_list li').click(function(){
            $(this).addClass('change_back');
        });
    </script>
</body>
</html>

 css를 적용시키려면 <style>태그를 사용해야 한다.

 css를 적용시키려는 대상에 따라 그 문법이 약간 달라진다.

 

1) 대상이 태그(< >)일 경우

 태그명{

      속성 : 속성값;

 }

 

 2) 대상이 클래스일 경우

 .클래스명{

     속성 : 속성값;

 }

 

 3) 대상이 태그의 클래스일 경우

 태그명.클래스명{

     속성 : 속성값;

 }

 

 4) 태그의 클래스의 태그일 경우

 태그명.클래스명 태그명{

     속성 : 속성값;

 }

 

 클래스는 하나의 객체이기 때문에 .을 붙이는 것이라고 생각하면 편하다.

 

 7번 라인은 ul에 대한 css를, 11번 라인은 change_back 클래스에 대한 css를 정의하였다.

 

 19번 라인에 ul의 class를 lang_list로 정의하였고

 

 27번 라인에 ul 태그 중 lang_list라는 클래스를 찾고 해당클래스의 li 태그를 클릭하면, 클릭한 li 태그에 대한 클래스를 change_back으로 정의하였다.

 

 11번 라인에 change_back은 배경을 빨간색, 색을 흰색으로 만드는 것으로 정의하였기 때문에 그에 맞게 색이 변하게 된다.

 

 그 외 사용한 속성은 아래와 같다

속성 설명
float : left 공백을 제거하고 좌측정렬
list-style : none <li> 태그의 기호를 제거
background-color 배경색
color 글자색

 


3. 실행 화면

click event

 

반응형
반응형

목차

1. 개요

2. __proto__

3. 정리


1. 개요

prototype에 대한 내용이 생각보다 많아 내용을 정리해나가며 공부를 하고 있다.

지금까지의 내용을 다시 정리하면

 

 1) 함수가 정의되면 prototype을 참조 가능한 prototype 프로퍼티, __proto__ 메서드가 생성된다.

 2) prototype은 constructor(생성자)를 참조 가능하다.

 3) 함수의 생성자로 생성되는 객체들이 prototype 객체를 상속받는다.

 4) prototype의 내용을 변경하면 생성자로 생성된 객체는 변경된 내용을 상속받게 된다. (당연한 얘기)

 5) prototype 객체를 참조하는 것은 생성한 객체의 __proto__ 메서드이다.

 

function - __proto__ - prototype 간의 관계


 

 그렇다면 __proto__에 대해 알아보도록 하자.


2. __proto__

 __proto__란 prototype link라고 불리며 객체가 생성될 때 조상이었던 함수의 prototype 객체를 가리킨다.

 

간단한 실험을 통해 알아보자

 

 1) function a(){} - 함수를 생성한다.

 2) a.prototype.a_val = 1; - 해당 함수의 prototype 객체에 a_val = 1이라는 값을 추가한다.

 3) b = new a(); - 생성자를 통해 b라는 객체를 생성한다.

 4) b.__proto__를 확인한다!

 5) __proto__에는 조상 함수의 prototype 객체인 a.prototype을 나타낸다.

 6) 이러한 관계를 b가 a를 상속받았다고 한다. 왜냐고? b.a_val를 출력하면 1이 나오니까!

b.__proto__ 객체

 

b를 출력하면 알 수 있겠지만 b객체 자체는 a_val를 가지고 있지 않는다.

__proto__ 객체밖에 없다. 바로 이 객체가 a_val 속성을 찾을 때까지 조상 prototype을 참조해나간다!

b 객체

최상위인 Object의 prototype 객체까지 찾지 못했을 경우 undefined를 리턴한다.

이렇게 __proto__ 속성을 통해 상위 프로토타입과 연결되어있는 형태를 prototype Chain이라고 한다.


3. 정리

 1) 함수가 정의되면 메모리에 함수와 생성자를 생성할 수 있는 prototype 객체가 생성된다.

 

 

 2) 함수에는 prototype 객체를 참조 가능한 prototype 프로퍼티__proto__ 객체가 생성된다. 

 

 3) 1)에서 생성된 prototype 객체 안에는 constructor 프로퍼티가 있고 이는 자신을 생성한 생성자 함수를 가리킨다.

 

 4) 함수의 생성자(new)로 생성되는 객체들은 __proto__ 객체를 상속받는다.

 

 5) __proto__ 객체는 자신의 조상 prototype 객체를 가리킨다.

 

 6) 상속된다.

 

 이 정리가 이해가 가지 않는다면 __proto__ 실험 과정과 맨 위의 그림을 번갈아가며 과정을 따라가다 보면 prototype, 즉 상속의 원리와 과정을 이해할 수 있을 것이다. 

 

 이로써 prototype을 마무리하도록 하겠다.

반응형
반응형

목차

1. $('document').ready(function){} 란?

2. 예제 및 실행화면

 

1. $('document').ready(function){} 란?

 결론부터 말씀드리자면 'html문서의 로딩이 다 끝나면' 을 의미합니다.

 

 문장을 해석해보면 'document'라는 객체의 준비가 끝나면 즉, 로드가 완료되면 함수를 실행한다' 입니다.

 여기서 document는 하나의 html 파일을 나타내는 트리의 루트 노드 객체라고 생각하시면 편할 것 같습니다.

 

HTML DOM Tree (출처 - W3C)

 

 그렇다면 이 코드는 왜 있는것일까요? 예제를 통해 알아보면 이해가 쉽습니다.

 

2. 예제 및 실행화면

 2.1) 예제 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
</head>
<body>
    <script>
        $('p').click(function(){
            $(this).hide();
        })    
    </script>
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
</body>
</html>

위의 예제는 p 태그를 클릭할 시 this 즉, 해당 p 태그를 hide 시키는 것입니다.

 

 2.2) 실행화면 1

 실행화면_1

실행 결과, 클릭을 해도 <p>태그의 내용이 사라지질 않습니다.

이유는 컴파일과 관련이 있습니다.

컴파일은 일반적으로 위에서 아래방향으로 이루어지는데, <p>태그가 나오기 전에 script문이 호출되었기 때문에 결과적으로 JQuery문법이 p태그를 찾지 못했고, 쿼리에 대한 함수 또한 적용시키지 못했습니다.

 

그렇다면 script문을 아래로 옮겨보겠습니다.


 2.3) 예제 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
</head>
<body>
    
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
    <script>
        $('p').click(function(){
            $(this).hide();
        })    
    </script>
</body>
</html>

 script문이 </body> 바로 위에 위치합니다.

 

 2.4) 실행화면 2

실행화면_2

 <p> 태그에 해당하는 부분을 클릭하니 오른쪽 사진과 같이 텍스트가 사라진 것을 볼 수 있습니다.

 

 예제 1과 다르게 script문이 <p> 태그 아래 있기때문에 JQuery 문법이 p라는 태그를 찾을 수 있고 함수를 적용시킬 수 있습니다.

 

 HTML은 기본적으로 위에서 아래로 컴파일이 됩니다.

 컴파일러가 script문을 만날 경우 로드되던 HTML 작업이 중단되고 script문을 처리합니다.

 만약 script문이 길다면 페이지 로드가 중단되는 시간이 길어지고, 사용자가 웹페이지를 기다리는 시간이 길어집니다.

 

예를들어 눈에보이는 정보가 HTML이고 기능을 입히는 것이 script라고 한다면

1) 사용자에게 보이는 HTML 로드 -> script문 로드

2) 사용자에게 안보이는 script문 로드 -> 사용자에게 보이는 HTML 로드

이 둘 중 1번 상황이 웹 정보를 사용자가 먼저 파악할 수 있기 때문에 효율적이라는 것을 알 수 있습니다.

 

 이 외에도 여러가지 이유때문에 script문을 </body>태그 바로 위에 위치시키는 것을 선호한다고 합니다.

 

 하지만 예제 1처럼 script문이 위에 위치하더라고 페이지 로드가 끝난 후 script문을 실행시키도록 하는 코드가 있습니다. 그게 바로 오늘의 주제인 $('document').ready(function){}입니다.


 2.5) 예제 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>$('document').ready(function(){})</title>
</head>
<body>
    <script>
        $('document').ready(function(){
            $('p').click(function(){
                $(this).hide();
            })
        })    
    </script>
    <p>
        $('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
    </p>
</body>
</html>

작성했었던 script문을 $('document').ready(function){} 코드 안에 넣어줬습니다.

이로써 위의 script문은 HTML 코드에 대한 페이지 로드가 끝난 후 실행이 되고, <p> 태그를 찾아 함수를 적용시킬 수 있습니다.

 

2.6) 실행화면 3

실행화면_3

 실행화면_2와 동일한 결과를 출력합니다.

반응형
반응형

목차

1. 개요

2. 사전 정보

3. 예제

4. 실행화면


1. 개요

 jQuery의 click 이벤트를 사용하여 어떤 태그를 클릭시 클릭했다는 것을 알 수 있게 색을 입히는 기능을 구현해보았다.


2. 사전 정보

 2.1) css 문법

  - id에 css 적용하기

   #id{ 속성 : 속성값; }

  

  - id의 태그에 css 적용하기

   #id tag{ 속성 : 속성값; }

 

  - id의 클래스에 css 적용하기

   #id .class{ 속성 : 속성값; }

 

 2.2) cursor 속성

  - css 속성 중 하나인 cursor은 지점에 커서를 이동시켰을 경우 나타나는 커서의 모양을 지정하는 속성이다.

속성값 설명
default 기본
crosshair 십자가 표시
pointer 손가락 표시
help 물음표
wait 초시계

 

 2.3) float 속성

  - css 속성 중 하나인 '뜨다' 라는 의미를 가진 float는 '머리만 떠있는 것 같다' 처럼 어떤 내용의 content만 떠있고 나머지 여백은 없애는 속성이다.(약 뇌피셜) 

속성값 설명
left 왼쪽 정렬
right 오른쪽 정렬

 


3. 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>click event</title>
        
        <style>
            #navigation li{
                list-style: none;
                float:left;
                padding:10px;
                border: 3px bisque inset;
            }
            #navigation{
                cursor:pointer;
            }
            #navigation .selected{
                background-color:red;
                color:white;
            }
            #id
 
            #id .class{
                background-color: red;
            }
        </style>
    </head>
    <body>
            
        <ul id="navigation">
            <li>1번 list</li>
            <li>2번 list</li>
            <li>3번 list</li>
            <li>4번 list</li>
        </ul>
        <script>
                $('#navigation li').click(function(){
                    $('#navigation li').removeClass('selected');
                    $(this).addClass('selected')
                })
        </script>
    </body>
</html>

 6번 라인.

  CDN 방식으로 jquery를 로드한다.

 

 7번 라인.

  navigation의 li 태그

  - list-style:none - 기본값인 · ' 을 없애기 위한 속성

  - float:left - 아래로 정렬되어야 할 li 속성이지만 공백을 제거하여 li속성 옆에 바로 li속성이 붙도록 하고 왼쪽정렬 시킴

  - padding:10px - 태그와 텍스트 사이의 여백

  - border - 테두리 설정

 

 15번 라인. 

  - cursor:pointer 커서를 댈 시 손가락 모양

 

 38번 라인.

  $('#navigation li').click(function(){내용} - 아이디가 navigation인 태그의 li 태그를 클릭 시 함수를 실행한다.

  $('#navigation li').removeClass('selected') - 아이디가 navigation인 태그의 li에서 'selected' 클래스를 제거한다.

  $(this).addClass('selected') - 클릭한 태그에 selected라는 클래스를 넣어준다.


4. 실행화면

1번 클릭시
2번 클릭시
3번 클릭시

 

반응형
반응형

목차

1. 정의

2. 사용법

3. 문법

4. 예제

5. 실행화면


1. 정의

 실무에서 자주 사용하는 자바스크립트 코드들을 쉽게 사용할 수 있도록 정의된 일종의 라이브러리이다.

 자바스크립트 코드를 이용한 기능들을 쉽게 구현할수 있다. (생산성 향상)

 chain 기법을 사용한다. - 명령을 '.(온점)'을 기준으로 줄줄이 나열하여 사용하는 것.

 

2. 사용법

 JQuery를 사용하려면 JQuery를 import 해야한다.

 import 하는 방법은 기본적으로 두가지이다.

 

 - 직접 파일을 다운받는 방식

 - CDN(Content Delivery Network) 방식

 

 1) 직접 파일 다운 방식

  1.1) https://jquery.com/ 접속한다.

  1.2) Download JQuery 를 클릭한다.

Download JQuery 클릭

 

  1.3) compressed 버전을 다운받는다.

   - compressed 버전 : jQuery를 압축한 형태로 크기가 적고 속도가 빠르다. 

   - uncompressed 버전 : JQuery의 원본파일. JQuery를 직접 수정할만큼의 복잡한 작업을 수행할 때 사용. 크기가 큼.

   우리는 입문 단계이기때문에 compressed를 클릭한다.

  1.4) 작업 위치에 저장

  

 

  1.5) 코드 입력

1
<script src="jquery-3.4.1.min.js"></script>

 

 2) CDN 방식

 CDN이란 Content Delivery Network의 약자로 전세계의 분산된 네트워크 서버에 파일에 대한 캐시를 저장시켜 사용자와 가장 가까운 서버의 캐시를 이용해 데이터를 전달받는 것. 

 

 2.1) 코드입력

3. 문법

 $('.클래스명').method1().method2();

 

 css selector 문법과 동일하며 제어하고싶은 클래스명을 '.classname' 형태로 입력해준다.

 classname 이라는 클래스를 가진 모든 엘리먼트들을 제어할 수 있다.

 

4. 예제 

1
2
3
4
5
    <div class='ssk'></div>
    <script>
        $('.ssk').html('my name is ssk'); //css select 문법 - welcome 의 클래스를 참조한다
    </script>

 $('.ssk') - ssk라는 클래스의 제어권을 가져옴

 .html('my name is ssk') - 해당 클래스의 html 태그에 문자열을 입력함

 

5. 실행화면

출력

 

반응형
반응형

목차

1. 개요

2. prototype

3. 테스트


1. 개요

 앞선 글에 이어서 prototype과 __proto__의 정체에 대해 파악해보도록 하겠다.


2. prototype

 함수가 생성되면 prototype 프로퍼티와 __proto__라는 메소드가 생성된다.

 prototype 프로퍼티는 생성된 함수의 원형 정보를 가지고 있는 prototype 객체에 접근할 수 있고,

prototype 객체는 생성된 함수 객체를 가리킨다.

잊어버리지 않게 이들의 관계를 다시한번 그림으로 나타내면 아래와 같다.

prototype과 constructor의 관계


3. 테스트

 prototype이 정확히 무슨 역할을 하는지 알기 위해 몇 가지 테스트를 진행하였다.

 

1) 함수를 정의하고 prototype 출력

1
2
3
4
5
6
7
8
<script>
        function a(){
            val_a = 1
        }
        //a.prototype.val_a = 2
        console.log(a)
        console.log(a.prototype)
    </script>

console 화면

a를 출력했더니 a 함수를 정의가 나오고

a.prototype을 출력했더니 객체가 나오고 그 객체에는 constructor(생성자)와 __proto__가 정의되어 있다.

 

 

console 화면

prototype 객체가 원래의 함수객체에 어떤 영향을 미치는지 확인하기 위해 5번 라인의 주석을 해제하고 컴파일하였더니

a에는 정의했던 함수의 원형이, a.prototype에는 val_a = 2라는 프로퍼티가 추가되어 출력되었다.

 

여기에서 얻은 결론은 prototype이 함수의 원형에는 영향을 미치지 못한다는 것이었다.

원형의 의미를 가진 prototype이 원형에 영향을 못미치는게 아이러니하다. 더 파고들어 이 의미를 이해해야겠다.

 

2) 생성자 호출

1
2
3
4
5
6
7
8
9
10
11
    <script>
        function a(){
            val_a = 1
        }
        a.prototype.val_a = 2
        console.log(a)
        console.log(a.prototype)
 
        b = new a()
        console.log(b)
    </script>

 b라는 변수에 a 생성자를 생성하여 대입하고 b를 출력하였다.

 

console.log(b)

 b를 출력했더니 생성자인 a가 출력되었고, 그 안에는 __proto__가, 그 안에는

val_a : 2, constructor : f a(), __proto__: Object 가 있었다.

그리고 이 내용은 위에서 출력한 a.prototype의 내용과 동일했다.

 

이로써 prototype에 대한 정보를 얻었다.

1. 함수에 대한 prototype은 생성자를 통해 정의된 객체가 상속받는 정보이다.

2. __proto__는 해당 객체가 상속받은 prototype의 정보를 갖고 있다.

 

정확한 확인을 위해 b.__proto__ === a.prototype 라는 코드를 넣어보았더니

true가 출력되는 것을 확인할 수 있었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <script>
        function a(){
            val_a = 1
        }
        a.prototype.val_a = 2
        console.log(a)
        console.log(a.prototype)
 
        b = new a()
        console.log(b)
        console.log(b.val_a)
 
        console.log(b.__proto__ === a.prototype)
    </script>
 

b.__proto__ === a.prototype

 

공부한 내용을 정리하면

1) 함수가 정의되면 prototype을 참조 가능한 prototype 프로퍼티, __proto__ 메소드가 생성된다.

2) prototype은 constructor(생성자)를 참조 가능하다. 이를 통해 해당 함수의 생성자로 생성되는 객체들이 prototype 객체를 상속받게 되며, prototype의 내용을 변경하면 객체들은 변경된 내용을 상속받게 된다.

3) 이 prototype 객체를 참조하는 것은 생성한 객체의 __proto__ 메소드이다.

 

function - __proto__ - prototype 간의 관계

 

공부하다보니 이해가 안가는 부분이 계속 나타나고 있다. 다음 게시글로 이어가도록 하겠다.

반응형
반응형

목차

1. 개요

2. 함수 생성

3. prototype과 __proto__


1. 개요

 OOP(객체 지향 프로그래밍)에서는 객체간의 상속을 프로토타입이라는 메커니즘을 통해 구현한다.

 prototype의 사전적 의미는 원본, 초본이며, 이처럼 수정하지 않은 메소드나 생성자의 '원본'을 상속시키는 역할을 한다.

굉장히 생소해보이지만 프로그래밍 언어를 조금이라도 다뤄본 사람이라면 쉽게 이해가 가능하다.


2. 함수 생성

함수 생성 및 확인

 

F12를 눌러 관리자모드로 들어간 후 a(name)이라는 함수를 정의한다.

a를 출력해보니 위처럼

arguments, caller, length, name, prototype, __proto__가 나오는걸 볼수있다.

 

위의 용어를 하나하나 살펴보자.

용어 의미
arguments(인수) 함수가 호출될 때 함수로 값을 전달해주는 값
parameter(매개변수, 없지만 헷갈릴까봐) 전달받은 argument를 함수 내부로 전달하기위해 사용하는 변수 
caller 현재 함수를 호출한 함수
length 인수의 개수(길이)
name 함수의 이름
prototype 상속시킬 객체의 원형
__proto__ 상속받은 객체

 이 중에서 오늘의 주제인 prototype과 __proto__에 대해 알아보도록 하자.


3. Prototype

 prototype의 사전적 의미는 '원형, 원본'이다. 상속을 받을 때 해당 함수의 원형을 받아야 하기 때문에 prototype이라는 단어를 사용하는 것 같다. 그리고 prototype 객체는 함수를 생성할때 동시에 생성된다. 왜? 언제든 상속시켜줄수있도록 원본을 보존해야하니까.

 

function - prototype 구조

 

function은 prototype이라는 프로퍼티를 사용해 prototype에 새로운 프로퍼티나 메소드를 추가할 수 있고,

prototype은 constructor(생성자)를 사용해 function에 접근할 수 있다.

 

 

 

매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미합니

 

반응형

+ Recent posts