SlideShare ist ein Scribd-Unternehmen logo
1 von 76
Downloaden Sie, um offline zu lesen
[명사] 개발의 요런 면 조런 면
              전주형
1.   NHN Convention Guide (Front-End)
2.   Java Code Convention (Back-End)
3.   웹사이트 성능 최적화
4.   Springframework Utils
   코드를 최초로 작성한 사람이 끝까지 유지보수할
    확률은?

   빠르고 정확하게 이해할 수 있도록 작성하면 유지
    보수 비용은 절감되고 업무 효율은 높아진다.

   멤버간 코드 공유가 쉬워짐
영문 소문자로 시작, 단어와 단어사이는 underscore(_)로 구분

잘못된 예                     올바른 예
Btn                       btn
2btn                      btn2
sectionLst                section_lst
section_list_style_type   Section_lst_type
                          section1, section2
예약어         설명
wrap        감싸기
header      머리글
gnb         Global Navigation Bar
sta         Service Title Area
lnb         Local Navigation Bar
container   컨테이너
spot        강조하는 상위 컨텐츠
snb         Side Navigation Bar
nav         Navigation
pop_wrap    팝업 페이지 전체 영역
형태, 의미, 상태 순으로..

잘못된 예                   올바른 예                설명
on_recommend_tab1       tab1_recomm_on       형태_의미_상태
bnm.gif                 btn_naver_mail.gif   임의로 축약 금지
btn_search_naver_mail   btn_srch_mail.gif    3단계 이하로 조정
.gif
btn_Search.gif          btn_srch.gif
잘못된 예                              올바른 예
<SPAN Class=“desc”>                <span class=“desc”>
<img src=‘test.gif’ width=‘100’    <img src=“test.gif” width=“100”
<a href=“…&nid=2”                  <a href=“…&amp;nid=2”
<input type="text" id="user_id"    <!-- [D] 입력 박스에 포커싱되었을
name="user_id"                     때, class="focus"
onfocus="this.className='focus'"   추가 -->
>                                  <input type="text" id="user_id"
                                   name="user_id"
                                   class="focus">
   자식 엘리먼트 들여쓰기는 1탭, 1탭은 공백 4칸

   table, ul, ol, dl 등은 들여쓰기 하지 않음
<!-- GNB -->     시작 주석
…
<!-- //GNB -->   종료 주석
<!DOCTYPE html>                                                  <!doctype html>
<html lang="ko">                                                 <html lang="ko">
<head>
                                                                 <head>
<meta charset="utf-8">
                                                                 <meta charset="utf-8">
<title>메뉴 :: 브랜드명 서비스</title>
<link rel="stylesheet" type="text/css" href="sevice_name.css">
                                                                 <meta name="viewport" content="..">
</head>                                                          <title>상단: 헤더명</title>
<body>                                                           <link rel="stylesheet" type="text/css" href="css/..">
<div id="wrap">                                                  </head>
  <!-- header -->
                                                                 <body class="..">
  <div id="header">
                                                                 <div class="u_skip"><a href="#ct">본문 바로가기</a></div>
  </div>
  <!-- //header -->
                                                                 <!-- header -->
  <!-- container -->                                             <header role="banner">
  <div id="container">                                           </header>
                                                                 <!-- //header -->
                                                  일반
     <!-- content -->
     <div id="content">                                          <hr />
     </div>
                                                                 <!-- ct -->
     <!-- //content -->
                                                                 <div id="ct" role="main">
  </div>
                                                                 </div>
                                                                                                               모바일
  <!-- //container -->
  <!-- footer -->                                                <!-- //ct -->
  <div id="footer">                                              <hr />
  </div>                                                         <!-- footer -->
  <!-- //footer -->
                                                                 <!-- //footer -->
</div>
</body>
                                                                 </body>
</html>
                                                                 </html>
   <input type="text" id="user_id" title="사용자
    ID" class="input_txt" style="width:100px">




               class style은 맨 뒤로 순
                 서는 class 뒤에 style
<table>      <TABLE>
             <caption>table element</caption>

 <tr>
             <COLGROUP >
             <COL width=“20”>
             <COL width=“20”>
 <td></td>   </COLGROUP>
             <THEAD>

 </tr>       <TR><td> ...header information... </td>
             </THEAD>

</table>
             <TFOOT>
             <TR><td> ...footer information... </td>
             </TFOOT>
             <TBODY>
             <TR><td> ...first row of block one data... </td>
             <TR><td> ...second row of block one data... </td>
             </TBODY>
             <TBODY>
             <TR><td> ...first row of block two data... </td>
             <TR><td> ...second row of block two data... </td>
             <TR><td> ...third row of block two data... </td>
             </TBODY>
             </TABLE>
   CSS 코드 작성 규칙
   웹 접근성 보장 방법
   CSS Sprites 사용 방법
   예약어 목록
1.   시작 주석
2.   package 와 import 문장
3.   클래스와 인터페이스 선언
/*
 * 클래스 이름
 *
 * 버전정보
 *
 * 날짜
 *
 * 저작권
 */
선언                          설명
1   주석 (/*...*/)     하나의 클래스 또는 인터페이스 범위의 정
                     보들을 포함해야 한다.

