Scenario: 로그인을 원래 쌩 jsp로 구성을 해보았엇는데 생각보다 많은게 필요하다.

만약 Jsp로 구성한다면

로그인 -> 로그인ok(로그인이 성공했는지 확인 page) -> 성공시 main

(중간에 jsp 페이지를 안두고 구현 해볼려고했는데, 로그인 실패시 alert 창을 띄울수가 없었다.(엄청 고민해봤는데 결국 포기))

이런식으로 중간에 jsp 페이지를 하나 더 거처야한다. 그러나 Ajax로 구현하면 동적으로 할 수있다.

그리고 페이지또한

로그인->성공시 main 실패시 그냥 alert 창 하나만 띄워주면 됐다. 아주 간편하다.


Solutions:

Ajax 구문

jQuery 0.61 KB
  1. $('#btn_login').click(function() {
  2.  
  3.           var mid = $('#txt_mid').val();
  4.  
  5.           var psw = $('#txt_psw').val();
  6.  
  7.           $.ajax({
  8.  
  9.               type : "POST",
  10.  
  11.               url : "/BoardProject/login.ref",
  12.  
  13.               data : "mid=" + mid + "&psw=" + psw,
  14.  
  15.               dataType : "text",
  16.  
  17.               success : function(data, textStatus, xhr) {
  18.  
  19.                  if (data == 'loginFail') {
  20.  
  21.                       alert('로그인에 실패하였습니다.')
  22.  
  23.                   } else {
  24.  
  25.                       window.location.href = 'main.jsp';
  26.  
  27.                   }
  28.  
  29.               },
  30.  
  31.               error : function(request, status, error) {
  32.  
  33.                   alert("code:" + request.status + "\n" + "error:" + error);
  34.  
  35.               }
  36.  
  37.           })
  38.  
  39. });



controller 단 (servlet으로 프로젝트를 하던 소스코드이므로 스프링에는 다르게 적용할것)

Java 0.72 KB
  1. public class BoardLoginCommand implements BoardCommand{
  2.  
  3.     @Override
  4.     public void execute(HttpServletRequest request, HttpServletResponse response) {
  5.         String mid = request.getParameter("mid");
  6.         String password = request.getParameter("psw");
  7.         System.out.println("id"+mid+",pw"+password);
  8.         HttpSession session = request.getSession();
  9.        
  10.         DAO dao = new DAO();
  11.         ArrayList<DTO> list = dao.loginMember(mid, password);
  12.         System.out.println(list);
  13.         if(list.isEmpty()){
  14.             System.out.println("로그인안됨");
  15.             try {
  16.                 response.getWriter().write("loginFail");
  17.             } catch (IOException e) {
  18.                 e.printStackTrace();
  19.             }
  20.         }else{
  21.         request.setAttribute("list", list);
  22.         session.setAttribute("mid", mid);
  23.         }
  24.     }
  25.  
  26. }


저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[Custom El funtion] 게시판 글내용이 엔터 인식이 안될때  (0) 2017.03.28
[Jquery, Ajax] 이미지 클릭시 파일첨부 하고 디비 넣기 + 첨부이미지 미리보기 기능  (0) 2017.03.27
[AJAX, JSON] Servlet 에서 Ajax를 써서 동적으로 리플 불러오기  (0) 2017.03.24
[Jquery] 동적으로 Iframe 간 반응하기, 로그인 연습  (0) 2017.03.07
[Json,Ajax] 제이선 파일에서 ajax 및 getJson 메소드를 써서 데이터 로드하기  (0) 2017.02.16

Scenario: 사정상 Spring이 아닌 '무려' 서블릿으로 프로젝트를 진행하게 되었다. 너무 비효율적이고 힘들었지만 그래도 해내야만 했다.

그러다가 리플을 블러오는 기능을 동적으로 구현 하려고 ajax를 쓰려고 했는데, 스프링에서는 그냥 return값을 map으로 해주면 됬는데, 

이거 servlet은 return 값을 따로 넣어줄수가 없었다. (ViewPage를 넣어주면 무조건 redirect가 되버리므로 아주 복잡해졌다.)

그래서 command단에서 return으로 끝내버리고 끝내기전에 list<dto> 객체를 보내주어야 했다 (리플이 들어있는) 



Solution: 일단 list<dto>를 jason형태로 바꾸면 됐다. 이 부분은 구글의 Gson 라이브러리를 받아 해결 할 수 있었다.


view단 (ajax부분)

jQuery 0.59 KB
  1.   $.ajax({
  2.      type : "POST",
  3.      url : "/BoardProject/listreply.ref",
  4.      data : "BID="+selBid,
  5.      dataType: "json", !-- 꼭 jason으로 할 것 찍어주는 부분 -->
  6.      success : function(data, textStatus, xhr) {
  7.          $('#reply').empty();
  8.          $.each(data, function(key, val){
  9.              <!-- 로그 찍어주는 부분 -->
  10.              console.log('key:' + key + ' / ' + 'value:' + val['reply']);
  11.              $('#reply').append(val['reply']+'<br>');
  12.          });
  13.      },
  14.      error : function(request,status,error) {  
  15.         alert("code:"+request.status+"\n"+"error:"+error);
  16.      }
  17.   });



Contorller단 (command 오랜만에쓰는 부분)

Java 0.91 KB
  1. public class BoardReplyListCommand implements BoardCommand {
  2.     @Override
  3.     public void execute(HttpServletRequest request, HttpServletResponse response) {
  4.            
  5.             DAO dao = new DAO();
  6.             String bid = request.getParameter("BID");
  7.             System.out.println(bid);
  8.             ArrayList<DTO> list = dao.listreply(bid);
  9.             request.setAttribute("rlist", list);
  10.            
  11.             //타입을 json으로 바꿔줘야됨
  12.             response.setContentType("application/json");
  13.             response.setCharacterEncoding("UTF-8");
  14.            
  15.             //DTO 타입의 어레이리스트를 json 형태로 바꿔주는 구문(라이브러리 필수, zip->jar 확장자명 꼭 확인)
  16.             String gson = new Gson().toJson(list);
  17.            
  18.             try {
  19.                 //ajax로 리턴해주는 부분
  20.                 response.getWriter().write(gson);
  21.             } catch (JsonIOException e) {
  22.                 e.printStackTrace();
  23.             } catch (IOException e) {
  24.                 e.printStackTrace();
  25.             }
  26.            
  27.     }
  28. }


