public class Animal {

}

 Animal 클래스는 가장 간단한 형태의 클래스이다. 클래스의 선언만 있고 내용이 없는 껍데기뿐인 클래스이다. 하지만 이 껍데기뿐인 클래스도 아주 중요한 기능을 가지고 있다. 그 기능은 바로 객체(object)를 만드는 기능이다. 

객체는 다음과 같이 만들 수 있다.

Animal cat = new Animal();

new 는 객체를 생성할 때 사용하는 키워드이다. 이렇게 하면 Animal 클래스의 인스턴스(instance)인 cat, 즉 Animal의 객체가 만들어진다.

 

※ 객체와 인스턴스

클래스에 의해서 만들어진 객체를 인스턴스라고도 한다. 그렇다면 객체와 인스턴스의 차이는 무엇일까? 이렇게 생각 해 보자. Animal cat = new Animal() 이렇게 만들어진 cat은 객체이다. 그리고 cat이라는 객체는 Animal의 인스턴스(instance)이다. 즉 인스턴스라는 말은 특정 객체(cat)가 어떤 클래스(Animal)의 객체인지를 관계위주로 설명할 때 사용된다. 즉, "cat은 인스턴스" 보다는 "cat은 객체"라는 표현이 "cat은 Animal의 객체" 보다는 "cat은 Animal의 인스턴스" 라는 표현이 훨씬 잘 어울린다.

 

과자를 만드는 과자틀과 만들어 진 과자들이다.

  • 과자틀 → 클래스 (Class) // 설계도.
  • 과자틀에 의해서 만들어진 과자들 → 객체 (Object)

즉, 다음과 같이 무수히 많은 동물 객체(cat, dog, horse, ...)들을 Animal 클래스로 만들 수 있는 것이다.

Animal cat = new Animal();
Animal dog = new Animal();
Animal horse = new Animal();
public class Animal {
    String name; // 객체 변수라고 부른다. 또는 인스턴스 변수, 멤버 변수, 속성
}

즉, 클래스에 의해 생성되는 것은 객체, 그리고 그 클래스에 선언된 변수는 객체 변수라고 생각하면 쉽다.

 

다음으로 객체 변수를 만들었으니 이제 객체 변수를 사용해 보도록 하자. 먼저 객체 변수는 변수이므로 값을 대입할 수 있을 것이다. 대입하기 전에 객체 변수는 현재 어떤 값을 가지고 있는지 먼저 출력 해 보도록 하자.

객체 변수를 출력하려면 객체 변수에 어떻게 접근해야 하는지를 먼저 알아야 한다.

객체 변수는 다음과 같이 도트연산자(.)를 이용하여 접근할 수 있다.

 

객체.객체변수

public class Animal {
    String name;

    public static void main(String[] args) {
        Animal cat = new Animal();
        System.out.println(cat.name);
    }
}

//결과는 null이다.

cat.name을 출력한 결과값으로 null이 나왔다. null이라는 것은 값이 할당되어 있지 않은 상태를 말한다.

객체 변수로 name 을 선언했지만 아무런 값도 대입을 하지 않았기 때문에 null 이라는 값이 출력된 것이다.

 

 

https://wikidocs.net/257 미쳤다 블로그 글 너무 알차다. 

JVM은 사용자가 작성한 java코드를 byte code로 변환하고 class파일로 만들어 Runtime data area에 적재한다. 

 

메소드 영역 : class 정보, static 변수 , 메소드 정보, 생성자등을 분류해서 저장하고 스레드가 공유하는 영역.
힙 영역 : 객체와 배열이 생성, 가비지 콜랙션에 의해 힙영역에서 자동으로 쓰레기 객체를 제거. 

new 연산을 통한 인스턴스 변수, 참조 변수가 있다. 
 
스택 영역 : 각 스레드마다 하나씩 존재한다. 지역 변수, 매개 변수가 이에 해당한다. 
*메소드, 힙 => 스레드가 공유 
스택 => 각 스레드 하나씩. 

 

 

 

 

자바 - 가상 머신 - (윈도우, 리눅스, 맥)

제임스 고슬링이 가전제품의 효율적인 사용을 위해 프로그램 언어로 JAVA를 만들었음. 

 

