한개씩 간단하게 속성을 바꿔가면서 작성한 예제를 보자.

1. <input type="text" name="" size="40" value="기본형식">
2. <input type="text" name="" size="40" value="Readonly (입력불가)" readonly>
3. <input type="text" name="" size="40" value="Disabled (작동불가)" disabled>
4. <input type="text" name="" size="40" value="입력폰트 설정" style="font-size:12pt; color:#ff0000; font-weight:bold;">
5. <input type="text" name="" size="40" value="테두리 0px 로 설정" style="border: 0px;">
6. <input type="text" name="" size="40" value="테두리 1px 로 설정" style="border: 1px solid #ff0000;">
7. <input type="text" name="" size="40" value="테두리 4개 각각 설정" style="border-right: #ff0000 1px solid; border-left: #00ff00 1px solid; border-top: #ffff00 1px solid; border-bottom: #0000ff 1px solid;">
8. <input type="text" name="" size="40" value="배경색 회색으로 설정" style="background-color: #e2e2e2;">
9. <input type="text" name="" size="40" value="입력값 오른쪽 정렬" style="text-align: right;">
10. <input type="text" name="" size="40" value="크기 강제 조정" style="height:30px;">
11. <input type="text" name="" size="40" value="패딩주기(상:5,우:0,하:0,좌:10)" style="padding:5px 0px 0px 10px;">

출처:http://egloos.zum.com/nis7/v/1988543

Node.js란…?

Node.js 공식 사이트에서 내린 Node.js의 정의
Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다.
V8 자바스크립트 엔진은 여기서 중요한 포인트가 아니므로 직접 찾아보길 바란다.

런타임에 대해 정리한 다른 블로그의 포스트를 빌려보자면 다음과 같다.

런타임이란 프로그래밍 언어가 구동되는 환경

예전에는 자바스크립트 런타임이 브라우저 밖에 존재하질 않았다.
하지만 그러한 한계를 극복하고 Node.js가 나왔다.

Javascript 실행 환경?

첫 번째로 Node.js는 REPL(Read, Eval, Print, Loop)을 통해서 런타임을 제공한다.

1. Read: 유저의 입력 값을 받아서 메모리에 저장
2. Eval: 입력 값의 평가, 실행
3. Print: Eval로 인해 반환된 값을 출력
4. Loop: 1~3을 반복.

이러한 REPL은 Babel REPL과 같이 웹에서 제공해주기도 하고,
Node.js에서 제공하는 REPL은 윈도우의 CMD, 맥의 터미널 등등에서 제공을 해준다.
터미널에서 node라고 입력을 하면 node repl이 실행된다.

두 번째로 따로 자바스크립트 파일을 Node.js에서 제공하는 자바스크립트 런타임을 통해 실행이 가능하다.
위와 같이 REPL에서 개발을 하면 간단한 테스트 정도면 몰라도 어플리케이션을 개발하는 데 적합하지 않다.
따라서 repl 보다는 따로 스크립트 파일을 만들어서 그 스크립트 파일을 node.js, V8이 해석 후 실행하는 형태로 작업을 많이 하게 된다.
아래 소스 코드를 node.js에서 돌리는 것은 위의 REPL에서 실행한 것과 동일하다.

1
2
3
4
5

// a.js
const a = 2;
a;
a + 4;
console.log(a);

그럼 왜 Node.js는 백엔드 영역이라는 오해가 생겼을까?

Node.js를 통해서 서버도 만들 수 있기 때문이다.

1
2
3
4
5
6

// server.js
const http = require('http');
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end("Hello World\n");
}).listen(8080);

node.js를 통해 실행한 server.js
node.js를 통해 구현한 서버

그럼 프론트 엔드 개발자는 언제 Node.js를 쓰는가?

매우 빈번하게 쓰이는데 그 중에서 대표적으로 ES2015+ 문법을 ES5 문법으로 트랜스파일 해주는 Babel을 예로 들어보겠다.
먼저 babel의 기본적인 요소들을 설치하겠다.

1

npm i -S babel-cli babel-preset-env

babel-cli, CLI이기 때문에 터미널 위에서 돌아간다는 점을 염두해두자.

그리고 간단한 바벨 설정 파일(.babelrc)을 만들어주자.

1
2
3

{
  "presets": ["env"]
}

그 다음에 package.json의 npm script 부분을 다음과 같이 추가해주면 된다.

1
2
3
4
5

{
  "scripts": {
    "babel": "babel"
  }
}

