플러그인 추천 :  백기선님 설명보기>> 

셋팅 > 플러그인스 에서 설치 

key Promoter X  : 단축키 알려주는 프로그램 

Presentation Assistant : 영상 촬영시 유용 사용단축키 보여줌. 

톰캣 환경 설정

Add Configuration > Templates > Tomcat Server - Local [configure] 버튼  위치 등록 

단축키 사이트

>>https://resources.jetbrains.com/storage/products/intellij-idea/docs/IntelliJIDEA_ReferenceCard.pdf

https://www.catalysts.cc/wissenswertes/intellij-idea-and-eclipse-shortcuts/

https://confluence.jetbrains.com/pages/viewpage.action?pageId=51939004

전체 임포트 :: https://www.mkyong.com/intellij/eclipse-ctrl-shift-o-in-intellij-idea/   : setting > editor > general > auto import > add unambiguous imports~~ 체크, Optimizs import on the ~~ 체크

https://confluence.jetbrains.com/pages/viewpage.action?pageId=51939004

HTML CSS가 만나는 법.

HTML 문법 style 속성 

<h1 style="red"></h1>

<style> html문법 .  안쪽은 css 문법

<style>

h2{color:blue}

<style>

선택자

선택자와 선언

<li id="select">css<li>

#select{

font-size:100px

}

부모 자식 선택자

<ul id="lecture">

<li>HTML</li>

<li>CSS</li>

<ul>

<li>selector</li>

<li>declaration</li>

</ul>

<li>JavaScript</li>

</ul>

ul li{

color:red

}

바로 밑에 자식만 "> "

#lecture> li{

background-color:powderblue;

}

동시 선택 , "ol,ul"

선택자 팁

http://flukeout.github.io/

체트 씨트 : 컨닝페이퍼 같은거. 

가상 클래스 선택자 : pseudo class selector

• :link – 방문한 적이 없는 링크
• :visited – 방문한 적이 있는 링크
• :hover – 마우스를 롤오버 했을 때
• :active – 마우스를 클릭했을 때

a:active{

color:green

}

a:hover{

color: yellow

}

-> 클릭해도 hover가 뒤에 있어서 클릭이 적요이안됨

visited 는 보안때문에 일부만사용가능

:fucus{

}

가장뒤에 쓰는게 좋음 

적용순서

상속 : inheritance

<ul id="lecture">

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

html{color:red;}

#lecture{color:black}

부모의 색상을 자식이 물려받는게 효율적: 적은 코드로 많은 사용.  

상속되고 상속되지 않는 속성들이 있다. 

주석

/*

*/

캐스케이딩 cascading : CSS  웹브라우저  < 사용자 < 저자  볼수있는 디자인 권리를 준다. >>> 우선순위 참고

CSS : Cascading Style Sheet 캐스케이팅(연속적인) 스타일 시트 

1990년 HTML, 

하나의 테그에 여러 CSS 중첩되었을때.

<ul id="lecture">

<li>HTML</li>

<li id="idsel" class="classel">CSS</li>

<li>JavaScript</li>

</ul>

<style>

li{color:red: !important;}

#idsel{color:blue}

.classel{color:green;}

</style>

ID 선택자  > Class선택자 > 태그선택자  : Cascading 규칙

구체적인것 >  포괄절 :: 적용 우선순위

!important;

무조건 최우선 적용

서체 다루기

크기: font-size

unit 단위  : px  vs em vs rem

px 절대적

em, rem 브라우저 설정에 따라 상대적

결론적으로 rem 을 쓰도록. 폰트 크기를 조정할 수 있는 사용자의 권리

16px     >> 검사로 보면 계속 16px

16rem;  >> 검사로 보면 브라우저가 중간이 면 16px 크게 보면 24px로 나옴

브라우저 폰트 사이즈 미디엄.... very Large. : px 를 쓰면 글자가 바뀌지 않음, rem을 쓰면 폰트크기가 바뀜

color

color name, hex(16진수), rgb(빨강, 초록, 파랑 조합)

text-align

center, left, justify

justify :  양쪾이 균등하게 분배

      p{
        text-align: justify;
        border:1px solid gray;
      }

의미 없는 텟스트 lorem ipsum 로렘이썸