JDK vs JRE vs JVM 차이는? 

JVM : OS 실행환경. 

JDK : 개발툴 설치( 개발을 하기 위한)

JRE : 개발 실행( 자바를 실행을 위한 ) //개발을 안할꺼면 필요없음.   java runtime environment

*IDE는 개발 툴( 이클립스, 인텔리 J 등 ) *API : 자바실행과 관련된 API (JVM실행시 함께 실행됨)

 

JVM의 역할 

  • 바이너리 코드를 읽는다.
  • 바이너리 코드를 검증한다.
  • 바이너리 코드를 실행한다.
  • 실행환경(Runtime Environment)의 규격을 제공한다. (필요한 라이브러리 및 기타파일)

 

돌아가는 구조

 

 

JRE

  • JRE는 JVM 이 자바 프로그램을 동작시킬 때 필요한 라이브러리 파일들과 기타 파일들을 가지고 있다.
  • JRE는 JVM의 실행환경을 구현했다고 할 수 있다.

JDK

  • JDK는 자바 개발도구(Java Development Kit)의 약자이다.
  • JDK는 JRE + 개발을 위해 필요한 도구(javac, java등)들을 포함한다.

jvm, api, jre, jdk란?   

컴파일과 인터프리터 

 

 

 

JAVA SE(stand edition) : 일반적인거.

JAVA ME(Mobile edition) : 모바일 개발. 잘안씀

JAVA EE : 기업 솔루션 개발.  

JAVA IDE: 통합 개발툴. 

JDK는 java 개발 키트. 

 

컴터에서 32비트와 64비트 차이. 

가비지 콜랙션 , 객체지향 언어 ( 유지보수 효율 )

 

JAVA 환경 변수 세팅 

bin 폴더 안의 javac.exe : java 파일을 jvm이 받아 들일 수 있는 .class 파일로 변환 시켜주는 프로그램. 

(매번 해당 경로에 들어가서 실행하기가 번거로우므로, 환경 변수 설정을 통해서 어디서나 실행 가능하게 함.) 

 시스템 설정. 

javac는 java compiler의 약어다. 

 

.java는 사람이 작성한 source 코드고 확장자가 .class인 파일로 변환한 다음 파일을 실행한다. 

왜? 자바 컴파일러를 통해서 기계가 쉽게 이해할 수 있는 byte code로 이뤄진 class파일로 변환. 

javac 파일명.java => 컴파일 과정에서 소스 코드 분석, 문법의 유효성을 검사한다. 

 

자바가 컴파일한 파일이 exe가 아니라 class파일인 이유는? 

컴파일을 하고 난뒤에 class파일이 생성되는데 왜 굳이 컴파일과 실행을 따로할까?? 

JVM은 byte code(.class파일)을 실행할 때에는 컴파일 과정에서 진행한 일들을 진행하지 않고 말그대로 실행만 한다. 

 때문에 컴파일+ 실행 이 아닌 실행만하기 때문에 빠르고 소스코드의 문법검사를 생략할 수 있다.

생성 형태

여러환경으로 받아온 class를 jvm에서 돌리기 위한 이유도 있다.

c, c++과 같은 언어는 컴파일 된 실행 파일을 모든 운영체제에서 동일하게 사용하는것이 불가능하다. 

그래서 자바는 JVM이라는 중간단계가 있으므로 C등의 언어보다 속도가 느리다. 하지만 한번 작성한 파일은 어떤 OS에서라도 사용할 수 있다는 장점이 있다. 

 

src 폴더는 .java 파일들이 저장되는 경로이며 bin 폴더는 .class 파일들이 저장되는 경로이다. .classpath와 .project는 현재 프로젝트의 환경값들을 저장하는 이클립스의 설정파일들이다.

Node Js는 컴파일을 안하나 그럼? 

 

 

JAVA CLASS PUBLIC 

단일 파일 컴포넌트 : 코드를 기능 단위로 분리하여 짤 수 있다.  
장점 : 재사용 편리, 캡슐화 가능, 디버깅 쉬움, 테스트 작성 편리, 협업 편리  
컴포넌트 구성 :  /* templete + script + style */