2   클래스(static) 변수   public, protected, private 클래스 변수 순으로 선언

3   인스턴스 변수          클래스 변수와 동일

4   생성자

5   메서드              접근성보다는 기능별로 그룹화
   들여쓰기는 4개의 스페이스를 사용해야 됨.

   1탭은 8개의 스페이스를 써야된다고 함.

   현재 eclipse의 1탭은 4스페이스
   한 줄에 80 자 이상 쓰는 것은 대부분의 터미널과
    툴에서 다룰 수 없기 때문에 피해야 함
   콤마 후에 분리
   연산자(Operator)전에 분리
   레벨이 낮은 원칙 보다는 레벨이 높은 원칙에
    따라서 분리
   앞줄과 같은 레벨의 조건식이 시작되는 새로운
    줄은 앞줄과 들여쓰기를 일치시킨다.
function(longExpression1, longExpression2, longExpression3,
                longExpression4, longExpression5);

       var = function1(longExpression1,
                       function2(longExpression2,
                                 longExpression3));
GOOD

       longName1 = longName2 * (longName3 + longName4 - longName5)
                   + 4 * longname6;

       longName1 = longName2 * (longName3 + longName4           BAD
                                - longName5) + 4 * longname6;
//INDENT 8 SPACES TO AVOID VERY DEEP INDENTS
private static synchronized horkingLongMethodName(int anArg,
        Object anotherArg, String yetAnotherArg,
        Object andStillAnother) {
    ...
}
//DONT USE THIS INDENTATION
if ((condition1 && condition2)
    || (condition3 && condition4)
    ||!(condition5 && condition6)) { //BAD WRAPS
    doSomethingAboutIt(); //MAKE THIS LINE EASY TO MISS
}
//USE THIS INDENTATION INSTEAD
if ((condition1 && condition2)
        || (condition3 && condition4)
        ||!(condition5 && condition6)) {
    doSomethingAboutIt();
}
//OR USE THIS
if ((condition1 && condition2) || (condition3 && condition4)
        ||!(condition5 && condition6)) {
    doSomethingAboutIt();
}
   Javadoc 툴을 이용해 html파일로 된 api문서를 만
    들 수 있음

   /** ….. */

   자세한 내용은 javadoc 문서 참고
int level,size;   BAD



int level;    GOOD
int size;


int level; // indentation level
int size; // size of table
Object currentEntry; // currently selected table entry


int    level;        // indentation level
int    size;         // size of table
Object currentEntry; // currently selected table entry
void myMethod() {
  int int1 = 0; // 메서드 블록의 시작
  if (condition) {
         int int2 = 0; // if 블록의 시작 ...
  }
}