font-family, font-weight, line-height

     #type1{
        font-size:5rem;
        font-family: arial, verdana,"Helvetica Neue", serif;
  line-height:2;  /*두배 px 사용가나 부자연*/ 
  font:bold 5rem/2
      }
#type2{
font:bold 5rem/2 arial, verdana,"Helvetica Neue", serif;
}

font-family > 우선 순위에 따른 font 지정

장식 없는것 : sans-serif

장식 있는것 serif

고정폭 : monospace

합쳐서 써도됨. 

웹폰트

사용자가 폰트가 없으면 웹폰트 다운받아서 쓰게함... 영어는 가벼우나 한국어 용량이 큰편

Standard  

<link href="https:주소" 

Specify inCSS

#font1{

font-family: 'Open Sans Con~~';

}

font face generator 검색

ttf, otf, eot... 파일로 다운가능

web-font.html  이름 지정해서 해당 폰트 만들어 사용 가능

@font-face  {

font-family:'abc':

} 

body{

font-family:'abc'

}

레이아웃 기본

인라인 vs 블럭 레벨  inline vs block level

<h1>Hello wold</h1>

안녕하세요 <a href=""> 생활코딩</a> 입니다. 

<style>

h1, a {boder:1px solid red;}

h1{display: inline;}

a{display:block;}

</style>

인라인 엘리먼트 : a

블럭레벨 엘리먼트 (줄 전체-줄바꿈- 공간을씀) :h 태그

박스 모델 - 주사용 css 중 70%정도

높이감, 여백, 크기 조절

<p>

p테그

</p>

<p>

파라그래프

</p>

안녕하세요<a href="">생활코딩입니다. </a>입니다. 

p, a{ 

/*border-width:10px;

border-style:solid;

border-color:red;  : 테두리

*/

boder:10px solid red;

padding:20px; /* 해당 크기 만큼 화면이 벌어짐 : 접시 음식*/

margin:40px;/* 테두리와 다른 요소간 간격  : 접시 접시*/

width:50px;

hight:50px;

}

** 인라인 엘리먼트에 적용하면 width, hight 값이 무시된다. 

box-sizing 

    <style>
        *{
            box-sizing:border-box;
        }
        div{
            margin:10px;
            width:150px;
        }
        #small{
            border:10px solid black;
        }
        #large{
            border:30px solid black;
        }
    </style>
</head>
<body>
       <div id="small">Hello</div>
       <div id="large">Hello</div>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
      <style>
          h1{
              border:1px solid red;
              margin:100px;
          }
      </style>
  </head>
  <body>
  <h1>Hello world</h1>
  <h1>Hello world</h1> <h1>Hello world</h1>

  </body>
</html>

<!doctype html>
<html>
<head>
    <style>
        #parent{
/*            border:1px solid tomato;*/
            margin-top:100px;
        }
        #child{
            background-color: powderblue;
            margin-top:50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
            Hello world
        </div>
    </div>
</body>
</html>

<!doctype html>
<html>
<head>
    <style>
        #empty{
            margin-top:50px;
            margin-bottom: 100px;
/*            border:1px solid tomato;*/
        }
        #normal{
            background-color: powderblue;
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div id="empty"></div>
    <div id="normal">normal</div>
</body>
</html>

position - absolute, fixed

    <style>
        #parent, #other, #grand{
            border:5px solid tomato;
        }
        #grand{
            position: relative;
        }
        #me{
            background-color: black;
            color:white;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="grand">
       grand
        <div id="parent">
           parent
           <div id="me">me</div>
        </div>
    </div>

    <style>
        body{
            padding-top:30px;
        }
        #parent, #other{
            border:5px solid tomato;
        }
        #large{
            height:10000px;
            background-color: tomato;
        }
        #me{
            background-color: black;
            color:white;
            position: fixed;
            left:0;
            top:0;
            text-align: center;
        }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="parent">
       parent
       <div id="me">me</div>
    </div>
    <div id="large">large</div>

레이아웃 활용 flex

flex : 레이아웃을 잡을 때 사용하는 기능

Layout의 흑역사. ... 

table  :표여야 하는데...의미 없는 레이아웃에서도 사용하기도...

position... reletive... absolute

float ... 이미지를 옆에 이미지 글씨 흘러가도록..

<container>

<item></item>

<item></item>

</container>

flux