그리고 ES2015+의 간단한 파일을 하나 만들어보겠다.

1
2

// a.js
const a = 1;

터미널에서 babel-cli를 통해 해당 파일을 ES5로 트랜스파일 된 결과를 보자.
"use strict" 구문 부터가 실제로 트랜스파일 된 결과

이게 뭐가 Node.js를 통해 실행한 내용인지 확인해보자.
기본적으로 npm script는 node_modules 디렉토리 안의 .bin 디렉토리에 있는 디렉토리를 인식한다.
node_modules/.bin 디렉토리 안에 babel 파일이 존재한다.

그리고 그 내용은 다음과 같다.

1
2
3

#!/usr/bin/env node
require("../lib/babel");

#!/usr/bin/env node 요 구문으로 인해 node.js에서 cli를 만들 수 있게 해주는 것이라고 생각하면 된다.
그럼 직접 ../lib/babel을 찾아가보자.

node_modules/babel-cli/lib/babel 디렉토리가 존재한다.
Node.js에서 기본적으로 디렉토리 뒤에 따로 파일이 명시되지 않으면 index.js 파일을 찾아가는 규칙이 있다.
index.js 파일의 상단 부분을 보면 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#!/usr/bin/env node
"use strict";
var _keys = require("babel-runtime/core-js/object/keys");
var _keys2 = _interopRequireDefault(_keys);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var fs = require("fs");
var commander = require("commander");
var kebabCase = require("lodash/kebabCase");
var options = require("babel-core").options;
var util = require("babel-core").util;
var uniq = require("lodash/uniq");
var glob = require("glob");
// 이하 생략

소스 코드 첫 라인에 #!/usr/bin/env node을 보면 CLI임을 짐작할 수 있다.
그럼 다음과 같이도 실행을 해볼 수도 있다는 말이 된다.

npm script가 아닌 직접 파일로 접근해서 CLI를 실행

하지만 우리가 접근한 파일은 우리가 흔히 보고 있는 js 파일이다.
Node.js는 자바스크립트를 실행해줄 수 있는 환경인 런타임을 제공해주기 때문에 다음과 같이도 할 수 있다.
Node.js에서 바벨을 실행시킨 결과

즉, 바벨을 쓴다면, 프론트 엔드 개발자도 Node.js를 쓴다는 결론을 내릴 수가 있다.
바벨 뿐만 아니라 웹팩, 걸프, CRA, Vue-CLI 등등 npm으로 설치하는 모든 CLI는 Node.js를 이용한다고 보면 된다.
그리고 npm(Node Package Manger)을 쓴다는 것 자체가 Node.js를 이용한다고 보면 된다.

웹을 벗어난 Node.js

Node.js 공홈 about 페이지
Node.js는 확장성 있는 네트워크 애플리케이션을 위해 설계했다고 나온다.
네트워크 어플리케이션, 즉 서버, 서버를 위해서 설계된 플랫폼이다.
따라서 Node.js로 실제 구현하는 내용도 서버가 많다는 것에는 동의한다.
또한 많은 프론트 엔드 개발자들이 주로 노드를 이용하는 사례인
npm으로 의존성 모듈 관리, 바벨, 웹팩과 같은 CLI를 Node.js 위에서 구동하는 경우
이 경우에

나 노드 할 줄 안다

라고 누군가에게 어필하기에는 다소 무리가 있을 수가 있다.
왜냐면 노드로 서버를 구축하는 사례가 너무 많고, 이미 그런 오해가 정석처럼 받아들여지는 상황이라
필드에 나가서 노드 할 줄 안다고 했을 때

• 나 노드로 서버 만들 줄 안다.
• 나 노드로 의존성 모듈 관리하고 CLI를 Node.js 위에서 돌릴 줄 알아.
  둘 중에 누구의 말로 받아들이는 경우가 더 많을까…
  이런 고민을 하다보니 그럼 웹이 아닌 경우에는 무엇이 있을까 고민하게 됐다.

데스크탑 어플리케이션을 제작해주는 일렉트론(Electron)

Electron의 정의
맥, 윈도우 등등의 크로스 플랫폼 데스크탑 어플리케이션을 HTML, CSS, JS를 통해 만들 수 있다.
자세히 몰라서 아래의 사진으로 대체하겠다.
출처: http://blog.dramancompany.com/2015/12/electron%EC%9C%BC%EB%A1%9C-%EC%9B%B9-%EC%95%B1-%EB%A7%8C%EB%93%A4%EB%93%AF-%EB%8D%B0%EC%8A%A4%ED%81%AC%ED%86%B1-%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0/
슬랙과 atom, vs code가 일렉트론으로 만들어졌다 하니 믿을만 하다고 할 수 있을 것 같다.