변수사용 바로 전에 선언 하는 것이 아님
• 메서드명과 그 메서드의 “(“ 사이에는 스페이스
  가 없어야 한다.
• 여는 중괄호 “{“ 는 선언문과 같은 줄의 끝에 위
  치
• 닫는 괄호 “}” 는 “}” 가 “{“ 후에 즉시 나타나야 하
  는 null 문장일 경우를 제외하고는 여는 문장과
 일치하는 들여쓰기를 하는 새로운 줄에서 시작해
  야 한다.
class Sample extends Object {
     int ivar1;
     int ivar2;
     Sample(int i, int j) {
         ivar1 = i;
         ivar2 = j;
     }
     int emptyMethod() {}
     ...
 }


argv++;   GOOD
argc--;

argv++; argc--;   BAD
if (condition)
                   BAD
 statement;

if (condition) {
  statement;         GOOD


}
switch (condition) {
case ABC:
     statements;
     /* 다음 문장 수행됨 */
case DEF:
     statements;
     break;
case XYZ:
     statements;
     break;
default:
     statements;
     break;
}

                       모든 switch문에 default 포함
2개의 빈줄
 소스 파일의 섹션들 사이
 클래스와 인터페이스의 정의 사이


1개의 빈줄
 메서드들 사이
 메서드 안에서의 지역 변수와 그 메서드의 첫 번째
  문장 사이
 block 주석 또는 single-line 주석 전
 가독성을 향상시키기 위해서 메서드 내부의 논리적
  인 섹션들 사이
   괄호뒤에 나오는 키워드는 스페이스로 나눔

while (true) {
...
}

   메서드 호출과 키워드를 구분하는데 도움
연산자는 스페이스로 분리, 단항연산자는 제외


a += c + d;
a = (a + b) / (c * d);
while (d++ = s++) {
    n++;
}
prints("size is " + foo + "n");
for (expr1; expr2; expr3)



myMethod((byte) aNum, (Object) x);
  myFunc((int) (cp + 5), ((int) (i + 3))
                     + 1);
식별자 형태       이름 붙이는 규칙                                     예제
Packages     유일한 패키지 이름의 앞 부분은 항상 모두                       com.sun.eng
             소문자 ASCII 문자로 쓰고, 가장 높은 레벨의 도메인 이             com.apple.quicktime.v2
             름 중 하나이어야 한다. 현재는                             edu.cmu.cs.bovik.chees
             com, edu, gov, mil, net, org, 또는 1981 년 ISO   e
             Standard 316 에 명시화 된 나라 구별 코드 영어 두문
             자가 쓰인다.
             패키지 이름의 나머지 부분은 조직 내부의
             naming convention 을 따르면 된다. 이러한
             convention 은 디렉토리 이름 구조로 명시화 될 것이
             다. 예를 들어 국, 부서, 프로젝트, 기계, 또는 로그인 이
             름 등이다.
Interfaces   인터페이스 이름도 클래스 이름처럼 대문자화                       interface
             되어야 한다.                                       RasterDelegate;
                                                           interface Storing;
식별자 형태    이름 붙이는 규칙                     예제
Classes   클래스명은 명사이어야 하며, 복합 단어일경우      class Raster;
          각 단어의 첫 글자는 대문자이어야 한다. 클래     class ImageSprite;
          스 이름은 간단하고 명시적이어야 한다. 전체
          단어를 사용하고 두문자어와 약어는 피해라(만
          약 약어가 URL 이나 HTML같이 더 많이 넓게
          사용되어진다면 사용해도좋다).
Methods   메서드명은 동사이어야 하며, 복합된 경우 첫      run();
          문자는 소문자이고 각각 내부 단어의 첫 문자는     runFast();
          대문자로 써야 한다.                   getBackground();
식별자 형태      이름 붙이는 규칙                          예제
Variables   변수 이름의 첫 번째 문자는 소문자로 시작            Int i;
            하고, 각각의 내부 단어의 첫 번째 문자는 대          char c;
            문자로 시작해야 한다. 변수 이름이 _ 또는           float myWidth;
            달러 표시 문자로 시작하는 것이 허용되기는
            하지만 이것으로 시작해서는 안 된다.
            변수 이름은 짧지만 의미 있어야 한다. 변수
            이름의 선택은 그 변수의 사용 의도를 알아
            낼 수 있도록 의미적이어야 한다. 한 문자 변
            수 이름은 임시적으로 쓰고 버릴 변수일 경
            우를 제외하고는 피해야 한다. 보통의 임시
            변수들의 이름은 integer 일 경우에는 i, j, k,
            m, m 을 사용하고, character 일 경우에는 c,
            d, e를 사용한다.
식별자 형태      이름 붙이는 규칙                예제
Constants   클래스 상수로 선언되어진 변수 static final int MIN_WIDTH = 4;
            들과 ANSI 상수들의 이름은 모   static final int MAX_WIDTH = 999;
            두 대문자로 쓰고 각각의 단어는 static final int GET_THE_CPU = 1;
            언더바(“ _” )에 의해 분리 되어
            져야한다(디버깅을 쉽게 하기 위
            해서 ANSI 상수들은 피해야 한
            다.)
 괄호                    BAD
if (a == b && c == d)
if ((a == b) && (c == d))     GOOD



 반환값
if (condition) {
    return x;
}               BAD


return y;

return (condition ? x : y);   GOOD
   과거엔 주로 백엔드(back-end) 요소인 서버 프로
    그램이나 데이터베이스 등에 초점을 맞춤

   야후 성능개선팀 조사결과 프런트엔드(front-end)
    영역에서 대기하는 시간이 웹페이지 속도의
    80~90%를 차지함

   현재는 웹사이트 성능 최적화 시에 야후의 우수 사
    례를 많이 사용함
   많은 시간을 image, stylesheet, script, flash 파
    일들을 다운 받는데 사용함
   Script와 css 파일을 결합

   Image를 CSS Sprite 기법과 Image map을 만들
    어서 사용함
   네이버 메일 이미지
   Javascript 와 css 파일을 결합하고 최소화시켜줌
   http://code.google.com/p/minify/

   Combine CSS
   https://developers.google.com/speed/docs/
    pss/CombineCSS
   ExpiresByType text/html "access plus 1
    month 15 days 2 hours"

   Header set Cache-Control “max-age=86400,
    public”

   잘못 사용하면 파일명을 바꿔야 되기 때문에
    common_1.0.0.js 와 같이 파일명을 정함
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    AddOutputFilterByType text/html
 text/plain text/xml text/javascript
    AddType text/javascript .js
    AddType text/css .css
</IfModule>

   ms 정도의 미미한 성능 향상
   HTML 명세서에도 스타일시트는 page의 HEAD
    안에 포함되어 있어야 한다고 함

   실제 야후 성능개선팀에 연구한 결과 HEAD에 있
    을 때 속도가 가장 빨랐음.

   문서의 하단에 놓았을 때 style이 변경됐을 때 제
    대로 rendering이 안되는 경우가 있음.
   Script를 위쪽에 두게 되면 다운로드 시간만큼 페
    이지 rendering이 지연됨.

   현재 대부분의 브라우저에서 hostname 당 최대 6
    개의 동시 접속이 가능함.
    http://www.browserscope.org/?category=network




   특별한 경우가 없는 한 script는 문서의 아래쪽에
    위치함.
   브라우저에 의해 캐쉬되기 때문에 외부 파일로 정
    의해야 함.
   보통 hostname을 가지고 ip를 검색하는데 소요되
    는 시간이 20~120ms 임.

   DNS lookup도 캐쉬(os, browser)가 되기 때문에
    특별히 문제가 되지 않음

   현재 서비스 중인 도메인 외의 외부 도메인 사용을
    줄이라는 얘기임.
   JSMin, YUI Compressor 를 이용해 javascript 에
    서 불필요한 내용을 제거한다.

   YUI Compressor는 css 압축도 지원함.
   미국 상위 10개의 웹사이트 중 2곳이 중복된 스크
    립트가 있다고 함.
   Entity Tags(ETags) 는 브라우저에 캐쉬된 자원이
    서버의 것과 맞는지 확인하는데 사용함.
    HTTP/1.1 200 OK
    Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT        최초
    ETag: "10c24bc-4ab-457e1c1f"                        응답
    Content-Length: 12195

    GET /i/yahoo.gif HTTP/1.1
    Host: us.yimg.com                                  캐쉬 후
    If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
                                                        요청
    If-None-Match: "10c24bc-4ab-457e1c1f"
                                                       캐쉬 후
    HTTP/1.1 304 Not Modified                           응답
   POST 방식은 Header를 먼저 보내고 data를 보냄

   GET 방식은 쿠키가 많지 않다면 하나의 TCP
    Packet만 보냄

   IE에서 URL 최대 길이는 2K 이기 때문에 사용시
    주의 해야함.
   자바스크립트에서 DOM 접근 시 느려짐.

   레이아웃을 위한 table 태그 사용은 지양해야됨.
   <img width="100" height="100"
    src="mycat.jpg" alt="My Cat" />

   mycat.jpg는 500 x 500 px
   host의 root에 favicon 파일을 만들어 놓음

   최대한 작게 그리고 Expire 등 헤더값을 셋팅해서
    캐쉬되게 만듬.
   YSlow
    http://developer.yahoo.com/yslow/
if(userName != null && userName.equals(""))



import org.springframework.util.StringUtils;

if(StringUtils.hasText(userName))
Assertion utility class that assists in validating arguments


try {
  Assert.isTrue(i > 0, "The value must be
  greater than zero");
   Assert.notNull(userName, “username is
  required");
 ……
} catch(IllegalArgumentException ex) {
  logger.error(ex.getMessage());
}
File originFile = new File(/svc/originFile.txt);
File copiedFile = new File(/svc/copiedFile.txt);

FileCopyUtils.copy(originFile, copiedFile);
int pageNo = 1;
if(StringUtils.hasText(request.getParameter("pageNo"))) {
  pageNo = Integer.parseInt(request.getParameter("pageNo"));
}




import org.springframework.web.bind.ServletRequestUtils;

int pageNo = ServletRequestUtils.getIntParameter(request,
“pageNo”, 1);
   DigestUtils
   FileSystemUtils
   AntPathMatcher
   StopWatch
   NHN Convention Guide
   Java Code Convention
   야후 웹사이트 성능 최적화
   구글 웹사이트 성능 최적화
   Yslow와 CI 서버 연동
Nobody is better than you
Nobody is smarter than you
               - Brian tracy -
웹성능최적화 20130405

Weitere ähnliche Inhalte

Was ist angesagt?

5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storageJinKyoungHeo
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차Michael Yang
 
Node.js + Express + MongoDB
Node.js + Express + MongoDBNode.js + Express + MongoDB
Node.js + Express + MongoDBVincent Park
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그은심 강
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Eulsoo Jung
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차Michael Yang
 
5-1. html5 graphics
5-1. html5 graphics5-1. html5 graphics
5-1. html5 graphicsJinKyoungHeo
 
WebStandards-Basic 2.Semantic markup
WebStandards-Basic 2.Semantic markupWebStandards-Basic 2.Semantic markup
WebStandards-Basic 2.Semantic markupEulsoo Jung
 
WebStandards-Basic 1.Introduce
WebStandards-Basic 1.IntroduceWebStandards-Basic 1.Introduce
WebStandards-Basic 1.IntroduceEulsoo Jung
 
WebStandards-Basic 3.Starting style
WebStandards-Basic 3.Starting styleWebStandards-Basic 3.Starting style
WebStandards-Basic 3.Starting styleEulsoo Jung
 
엘라스틱서치 이해하기 20160613
엘라스틱서치 이해하기 20160613엘라스틱서치 이해하기 20160613
엘라스틱서치 이해하기 20160613Yong Joon Moon
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차Michael Yang
 
5-5. html5 connectivity
5-5. html5 connectivity5-5. html5 connectivity
5-5. html5 connectivityJinKyoungHeo
 
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XpressEngine
 
엘라스틱서치 분석 이해하기 20160623
엘라스틱서치 분석 이해하기 20160623엘라스틱서치 분석 이해하기 20160623
엘라스틱서치 분석 이해하기 20160623Yong Joon Moon
 
Apache solr소개 20120629
Apache solr소개 20120629Apache solr소개 20120629
Apache solr소개 20120629Dosang Yoon
 
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화Jinhwa Ko
 
XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우
XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우
XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우XpressEngine
 

Was ist angesagt? (20)

5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storage
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
 
Node.js + Express + MongoDB
Node.js + Express + MongoDBNode.js + Express + MongoDB
Node.js + Express + MongoDB
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
 
5-1. html5 graphics
5-1. html5 graphics5-1. html5 graphics
5-1. html5 graphics
 
WebStandards-Basic 2.Semantic markup
WebStandards-Basic 2.Semantic markupWebStandards-Basic 2.Semantic markup
WebStandards-Basic 2.Semantic markup
 
WebStandards-Basic 1.Introduce
WebStandards-Basic 1.IntroduceWebStandards-Basic 1.Introduce
WebStandards-Basic 1.Introduce
 
WebStandards-Basic 3.Starting style
WebStandards-Basic 3.Starting styleWebStandards-Basic 3.Starting style
WebStandards-Basic 3.Starting style
 
엘라스틱서치 이해하기 20160613
엘라스틱서치 이해하기 20160613엘라스틱서치 이해하기 20160613
엘라스틱서치 이해하기 20160613
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
 
5-5. html5 connectivity
5-5. html5 connectivity5-5. html5 connectivity
5-5. html5 connectivity
 
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
 
웹표준 교육
웹표준 교육웹표준 교육
웹표준 교육
 
엘라스틱서치 분석 이해하기 20160623
엘라스틱서치 분석 이해하기 20160623엘라스틱서치 분석 이해하기 20160623
엘라스틱서치 분석 이해하기 20160623
 
Apache solr소개 20120629
Apache solr소개 20120629Apache solr소개 20120629
Apache solr소개 20120629
 
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
 
XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우
XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우
XE 오픈 세미나(2014-06-28) - (2/3) 레이아웃 제작 노하우
 

Ähnlich wie 웹성능최적화 20130405

Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationHyuncheol Jeon
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrapredribbon1307
 
First Step In Ajax Korean
First Step In Ajax KoreanFirst Step In Ajax Korean
First Step In Ajax KoreanTerry Cho
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그은심 강
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그은심 강
 
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기Jeado Ko
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2성일 한
 
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015 워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015 덕현 남
 
2011웹표준[02] html소개 및 마크업
2011웹표준[02] html소개 및 마크업2011웹표준[02] html소개 및 마크업
2011웹표준[02] html소개 및 마크업yjartjang
 
더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components정호 전
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나JeongHun Byeon
 
Modern web application with meteor
Modern web application with meteorModern web application with meteor
Modern web application with meteorJaeho Lee
 
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)웹표준(XHTML+CSS)
웹표준(XHTML+CSS)ymtech
 
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)Ukjae Jeong
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 

Ähnlich wie 웹성능최적화 20130405 (20)

Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap
 
First Step In Ajax Korean
First Step In Ajax KoreanFirst Step In Ajax Korean
First Step In Ajax Korean
 
2 1. html4.01
2 1. html4.012 1. html4.01
2 1. html4.01
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그
 
Hacosa jquery 1th
Hacosa jquery 1thHacosa jquery 1th
Hacosa jquery 1th
 
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
 
ch04
ch04ch04
ch04
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2
 
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015 워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
 
2011웹표준[02] html소개 및 마크업
2011웹표준[02] html소개 및 마크업2011웹표준[02] html소개 및 마크업
2011웹표준[02] html소개 및 마크업
 
Html5
Html5 Html5
Html5
 
Meteor2015 codelab
Meteor2015 codelab Meteor2015 codelab
Meteor2015 codelab
 
더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
Modern web application with meteor
Modern web application with meteorModern web application with meteor
Modern web application with meteor
 
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)웹표준(XHTML+CSS)
웹표준(XHTML+CSS)
 
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 