1. 부모에 display:flex;

2. 부모에 

flex-direction:row-reverse;  : 오른쪽 정렬  , default : row

flex-direction:column-reverse;  수직역순 정렬, - 높이 공백 포함 거꾸로 정렬

flex-direction::column   : 수직 순서 정렬

3. item에

flex-grow:1;  *** 칸이 n이 1씩 나눠가져서 여백이 없어짐. 

.item:nth-child(2){  /*2번째 칸*/ 

flex-grow:3;   /*item에 flex-grow가 0이면 혼자 나머지 공간꽉채움*/ 

flex-bassis:300px;   여백이 존재.. 화면작아짐.

}

.item:nth-child(3){  /*2번째 칸*/ 

flex-grow:3;   /*item에 flex-grow가 0이면 혼자 나머지 공간꽉채움*/ 

flex-bassis:300px;   /*여백이 존재.. 화면작아짐.*/

flex-shrink:2;    /*basis 값을 가지고 있을 때 줄어들 떄 비율 , 0은 작아지지 않음*/

}

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;         
        }
        .item:nth-child(1){
            flex-basis: 150px;
            flex-shrink: 1;
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

Holy Grail Layout 성배 레이아웃

<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
        }
        .content nav{
            border-right:1px solid gray;
        }
        .content aside{
            border-left:1px solid gray;    
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>생활코딩</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </ul>
            </nav>
            <main>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis, accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos assumenda illo eum dicta. Voluptatum quaerat excepturi consectetur, doloremque esse deleniti commodi natus, maxime sit? Officia rerum quibusdam porro dolorum numquam harum soluta ex quo! Vero, nam? Necessitatibus rem hic perferendis maiores obcaecati voluptate sunt autem id doloribus, similique repudiandae nesciunt vel facere ex accusantium ipsum provident iste itaque? Perferendis culpa nostrum repellendus dolores repudiandae assumenda, tempora laudantium in quibusdam placeat facilis ex voluptatem provident velit iusto fuga eum nobis deserunt enim minus. Explicabo vel labore, eum doloremque, impedit recusandae aut illum corporis quis atque sit vero quasi tempore placeat ipsam similique quo delectus provident animi distinctio debitis eligendi voluptatum! Dolorem perspiciatis similique non fugit eaque? Commodi suscipit earum aliquam rem, neque ad. Obcaecati nisi beatae officia inventore laborum nostrum natus perspiciatis iste, aperiam vero quisquam saepe labore facilis veritatis illo excepturi vitae autem quis! Voluptatibus atque doloribus perferendis, eligendi ex aliquid debitis laudantium omnis accusamus similique cum mollitia quos adipisci reprehenderit assumenda sequi, dolore tenetur ipsam, odio, vero reiciendis iure. Dolore itaque nesciunt ipsam, id maxime saepe officiis dolorum molestias earum temporibus? Possimus ipsum accusamus quasi minima, quod magnam iusto non cupiditate facilis pariatur aliquam omnis, blanditiis assumenda magni ad voluptas dicta est optio reprehenderit rem ratione earum ipsa, dolor vero! Totam, adipisci eos nihil repellendus. Maiores, blanditiis. Officiis aspernatur iure culpa illo sint ex id perferendis, explicabo architecto ipsa voluptatibus nesciunt pariatur commodi cum quam. Obcaecati ut quidem quam error nemo. Pariatur aliquid autem inventore laboriosam, velit totam, temporibus ad magnam minus, quis nesciunt aperiam veritatis. Vitae porro provident magni eos sit sed dignissimos iure natus odio nostrum molestiae atque mollitia saepe adipisci ut velit quo hic fuga ex, voluptates vel eum ipsum amet, sunt corporis. Maxime odit alias, ratione tenetur, asperiores consequuntur deserunt modi velit ab maiores pariatur voluptates beatae aut nesciunt perspiciatis sed veritatis doloremque quibusdam amet vero. Qui, labore. Atque ratione quae ducimus reprehenderit perferendis nisi earum, debitis commodi maxime sequi facere optio doloribus, repudiandae ex quidem amet iusto inventore quaerat at praesentium sint. Omnis mollitia esse illum suscipit, quis dolorem maxime sunt eaque, autem nisi corrupti perferendis provident tempore quas, unde! Doloribus, at, accusamus, maiores enim amet quod provident temporibus atque, ipsam fugiat incidunt. Quasi iusto ea quibusdam eveniet porro officiis dicta fugiat fugit laudantium ipsum esse quisquam quo laboriosam odit voluptates alias veritatis expedita quidem consectetur eos, impedit, incidunt dolorum? Laborum, facere nulla ullam, aliquid rerum nihil non adipisci, architecto obcaecati iure quam, fuga minus alias eligendi provident ex odio sit. Ducimus, facilis veritatis numquam, maxime quos natus animi, a magnam itaque veniam pariatur sed alias eos quas? Voluptatum fugit doloribus fugiat iste adipisci quidem odit consectetur, sapiente culpa magnam laborum, laboriosam exercitationem cupiditate dignissimos, nisi doloremque hic itaque aspernatur. Ab labore dolorum cumque rem vitae repellat quo quae porro cupiditate minus. Perspiciatis cumque sequi provident fugit. Nulla reiciendis voluptates molestiae corporis voluptate, quidem consequuntur, dolor vero necessitatibus deleniti tempora ab facilis similique, ea error deserunt fuga quia atque omnis nam earum non, illo. Minima quos optio nostrum eos aperiam? Quam, obcaecati velit deserunt tempore, iure vitae repudiandae quos illum quasi esse quas quaerat at consectetur necessitatibus. Cum, quod, dolore voluptatibus quibusdam accusamus aliquam consequatur dolorum illo! Sequi commodi adipisci explicabo soluta necessitatibus magni expedita cumque, officiis voluptas, vel amet recusandae sunt, quidem eum aliquid deleniti unde, impedit non magnam consectetur est minima facere architecto. Molestias cum vero nostrum saepe, dignissimos eius beatae natus fugiat deserunt esse, nesciunt eos ducimus id amet magnam possimus? Optio adipisci quisquam earum totam nemo sunt provident iure ab consectetur et deleniti molestiae blanditiis laudantium, autem consequatur rerum labore ipsa ipsam deserunt nisi, expedita doloremque quibusdam! Illo nemo laborum a sequi in, ad ipsum blanditiis alias! Eaque eos eligendi hic dolorum sint, tempore voluptatum ut numquam. Corporis similique itaque accusantium, esse porro ea dolor, quae consequuntur ullam necessitatibus magni rem optio officiis totam in dicta quas, odio quam blanditiis dolores pariatur? Dolorem, fuga? Harum ratione nemo perspiciatis culpa eum repudiandae esse, atque impedit nihil debitis, assumenda est. Sapiente rerum alias ipsa tempore obcaecati deserunt maiores distinctio officiis itaque fugit optio, eveniet facere amet ipsum, harum laboriosam eius, enim magni blanditiis temporibus nobis consequuntur ut. Quia magnam vero atque modi aspernatur in perferendis voluptas reprehenderit, rerum dolore unde iusto ab non eius molestiae quasi tenetur beatae ipsam quidem, quos at architecto voluptate alias eos. Deserunt velit beatae, ullam, accusantium sit asperiores! A vero perferendis, harum praesentium dolorem deserunt. Numquam voluptas necessitatibus, aliquam ullam saepe harum amet consequatur minima neque officia maxime quo beatae ab aliquid ex placeat rerum unde, reiciendis aspernatur similique, doloremque ad laboriosam modi. Minus quam aperiam, sed aliquid. Fugiat amet harum consequuntur reprehenderit id eum ratione quos temporibus, quae. Ab ut omnis tempora voluptates, sed ea animi voluptatem pariatur quod mollitia corrupti voluptas repellendus consequatur quae adipisci, enim vitae harum nulla natus iusto hic totam officia architecto quam. Debitis dignissimos praesentium, hic. Ad assumenda, aliquid consequuntur dolore eum repudiandae ab explicabo ipsa sed blanditiis. Quidem unde necessitatibus facilis, quis commodi. Dignissimos perferendis, nihil labore corrupti autem cumque ipsum vel voluptatum? Nostrum labore, omnis provident ullam repellendus culpa amet rem consequatur animi, necessitatibus porro. In consequatur optio recusandae, quisquam accusantium at deserunt voluptatem fugit quibusdam neque libero assumenda consectetur numquam ratione quaerat. Quos omnis neque atque, id perferendis possimus, alias, dignissimos doloribus ducimus similique ratione vitae eos laudantium, tempore cupiditate quod consectetur! Voluptas enim laboriosam nesciunt rem. Recusandae beatae numquam asperiores adipisci neque, vel pariatur suscipit provident, a est magni. Laborum dolore incidunt saepe ipsam? Eveniet doloremque animi maxime aliquid rem fugit dolor dignissimos! Quo, ut quod ab.
            </main>
            <aside>
                AD
            </aside>
        </section>
        <footer>
            <a href="https://opentutorials.org/course/1">홈페이지</a>
        </footer>
    </div>
</body> 

모르는 단어

LoC  :Line of Code

유지보수성 (maintainability): 어떤 시스템을 얼마나 효율적/효과적으로 고칠 수 있냐 정도.  

코드베이스 : 하나의 레퍼지터리에 저장된 소스코드 뭉치 컴파일 및 배포를 독립적으로 수행하는 단위. 

기본개념. 

일반화한 개념과 자바언어의 명칭

- 컴포넌트

: 시스템 소프트웨어 아키텍처 수준에서 식별 된 최솽위 수준의 빌딩 블록. 블록-화살표 시스템 다이어그램에서 블록. 

아주 소규모 자바시스템이면 컴포넌트 피키지 관계가 1:1일지 몰라도 제법 규모가 있는 시스템에서는 패키지가 컴포넌트보다 훨씬 많다.

Apache Ant - target 이라는 묶음개념

메이븐 -pom.xml

1장. 들어가며

- 소프트 웨어의 품질 8가지 : 유지보수성, 기능 안정성, 성능 효율성, 호환성, 사용성, 믿음성, 보안성, 휴대성  

- 소프트 웨어 유지보수 네가지 

: 교정형 유지보수(corrective maintenance: 버그발견 수정), 

 적응형 유지보수(adaptive maintenance: 운영변화로 시스템 변경), 

 완료형 유지보수(perfective maintenance:시스템 사용자의 신/변경요건 반영)

 예방형 유지보수(preventive maintenance: 품질을 높이고 앞으로 닥칠 버그를 방지할 방안을 모색)

- 유지보수 3대 원칙

1. 단순한 가이드 라인을 지키기만 해도 유지보수성은 나아진다. 

2. 유지보수성은 개발 프로젝트 시작 단계부터 반드시 염두에 두어야 하고 하나씩 실천하는 자세가 중요하다. 

: 깨진 창문효과 (깨진 창문 방치시 흉악범더 더 발생)

3. 가이드 라인을 따를 것. 

- 유지 보수 가이드 라인 10개

1. 코드단위를 짧게 하라 

: 코드 단위는 15라인을 넘지 않게 작성 

: 작은 단위는 이해하고, 테스트하고, 재사용하기 쉬워 유지보수성이 좋아진다. 

리펙터링 기법 1 : 메서드 추출 : 단위 코드가 스스로를 설명하는 상태 

리펙터링 기법 2 : 메서드를 메서드 객체로 대체 

2. 코드 단위를 간단하게 짜라

: 단위당 분기점은 4개로 제한한다(멕케브 복잡도, 순한 복잡도 5로 제한:4+1). 복잡한 단위는 더 잘게 나누고 서로 뭉쳐있지 않게 한다. 

리펙터링 기법 3 : 중첩문을 보호절로 데체: . 

3. 코드는 한번만 작성하라

: 코드는 복사하지 않는다. (6라인 이상 동일하면 클론코드)

CMD: 소스 분석 툴 PMD에 포함된  클론 감지 툴

리펙트링 기법 4 : 상위 클래스 추출

4. 단위 인터페이스를 작게 하라    ----인터페이스 > 매개변수..

: 단위당 파라미터 개수는 4개 이하로 제한한다.  

리펙터링 기법 5 : 파라미터 객체 도입 :  파라미터를 객체로 추출한다. 

5. 관심사를 모듈로 분리하라.     ----모듈  > 클래스

: 모듈 간 결합을 느슨하게 하기 위해 큰 모듈은 삼가한다. 

1)개별 모듈로 나누어 일을 시키고 구현 상세는 인터페이스 안으로 감춘다.  >> 클래스를 기능별로 세분화 한다. 