결론

Node.js를 할 줄 안다고 하면 Node.js로 서버를 구성할 줄 안다라고 인식되는 것은 어느 정도 이해할 수 있다.
하지만 Node.js 그 자체를 백엔드 자체만의 기술, 웹 서버 자체만으로 받아들이고
프론트 엔드 개발자들은 Node.js를 쓸 줄 모른다는 그런 잘못된 지식으로 남들에게 더 이상 인식되지 않는 환경이 조성되길 바란다.
명심하자.
Node.js는 백엔드, 웹 서버가 아니라 자바스크립트 실행 환경에 불과하다

출처:https://blog.perfectacle.com/2017/06/18/what-is-node-js/

var thevalue = 'foo';
var exists = 0 != $('#select-box option[value='+thevalue+']').length;

옵션이 javascript 로 설정된다면 다음 방법을 사용한다

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});

#select-box 는 select tag 의 id 이다

출처: http://godwithus.tistory.com/246 [우물물아 넘쳐나라!]

[jQuery/jQuery UI] Datepicker > 시작일과 종료일 입력시 선택 가능 범위 제한하기

조건

:: 시작일은 종료일 이후 날짜를 선택 할 수 없으며, 종료일은 시작일 이전의 날짜를 선택 할수 없다.

<input type="text" />

위와 같은 input 개체가 있을 때,

글 쓰지 못하게 막는 방법 중, 대표적으로 readonly 와 disabled 가 있다.

이 둘 모두 input 타입의 속성이다.

따라서 다음과 같이 사용할 수 있다.


using html

using script

comment : 'readonly' , 'disabled' 둘다 사용자의 입력을 하지 못하게 막는 기능은 동일하지만,

form 안에서 사용하였을 경우,

'readonly' 는 form 전송이 가능하지만,

'disabled' 는 form 전송시 값이 전달되지 않는다.


유의하기 바란다.

출처: http://jwizard.tistory.com/35

# 개요

 수업시간에는 정규식에 대해 깊이 생각해본적이 없었는데, 요즘 정말 활용분야가 다양하다는 걸 느끼고 있다.

Javascript에서 정규식을 이용하여 문자열에서 숫자만 추출해보도록 하자.

# 소스

# 주절주절

 간단하게 해석해보자면 [^0-9] 즉, 숫자가 아닌 부분을 "" 공백으로 치환함으로써 숫자만 남기는 것.

 얼마나 편리한지 허허.

출처: http://cy-baek.tistory.com/131 [한 처음에]

jquery 확인 취소 , 삭제하시겠습니까?

- jsp 단에서 모든 체크박스를 선택할 체박스를 제목줄에 만들어 준다. 

그리고 세부 체크박스들은 forEach 를 통해서 생기게 된다. 

모두체크 function : allChk()

삭제 function :fn_userDel()

 form : userForm

 =====================================================================================================

<thead> 

<tr>
       <th scope="col"><input id="allCheck" type="checkbox" onclick="allChk(this);"/></th>
       <th scope="col">사용자ID</th>
       <th scope="col">사용자명</th>
       <th scope="col">부서명</th>
       <th scope="col">직급</th>
       <th scope="col">E-mail</th>
       <th scope="col">사용여부</th> 

</tr>

<tbody> 
      <c:forEach var="result" items="${requestMap.userList}" >
       <tr >
            <td class="text_ct"><input name="RowCheck" type="checkbox" value="${result.user_id}"/></td>
            <td class="text_ct"><a hrf="#">${result.user_id}</a></td>
            <td class="text_lt text_unline"><a hrf="#"> ${result.user_nm}&nbsp; </a></td>
            <td class="text_ct">${result.duty}&nbsp;</td>
            <td class="text_ct">${result.position_nm}&nbsp;</td>
            <td class="text_ct">${result.email}&nbsp;</td>
            <td class="text_ct">활성</td> 
       </tr>
      </c:forEach> 

</tbody>   

=======================================================================================================

<script type="text/javascript">

