티스토리 툴바


코드를 깔끔하게 하는 리펙토리 작업을 배워보았다.
리펙토리 작업을한 소스코드 깔끔해!

package service1;
import java.io.IOException;
import kr.pe.okjsp.rss.RSSProxy;
public class NaverShopping {
 
 /**
  * @param query
  * @return
  * @throws IOException
  */
 public static String getProduct(String query) throws IOException {
  String path = "http://openapi.naver.com/search?key=6f174XXXXXXXXXX6de91072c9&query="+query
  +"&display=5&start=1&target=shop&sort=sim";
  String xml = RSSProxy.getXML(path,"utf-8");
  String product = getValue(xml, "item");

  String title = getValue(product, "title");
  title = title.replaceAll("&lt;", "<");
  title = title.replaceAll("&gt;", ">");
 
  String link = getValue(product, "link");
 
  String image = getValue(product, "image");
 
  String lprice = getValue(product, "lprice");
 
  String htmlCode = "<link rel=\"stylesheet\" type=\"text/css\" href=\"http://www.okjsp.pe.kr/mashup/style.css\" />"+
    "<table class=\"shopg\"><tr><td rowspan=\"2\"><a href=\""+link+"\">" +
    "<img src=\""+image+"\"></a></td>" +
    "<td><div class=\"shopg_name\">"+title+"</div></td></tr>" +
    "<tr><td>"+lprice+"</td></tr></table>";
  return htmlCode;
 }

 private static String getValue(String product, String nodeName) {
  int tagStart = product.indexOf("<"+nodeName+">");
  int tagEnd = product.indexOf("</"+nodeName+">");
  return product.substring(tagStart+nodeName.length()+2, tagEnd);
 }

}

하지만 처음 소스를 접하는 사람들이나 초보자에게는 리펙토리 작업을 한 소스보단 이전의 소스를 보고 이해하는 것이 더 쉽겠죠?

Posted by bjw08

아래에서 했던 작업을 이용하여 상품의 link,lprice,image를 스트링 변수에 저장하여 CSS를 이용한 상품 겔러리를 만드는 작업을 해보았다.소스 코드의 내용은 아래와 같다.
CSS 를 이용한 부분은 맨마지막 부분에 있다.그부분을 굵은 글씨로 표시 해놨으니 잘 봐두시길 바람니다.

package service1;
import java.io.IOException;
import kr.pe.okjsp.rss.RSSProxy;

public class NaverTest
{
  public void getProduct(String query) throws IOException
  {
   String qu=query;
   String path = "http://openapi.naver.com/search?key=6f174c89XXXXXXXX2c9&query="+qu+"
                       &display=5&start=1&target=shop&sort=sim";
   String xml = RSSProxy.getXML(path,"utf-8");
   
   int tagStart = xml.indexOf("<item>");
   int tagEnd = xml.indexOf("<item>",tagStart+1);
   String product = xml.substring(tagStart,tagEnd);
   
   tagStart = product.indexOf("<title>");
   tagEnd = product.indexOf("</title>");
   String title = product.substring(tagStart+7, tagEnd);
   title = title.replaceAll("&lt", "<");
   title = title.replaceAll("&gt;", ">");
   System.out.println(title);
   
   tagStart = product.indexOf("<link>");
   tagEnd = product.indexOf("</link>");
   String link = product.substring(tagStart+6, tagEnd);
   System.out.println(link);
   
   tagStart = product.indexOf("<image>");
   tagEnd = product.indexOf("</image>");
   String image = product.substring(tagStart+7, tagEnd);
   System.out.println(image);
   
   tagStart = product.indexOf("<lprice>");
   tagEnd = product.indexOf("</lprice>");
   String lprice = product.substring(tagStart+8, tagEnd);
   System.out.println(lprice);
   
   String htmlCode = "<link rel=\"stylesheet\" type=\"text/css\" href=\"http://www.okjsp.pe.kr/mashup/style.css\" />"+  "<table class=\"shopg\"><tr><td rowspan=\"2\"><a href=\""+link+"\">" + "<img src=\""+image+"\"></a></td>" + "<td><div class=\"shopg_name\">"+title+"</div></td></tr>" + "<tr><td>"+lprice+"</td></tr></table>";
   System.out.println(htmlCode);
   
  }  
}

아래의 이미지 파일은 위의 소스코드 출력과와 에디트 플러스에서 테스트 해본 결과이다.

사용자 삽입 이미지사용자 삽입 이미지사용자 삽입 이미지

Posted by bjw08


기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다.

HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

각기 다른 사용자 환경에서 동일한 형태의 문서를 제공한다는 이점도 있다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달된다.


Posted by bjw08