2) 특정 구현부는 인터페이스 안에 숨긴다. 

3) 커스텀 코드를 서드파티 라이브러리/ 프레임워크로 대체

6. 아키텍처 컴포넌트를 느슨하게 결합하라

: 최상위 수준의 컴포넌트간 결합도를 낮춘다. 

사용자 인터페이스 > 서브스 계층 > 비지니스 로직 계층 > 데이터 추상화 계층 > 데이터 베이스 계층

7. 아키텍처 컴포넌트 균형을 잡아라. 

: 최상위 수준의 컴포넌트 개수와 상대적 크기를 균형 잡는다. 

: 컴포넌트 개수가 9개정도(6~12) 되도록 소스코드를 조직화 하고 컴포넌트 크기를 대략 균등학 맞춘다. 

8. 코드베이스를 작게 하라

: 시스템이 클수록 망가질 확률은 커진다. 시스템 크기를 적극적으로 줄인다. 

9. 테스트를 자동화 하라

: 테스트 프레임워크로 자동화한 테스트를 작성한다. 예측 가능한 리스크 적은 개발

10. 클린코드를 작성하라. 

1) 단위 수준의 코드 악취를 남기지 마라

2) 나쁜 주석을 남기지마라

3) 주석 안에 코드를 남기지 마라