컴포넌트 활용 :  사용하고자 하는 곳에서 쓰나 ..  
.js파일  
 

*클라이언트 사이드 렌더링 (SPA ) 

모바일의 시대에 등장한 클라이언트사이드렌더링 Single Page Application(SPA)

최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 말함.

 

 

렌더링 방식은 클라이언트사이드렌더링 방식이다. 기본적으로 페이지 로드가 없고 모든 페이지는 단순히 HTML5 형식에 의해 렌더링 될뿐, 언제 새로운 데이터를 불러와야할지 스스로 정해서 구현해야함. 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신합니다. 정리하자면 첫 요청시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식입니다.

 

반면 서버 사이드 렌더링 방식(SSR)은? 전통적인 웹 대부분이 서버사이드렌더링 방식이었다. 즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식이었다. 이런 방식을 사용하다가 일부 HTML과 Script만 브라우저로 전달하고, 브라우저에서 Script를 실행시켜 서버에서 데이터를 조회하여 HTML을 생성하는 방식

 

하지만 요즘은 웹에서 제공되는 정보가 너무 많기 때문에 이 방식은 성능 문제에 이슈가 많다. 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링하기 때문이다.

 

예를 들어 

예를들어 현재 주소에서 동일한 주소를 가리키는(갖고있는) 버튼을 눌렀을때, 설정페이지에서 필요한 데이터를 다시 가져올 수 없다. 이것은 사용자와 인터랙션이 많은 요즘 웹앱에게 충분하지 않는 방법일 수 있다. 렌더링을 서버쪽에서 하는 것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는 것이고, 불필요한 트래픽도 낭비되는 것이다.

 

클라이언트 사이드 렌더링은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행한다.

 

SPA는 한 종류의 화면만 존재하는 것이 아니다!
화면에 따라 다른 주소를 가진다. 주소가 있어야 사용자들이 북마크도 가능하고, 서비스에 구글을 통해 유입될 수 있기 때문이다.(SEO). 각 페이지마다 링크가 필요하다.  Vue-CLI로 만든 앱은 검색엔진최적화(SEO)가 어렵다는 점이 있다.

 웹서비스를 하는 회사 입장에서는 검색엔진에 적절하게 노출되는 것이 아주 중요합니다. 

 

주소에 따라 다른 뷰를 렌더링하는 것을 라우팅이라고 한다. React자체에는 이 기능이 내장되어있지않기 때문에 라이브러리 react-router를 사용해서 설정해야한다.

 

 

클라이언트사이드렌더링의 장점 / 단점

  1. 장점
    1-1. 트래픽감소
    필요한, 변경된 데이터만 받아서 그림
    1-2. 사용자경험
    새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.
  2. 단점
    2-1. 검색엔진
    자바스크립트 위주로 돌아가는 프로젝트는 자바스크립트 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 못함. 크롬에서 react로 만든 웹앱의 소스를 확인하면, 내용이 비어있다. 그렇기 때문에 검색엔진 크롤러가 데이터들을 제대로 수집하지 못한다. 하지만 짱짱맨 구글의 검색엔진은 자바스크립트 엔진이 내장되어있다. 하지만 네이버, 다음 등의 검색엔진은 제대로 크롤링하지 못하기때문에 서버사이드렌더링을 따로 구현해야한다.

요약 

 JavaScript 코드가 동작하기 전에도 완성된 형태의 탬플릿(HTML에 데이터가 삽입된 상태)을 서버로 부터 전달받습니다. 이 때문에 JavaScript 를 구동하지 않는 모르는 검색 로봇이 페이지를 크롤링하기에 매우매우 적합
단점으로는 매 페이지 요청마다 페이지 리로딩(새로고침)이 발생하며,  SPA  와는 정반대로 서버의 리스폰스에 의존해서 페이지를 이동해야하기 때문에 퍼포먼스, 사용자 경험(UX) 측면에서  SPA 에 비해 떨어진다고 볼 수 있습니다.

 

참고자료 