// 1.모두 체크
  function allChk(obj){
      var chkObj = document.getElementsByName("RowCheck");
      var rowCnt = chkObj.length - 1;
      var check = obj.checked;
      if (check) {
          for (var i=0; i<=rowCnt; i++){
           if(chkObj[i].type == "checkbox")
               chkObj[i].checked = true; 
          }
      } else {
          for (var i=0; i<=rowCnt; i++) {
           if(chkObj[i].type == "checkbox"){
               chkObj[i].checked = false; 
           }
          }
      }
  } 

//2. 체크박스 선택된 것 삭제 처리 (N개) 
   function fn_userDel(){

  var userid = "";
  var memberChk = document.getElementsByName("RowCheck");
  var chked = false;
  var indexid = false;
  for(i=0; i < memberChk.length; i++){
   if(memberChk[i].checked){
    if(indexid){
      userid = userid + '-';
    }
    userid = userid + memberChk[i].value;
    indexid = true;
   }
  }
  if(!indexid){
   alert("삭제할 사용자를 체크해 주세요");
   return;
  }
  document.userForm.delUserid.value = userid;       // 체크된 사용자 아이디를 '-'로 묶은 userid 를     

                                                                              document.userForm.delUserid 의 value로 저장 
  
  var agree=confirm("삭제 하시겠습니까?");
     if (agree){
   document.userForm.execute.value = "userDel";
     document.userForm.submit();
     } 
  }

</script> 

모두체크 하는 function은 그대로 이용이 가능하지만

선택 삭제 하는 function은 jsp form 이름을 바꿔줘야 한다.

그리고 RowCheck 의 value값은 해당 체크박스를 고유하게 식별할 수 있는 값이 들어가야 한다. (예를들어 사용자의 아이디값) 

 document.userForm.submit();   으로 submit을 하여 '-' 로 묶인 userid가  delUserid 이름으로 자바단으로 넘어가게 된다.

================== JAVA 단 ======================

public void userDel(Map requestMap) throws Exception {
  
  String delUser = requestMap.get(Management.DEL_USER).toString();
  System.out.println("Service ======= delUser>>" + delUser);
  
  String[] userArr = delUser.split("-");                     // '-'로 연결된 userid를 split으로 잘라 배열에 넣음.
  
     if(userArr != null && userArr.length>0){
       for(int i=0 ; i<userArr.length ; i++){ 
        requestMap.put(Parameter.USER_ID , userArr[i]);
        System.out.println("==============    "+i +"번째 userid ==  " + requestMap.get(Parameter.USER_ID));
        manageDao.userDel(requestMap);
       }
     }  
 }

jQuery checkbox 컨트롤

1. checkbox checked 여부 :

id인 경우 : $('input:checkbox[id="checkbox_id"]').is(":checked") == true

name인 경우 : $('input:checkbox[name="checkbox_name"]').is(":checked") ==  true

=>  $('input[id="checkbox_id"]') + 옵션 형태로 작성 해도 문제는 없다

Ex) $('input[name="checkbox_name"]').is(":checked")

2. checkbox 전체 갯수 : $('input:checkbox[name="checkbox_name"]').length

3. checkbox 선택된 갯수 : $('input:checkbox[name="checkbox_name"]:checked').length

* 2,3번은 name 인 경우에만 가능

4. checkbox 전체 순회 하며 처리(동일한 name으로 여래개인 경우 전체를 컨트롤 할 수 있다.)

 $('input:checkbox[name="checkbox_name"]').each(function() {

      this.checked = true; //checked 처리

      if(this.checked){//checked 처리된 항목의 값

            alert(this.value); 

      }

 });

5. checkbox 전체 순회 하며 값을 값을 비교하여 checked 처리

 $('input:checkbox[name="checkbox_name"]').each(function() {

     if(this.value == "비교값"){ //값 비교

            this.checked = true; //checked 처리

      }

 });

* 동일한 name 으로 1개 or 여러개 있을 경우에는 같은 name 으로 된 모든 checkbox 가 checked 처리된다.

6. checkbox value 값 가져오기 :  $('input:checkbox[id="checkbox_id"]').val(); //단일건

7. checkbox checked 처리 하기 : $('input:checkbox[id="checkbox_id"]').attr("checked", true); //단일건

8. checkbox checked 여부 간단 확인: $("#checkbox_id"]').is(":checked"); //단일건

=== Reference ===

* 만약 해당 id, name이 존재하지 않더라도 javascript 에러가 발생하지 않는다.

출처: https://openlife.tistory.com/381 [농사짓는 개발자]

jquery checkbox 접근 순회하기,

on change 사용하기