4) 죽은 코드를 남기지 마라

5) 긴 식별자 이름을 남기지 말라

6) 매직 상수를 남기지 마라

7) 제대로 처리 안한 예외를 남기지 말라

13. 웹 프로그래밍 설계 모델

13-1 웹 프로그래밍 구축하기 위한 설계모델

Model 1  :

 브라우저  ⇔  WAS(웹 어플리케이션 서버)  ⇔ 데이터 베이스

                    (JSP  ⇔ Service & DAO)

HTML에 java 태그를 동시 사용... 유지보수 어려움. 

Model 2  :

 브라우저  ⇔  WAS(웹 어플리케이션 서버)  ⇔  Model ⇔ 데이터 베이스

                    (Controller ⇔ Service ⇔ DAO)

                     View (JSP)

13-2 스프링 MVC 프레임워크 설계구조

브라우저 ⇔ DispatcherServlet ⇒ HandlerMapping

                                       ⇔  HandlerAdapter  ⇔ Controller

      ⇒View(jsp)                          ⇒ 브라우저

      ⇒ ViewResolver : 처리 결과를 출력할 view 선택     

사진 출처 : http://wondongho.tistory.com/59    

 13-3 DispatcherServlet 설정

web.xml 서플릿을 맴핑

스프링 설정파일 있으면(servlet-context.xml) 맵핑 하여--> 스프링 컨테이너생성 : HanderMapping, HandlerAdapter, ViewResolver