https://medium.com/aha-official/%EC%95%84%ED%95%98-%ED%94%84%EB%A1%A0%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EA%B8%B0-1-spa%EC%99%80-ssr%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EA%B7%B8%EB%A6%AC%EA%B3%A0-nuxt-js-cafdc3ac2053

 

아하 프론트 개발기(1) — SPA와 SSR의 장단점 그리고 Nuxt.js

지난 편에서 프론트엔드 프레임워크를Vue.js 로 결정하고 본격적으로 개발에만 집중하면 될 줄 알았지만, 한 가지 더 고민할 부분이 있었습니다. Vue-CLI로 만든 앱은 검색엔진최적화(SEO)가 어렵다는 점이죠.

medium.com

Vue.js 에서 SSR 적용하기

서버 환경이 node.js 일 때, Vue.js 에서 SSR하는 방법으로 세 가지 옵션이 있습니다.

  1. Prerendering (webpack 의 prerender-spa-plugin 사용)
  2. Vue SSR Guide를 참조해서 직접 구현 (vue-server-renderer사용)
  3. Nuxt.js 프레임워크를 사용

첫 번째, Prerendering 은 검색엔진 노출이 필요한 페이지들을 배포시점에서 렌더링해서 정적인 파일(.html)을 생성해 두는 방식입니다. 가장 손쉽게 SSR을 적용하는 방법이지만, 동적인 페이지에는 적용이 불가능하다는 단점이 있습니다.

두 번째, Vue SSR vue-server-renderer 를 활용해서 SSR하는 방식입니다. 서버와 클라이언트에서 모두 안정적으로 동작하는 JavaScript 코드 작성(window , document 등 브라우저 전용 전역변수 사용 주의 등) 해야하고 데이터 프리 패칭, css, font, image 등의 assets 를 관리하기 위한 webpack 설정 등을 한 땀 한 땀 해줘야 합니다. 신경써줘야할 것이 굉장히 많고 시행착오도 많이 겪어야 했습니다. 다만 이미 Vue.js 로 동적인 앱을 운영하고 계시다면 고려할 만한 거의 유일한 옵션인 듯 합니다.

세 번째, Nuxt.js 는 Vue.js 기반의 애플리케이션을 새로 작성하신다면, 그리고 SSR이 필요하시다면 무조건 추천드리고 싶습니다. 위에 서술한 많은 작업들을 시행착오를 줄이고, 일관된 스타일로 코드를 작성할 수 있도록 도와줍니다. 새로운 프로젝트를 시작하신다면 꼭꼭!! Nuxt.js 를 고려해보시기 바랍니다!

 

 

 

[java script편]

script를 문서 아래에 넣는 이유? 

js는 위에서 부터 아래로 코드를 인식함 -> <script>안의 내용을 읽는동안 body는 아무일도 하지 않음 

-> 사용자 입장에서 느리다고 생각할 수 있음 -> body아래로 script를 옮긴다면 ? onload, ready없이 쓸 수 있고 

-> js가 쓰여지지 않았더라도 body의 html요소들이 화면에 먼저 로드 되기 때문에 사용자들이 빠르게 느낄 수 있다. 

 

싱글톤 패턴이란? 
- 객체를 한번만 생성하고 동일한 객체를 자바 코드에서는 호출해서 쓰는 방식을 의미합니다.
팩토리 패턴이란? 
- 상위 클래스에서 객체를 생성하는 인터페이스를 정의하고 하위 클래스에서 특정 인스턴스를 생성하는 방식을 의미합니다. 

REST API란? 
백엔드와 프론트를 직관적으로 분리하여서,  HTTP Method 를 통해 자원을 처리하도록 설계하는 것이다.
API 설계의 중심에 자원(Resource)이 있고 , GET(조회), POST(생성), PUT(기존 entity 전체 수정), PATCH(기존 entity 일부 수정), DELETE(삭제)을 분명한 목적으로 사용한다.


JSP vs SERVLET 
=> Servlet은 톰캣과 같은 서버 위에서 동작하는 순수 java 프로그램이고, JSP는 클라이언트 단에서 html과 java코드를 쓰는 스크립트 언어로서 View단에서 역할을 한다.   