저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[Jquery, Ajax] 이미지 클릭시 파일첨부 하고 디비 넣기 + 첨부이미지 미리보기 기능  (0) 2017.03.27
[Jquery, Ajax] 로그인 기능을 Ajax로 만들어서 좋았던점  (0) 2017.03.24
[Jquery] 동적으로 Iframe 간 반응하기, 로그인 연습  (0) 2017.03.07
[Json,Ajax] 제이선 파일에서 ajax 및 getJson 메소드를 써서 데이터 로드하기  (0) 2017.02.16
[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2017.02.16

Scenario: 메인에 Index.jsp 에서 2개의 프레임이 있다. 왼쪽은 로그인을 할 수 있는 iframe 이고 오른쪽은 로그인 결과를 나타내주는 iframe이다.

왼쪽창에서 로그인 검증값으로 넘어간뒤 로그인이 완료되면 right의 iframe 을 동적으로  반응 시켜주어야 했다. 

즉 왼쪽 iframe 스크립트 코드에서 오른쪽으로 접근하는 부분에서 애를 많이 먹었는데 성공 할 수있었다.


Solutions:

(구문해석)

$('#right', window.parent.document).contents().find('.login').show();    //가장 애먹은 부분이었다.

위와 왼쪽 프레임에서 오른쪽 프레임으로 접근하였다.

 $('#right', window.parent.document) 이것은 부모프레임에서 #right라는 id를 가진 프레임에 접근하는 것이다.

contents().find('.login').show(); 그뒤에 그 프레임내 컨텐츠에서 login class를 가진 요소에 접근해 show() 시켜준다.


<index.jsp>

HTML 5 0.54 KB
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.    pageEncoding="UTF-8"%>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7.  
  8. </head>
  9. <body>
  10. <h1 id=hi>여기표시 접근가능?</h1>
  11. <table width="100%" border="1">
  12. <tr><td id='frame'>
  13. <iframe src="left.jsp" width="450" height="560"></iframe>
  14. <iframe id="right" src="right.jsp" width="450" height="560"></iframe>
  15. </td>
  16. </tr>
  17. </table>
  18.  
  19. <script type="text/javascript">
  20.    
  21. </script>
  22. </body>
  23. </html>



<left.jsp>

HTML 5 1.65 KB
  1. <%@page import="java.util.Date"%>
  2. <%@page import="java.text.SimpleDateFormat"%>
  3. <%@ page language="java" contentType="text/html; charset=UTF-8"
  4.    pageEncoding="UTF-8"%>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8. <%
  9.     Date time = new Date();
  10.     SimpleDateFormat formatter = new SimpleDateFormat("yyy-MM-dd HH:mm:ss");
  11.  
  12. %>
  13. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  15.  
  16.  
  17. </head>
  18. <body>
  19.     <h1>left.jsp</h1><br>
  20.     <form action="LoginResult.jsp">
  21.         <% if(session.getAttribute("id") == null){%>
  22.        
  23.             아이디:  <input type="text" name="id"><br>
  24.             비밀번호: <input type="text" name="pw"><br>
  25.             <input type="submit" value="로그인">
  26.        
  27.         <script type="text/javascript">
  28.             $(function(){
  29.                 $('#right', window.parent.document).contents().find('.login').hide();
  30.                 $('#right', window.parent.document).contents().find('.logout').show();
  31.             })
  32.         </script>
  33.        
  34.        
  35.         <%} else { %>
  36.         <h3>jsp 님 로그인중</h3><br>
  37.         <input type="submit" value="LogOut">
  38.             <hr style="border:solid 2px red;">
  39.             접속시간:<% time.setTime(session.getCreationTime()); %><%=formatter.format(time) %><br>
  40.             최근 접근 시간시간:<% time.setTime(session.getLastAccessedTime()); %>
  41.             <%=formatter.format(time) %>
  42.                 <script type="text/javascript">
  43.             $(function(){
  44.                 $('#right', window.parent.document).contents().find('.login').show(); //제일 애먹었던부분
  45.                 $('#right', window.parent.document).contents().find('.logout').hide();
  46.             })
  47.         </script>  
  48.         <%}%>
  49.     </form>
  50. </body>
  51. </html>


<right.jsp>

HTML 5 0.59 KB
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.    pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. </head>
  9. <body>
  10.     <h1>RIGHT.jsp</h1><br>
  11.     <h2 class='logout'>로그인되어 있지 않은 상태입니다.</h2>
  12.     <img class='login' alt="main" src="main.jpg" width="70%" height="70%" style="display:none">
  13.     <h2 class='login' style="display:none">접속중입니다.</h2>
  14. </body>
  15. </html>


<LoginResult.jsp> ->로그인 검증

HTML 5 1.02 KB
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.    pageEncoding="UTF-8"%>  
  3.  
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9. <title>Insert title here</title>
  10. </head>
  11. <body>
  12.  
  13. <%
  14.     if("jsp".equals(request.getParameter("id")) && "1234".equals(request.getParameter("pw")))
  15.     {
  16.         session.getId();
  17.         session.setAttribute("id", "jsp");
  18.         session.setAttribute("pw", "1234");
  19. %>
  20.     <script type="text/javascript">
  21.         alert("로그인에 성공하였습니다.")
  22.         location.href="left.jsp";
  23.     </script>
  24. <%  } else {
  25.         if(session.getAttribute("id") != null)
  26.         {
  27.             session.invalidate();
  28. %>
  29.         <script type="text/javascript">
  30.             alert("로그아웃 되었습니다.");
  31.             location.href="left.jsp";
  32.         </script>
  33. <%      } %>
  34.         <script type="text/javascript">
  35.             alert("비밀번호가 틀렸습니다.");
  36.             location.href="left.jsp";
  37.         </script>
  38. <%} %>
  39.  
  40. </body>
  41. </html>






<접속 안되있을시>

<로그인 성공시>

저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[Jquery, Ajax] 로그인 기능을 Ajax로 만들어서 좋았던점  (0) 2017.03.24
[AJAX, JSON] Servlet 에서 Ajax를 써서 동적으로 리플 불러오기  (0) 2017.03.24
[Json,Ajax] 제이선 파일에서 ajax 및 getJson 메소드를 써서 데이터 로드하기  (0) 2017.02.16
[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2017.02.16
[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기  (0) 2017.02.14

좋은 커밋 메시지 작성하기


좋은 커밋 메시지는 다음 세가지 중요한 목적이 있다:

  • 리뷰 프로세스를 빠르게 만든다.
  • 좋은 릴리즈 노트를 작성하게 돕는다.
  • 미래의 코드 메인테이너를 돕는다. (그 메인테이너가 당신일 수도 있다!) 어떤 코드 변경이 일어났는지, 왜 이 특정한 기능이 추가되었는지 수년 후에 이야기 해도 알 수 있도록 말이다.

커밋 메시지의 구조는 다음과 같다. 이 내용은 git scm에서 자세하게 확인할 수 있다:

(50자 미만의) 변경에 대한 짧은 요약

필요하다면 상세한 설명을 첨가한다. 행 당 72자가 넘지 않도록 유의한다. 맥락에 따라 첫 줄은 이메일의 제목처럼,
나머지는 본문처럼 다뤄지는 경우가 있다. 요약과 본문을 구분하는 빈 행은 본문을 생략하지 않는 이상 필수적이다.
rebase와 같은 도구를 사용하면 혼란을 줄 수 있기 때문이다.

추가적인 문단은 빈 행 다음에 작성한다.

- 개조식 서술 또한 괜찮음
- 블릿(bullet)으로 하이픈(-)이나 별표(*)를 사용하고, 한 칸의 공간을 띄고 각 항목 사이 빈 행을 넣는
  방식이 일반적이나 다양한 관례가 있음.

해야 할 일

  • 요약과 설명을 작성할 때는 자신이 무엇을 했는지를 명령형으로 작성한다. 즉 다른 사람에게 이 일을 지시하듯 작성한다. “고쳤다 fixed”, “추가했다 added”, “변경했다 changed” 대신 “고치다 fix”, “추가하다 add”, “변경하다 change” 식으로 작성한다.
  • 항상 두번째 빈 행을 추가한다.
  • 커밋 메시지에서 줄 바꿈을 한다. (gitk등 커맨드 환경에서 커밋 메시지를 수평 스크롤 없이 쉽게 읽을 수 있는데 도움이 된다.)

하지 말아야 할 일

  • 요약 끝에 마침표를 찍지 않는다. 요약은 제목이다. 제목은 마침표로 끝나지 않는다.

팁

  • 커밋을 요약하는데 어려움을 느낀다면 커밋 안에 여러 로직의 변화 또는 버그 수정이 있기 때문일 것이다. 이럴땐 git add -p 명령어를 사용해 여러 커밋으로 분리하는 것이 낫다.

레퍼런스

커밋 메시지에 대한 좋은 논의를 다음 블로그 포스트에서 확인할 수 있다.


+커밋 메시지에 대해

지난 몇 주 동안 놀랄 만큼 많은, 커밋 메시지에 대한 토론을 읽게 되었다. 그 중에는 개발자와 함께 막 새 프로젝트를 시작하려는 사람들도 많았다. 그래서 그들을 돕기 위해 커밋을 할 때 해야 할 일과 그 일을 왜 해야 하는지에 대한 목록을 작성해봤다. (힌트: 리눅스 커널 메일링 리스트는 이 일을 아주 바람직하게 하고 있다. 그곳에서 배우자.)

모든 소프트웨어 프로젝트는 협동 프로젝트다. 적어도 프로젝트엔 두 명의 개발자가 일하게 되어 있다. 나 혼자 최초 개발자로 스스로 개발을 한다고 해도 몇 주, 몇 달이 지난 후에 작성한 코드가 무엇인지 생각해내야 하는 미래의 내가 존재한다. 미래의 나는 새로운 버그가 발생하거나 새로운 기능을 추가해야 할 때마다 매번 특정 부분의 코드에 대한 맥락을 다시 파악해야만 한다.1

코드 조각의 맥락을 다시 파악하는 일은 정말 낭비일 수밖에 없다. 물론 이 일을 완전히 회피할 수는 없겠지만, 이 시간을 최소화할 수 있도록 노력해야 한다. 바로 커밋 메시지가 그 역할을 담당한다. 그렇기 때문에 커밋 메시지를 보면 그 개발자가 좋은 협력자인지 아닌지를 알 수 있게 된다.

좋은 커밋 메시지는 패치에 관한 다음 세 가지 질문에 답을 할 수 있어야 한다:

  • 왜 이 코드가 필요한가? 코드는 버그 수정, 기능 추가, 성능 향상, 신뢰성, 안정성을 위한 변경일 수 있다. 물론 단순한 오·탈자 교정일 수도 있다.
  • 어떻게 이슈를 해결했는가? 짧아서 명백한 패치의 경우 이 부분을 생략해도 된다. 다만 깊은 수준의 묘사로 어떻게 문제에 접근했는지 나타내야 한다.
  • 패치가 어떤 영향을 만드는가? 명백한 부분을 포함해 벤치마크 결과, 부작용 등을 포함할 수 있다.

이 세 가지 질문으로 실제 코드 변경에 대한 맥락을 알 수 있게 된다. 또한 리뷰어와 다른 개발자가 그 맥락을 통해 차이점을 보고 적절한 방법을 선택해 문제에 접근했는지 확인하게 된다. 또한 좋은 커밋 메시지는 메인테이너에게 안정 브랜치에 포함해도 괜찮은지, 또는 배포에 포함해도 괜찮은지 결정하는데 도움된다.

이 세가지 질문에 대한 답이 없는 패치는 대부분 쓸모 없는 패치다. 이런 경우에는 이 패치가 어떤 일을 하고 어떻게 이슈를 해결했는지 직접 찾아야 하기 떄문에 리뷰어에게 부담만 될 뿐이다. 복잡할대로 복잡한 패치에 많은 수의 리뷰어가 필요한 상황. 그 의미는 결국 원 개발자가 좋은 커밋 메시지를 작성하지 않았다는 이유만으로 많은 인력 투입 시간(man-hours)이 낭비된다는 뜻이다. 거기에 만약 메인테이너가 프로젝트의 소스 컨트롤 관리 통제를 철저히 하고 있다면, 개발자가 제출한 패치는 거절 당할 것이고 개발자는 다시 시간을 소비해 패치를 다시 작성해야 하며, 리뷰어는 리뷰에 또 시간을 소비하게 되는, 최악의 경우도 발생할 수 있다. 이처럼 시간 낭비는 빠르게 늘어난다. 단지 몇 분 시간을 투자해서 커밋 메시지를 작성하는 것이 이런 비경제적인 시간 소비를 없앨 수도, 최악의 상황을 만들 수도 있는 것이다.

오픈소스가 아닌 일반 소프트웨어 회사도 이 내용을 충분히 고려해야 한다. 적당한 소스 컨트롤 관리 규칙이 없으면 결국 비용이 발생한다.

어떻게 해야 더 잘할 수 있을까

물론 이상적인 커밋 메시지는 이래야 한다는 엄격한 정의는 없다. 하지만 몇 가지 일반적인 규칙은 있다. 커밋은 정확히 하나의 로직 변경을 포함해야 한다. 로직 변경은 새로운 기능을 추가하거나 특정 버그를 수정하는 것 등을 의미한다. 몇개의 단어로 고수준의 변화를 묘사할 수 없다면 단일 커밋으로는 너무 복잡한 상태인 것이다. 변경은 가능한 한 그 스스로 이해할 수 있도록 간결해야 한다. 많은 패치에서 발생한 에러가 작은 패치에서 발생한 에러보다 낫다. 가장 우선이 되는 규칙으로, 커밋 메시지만 읽어도 다른 개발자가 납득할 만큼 비슷한 시간을 들여 같은 패치를 구현할 수 있어야 한다.

git을 사용한다면 git add -p (또는 -i)를 활용해 각각의 변경 사항에 따라 로직을 이해할 수 있는 수준의 단일 커밋 단위로 쪼개야 한다.

Git 커밋 양식

만약 패치를 git으로 제출한다면, 그 양식은 거의 표준화 되어 있다. 첫 행은 변경에 대한 요약이다. (행의 최대 길이는 프로젝트마다 다르지만 일반적으로 행 당 50자에서 78자 사이다.) 이 첫 줄을 가장 많이 보게 되고 그만큼 중요하다. 많은 git 도구가 이 방식으로 동작하거나 이 양식에 최적화되어 있다. 첫 행 요약 다음으로 빈 행을 입력하고 그 뒤로 필요에 따라 패치에 대한 상세 내역을 여러 문단으로 작성한다. 코드를 설명하지 말고 의도와 접근 방식을 설명한다. 로그는 현재형으로 작성한다.

로그를 사랑하는 방법을 배울 것

나는 과거에 CVS를 사용했는데 (SVN도 조금) 이 도구는 정말 사용하기가 쉽지 않았다. 거의 쓸모가 없었는데 도구도 그랬고 사용 가능한 정보도 그랬다. 현재는 코드를 들여다 보는 것 보다 git의 로그를 더 자주 본다. git 로그 도구는 일하고 있는 프로젝트에서 CVS의 로그나 커밋 규칙에 비해 대단히 뛰어나기 때문에 훨씬 편리하다. 코드보다 git 로그를 더 많이 붙잡고 왜 이 코드가 이런 방법으로 작성되었는지 git을 통해 살펴보는데 대부분의 시간을 쓴다. 이 방법은 확실히 많은 시간과 노력을 아끼게 해준다. X 서버 버그에서 가장 짜증나는 점은 코드가 XFree86에서 넘어오는 과정에 git 히스토리가 남아있지 않은 곳에서 나타난다는 점이다. 만약 아직 소스 컨트롤 관리의 로그 도구를 사용하고 있지 않다면 이 도구와 더 친해지길 추천한다.

하면 안되는 것

커밋을 할 때 평균적으로 나타나는 몇 가지 일반적인 죄악이 있다. (그렇다. 읔.)

  • 소스 컨트롤 관리는 백업 시스템이 아니다! 개인적으로 정말 싫어하는 유형이다. 개발자 중에는 이 도구를 퇴근용 커밋 즉, 퇴근하기 직전에 변경한 모든 코드를 커밋하는 사람이 있다. 그 결과는 아무짝에 쓸모가 없다. 코드 이곳 저곳에서 확인되는 변경점은 몇개월이 지나면 그 누구도 이해할 수가 없다. 실제 코드 작성자를 포함해서 말이다. (덧붙여: 대학교는 절대 이런 쓰레기 방식으로 가르치지 말 것.)
  • 파일 당 커밋. 파일 하나 이상에서 로직 변경이 실제로 발생하지 않았는데도 커밋하는 경우가 있는데 지나치게 분리해서 커밋하면 안된다.
  • 게으른 커밋 메시지, “여러가지 고치고 정리했음” 또는 이와 비슷하게 작성한 모든 커밋을 의미한다. 이런 경우를 비FOSS 프로젝트에서 종종 본 적이 있었는데 이런 커밋은 결국 당신에게 되돌아와 상처를 입힌다. 알려진 버그인지 알아내는 것은 불가능에 가깝고 문제를 분리하기도 어려울 뿐더러 그 누구도 프로젝트에서 무슨 일이 일어나고 있는지 따라가기 어렵게 만든다.
  • 하나의 패치 안에 두 가지 변경. 예를 들면 “버그 2345를 수정했고 모든 foo를 bar로 수정했음”과 같은 커밋이다. 버그 2345에서 명칭 변경이 요구되고 있다 하더라도 이런 커밋은 여러개의 패치로 분리해야 한다. 이 버그 픽스를 안정 브랜치에 적용해야 하는 상황일 때 다른 내용이 함께 있기 때문에 적용할 수가 없다. 잘못된 패치를 유용한 덩어리에 넣는 일은 누군가 직접 처리하기 전까진 프로젝트에 아무런 가치를 더해주지 못하는 일이라 가장 시간 소모적이고 짜증나는 일 중 하나다.
  • 코드 변경에 공백 변경을 함께 넣는 경우. 사막에서 바늘 찾는건 재미있는 게임이지만 패치를 들여다보고 있을 때는 전혀 아니다. 이 방법은 분명 버그를 소개하는 가장 강력한 방법이긴 하다. 비록 수백 줄의 코드에 들여쓰기를 변경해 모든 코드가 변경된 상태로 표시되고 있으니 말이다. 재미로 한건지 장점이 있어서 한 것인지는 둘째치고 어느 위치에 버그가 있었고 그 버그를 어떻게 수정했는지 거의 아무도 찾을 수 없다.
  • 너무나도 사랑스러운 코드 누락. 새로운 기능을 추가하기 위해 수백 줄 코드 패치를 작성하는 동시에 이 기능을 위해 기존에 있던 인프라 구조를 절반 이상 재작성을 한 경우다. 그 결과로 수백 줄의 코드를 리뷰해야 하고 매번 이 영역에 있던 코드와 관련된 버그를 발견하게 된다.인프라 구조를 한번에 한 조각씩 수정하는 것으로 시작하고 그 작업을 하고서 맨 위에 새로운 기능을 꼽았으면 훨씬 쉽고 적은 시간을 사용했을 것이다. 위와 같은 방법을 자주 사용해서, 즉 빈번하게 코드 덤프를 통채로 적용하는 프로젝트가 있다면 이는 외부 개발자들의 사기를 떨어뜨린다. 당신이라면 코드를 기여하는 프로젝트가 아니라 지독한 잡음에서 신호를 골라내는 일에 시간을 쓰는 프로젝트에 참여하겠는가?
  • 패치와 관계 없는 공백 변경. 리뷰어는 패치에 관한 큰 그림을 생각해야 한다. 공백만 있는 덩어리는 혼란스럽다. 리뷰어는 그 공백이 실제 변경인지 무시해도 되는지 확인하기 위해 더 추가적인 노력을 기울이게 된다. 빈 행이 추가되거나 제거되는 경우는 그렇게 나쁘지 않다. 정말 나쁜 경우는 들여쓰기 변경이다.

위와 같은 상황에는 수많은 변명도 존재하는데 대부분 다음과 같이 대답하기를 좋아한다. “그래도 동작하잖아요!” 물론 동작은 한다. 하지만 코드는 정적이지 않다. 얼마 간의 시간 내에 코드는 아마 이동하고, 다시 작성될 것이며, 다른 방법으로 호출되거나 버그가 포함되어 있다는 사실이 발견될 수도 있다. 동시에 최초의 개발자는 코드를 움직이고 누구도 왜 그 코드가 그렇게 움직였는지 모를 수도 있다. 최악의 경우는 모든 사람이 코드를 만지는 것을 두려워하는 상황인데 누구도 어떻게 실제로 동작하는지 알 수 없기 때문이다.

또 다른 일반적인 변명은 다음과 같다. “하지만 나는 이 프로젝트에 참여하는 유일한 사람입니다.” 사실이 아니다. 모든 소프트웨어 프로젝트는 (위에서 보는 것과 같이) 협동 프로젝트다. 누구도 단순히 근시안적으로 생각하지 않는다. 특히 FOSS 프로젝트는 외부의 기여자 즉, 테스터, 개발자, 우선순위를 정하는 사람, 사용자 등에 의존적이다. 그들이 참여하게 만드는 게 어렵다면 그 프로젝트는 더 쉽게 망할 것이다.

좀 덜 일반적이지만 최근에 자주 보이는 또 다른 변명은 소스 컨트롤 관리가 너무 느리다는 불평이다. 분산 소스 컨트롤 관리는 이 이슈를 해결했기 때문에 시간도 절약하고 돈 절약에도 아마 보탬이 될 것이다.


번역: By Haruair 

http://www.haruair.com/blog/2738

원문

https://github.com/erlang/otp/wiki/Writing-good-commit-messages




저작자표시 비영리 변경금지

'To be Developer > Git or Svn' 카테고리의 다른 글

[Git, Eclipse]외부 저장소에는 존재하지만 Local 에는 없는 파일 가져오기  (0) 2017.01.18
[Git] Branch 생성 및 바꾸기 및 Remote에 새로운 Branch 추가 및 브랜치변경 등등..  (0) 2017.01.18
[Git] Git 기본사용 Remote 연동등등  (0) 2017.01.18
[Git]Local에는 없고 Remote에는 파일이 있을때 가져오기.  (0) 2017.01.10

알아야할 사전 지식.

1.Json 이란 무엇인가?

 JavaScript Object Notation의 약자로써, 자바스크립트를 위한 것이며, 객체 형식으로 자료를 표현하는 것이다. 그냥 [제이:슨] 이라고 읽으면 된다.

2.이것은 새로운 언어인가?

 아니다 단순히 데이터 포맷일 뿐이다. XML,INI 파일 등과 같은 비슷한 것이라고 생각하면 된다.



Scenario: Ajax를 이용해서 여러 데이터 파일을 파싱하고자함. 그중 첫번째는 json 파일


Solutions : (아래)


<Ajax_getjSON.html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JSON 이용하기</title>
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8.     $(function() {
  9. //      $.ajax({
  10. //          url: "items.json",
  11. //          contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  12. //              dataType: "json",    
  13. //          success: function(result) {
  14. //              $.each(result, function(i, val) {
  15. //                  console.log(val['id']+':'+val['name']);
  16. //              })
  17. //          },
  18. //          error: function(jqXHR, textStatus, errorThrown) {
  19. //              alert("Error: " + textStatus + " errorThrown: " + errorThrown);
  20. //          }
  21. //      });
  22. //ajax 이용
  23.  
  24.         $.getJSON("items.json", function(result) {
  25.             $('#treeData').append("<tr><td>price</td>"+"<td>name</td>"+"<td>price</td>"+"<td>description</td></tr>");
  26.             $.each(result, function(i, val) { //result는 each 문에 val과 매칭시켜주기위함이고 , 인자 i와 val은 each함수의 시그니쳐다.
  27.                 console.log(typeof(i));
  28.                 console.log(val['id']+val['name']+val['price']+val['description']);
  29.                 $('#treeData').append("<tr><td>"+val['id']+"</td>"+"<td>"+val['name']+"</td>"+"<td>"+val['price']+"</td>"+"<td>"+val['description']+"</td></tr>");
  30.             });
  31.         });
  32. });  
  33. </script>
  34. <style>
  35. td, th {
  36.     border: 1px solid gray;
  37. }
  38. </style>
  39.  
  40. </head>
  41. <body>
  42.     <table id="treeData">
  43.     </table>
  44. </body>
  45. </html>


<items.json>

  1. [
  2.   {
  3.     "id": "1",
  4.     "name": "레몬",
  5.     "price": " 3000",
  6.     "description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다."
  7.   },
  8.   {
  9.     "id": "2",
  10.     "name": "키위",
  11.     "price": " 2000",
  12.     "description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다."
  13.   },
  14.   {
  15.     "id": "3",
  16.     "name": "블루베리",
  17.     "price": " 5000",
  18.     "description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다."
  19.   },
  20.   {
  21.     "id": "4",
  22.     "name": "체리",
  23.     "price": " 5000",
  24.     "description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다."
  25.   },
  26.   {
  27.     "id": "5",
  28.     "name": "메론",
  29.     "price": " 5000",
  30.     "description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다."
  31.   },
  32.   {
  33.     "id": "6",
  34.     "name": "수박",
  35.     "price": "15000",
  36.     "description": "수분이 풍부한 과일이다."
  37.   }
  38. ]


어려웠던점 

1. 일단 Json 데이터의 {}가 한개일때는 파싱하기가 쉬운데, 중괄호가 여러개가 되니 하나의 오브젝트가 되어 파싱하기가 힘들어졌다. 

찾아보니  {}가 여러개인 형태를 json array라고 부른다고 하더라 (Json 데이터가 배열형태를 이룸), json array라는 키워드를 알고 구글링하니 찾기 쉬워짐

2.json 파일을 불러오다보니 한글파일이 자꾸 깨짐, 일단 결론부터 말하자면 .getJSON 으로는 utf-8 을 지정할 수 없음. .aJax를 쓰면 contentType key로 

utf-8 지정가능



+Tip 시그니쳐란 무엇인가?

나는 원래 C,C++ 부터 프로그래밍을 시작해서, 델리게이터를 만들때 시그너쳐(signature) 라는 용어를 많이썻었는데,

시그너쳐란 말그대로 어떤 함수의 선언문에  명시된 매개변수 리스트와 반환타입이다.

쉽게말해 시그니처는 함수의 형태이다.


[Signature Ex]

int getMoney(Person kim); 

다음 함수 에서 시그니쳐는 int(Person) 인것이다.


저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[AJAX, JSON] Servlet 에서 Ajax를 써서 동적으로 리플 불러오기  (0) 2017.03.24
[Jquery] 동적으로 Iframe 간 반응하기, 로그인 연습  (0) 2017.03.07
[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2017.02.16
[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기  (0) 2017.02.14
[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14

Scenario: Ajax를 이용하여, 특정 Html 요소 불러오기 그 Html 파일내에 특정 태그 요소만 불러오고자 함


Solutions: 제일 고민됬던 부분.1. $.ajax를 써서 어떻게 <li> 태그요소만 불러올것인가?? 나는 ajax name:value를 뒤져봤는데 아무리봐도 나오지 않았다.

결국 jquery 메소드를 통해 해결 할 수 있엇다.

총 소스는 (아래)

<Main.html>

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
  4. <style>
  5. div {
  6.     width: 200px;
  7.     height: 80px;
  8.     margin: 3px;
  9.     float: left;
  10. }
  11. </style>
  12. <script
  13.     src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  14. <script>
  15.     $(document).ready(function() {
  16.         $("#menu1").click(function() {
  17.             $.ajax({
  18.                 url : "menu.html",
  19.                 success : function(result) {
  20.                     $("#message1").html(result);
  21.                 }
  22.             });
  23.         });
  24.     });
  25.     $(document).ready(function() {
  26.         $("#menu2").click(function() {
  27.             $.ajax({
  28.                 url : "menu.html",
  29.                 success : function(result) {
  30.                     var refine = $("#message2").html(result).find('li');
  31.                     console.log(result);
  32.                     console.log(refine);
  33.                     console.log(typeof(refine));
  34.                     $('#message2').html(refine);
  35.                 }
  36.             });
  37.         });
  38.     });
  39. </script>
  40. </head>
  41. <body>
  42.     <div>
  43.         <a href="#" id="menu1">메뉴 보기 1</a>
  44.         <p>
  45.             <span id="message1"></span>
  46.     </div>
  47.     <div>
  48.         <a href="#" id="menu2">메뉴 보기 2</a>
  49.         <p>
  50.             <span id="message2"></span>
  51.     </div>
  52. </body>
  53. </html>

 

<menu.html> : main 에서 불러올 html 파일

  1. <meta charset="UTF-8">
  2.  
  3. <p> 중 식 메 뉴 </p>
  4. <ul>
  5. <li> 짜장면 </li>
  6. <li> 짬뽕 </li>
  7. <li> 기스면 </li>
  8. <li> 탕수육 </li>
  9. </ul>
  10. <p> 메뉴를 골라주세요.</p>


저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[Jquery] 동적으로 Iframe 간 반응하기, 로그인 연습  (0) 2017.03.07
[Json,Ajax] 제이선 파일에서 ajax 및 getJson 메소드를 써서 데이터 로드하기  (0) 2017.02.16
[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기  (0) 2017.02.14
[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14
[JavaScript]DOM객체 및 mouseover mouseout 을 활용하여 동적 버튼 만들기  (0) 2017.02.09

Scenario: 체크박스를 만들어 jQuery로  선택된 체크박스 value 들을 가져오고, 결과에 밑에 띄워준다. 두번째 부터는 결과에 있는 요소들을 지워준디 다시 그려준다.



Solutions: 아래


Ps. 어려웠던점

1. jQuery 선택자와 결과밑에 check value를 띄워줄때, 맨처음엔 after로 했엇는데 아무리해도 안지워 지는것이다. 여기서 많은 고민을함.

  차라리 Text 삽입시에 append를 사용하면 그 객체들이 전부 child 가 되기때문에 지워주기가 쉬움.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>여러 개의 취미를 체크박스에서 선택하고 결과보기-:checkbox</title>
  6. <style>
  7. div {padding: 5px 5px 5px 5px}
  8. .item { float: left;    width: 100px;}
  9. </style>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
  11.     <script type="text/javascript">
  12.     $(function(){
  13.         $('#selectBtn').click(function(){
  14. //          console.log(('#contents'));
  15.             $('#contents').children().text(""); //모든자식 지우기(새로 선택된결과를 띄우기위해서)
  16. //          $('#contents').children('p').text(""); P인자식만 해당
  17.              $('input:checkbox').each(function() { //[name=??] 로특정 체크박스만 불러오기가능
  18.                  if(this.checked)
  19.                     $('#contents').append('<p>'+this.value);
  20.              });
  21.         });
  22.     });
  23.    
  24.     </script>
  25.    
  26.  
  27. </head>
  28. <body>
  29.     <div>
  30.     <span class="item"> 음악감상 </span> <input type="checkbox" name="hobby" value="music">
  31.     </div>
  32.     <div>
  33.         <span class="item"> 요가 </span> <input type="checkbox" name="hobby"  value="yoga">
  34.     </div>
  35.     <div>
  36.         <span class="item"> 독서 </span> <input type="checkbox" name="hobby"  value="reading">
  37.     </div>
  38.     <div>
  39.         <input type="button" id="selectBtn" value="취미 선택">
  40.     </div>
  41.     <div id="contents">결과</div>
  42. </body>
  43. </html>


저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[Json,Ajax] 제이선 파일에서 ajax 및 getJson 메소드를 써서 데이터 로드하기  (0) 2017.02.16
[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2017.02.16
[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14
[JavaScript]DOM객체 및 mouseover mouseout 을 활용하여 동적 버튼 만들기  (0) 2017.02.09
[JavaScript][펌]유용한 Array 메소드들  (0) 2017.02.07

Scenario: 학원에서 공부한 jQuery 기본 셀렉터 예제 정리


Solutions: 아래


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title> 객체 조작 및 생성 </title>
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> //CDN을 쓰면 궂이 JS파일 없이사용가능
  7. <style type="text/css">
  8. <script>
  9. //************* 기본 예제문제 시작
  10. $(function(){
  11. //(1) h1 태그의 align 속성값을 left적용하기
  12. $('h1').css("text-align","left");
  13. //(2): li태그중 첫번째 요소에 텍스트를 새 텍스틀 바꾸기
  14. $('li:eq(0)').text("첫번째리스트");
  15. //(3)h2태그에 자식 요소인 strong태그의 글자를 빨간색으로 적용
  16. $("h2:nth-child(2)").css("color","red");
  17. //(4)id=two인 요소의 이전 요소에 글자를 파란색으로 적용
  18. $("#two").css("color","blue");
  19. //(5)id=two인 요소의 다음에요소에 글자를 보라색으로 적용
  20. $("#two").next().css("color","purple");
  21. //(6)id=two인 요소의 부모 요소에 파선을 생성
  22. $("#two").parent().css("border","dashed");
  23. //(7)class=myList인 요소내의 가장 앞의 위치에 새요소를 추가
  24. $(".myList").prepend("<li>Front</li>");
  25. //(8)class=myList인 요소내의 마지막 위치에 새요소를 추가
  26. $(".myList").append("<li>back</li>");
  27. //(9)class=three인 요소의 이전 위치에 새요소를 생성
  28. $(".three").before("<li>앞에삽입</li>");
  29. //(10)class=three인 요소의 다음 위치에 새 요소를 생성
  30. $(".three").after("<li>뒤에삽입</li>");
  31. //(11)h2태그중에 2번째 요소를 <div>태그로 감싸기
  32. $("h2:nth-of-type(2)").wrap('<div/>');
  33. //(12)h2태그중에 하위 요소를 strong태그를 포함하는 <h2>에 class="tit"속성 추가
  34. $("h2").children("strong").parent().addClass('tit'); //** 가장애먹은부분("h2").children("strong") 에 tit를 추가하면 스트롱태그에만 tit추가하는거임.
  35. //(13)h2태그중에 마지막 요소에 class="tit"속성을 제거
  36. $("h2:last").removeClass('tit');
  37. });
  38.  
  39. //**************특정 배수 객체에 css적용시 셀렉터 사용법
  40.     $(function() {
  41.         $('h3:nth-child(3n+1)').css({'background-color':"black",'color':"white"}); //이렇게 +1을 해줘야지 0번째부터 시작됨
  42.         $('h3:nth-child(3n+1)').css({'background-color':"black",'color':"white"}); //중괄호 사용시 따옴표를 쓰지 않고
  43.                                                                       //backgroundColor:'balck' 이렇게 카멜표기법으로 표현가능
  44.     })
  45.  
  46.  
  47. //**********마이너스 선택자를 쓸경우 ; -1은 집합내 맨끝요소를 가르킴
  48. $(function() {
  49.         $('h1').css({'background-color':'orange','color':'white'}); //한줄에 이런식으로 css 여러속성 주기가능
  50.         $('h1').eq(-2).css('color',"red");  //'h1:eq(0)'처럼 쓰면 li태그 내에서만 셀렉 가능, 그러나 이런식으로하면 다 쓸수 있고
  51.                                             //인덱스가 0부터 시작.(n일경우)
  52. });
  53.  
  54.  
  55. //**********게시판 만들때 글 순서에따라 명암도 규칙있게 주기
  56. $(function() {
  57.     $('tr:nth-child(3n)').css({'background-color':"gray"}).prev().css({'background-color':"lightgray"});   
  58. })
  59.  
  60. </script>
  61. <style>
  62.    div{background-color:yellow;}
  63.    .tit{background-color:orange;}
  64. </style>
  65. </head>
  66. <body>
  67. // 생략된 객체들이 있음
  68.   <h1 align="center"><strong>내용1</strong></h1>
  69.   <h2><strong>내용2</strong></h2>
  70.   <h2>내용3</h2>
  71.   <h2 class="tit">내용4</h2>
  72.   <ul class="myList">
  73.     <li>리스트1</li>
  74.     <li id="two">리스트2</li>
  75.     <li class="three">리스트3</li>
  76.     <li>리스트4</li>
  77.   </ul>
  78.  
  79.  
  80. //********** 게시판 예제에 필요한 객체
  81.     <table>
  82.         <tr><td>신형 넥수스 10 미개봉 팝니다.</td><td>62만원</td></tr>
  83.         <tr><td>갤록시S5 전투용 싸게 처분합니다.</td><td>45만원</td></tr>
  84.         <tr><td>안드로이드 프로그래밍 정복 새 책</td><td>8만원</td></tr>
  85.         <tr><td>ASUS 젬북 UX21A full hd, i7 CPU, RAM 4G, 256 SSD</td><td>99만</td></tr>
  86.         <tr><td>2.5인치 샘송 외장하드 1테라. 좋은 자료 겁나 많음</td><td>12만원</td></tr>
  87.         <tr><td>거의 신품급 DSLR. 캐농 750d 듀얼 랜즈</td><td>75만원</td></tr>
  88.         <tr><td>애뿔 아이뽕6 가개통급. 한개 60만원, 두개 130만원</td><td>60만원</td></tr>
  89.         <tr><td>경희대 앞 넓고 깔끔한 원룸. 초역세권에 신축 풀옵션</td><td>500/50</td></tr>
  90.         <tr><td>스타 2. 자유의 날개 + 군단의 심장 합쳐서 떨이합니다.</td><td>30000</td></tr>
  91.     </table>
  92. </body>
  93. </html>


저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2017.02.16
[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기  (0) 2017.02.14
[JavaScript]DOM객체 및 mouseover mouseout 을 활용하여 동적 버튼 만들기  (0) 2017.02.09
[JavaScript][펌]유용한 Array 메소드들  (0) 2017.02.07
[JavaScript]자바스크립트로 간단한 계산기 만들기.  (0) 2017.02.07

Scenario: JAVA SCRIPT의 DOM 객체를 활용하여 mouse over, out에 따라 움직임는 그림을 표현하고자 하였으나, 

마우스를 올리면, H1의 텍스트나 모두 변했지만, 이상하게 그림만 변하지 않는 것이었다.  firstChild의 개념이 이해가 잘 가지 않았던 

나는, 삽질을 많이하다가, 답을 발견했다.


Solutions : 선생님 왈 "DOM객체를 이용할땐 항상 트리구조를 생각해야된다. 그러므로 띄어쓰기 없이 바로 붙여써줘야됨"


ex) 마우스 over out의 따라 동적으로 변하는 버튼 만들기. 예제 소스

HTML 5 1.10 KB
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DOM 객체</title>
  6. </head>
  7. <body>
  8.     <h1 id="title">마우스 아웃</h1>
  9.     <a onmouseover="mOver()" onmouseout="mOut()" href="#" id="btn"><img src="https://t1.daumcdn.net/cfile/tistory/227AF044589C1B6110"alt="버튼"/></a>
  10. //항상  트리구조를 생각해야된다. 그러므로 띄어쓰기 없이 바로 붙여써줘야됨
  11.     <p id="img_src"></p>
  12.    
  13. <script>
  14.     //<![CDATA[
  15.  
  16.     var theBtn = document.getElementById("btn");
  17.     var s = document.getElementById("img_src");
  18.  
  19.     //버튼위에 mouseover 되었을때
  20.     function mOver() {
  21.         title.innerHTML = "마우스 오버";
  22.         theBtn.firstChild.src = "https://t1.daumcdn.net/cfile/tistory/247FA346589C1B311E";
  23.         s.innerHTML = theBtn.firstChild.src;
  24.     }
  25.  
  26.     function mOut() {
  27.         title.innerHTML = "마우스 아웃";
  28.         theBtn.firstChild.src = "https://t1.daumcdn.net/cfile/tistory/227AF044589C1B6110";
  29.         s.innerHTML = theBtn.firstChild.src;
  30.  
  31.     }
  32.  
  33.     //버튼위에 mouseout 되었을때(default상태), 추가적으로 버튼주소 추가하여 출력하기
  34.  
  35.     //]]>
  36. </script>
  37. </body>
  38. </html>

ps.실행 결과 (링크로 들어가서 run을 눌러주면 됩니다.)



저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기  (0) 2017.02.14
[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14
[JavaScript][펌]유용한 Array 메소드들  (0) 2017.02.07
[JavaScript]자바스크립트로 간단한 계산기 만들기.  (0) 2017.02.07
[JavaScript]Form태그와 자바스크립트 함수 사용 시 반응 없음 문제관련  (1) 2017.02.07

Javascript Array 의 유용한 메소드들

http://jhjang.egloos.com/2369285

Java 의 Vector 클래스는 내부적으로 배열을 사용하고 있다. 따라서 Vector 의 자바스크립트 버전을 만들기 위해서는 Array 객체에 대한 빵빵한 지식이 필요하다 (없어도 된다. 그러나 있으면 매우 좋다). 자! 배열의 기초와 유용한 메쏘드들을 살펴보자.
배열의 생성

1. 생성자를 이용한 생성

- new Array(arrayLength)

ex) friends = new Array(3); // 크기가 3 인 배열 생성

- new Array(element0, element1, ... , elementN)

ex) friends = new Array("개똥이", "소똥이", "말똥이"); // 크기 3인 배열 생성(값이 채워짐)

2. 직접 생성

friends = ["개똥이", "소똥이", "말똥이"];

간접적인 배열 길이의 증가

배열의 길이는 현재 배열의 길이보다 큰 인덱스를 사용하면 자동으로 증가한다. 아래는 배열의 길이가 0 인 객체 생성 후 99번째 요소에 값을 할당하여 배열의 길이가 100 으로 증가한 예이다.

friends = new Array();

friends[99] = "새똥이";

메쏘드 종류

concat : 두개의 배열을 합쳐 새로운 배열을 리턴한다. 원본 배열은 변하지 않는다.

문법

arrayName.concat(arrayName2, arrayName3, ... , arrayNameN)

인자

arrayName2, ... , arrayNameN - 합쳐질 인자들

예제

두 배열을 합치는 예

alpha = new Array("a", "b", "c");

numeric = new Array(1, 2, 3);

alphaNumeric = alpha.concat(numeric); // ["a", "b", "c", 1, 2, 3] 배열 생성

join : 모든 요소가 구분자로 이어진 문자열을 리턴한다. 디폴트 구분자는 comma(,) 이다.

문법

arrayName.join(separator)

인자

separator 요소와 요소 사이에 사용될 구분자 문자열

예제

friends = new Array("소똥이", "개똥이", "말똥이");

strFriends1 = friends.join(); // 소똥이,개똥이,말똥이

strFriends2 = friends.join(", "); // 소똥이, 개똥이, 말똥이

strFriends3 = friends.join(" + "); // 소똥이 + 개똥이 + 말똥이

pop : 배열의 마지막 요소를 삭제한 후 그 값을 리턴하고 배열의 크기를 줄인다.

문법

arrayName.pop()

인자

없음

예제

// 말똥이가 pop 되고 배열에는 "개똥이", "소똥이"만 남는다.

// 배열크기도 2로 줄어든다.

friends = ["개똥이", "소똥이", "말똥이"];

popped = friends.pop(); // popped 에 말똥이가 할당된다.

push : 배열에 하나 또는 여러개의 값을 넣고 새로운 배열의 길이를 리턴한다.(배열길이 증가)

문법

arrayName.push(element1, element2, ... , elementN)

인자

element1, element2, ... , elementN - 추가될 요소들

예제

friends = ["개똥이", "소똥이"];

pushed = friends.push("말똥이", "새똥이"); // ["개똥이", "소똥이", "말똥이", "새똥이"]

alert(pushed); // 4

reverse : 배열 요소를 역순으로 재배치한다(첫번째 요소는 마지막으로, 마지막 요소는 처음으로).

문법

arrayName.reverse()

인자

없음

예제

myArray = new Array("1", "2", "3");

myArray.reverse(); // ["3", "2", "1"]

shift : 첫번째 요소를 삭제하고 배열의 길이를 하나 줄인 후, 삭제된 요소를 리턴한다.

문법

arrayName.shift()

인자

없음

예제

friends = ["개똥이", "소똥이", "말똥이"];

shifted = friends.shift(); // ["소똥이", "말똥이"]

alert("삭제된 요소는 " + shifted + " 입니다."); // 개똥이

slice : 얇게 썬 슬라이스 치즈가 생각난다(^^). 배열의 일부를 잘라내어 새로운 배열을 리턴한다.

문법

arrayName.slice(begin[,end]) : [] 은 선택사항임

인자

begin - 0보다 큰 시작 인덱스 (필수)

end - 0보다 큰 끝 인덱스 (선택). 지정되지 않으면 배열의 끝까지 복사된다.

예제

numbers = ["0", "1", "2", "3", "4"];

sliced1 = numbers.slice(2, 3); // ["2"]

sliced2 = numbers.slice(2); // ["2", "3", "4"]

sort : 배열의 요소를 정렬한다.

문법

arrayName.sort([compareFunction])

인자

compareFunction - 정렬방법을 지정한 함수.

생략시에는 요소들의 toString() 값을 사전순서(Dictionary order) 대로 정렬한다.

compareFunction(a, b) 에서

1) a > b : 0 보다 큰 값 리턴

2) a = b : 0 리턴

3) a < b : 0 보다 작은 값 리턴

예제

// 역행 정렬

function descComparator(a, b) {

return b - a;

}

// 순행 정렬

function ascComparator(a, b) {

return a - b;

}

numbers = ["0", "1", "2", "3", "4"];

numbers.sort(); // ["1", "2", "3", "4", "5"]

numbers.sort(ascComparator); // ["1", "2", "3", "4", "5"]

numbers.sort(descComparator); // ["4", "3", "2", "1", "0"]

splice : 이전 배열요소를 삭제하고 새로운 내용물을 추가하는 형태로 배열 내용을 변경한다. 삭제된 요소들은 리턴된다. Vector 와 유사한 기능을 하므로 숙지하자.

문법

arrayName.splice(index, howMany, [element1][, ..., elementN])

인자

index - 변경하고자 하는 요소의 시작 인덱스

howMany - 삭제하고자 하는 이전 배열요소 갯수.

element,...,elementN - 추가하고자 하는 배열 요소들

예제

// numbers[2]부터 2개("2", "3")를 삭제하고 그 자리에 "5"와 "6" 을 삽입한다.

numbers = ["0", "1", "2", "3", "4"];

spliced = numbers.splice(2, 2, "5", "6"); // ["0", "1", "5", "6", "4"]

alert(spliced); // "2", "3"

unshift : 하나 또는 여러개의 요소를 배열의 왼쪽에 추가한다. 배열길이는 증가한다.

문법

arrayName.unshift(element1,..., elementN)

인자

element1,...,elementN - 배열의 앞쪽에 들어갈 요소들

예제

numbers = ["0", "1", "2"];

numbers.unshift("-2", "-1"); // ["-2", "-1", "0", "1", "2"]

*by 라셍, 문제시 삭제하겠습니다.

저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14
[JavaScript]DOM객체 및 mouseover mouseout 을 활용하여 동적 버튼 만들기  (0) 2017.02.09
[JavaScript]자바스크립트로 간단한 계산기 만들기.  (0) 2017.02.07
[JavaScript]Form태그와 자바스크립트 함수 사용 시 반응 없음 문제관련  (1) 2017.02.07
[Web개발자되기][스크랩]사수가 없다는 분들에게  (0) 2017.01.18

+ Recent posts

티스토리툴바