초기화 파라메터에서 스프링 설정 파일 지정하지 않은경우 서블릿 별칭( appServlet-context.xml)을 이용 --> 스프링 컨테이너 생성 : HanderMapping, HandlerAdapter, ViewResolver

13-4. Controller 객체 @Controller

DispatcherServlet  ⇔  HandlerAdapter ⇔ Controller

servlet-context.xml  :   

13-5 Controller 객체  @RequestMapping

DispatcherServlet  ⇔  HandlerAdapter ⇔ Controller

13-6 Controller 객체  Model 타입의 파라메터

DispatcherServlet  ⇔  HandlerAdapter ⇔ Controller

: 개발자는 Model 객체에 데이터를 담아서 DispatcherServlet 에전달가능

: DispatcherServlet에 전달된 Model 데이터는 View 에서 가공되어 클라이언트에게 응답처리

13-7. View 객체

DispatcherServlet  ⇔  HandlerAdapter ⇔ Controller

:: 리턴값을 갖고 viewResolver 설정 값을 합쳐서 jsp를 만들어줌. 

13-8. 전체적인 웹 프로그래밍 구조

브라우저: 최초 사용자 요청 ex) ip/cho4/sucess

 ⇒ DispatcherServlet  

⇔  Controller :  @Controller 적용 클래스 검색

⇔  @RequestMapping("success") :사용자 요청 해당 메서드 실행

⇒ ViewResolver : 처리 결과를 출력할 view 선택     

14. 스프링 MVC 웹서비스

15-1. 프로젝트 전체구조

