NodeJS소개

2009년에 Ryan Dahl에 의해 개발되었습니다.

Node.js® 는 구글 크롬의 자바스크립트 엔진 (V8 Engine) 에 기반해 만들어진 JavaScript 런타임 서버 사이드 플랫폼입니다.

Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리이기도 합니다.

블로킹과 논블로킹 살펴보기

이 글에서는 Node.js에서 블로킹과 논블로킹 호출의 차이점을 다룹니다. 이벤트 루프와 libuv를 참조할 것이지만 사전 지식이 필요하지는 않습니다. 이 글을 읽는 사람은 JavaScript 언어와 Node.js 호출 패턴에 관해 기본적인 이해가 있다고 가정합니다.

"I/O"는 주로 libuv가 지원하는 시스템 디스크나 네트워크와 상호작용하는 것을 가리킵니다.

블로킹

블로킹은 Node.js 프로세스에서 추가적인 JavaScript의 실행을 위해 JavaScript가 아닌 작업이 완료될 때까지 기다려야만 하는 상황입니다. 이는 이벤트 루프가 블로킹 작업을 하는 동안 JavaScript 실행을 계속할 수 없기 때문입니다.

Node.js에서, I/O 등의 JavaScript가 아닌 작업을 기다리는 것보다 CPU 집약적인 작업 때문에 나쁜 성능을 보여주는 JavaScript는 보통 블로킹이라고 부르지 않습니다. libuv를 사용하는 Node.js 표준 라이브러리의 동기 메서드가 가장 대표적인 블로킹 작업입니다. 네이티브 모듈도 블로킹 메서드를 가질 수 있습니다.

Node.js 표준 라이브러리의 모든 I/O 메서드는 논블로킹인 비동기 방식을 제공하고 콜백 함수를 받습니다. 일부 메서드는 같은 작업을 하는 블로킹 메서드도 가지는데 이는 이름 마지막에 Sync가 붙습니다.

블로킹 메서드는 동기로 실행되고 논블로킹 메서드는 비동기로 실행됩니다.