GET VS POST
 GET 방식은 요청하는 데이터가 HTTP Request Message의 Header 부분의 url 에 담겨서 전송.
 특징: 크기가 제한적이고 보안에 위협이 있지만, 빠르다. 
 POST 방식의 request 는 HTTP Message의 Body 부분에 데이터가 담겨서 전송


스프링 정의? 
https://goddaehee.tistory.com/156
https://goddaehee.tistory.com/154
 

스프링 과정? https://kim6394.tistory.com/161
 https://private.tistory.com/3

CSS란? 웹문서의 디자인 " 전반적인 스타일을 정하는 언어" 
Node.js란? 자바스크립트 기반의 언어이고 서버까지 로직처리가 가능한 언어다. 단일 쓰레드 이벤트를 이용한 비동기 방식이고 처리가 빠르다. 
MVC 패턴이란? Model , Controller, View 로 나누어 둔 것. 

 

Spring의 장점은? 

 

Mybatis보다 강점을 가진 것이 JPA다. 

 

'개발 및 언어 > 자바스크립트' 카테고리의 다른 글

[JavaScript]querySelector  (0) 2020.01.21
CSS 기초 지식 함양.  (0) 2020.01.11
09.20_웹프로젝트( JS + JQuery )  (0) 2020.01.11

Display 속성 

레이아웃 기본. 

블럭 vs 인락인 

블럭 : div (박스다) 

인라인 : span  (text처럼 생각하면 된다.) //4가지만 기억 block, inline, inline-block, none, 

* 생각포인트 : 인라인은 박스가 아니기 때문에 크기 조절이 안됨. 

블록 인라인
article, aside, audio, div, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, p, pre, section, table, ul, video a, br, button, em, i, img, input, label, map, object, small, script, select, span, strong, textarea, var

* padding을 설정하면 가운데로 깔끔하게 정리되구만. 

( padding : 5% , width: 50% )라고하면 화면에 55%를 차지한다. 

인라인 속성 

span{

display: inline( 기본 ) , inline-block( 크기 조절이됨, but 나란히 입력히 된다. ) , none: 화면에 안보이게 함. 

}

margin(외벽) > border(경계) > padding> 내용