16-2. pom.xml 및 이클립스 import

16-4. 스프링설정파일(servlet-context.xml)생성

16-5. root-context.xml 작성

16-6. 컨트롤러와 뷰 작성

16-6. 실행

17. Service & DAO 객체 구현

17-1. 웹 어플리케이션 준비

17-2. 한글 처리

17-2. 서비스 객체 구현

서비스 빈생성

//@Component

//@Repository

@Service

빈연결

// MemberService memberService  = new MemberService();

// @Autowired  스프링 전용, 타입으로 지정

// @Inject     자바 전용, 타입으로 지정

@Resource(name="memberService")  //자바전용 이름으로 지정, java 8부터  설정이 바뀌어 annotation 임포트 여부 확인 필요

18. Controller 객체 구현

18-1. 웹 어플리케이션 준비

18-2. @RequestMapping을 이용한 URL 맵핑

18-3. 요청 파라메터

//      Member member = new Member();

// member.setMemberId(request.getParameter("memberId"));

// member.setMemberPhone2(request.getParameter("memberPhone1"));

// @RequestParam(value = "memberId", required = true) String memberId,

// @RequestParam(value = "memberId", required = false, defaultValue = "010") String memberPhone1

// member.setMemberId(memberId);

// member.setMemberPhone1(memberPhone1);

1. 멤버 커맨드 객체이용

public String memberJoin(Model model, HttpServletRequest request, Member member) {  

2.  중첩 커맨드 객체이용

PHONE: <input type="text" name="phoneList[0].memberPhone1"/>-

<input type="text" name="phoneList[1].memberPhone3"/>

19. Controller 객체 구현

19-1. @ModelAttribute

6. 의존객체 Dependency injection

- 배터리 일체형(특정 배터리 소멸시 장난감 사야함) vs 배터리 분리형(쓸때 마다 배터리를 넣음 or 처음에 배터리가 있고 추가로 set하여 사용)

- 스프링 설정파일(applicationContext.xml)

7. 다양한 의존 객체 주입

7-1 :생성자를 이용한 의존 객체 주입

메소드중 첫자가 대문자면 생성자. 

7-2 :setter를 이용한 의존객체 주입

set 뒤의 대문자를 소문자로 바꾸고 찾음. 

7-3 :List타입 의존 객체 주입

7-4 :Map타입 의존 객체 주입

8. 스프링 설정파일 분리

applicationContext.xml  --> 분리 appCtx1.xml, appCtx2.xml, appCtx3.xml

8-1-1 MainClassUseXmls.java

9-1 의존객체 자동주입이란?

스프링 설정 파일에서 의존객체를 주입할 때 Constuctor-org 또는 property 태그로 의존대상 객체를 명시하지 않아도 

스프링 컨테이너가 자동으로 필요한 의존 대상을 찾아서 의존 대상 객체가 필요한 객체에 주입해 주는 기능

구현한 방법은 @Autowired, @Resource 어노테이션을 이용해서 쉽게 구현할 수 있다. 

9-2 @Autowired

프로퍼티, 메소드, 생성자에서 객체의 타입이 일치하는 객체를 자동으로 주입한다. 

*** 프로퍼티, 메소드에 @ autowired사용시에는 반드시 default 생성자를 명시해야 한다. 

ex) sevice 에서 dao java 코드 에서 연결.. 

wordRegisterService.java

9-3 @Resource

@Resouce  : 객체의 타입을 보지 않고 동일한 이름이 있는지 찾아씀.    

- 프로퍼티, 메소드 객체의 이름(wordDao1를 찾음)이 일치하는 객체를 자동으로 주입한다, 디폴트 생성자 명기

- 생성자에는 못씀. 

10 의존 객체 선택

10-1 의존 객체 선택

10-2 의존객체 자동주입 체크

@Autowired(required=false)

10-3 @Inject (java 기능)

@Named  : @Qualifier와 유사  , Qualifier와 달리 xml 작성 안해도 됨. 

스프링 프레임워크

DI, AOP, MVC, JDBC  : 구조 만들어 나가는 방법론들.

AOP : 관점지향 프로그래밍 : 주요부분만 작업 공통부분 뺐다 더했다. 

- 스프링프레임워크, 모바일 프레임워크(안드로이드)