(출처: https://nodejs.org/ko/)

IE9 부터 지원한다고는 하지만 IE11은 되야 제대로 지원이 되는것 같다.

vue cli : https://cli.vuejs.org/

크롬 확장프로그램 URL : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

웹 접근성을 보장하고 검증하는 데 있어 가장 좋은 방법은 장애 환경을 스스로 체험해보는 것입니다.
시각 장애인이 어떤 부분에서 어떤 문제가 발생하는지 정확하게 알기 위해서는 스크린리더로 꼭 테스트 해 볼 것을 권장합니다.
하지만 막상 테스트를 하려고하면 설치부터 웹 페이지 탐색까지의 과정이 쉽지가 않습니다.
국내 시각 장애인이 가장 많이 사용하고 있는 센스리더를 기준으로 웹 개발자들에게 필요한 내용을 공유해봅니다.

설치 및 실행

1. 엑스비전테크놀로지 자료실에서 센스리더 최신 버전을 다운 받으세요.
   라이센스가 없는 경우 데모 상태로 30분간 사용이 가능하지만 테스트에 제약이 있을 수 있으니 라이센스 구매를 권장합니다.
   센스리더 최신버전 다운받으러 가기

   

2. 다운받은 파일을 압축 해제한 뒤, setup.exe를 실행합니다.
3. 안내에 따라 설치를 진행하세요. 설치 완료 후 윈도우가 다시 시작됩니다.
4. 헤드폰 모양(

   

   )의 아이콘을 클릭하거나 Ctrl + Alt + S를 눌러 센스리더를 실행합니다.

기본 환경 설정하기

음성 조절

아무런 설정을 하지 않으면 센스리더의 음성이 매우 빠르게 출력되어 인식이 어렵습니다. 초보 사용자도 쉽게 콘텐츠를 인식할 수 있도록 음성 출력 속도를 조정합니다.

1. 시스템트레이(또는 작업표시줄)에서 헤드폰 모양(

   

   )의 아이콘을 클릭하여 센스리더 메뉴를 활성시킵니다.
   

   

     
2. 센스리더 메뉴에서 [파일] → [환경 열기]를 선택합니다.
   

   

     
3. 환경 열기 창이 뜨면 환경 이름에 XVSRD를 입력한 후, "확인"을 선택합니다.
   

   

     
4. 센스리더 메뉴 창의 상태 표시줄에 환경 값이 XVSRD인지 확인합니다.
   환경 값이 다를 경우, 환경 열기부터 다시 수행하고 환경 값이 같다면 [음성 설정] → [음성 출력]을 선택합니다.
   

   

    
5. 음성 출력 설정 창에서 속도/높이/크기를 알맞게 조정한 뒤 "확인"을 선택합니다.
   

   

    
6. 센스리더 메뉴에서 [파일] → [환경 저장]을 선택한 뒤 기본 환경 저장 확인창이 나타나면 "예"를 선택합니다.
   

   

    

시작프로그램 등록/해제

다음으로는 윈도우 시작 시 센스리더가 항상 실행되는 것을 원치 않을 때 필요한 설정입니다.

1. 시스템트레이(또는 작업표시줄)에서 헤드폰 모양(

   

   )의 아이콘을 클릭하여 센스리더 메뉴를 활성시킵니다.
2. 센스리더 메뉴에서 [파일] → [시작 프로그램 등록]을 선택합니다.
   

   

    
3. 시작 프로그램 설정 창이 뜨면 시작 안함 옵션을 선택 한 후 "확인"을 누릅니다.
   

   

    

가상커서 설정

가상커서는 웹 페이지를 문서 편집기처럼 탐색할 수 있도록 재구성하여 상/하/좌/우 방향키 등으로 이동할 때 갖게 되는 포인터 위치를 말합니다. 가상 커서 설정에 따라 음성 출력 결과가 매우 다르기 때문에 시각 장애인들의 기본 설정을 참고하는 것이 좋습니다. 가상커서는 로그인 상태에서만 진행할 수 있습니다.

1. 센스리더에서 사용 가능한 브라우저인 인터넷 익스플로러를 실행합니다. 
2. 인터넷 익스플로러가 활성된 상태에서 Shift + Ctrl + F9를 눌러 가상 커서 설정을 실행합니다.
3. 아래 제시된 표와 같이 가상 커서를 설정합니다. 방향키로 항목 간 이동이 가능하고 스페이스 바로 설정 값을 변경할 수 있습니다.

웹 개발자를 위한 가상 커서 설정설정 항목설정 값설명

키보드 명령어

센스리더는 효율적인 웹 탐색을 위해 상/하/좌/우 방향키 외에도 다양한 키보드 명령을 제공하고 있습니다. 아래는 접근성 테스트에 유용하게 사용되는 센스리더의 주요 키보드 명령어 목록입니다.

프로그램 실행/종료 키설명입력 키

웹 페이지 기본 탐색 키설명입력 키

요소별 탐색 키설명입력 키

테이블 모드 탐색 키설명입력 키

폼 모드 탐색 키설명입력 키

출처

• https://nuli.navercorp.com/sharing/blog/post/1081603

• Heappa World백남중, "센스리더 1.2.0.3 핫키 일람표"

증상  

- SVN 에러 E155004, E200030 등등

원인 

- SVN 사용시 가끔 lock이 걸리거나 위 그림과 같이 꼬이는 경우가 발생한다.

해결

1-1. 프로젝트 우클릭 > team > cleanup 실행

1-2. cleanup  성공시 다시 업데이트, 실패시 아무런 반응없음

2-1. 해당프로젝트 폴더에보면 숨김폴더로 .svn 폴더가 있다 

2-2. 해당 폴더내에 locked 파일이 존재하면 삭제 후 다시 업데이트

3-1. sqlite 클라이언트 다운로드

- http://sqlitebrowser.org/ : 다운로드 속도가 안될 경우 아래 주소에서 다운로드

- https://sourceforge.net/projects/sqlitedbrowser/ : 위 주소보다 버전은 낮지만 작업하는데 문제는 없다.

3-2.내려 받은 후, 압축을 푸시면 sqlite3.exe 파일이 하나 있습니다. 

이 파일을 문제가 발생한 프로젝트의 .svn 폴더에 복사합니다. (프로젝트의 하위 폴더에 있습니다.)

그리고 윈도우 커맨드창(Command Window)을 실행하여 해당 경로로 이동한 후, 아래 명령어 2개를 순차적으로 

실행합니다.

3-3 윈도우 커맨드창이 안된다면 직접 sqLite를 실행하여 Open Database를 눌러 오류가 발생했던 파일이 속해 있는 

폴더 내에 .svn 폴더에 wc.db 파일을 open 한 후 아래 명령어를 실행합니다.

1.  CSS 선택

$("div").css("border","9px solid red");

2. RADIO 객체

$(':input:radio[name^='+id+']:checked').val()

3. CHECKBOX 객체

예제1) 전체 체크박스 선택 / 해제

 jQuery(document).ready(function(){
  $("#allCategory").bind("click",function(){
   var flag= $(this).attr('checked');
   if($("#allCategory").is(":checked")){
     $("input[name^='categoryName2']").attr('checked',true);
   }else{
    $("input[name^='categoryName2']").attr('checked',false);
   }
  });
});

예제2) 체크박스 체크 확인

if(!$("input:checkbox[id='agree']").is(":checked")){

alert("개인정보 동의에 확인해 주세요");

$("#agree").focus();

return false;

}

4. selecte객체

$("select[id=a]") or $("select[name=a]")

 5. 상위 객체 찾아가기

예제)

<dl>

<dt>퀴즈1<dt>

<dd>

<ul>

<li><input id="abc"></li>

</ul>

<dd>

<dl>

설명: abc객체의 가장가까운 dd를 찾아서 이전의 dt 엘리먼트의 택스트(퀴즈1)을 가져온다.

var title = $(':input:radio[name^='+id+']').closest('dd').prev('dt').text();

특정 id안에 있는  3번째  TD 에 span테그 추가 하기

$("#a0").find("td:eq(2)").html("<span>"+newEmartCode+"</span>");

<tr id="a0">

 <td></td>

 <td></td>

 <td><span></span></td>

</tr>

<tr id="a1">

<td></td>

<td></td>

<td></td>

</tr>

라벨 텍스트 가져오기

$(document).ready(function(){

$("input[name^=chk]").click(function(){

alert($('label[for='+this.id+']').text());

});

indexedDB 란 web페이지에 내자 DB를 저장 시킬 수 있는 라이브러리임

참고사이트 정리

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

참고

• Chrome은 생성된 JavaScript 코드를 파싱하는 데 많은 양의 메모리를 필요로 할 수 있으므로, 32 비트 브라우저에서 콘텐츠를 로드할 때 메모리 부족 오류 또는 크래시가 발생할 수 있습니다. 메모리 사용에 대한 자세한 내용은 메모리 고려사항을 참조하십시오.