웹성능최적화 20130405

  • 1. [명사] 개발의 요런 면 조런 면 전주형
  • 2. 1. NHN Convention Guide (Front-End) 2. Java Code Convention (Back-End) 3. 웹사이트 성능 최적화 4. Springframework Utils
  • 3.
  • 4. 코드를 최초로 작성한 사람이 끝까지 유지보수할 확률은?  빠르고 정확하게 이해할 수 있도록 작성하면 유지 보수 비용은 절감되고 업무 효율은 높아진다.  멤버간 코드 공유가 쉬워짐
  • 5. 영문 소문자로 시작, 단어와 단어사이는 underscore(_)로 구분 잘못된 예 올바른 예 Btn btn 2btn btn2 sectionLst section_lst section_list_style_type Section_lst_type section1, section2
  • 6. 예약어 설명 wrap 감싸기 header 머리글 gnb Global Navigation Bar sta Service Title Area lnb Local Navigation Bar container 컨테이너 spot 강조하는 상위 컨텐츠 snb Side Navigation Bar nav Navigation pop_wrap 팝업 페이지 전체 영역
  • 7. 형태, 의미, 상태 순으로.. 잘못된 예 올바른 예 설명 on_recommend_tab1 tab1_recomm_on 형태_의미_상태 bnm.gif btn_naver_mail.gif 임의로 축약 금지 btn_search_naver_mail btn_srch_mail.gif 3단계 이하로 조정 .gif btn_Search.gif btn_srch.gif
  • 8. 잘못된 예 올바른 예 <SPAN Class=“desc”> <span class=“desc”> <img src=‘test.gif’ width=‘100’ <img src=“test.gif” width=“100” <a href=“…&nid=2” <a href=“…&amp;nid=2” <input type="text" id="user_id" <!-- [D] 입력 박스에 포커싱되었을 name="user_id" 때, class="focus" onfocus="this.className='focus'" 추가 --> > <input type="text" id="user_id" name="user_id" class="focus">
  • 9. 자식 엘리먼트 들여쓰기는 1탭, 1탭은 공백 4칸  table, ul, ol, dl 등은 들여쓰기 하지 않음
  • 10. <!-- GNB --> 시작 주석 … <!-- //GNB --> 종료 주석
  • 11. <!DOCTYPE html> <!doctype html> <html lang="ko"> <html lang="ko"> <head> <head> <meta charset="utf-8"> <meta charset="utf-8"> <title>메뉴 :: 브랜드명 서비스</title> <link rel="stylesheet" type="text/css" href="sevice_name.css"> <meta name="viewport" content=".."> </head> <title>상단: 헤더명</title> <body> <link rel="stylesheet" type="text/css" href="css/.."> <div id="wrap"> </head> <!-- header --> <body class=".."> <div id="header"> <div class="u_skip"><a href="#ct">본문 바로가기</a></div> </div> <!-- //header --> <!-- header --> <!-- container --> <header role="banner"> <div id="container"> </header> <!-- //header --> 일반 <!-- content --> <div id="content"> <hr /> </div> <!-- ct --> <!-- //content --> <div id="ct" role="main"> </div> </div> 모바일 <!-- //container --> <!-- footer --> <!-- //ct --> <div id="footer"> <hr /> </div> <!-- footer --> <!-- //footer --> <!-- //footer --> </div> </body> </body> </html> </html>
  • 12. <input type="text" id="user_id" title="사용자 ID" class="input_txt" style="width:100px"> class style은 맨 뒤로 순 서는 class 뒤에 style
  • 13. <table> <TABLE> <caption>table element</caption> <tr> <COLGROUP > <COL width=“20”> <COL width=“20”> <td></td> </COLGROUP> <THEAD> </tr> <TR><td> ...header information... </td> </THEAD> </table> <TFOOT> <TR><td> ...footer information... </td> </TFOOT> <TBODY> <TR><td> ...first row of block one data... </td> <TR><td> ...second row of block one data... </td> </TBODY> <TBODY> <TR><td> ...first row of block two data... </td> <TR><td> ...second row of block two data... </td> <TR><td> ...third row of block two data... </td> </TBODY> </TABLE>
  • 14. CSS 코드 작성 규칙  웹 접근성 보장 방법  CSS Sprites 사용 방법  예약어 목록
  • 15.
  • 16. 1. 시작 주석 2. package 와 import 문장 3. 클래스와 인터페이스 선언
  • 17. /* * 클래스 이름 * * 버전정보 * * 날짜 * * 저작권 */
  • 18.
  • 19. 선언 설명 1 주석 (/*...*/) 하나의 클래스 또는 인터페이스 범위의 정 보들을 포함해야 한다. 2 클래스(static) 변수 public, protected, private 클래스 변수 순으로 선언 3 인스턴스 변수 클래스 변수와 동일 4 생성자 5 메서드 접근성보다는 기능별로 그룹화
  • 20. 들여쓰기는 4개의 스페이스를 사용해야 됨.  1탭은 8개의 스페이스를 써야된다고 함.  현재 eclipse의 1탭은 4스페이스
  • 21. 한 줄에 80 자 이상 쓰는 것은 대부분의 터미널과 툴에서 다룰 수 없기 때문에 피해야 함
  • 22.
  • 23. 콤마 후에 분리  연산자(Operator)전에 분리  레벨이 낮은 원칙 보다는 레벨이 높은 원칙에 따라서 분리  앞줄과 같은 레벨의 조건식이 시작되는 새로운 줄은 앞줄과 들여쓰기를 일치시킨다.
  • 24. function(longExpression1, longExpression2, longExpression3, longExpression4, longExpression5); var = function1(longExpression1, function2(longExpression2, longExpression3)); GOOD longName1 = longName2 * (longName3 + longName4 - longName5) + 4 * longname6; longName1 = longName2 * (longName3 + longName4 BAD - longName5) + 4 * longname6;
  • 25. //INDENT 8 SPACES TO AVOID VERY DEEP INDENTS private static synchronized horkingLongMethodName(int anArg, Object anotherArg, String yetAnotherArg, Object andStillAnother) { ... }
  • 26. //DONT USE THIS INDENTATION if ((condition1 && condition2) || (condition3 && condition4) ||!(condition5 && condition6)) { //BAD WRAPS doSomethingAboutIt(); //MAKE THIS LINE EASY TO MISS } //USE THIS INDENTATION INSTEAD if ((condition1 && condition2) || (condition3 && condition4) ||!(condition5 && condition6)) { doSomethingAboutIt(); } //OR USE THIS if ((condition1 && condition2) || (condition3 && condition4) ||!(condition5 && condition6)) { doSomethingAboutIt(); }
  • 27. Javadoc 툴을 이용해 html파일로 된 api문서를 만 들 수 있음  /** ….. */  자세한 내용은 javadoc 문서 참고
  • 28. int level,size; BAD int level; GOOD int size; int level; // indentation level int size; // size of table Object currentEntry; // currently selected table entry int level; // indentation level int size; // size of table Object currentEntry; // currently selected table entry
  • 29. void myMethod() { int int1 = 0; // 메서드 블록의 시작 if (condition) { int int2 = 0; // if 블록의 시작 ... } } 변수사용 바로 전에 선언 하는 것이 아님
  • 30. • 메서드명과 그 메서드의 “(“ 사이에는 스페이스 가 없어야 한다. • 여는 중괄호 “{“ 는 선언문과 같은 줄의 끝에 위 치 • 닫는 괄호 “}” 는 “}” 가 “{“ 후에 즉시 나타나야 하 는 null 문장일 경우를 제외하고는 여는 문장과 일치하는 들여쓰기를 하는 새로운 줄에서 시작해 야 한다.
  • 31. class Sample extends Object { int ivar1; int ivar2; Sample(int i, int j) { ivar1 = i; ivar2 = j; } int emptyMethod() {} ... } 
  • 32. argv++; GOOD argc--; argv++; argc--; BAD
  • 33. if (condition) BAD statement; if (condition) { statement; GOOD }
  • 34. switch (condition) { case ABC: statements; /* 다음 문장 수행됨 */ case DEF: statements; break; case XYZ: statements; break; default: statements; break; } 모든 switch문에 default 포함
  • 35. 2개의 빈줄  소스 파일의 섹션들 사이  클래스와 인터페이스의 정의 사이 1개의 빈줄  메서드들 사이  메서드 안에서의 지역 변수와 그 메서드의 첫 번째 문장 사이  block 주석 또는 single-line 주석 전  가독성을 향상시키기 위해서 메서드 내부의 논리적 인 섹션들 사이
  • 36. 괄호뒤에 나오는 키워드는 스페이스로 나눔 while (true) { ... }  메서드 호출과 키워드를 구분하는데 도움
  • 37. 연산자는 스페이스로 분리, 단항연산자는 제외 a += c + d; a = (a + b) / (c * d); while (d++ = s++) { n++; } prints("size is " + foo + "n");
  • 38. for (expr1; expr2; expr3) myMethod((byte) aNum, (Object) x); myFunc((int) (cp + 5), ((int) (i + 3)) + 1);
  • 39. 식별자 형태 이름 붙이는 규칙 예제 Packages 유일한 패키지 이름의 앞 부분은 항상 모두 com.sun.eng 소문자 ASCII 문자로 쓰고, 가장 높은 레벨의 도메인 이 com.apple.quicktime.v2 름 중 하나이어야 한다. 현재는 edu.cmu.cs.bovik.chees com, edu, gov, mil, net, org, 또는 1981 년 ISO e Standard 316 에 명시화 된 나라 구별 코드 영어 두문 자가 쓰인다. 패키지 이름의 나머지 부분은 조직 내부의 naming convention 을 따르면 된다. 이러한 convention 은 디렉토리 이름 구조로 명시화 될 것이 다. 예를 들어 국, 부서, 프로젝트, 기계, 또는 로그인 이 름 등이다. Interfaces 인터페이스 이름도 클래스 이름처럼 대문자화 interface 되어야 한다. RasterDelegate; interface Storing;
  • 40. 식별자 형태 이름 붙이는 규칙 예제 Classes 클래스명은 명사이어야 하며, 복합 단어일경우 class Raster; 각 단어의 첫 글자는 대문자이어야 한다. 클래 class ImageSprite; 스 이름은 간단하고 명시적이어야 한다. 전체 단어를 사용하고 두문자어와 약어는 피해라(만 약 약어가 URL 이나 HTML같이 더 많이 넓게 사용되어진다면 사용해도좋다). Methods 메서드명은 동사이어야 하며, 복합된 경우 첫 run(); 문자는 소문자이고 각각 내부 단어의 첫 문자는 runFast(); 대문자로 써야 한다. getBackground();
  • 41. 식별자 형태 이름 붙이는 규칙 예제 Variables 변수 이름의 첫 번째 문자는 소문자로 시작 Int i; 하고, 각각의 내부 단어의 첫 번째 문자는 대 char c; 문자로 시작해야 한다. 변수 이름이 _ 또는 float myWidth; 달러 표시 문자로 시작하는 것이 허용되기는 하지만 이것으로 시작해서는 안 된다. 변수 이름은 짧지만 의미 있어야 한다. 변수 이름의 선택은 그 변수의 사용 의도를 알아 낼 수 있도록 의미적이어야 한다. 한 문자 변 수 이름은 임시적으로 쓰고 버릴 변수일 경 우를 제외하고는 피해야 한다. 보통의 임시 변수들의 이름은 integer 일 경우에는 i, j, k, m, m 을 사용하고, character 일 경우에는 c, d, e를 사용한다.
  • 42. 식별자 형태 이름 붙이는 규칙 예제 Constants 클래스 상수로 선언되어진 변수 static final int MIN_WIDTH = 4; 들과 ANSI 상수들의 이름은 모 static final int MAX_WIDTH = 999; 두 대문자로 쓰고 각각의 단어는 static final int GET_THE_CPU = 1; 언더바(“ _” )에 의해 분리 되어 져야한다(디버깅을 쉽게 하기 위 해서 ANSI 상수들은 피해야 한 다.)
  • 43.  괄호 BAD if (a == b && c == d) if ((a == b) && (c == d)) GOOD  반환값 if (condition) { return x; } BAD return y; return (condition ? x : y); GOOD
  • 44.
  • 45.
  • 46.
  • 47. 과거엔 주로 백엔드(back-end) 요소인 서버 프로 그램이나 데이터베이스 등에 초점을 맞춤  야후 성능개선팀 조사결과 프런트엔드(front-end) 영역에서 대기하는 시간이 웹페이지 속도의 80~90%를 차지함  현재는 웹사이트 성능 최적화 시에 야후의 우수 사 례를 많이 사용함
  • 48. 많은 시간을 image, stylesheet, script, flash 파 일들을 다운 받는데 사용함
  • 49. Script와 css 파일을 결합  Image를 CSS Sprite 기법과 Image map을 만들 어서 사용함
  • 50. 네이버 메일 이미지
  • 51. Javascript 와 css 파일을 결합하고 최소화시켜줌  http://code.google.com/p/minify/  Combine CSS  https://developers.google.com/speed/docs/ pss/CombineCSS
  • 52.
  • 53. ExpiresByType text/html "access plus 1 month 15 days 2 hours"  Header set Cache-Control “max-age=86400, public”  잘못 사용하면 파일명을 바꿔야 되기 때문에 common_1.0.0.js 와 같이 파일명을 정함
  • 54. <IfModule mod_deflate.c> SetOutputFilter DEFLATE AddOutputFilterByType text/html text/plain text/xml text/javascript AddType text/javascript .js AddType text/css .css </IfModule>  ms 정도의 미미한 성능 향상
  • 55. HTML 명세서에도 스타일시트는 page의 HEAD 안에 포함되어 있어야 한다고 함  실제 야후 성능개선팀에 연구한 결과 HEAD에 있 을 때 속도가 가장 빨랐음.  문서의 하단에 놓았을 때 style이 변경됐을 때 제 대로 rendering이 안되는 경우가 있음.
  • 56. Script를 위쪽에 두게 되면 다운로드 시간만큼 페 이지 rendering이 지연됨.  현재 대부분의 브라우저에서 hostname 당 최대 6 개의 동시 접속이 가능함. http://www.browserscope.org/?category=network  특별한 경우가 없는 한 script는 문서의 아래쪽에 위치함.
  • 57. 브라우저에 의해 캐쉬되기 때문에 외부 파일로 정 의해야 함.
  • 58. 보통 hostname을 가지고 ip를 검색하는데 소요되 는 시간이 20~120ms 임.  DNS lookup도 캐쉬(os, browser)가 되기 때문에 특별히 문제가 되지 않음  현재 서비스 중인 도메인 외의 외부 도메인 사용을 줄이라는 얘기임.
  • 59. JSMin, YUI Compressor 를 이용해 javascript 에 서 불필요한 내용을 제거한다.  YUI Compressor는 css 압축도 지원함.
  • 60. 미국 상위 10개의 웹사이트 중 2곳이 중복된 스크 립트가 있다고 함.
  • 61. Entity Tags(ETags) 는 브라우저에 캐쉬된 자원이 서버의 것과 맞는지 확인하는데 사용함. HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT 최초 ETag: "10c24bc-4ab-457e1c1f" 응답 Content-Length: 12195 GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com 캐쉬 후 If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT 요청 If-None-Match: "10c24bc-4ab-457e1c1f" 캐쉬 후 HTTP/1.1 304 Not Modified 응답
  • 62. POST 방식은 Header를 먼저 보내고 data를 보냄  GET 방식은 쿠키가 많지 않다면 하나의 TCP Packet만 보냄  IE에서 URL 최대 길이는 2K 이기 때문에 사용시 주의 해야함.
  • 63. 자바스크립트에서 DOM 접근 시 느려짐.  레이아웃을 위한 table 태그 사용은 지양해야됨.
  • 64. <img width="100" height="100" src="mycat.jpg" alt="My Cat" />  mycat.jpg는 500 x 500 px
  • 65. host의 root에 favicon 파일을 만들어 놓음  최대한 작게 그리고 Expire 등 헤더값을 셋팅해서 캐쉬되게 만듬.
  • 66. YSlow http://developer.yahoo.com/yslow/
  • 67.
  • 68.
  • 69. if(userName != null && userName.equals("")) import org.springframework.util.StringUtils; if(StringUtils.hasText(userName))
  • 70. Assertion utility class that assists in validating arguments try { Assert.isTrue(i > 0, "The value must be greater than zero"); Assert.notNull(userName, “username is required"); …… } catch(IllegalArgumentException ex) { logger.error(ex.getMessage()); }
  • 71. File originFile = new File(/svc/originFile.txt); File copiedFile = new File(/svc/copiedFile.txt); FileCopyUtils.copy(originFile, copiedFile);
  • 72. int pageNo = 1; if(StringUtils.hasText(request.getParameter("pageNo"))) { pageNo = Integer.parseInt(request.getParameter("pageNo")); } import org.springframework.web.bind.ServletRequestUtils; int pageNo = ServletRequestUtils.getIntParameter(request, “pageNo”, 1);
  • 73. DigestUtils  FileSystemUtils  AntPathMatcher  StopWatch
  • 74. NHN Convention Guide  Java Code Convention  야후 웹사이트 성능 최적화  구글 웹사이트 성능 최적화  Yslow와 CI 서버 연동
  • 75. Nobody is better than you Nobody is smarter than you - Brian tracy -