내비게이션 없음 : 네비게이션 있음 = 다양한 업무 : 본연의 업무

프레임워크가 없다면 모든 기능을 다 만들어야 함.

-스프링 프레임워크 모듈: 과거에는 라이브러리를 직접 다운받았지만, XML 파일 등을 이용 의존설정 함.

-스프링 컨테이너(IoC)

스프링에 객체를 생성하고 조립하는 컨테이너로 컨테이너를 통해 생성된 객체를 Bean 이라고 부른다. 

XML 문서로 객체 생성 및 속성 데이터 작성 > 스프링 컨테이너에서 객체 생성 및 조립 > 개발문서로 애플리케이션 구현

- 개발환경 구축: Java 설치(java.exe: JVM 구동명령, javac.exe: 컴파일러, java -version), 환경변수 설정, 이클립스 다운로드

JDK  ⊃ JRE  ⊃ API  ⊃ JVM

프로젝트 생성

-1. 프로젝트 생성 : Maven Project

Create a simple project(skip archetype selection) 선택

Use default Workspace location 선택

Group id :  내가 사용하고 있는 프로젝트를 감싸고 있는 전체 큰 프로젝트

Artifact id : 현재 해당하는 프로젝트

 >> pom.xml 파일생성  java, resouces 파일 생성 확인

-2. pom.xml 작성

디펜시즈에 spring-context 추가

플러그인에 maven-compiler-plugin 추가. 

에러 : Project configuration is not up-to-date with : 메이븐 과 java의 버전이 맞지 않음.  >> 프로젝트 우클릭 > 메이븐>업데이트 프로젝트 

프로젝트 폴더 > src > main > java, resources

-3 pom.xml 파일의 이해

pom.xml 파일은 메이븐 설정파일로 메이븐은 라이브러리를 연결해주고 빌드를 위한 플랫폼이다. 

Maven Dependencies 폴더 :: 다운된 모듈들 다운. 

resources폴더 > applicationContext.xml :  스프링 컨테이너의 객체를 만들어줌 

                   > XML 파일 생성   : applicationContext.xml

                       Beans  ::  > <bean id="tWalk" class="testPjt.TranspotationWalk"/>

 java 코드  > GenericXmlApplicationContext ctx = new GenericXmlApplicationContext("classpath:applicationContext.xml");

                 TranspotationWalk transpotationWalk = ctx.getBean("tWalk", TranspotationWalk.class)

                 transpotation.move();

ctx.close();

또 다른 프로젝트 생성 방법

알고리즘의 분석 : 시간 복잡도

• 시간복잡도(time complexity)

• 점근적(Asymptotic) 분석

-  Θ-, Ο-: n→∞일때 수행시간이 증가하는 growth rate로 시간복잡도로 표현

- 상대적으로 간단하고 실행환경에 비의존적이여서 가장 광범위하게 사용

1. 상수 시간 복잡도 - 시간복잡도 : O(1) 

    ex) n개 데이터 배열 n/2 번째 데이터 반환

2. 선형 시간 복잡도 - 시간복잡도 : O(n)

   ex) n개 데이터 저장된 배열 sum

순차 탐색 최악의 경우 - 최악의 경우 시간복잡도 : O(n)

ex) n개 데이터 저장된 배열 target 있는지 검색

2차식(Quadratic) : - 최악의 경우 시간복잡도 : O(n^2)

ex) n개 데이터 저장된 배열 X, n개 데이터 저장된 배열 Y, X[i]=Y[j]의 경우 n(n-1)/2

• 점근적(Asymptotic) 표기법

-  알고리즘 포함된 연산들의 실행 횟수를 표기하는 하나의 기법, 최고차 항 차수만으로 표시

-  가장 자주 실행되는 연산, 문장의 실행횟수를 고려

1. Ο-표기 :: upper bound를 표현 

    ex) f(n) = 32n^2 + 17n^2 -32 , f(n) <= cg(n)

2. Ω-표기 :: lower bound를 표현 : 오메가

   ex)  f(n) = 32n^2 + 17n^2 -32 , f(n) >= cg(n)

3. Θ-표기 :: upper bound & lower bound를 표현 :세타

   ex) f(n) = 32n^2 + 17n^2 -32 , 0 <= c2g(n) <= f(n) <= c2g(n)

다항식일 때 사용.