box-sizing : context-box(margin까지 포함 ), border-box ( border까지 포함

 

* vertical-align: top; middle, bottom  // 차지하는 공간에서 위로 올림. 

* margin-left : auto , margin-rigth : auto 하면 여백이 생겼을 때 자동으로 오른쪽 왼쪽 맞춰 준다. 

=> margin: 0 auto ; // 상하:0 , 좌우:auto라는 뜻. 

 

*float : left // 블록이 왼쪽으로 붙인다.

*float : right 

-> but float에는 많은 어려움을 유발한다. 

=> div 1안에 다른 div2(float) 블록을 가질 때 정상 동작을 안 할 수있다. 

clear: both; 를 해줘야한다. 

footer { clear: both; // float}

ctrl + shifg + i => 개발자 도구. 

 

position 

https://aboooks.tistory.com/82 참고

static, relative, absolute, flexed가 있는데 ,

absolute는 상위 요소로 부터 절대적인 위치. 

relative는 상위 요소로 부터 상대적인 위치. 

 

 

 

참고 영상( 졸라 잘가르친다)

https://www.youtube.com/watch?v=Zny5Vxqk6Mk&list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX&index=5&t=0s

https://www.youtube.com/watch?v=Y3_2BLb3hz8&list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX&index=3

 

 

'개발 및 언어 > 자바스크립트' 카테고리의 다른 글

[JavaScript]querySelector  (0) 2020.01.21
JAVA SCRIPT_CS.  (1) 2020.01.11
09.20_웹프로젝트( JS + JQuery )  (0) 2020.01.11

index.jsp

<img src = "regi.jpg" alt="회원가입" />   /* 이미지가 없다면 alt '회원가입'으로 대신한다.*/ 

$("#_frmForm").attr("target","_self").submit(); 
/*
frmForm 아이디 태그에서 target은 창 속성을 말하고 
self는 현재 열려있는것을 의미하고 제출후에 현재페이지를 표시한다는 의미.
*/

a.target="_self" : (default) 현재창에 표시

area.target="_blank" : 새로운 창에 표시

base.target="_parent" : 부모창에 표시

form.target="_top" : 윈도우 최상위에 표시


  • attr vs prop.
  • 세션, cookie 유지하는 방법. 
	<script type="text/javascript">
    
		$("#_btnRegi").click(function() {
			location.href='regi.jsp'; // 회원가입 페이지로 이동. 
		});
		$("#_userid").keypress(function(event) {
			if (event.which == '13') { // 13이 엔터 키를 의미 , 엔터키를 누르면, 
				event.preventDefault(); // 이벤트를 중단??? 그게 무슨말. 
				$("#_pwd").focus();
			}
		});			
		 
		$("#_pwd").keypress(function(event) {
			if (event.which == '13') {
				event.preventDefault(); //
				$("#_btnLogin").click();
			}
            // 키프레스가 키보드 입력이 들어오고
            // 엔터가 들어오면, 
            // 로그인 버튼이 클릭된다.! 
		});
		
		//id저장
        var user_id = $.cookie("user_id");
		//alert(user_id);
        if (user_id != null) {
        	$("#_userid").val(user_id);
            $("#_chk_save_id").prop("checked",true);
        }			
		//prop는 attr과 거의 유사하게 속성을 다루는데 사용하지만. 
        // attr은 속성을 변경할 때 주로 쓰고 
        // prop는 확인할 때 주로 쓴다. true , false 
        //$.cookie를 쓰면 세션에 아이디, 비번을 등록 유지 시키고, 
        // expires: 1은 브라우저가 꺼지지 않으면 1일간 유지한다
		$("#_chk_save_id").click(function () {
		    if ($(this).prop("checked")) {
		    	//alert('cookie');
		        if ($("#_userid").val() == "") {
		            $(this).prop("checked", false);
		            alert("아이디를 입력해 주십시요.");
		        } else {
		            $.cookie("user_id", $("#_userid").val(), { path:"/", expires:365 });
		        }
		    } else {
		    	$.cookie("user_id", null, { path:"/", expires:-1 });
		    }
		});			
	</script>

main.jsp

 

- 정적인 방식: <%@ include file="관련 URL" %>

- 동적인 방식: <jsp:include page="relativeURL" />

정적인 방식( 부모페이지 안에 자식꺼를 삽입해서 사용)이 동적( 부모페이지에서 자식페이지를 이동한뒤 작업후 다시 부모페이지로 돌아옴)인 방식보다 빠르다. 

<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset="utf-8">
<title>main</title>
</head>
<body>
<jsp:include page="hello.jsp"></jsp:include>
<h3>메인</h3>
</body>

1. 정적 include

 

jsp가 컴파일되기 전에 include한 파일(common.jsp)이 부모 페이지에 삽입되어 컴파일된다.


사용법 : <%@include file="/inc/common.jsp" %>
장점 : include 페이지에서 선언한 변수를 부모페이지에서 별도의 변수 선언없이 사용이 가능하다.
단점 : 부모 페이지에 include한 파일이 많을경우 inlucde 페이지에서 선언된 변수를 추적해야해 유지보수할때 귀찮다.

2. 동적 include

사용자가 부모페이지 호출시 실행되어질 시점에 include한 파일이 삽입된다.
사용법 : <jsp:include page="/inc/common.jsp" flush="true" />
장점 : 부모페이지와 include 페이지는 변수를 공유하지 않으므로 유지 보수시에 편하다.
단점 : 부모페이지에서 include한 파일에서 선언한 변수를 사용시 <jsp:param name="userName" value="<%=userName%>"/> 과 같이 부모페이지에서 지정해 주어야 한다.


<jsp:include page="/inc/common.jsp" flush="true">
    <jsp:param name="userName" value="<%=userName%>"/>
    <jsp:param name="userAge" value="<%=userAge%>"/>
</jsp:include>

 

* 장점은 모듈적으로 관리가 가능해진다. 

 

 

'개발 및 언어 > 자바스크립트' 카테고리의 다른 글

[JavaScript]querySelector  (0) 2020.01.21
JAVA SCRIPT_CS.  (1) 2020.01.11
CSS 기초 지식 함양.  (0) 2020.01.11

+ Recent posts