자기 개발하기

<a href="#" onClick="">

버튼

</a>

클릭시 상단으로 스크롤 업되는현상이있다

<a href="#a" onClick="">

버튼

</a>

이런식으로 "#" 뒤에 알파뱃을 붙이면된다.

onclick 2개 function 2개 넣기

<input type="button" onclick="javascript:fn1(); fn2();" value="test">

이런식으로 하시면 됩니다^^

jquery 자동 줄바꿈처리 replace

var yinfo =data ;

yinfo = yinfo.replace(/(?:\r\n|\r|\n)/g, "<br />");

$("#test").append(yinfo);

$("#test").text(yinfo);

하시면 됩니다.

jsp 글자 제한수 두기 input text

function numberMaxLength(e)

{

    if(e.maxLength < e.value.length)

   {

         alert("글자 제한 수를 넘었습니다");

           // 지정해놓음 최대 글자수로 줄임

         e.value = e.value.slice(0,e.maxLength);

     }

}

<input type="text" maxLength="35" oninput="numberMaxLength(this)" />

table 나란히 옆으로 출력하기

<table style="float:left;">

</table>

<table style="float:left;">

</table

하게되면

나란히 출력됩니다 한줄로

ㅁㅁ <<이런식으로 됩니다^^

1. 노드 찾기

 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")

2. 자식 노드 찾기 

 - 전체 자식 노드 찾기

    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()

    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근

    -- $("선택자").children().eq(N)

    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근

    -- $("선택자").children().first()

    -- $("선택자").children(":first")

    -- $("선택자").children().eq(0)

    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근

    -- $("선택자").children().last()

    -- $("선택자").children(":last")

3. 부모 노드 찾기

 - 바로 위의 부모 : $("선택자").parent()

 - 모든 부모 찾기

    -- $("선택자").parents()  모든 부모

 - 모든 부모 중 선택자에 해당하는 부모 찾기

    -- $("선택자").parents("선택자")

4. 형제 노드 찾기

 - 이전 형제 노드 찾기

    -- $("선택자").prev()

    -- $("선택자").prevAll("선택자");

 - 다음 형제 노드 찾기

    -- $("선택자").next()

    -- $("선택자").nextAll("선택자");

5. 노드 생성,추가,이동,삭제

 - 생성

    -- $("노드")

    -- $("선택자").html("<노드>...")

    -- $("노드").clone()

 - 추가

    -- $기준노드.append($추가노드)

    -- $추가노드.appendTo($기준노드)

    -- $기준노드.prepend($추가노드)  

    -- $추가노드.prependTo($기준노드)

    -- $추가노드.insertBefore($기준노드)

    -- $기준노드.before($추가노드)

    -- $추가노드.insertAfter($기준노드)

    -- $기준노드.after($추가노드)

 - 삭제

    -- $("선택자").remove()

 - 이동

    -- $기준노드.append($이동노드)  

    -- $이동노드.appendTo($기준노드)

    -- $이동노드.insertBefore($기준노드)

    -- $기준노드.before($이동노드)

    -- $이동노드.insertAfter($기준노드)   

    -- $기준노드.after($이동노드)

6. 텍스트 노드 다루기

 - 텍스트 노드 생성 : $("텍스트")

 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")

기본 CSS 셀렉터 사용하기

a - 모든 링크(<a>) 엘리먼트와 일치하는 셀렉터.

#exID - exID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터.

.exClass - exClass를 클래스로 가지는 엘리먼트와 일치하는 셀렉터.

a#exID.exClass - 아이디가 exID 이고, 클래스가 exClass인 링크와 일치하는 셀렉터.

p a.exClass - <p> 엘리먼트 내에 클래스가 exClass인 모든 링크와 일치하는 셀렉터.

아래 코드와 같이 쓰임

$("p a.exClass")

자식 셀렉터(child selector) : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분

예제) ul.myList > li > a

설명) myList 클래스를 지닌 <ul> 엘리먼트의 바로 아래 자식 리스트 앨리먼트인 <li>에서

바로 아래 자식 링크만 선택한다.

[ 어트리뷰트 셀렉터 ]

a[href^=http://] - href의 값이 http://로 시작하는 모든 링크를 의미. 캐럿문자(^)는 값의 시작 부분이 일치하는지를 뜻함

form[method] - 명시적으로 method 어트리뷰트를 가지는 <form> 엘리먼트

input[type=text] - type이 text인 모든 input 엘리먼트

div[title^=my] - title 어트리뷰트의 값이 my로 시작하는 모든 <div> 엘리먼트

a[href$=.pdf] - PDF 파일을 참조하는 모든 링크

a[href*=jquery.com] - jQuery 사이트를 참조하는 모든 <a> 엘리먼트. *는 어트리뷰트의 값이 임의의 문자열을 포함하는 엘리먼트를 찾아오라는 셀렉터.

li:has(a) - <a> 엘리먼트를 포함하는 모든 <li> 엘리먼트

li a - <li>엘리먼트 바로 아래 자식의 모든 <a> 엘리먼트

기본 CSS 셀렉터

* - 모든 엘리먼트와 일치

E - 태그명이 E인 모든 엘리먼트와 일치

E F - E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치

E>F - E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치

E+F - E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치

E~F - E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치

E:has(F) - 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치

E.C - 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함.

E#I - 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함.

E[A] - 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A=V] - 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A^=V] - 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A$=V] - 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A*=V] - 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

위치 셀렉터

a:first - 페이지에서 첫 번째 <a> 엘리먼트

p:odd - 모든 홀수 번째 문단 <p> 엘리먼트

p:even - 모든 짝수 번째 문단 <p> 엘리먼트

li:last-child - 부모 엘리먼트의 마지막 자식 엘리먼트

:first - 페이지에서 처음으로 일치하는 엘리먼트

:last - 페이지에서 마지막으로 일치하는 엘리먼트

:first-child - 첫 번째 자식 엘리먼트

:last-child - 마지막 자식 엘리먼트

:only-child - 형제가 없는 모든 엘리먼트를 반환한다

:nth-child(n) - n번째 자식 엘리먼트

:nth-child(even:odd) - 짝수 또는 홀수 자식 엘리먼트

:nth-child(Xn+Y) - 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능.

 li:nth-child(3n)은 3의 배수 번째 아이템을 반환

 li:nth-child(5n+1)은 5의 배수 + 1 번째 아이템을 반환

:even - 페이지 전체의 짝수 번째 엘리먼트

:odd - 페이지 전체의 홀수 번째 엘리먼트

:eq(n) - n번째로 일치하는 엘리먼트

:gt(n) - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.

:lt(n) - n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작.

jQuery 정의 셀렉터는 범용 프로그래밍 규약에 따라 인덱스를 0부터 시작.

정의 셀렉터

:animated - 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

:button - 모든 버튼을 선택 ( input[type=submit], input[type=reset], input[type=button], button )

:checkbox - 체크박스 엘리먼트만 선택

:checked - 선택된 체크박스나 라디오 버튼만 선택 (CSS에서 지원)

:contains(foo) - 텍스트 foo를 포함하는 엘리먼트만 선택

:disabled - 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 (CSS에서 지원)

:enabled - 인터페이스에서 활성화 상태인 모든 엘리먼트를 선택 (CSS에서 지원)

:file - 모든 파일 엘리먼트를 선택 ( input[type=file] )

:header - 헤더 엘리먼트만 선택 <h1>부터 <h6>까지 선택

:hidden - 감춰진 엘리먼트만 선택

:image - 폼 이미지를 선택 ( input[type=image] )

:input - 폼 엘리먼트만 선택 ( input, select, textarea, button )

:not(filter) - 필터의 값을 반대로 변경 ( 1.3 버전에서는 변경됨 )

:parent - 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택

:password - 패스워드 엘리먼트만 선택 ( input[type=password] )

:radio - 라디오 버튼 엘리먼트만 선택 ( input[type=radio] )

:reset - 리셋 버튼 선택 ( input[type=reset] 이나 button[type=reset] )

:selected - 선택된 엘리먼트만 선택

:submit - 전송 버튼을 선택 ( button[type=submit] 이나 input[type=submit] )

:text - 텍스트 엘리먼트만 선택 ( input[type=text] )

:visible - 보이는 엘리먼트만 선택

:checkbox:checked:enabled - 활성화되고 선택된 체크박스만 선택

:not 필터

- 필터 결과가 반대로 나오게 함.

- CSS 필터에서 지원

- jQuery 정의 셀렉터에서도 동작

- 필터 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못한다.

- 모두 콜론 문자(:)나 대괄호 문자([)로 시작.

input:not(:checkbox) - 체크박스가 아닌 <input> 엘리먼트 선택

필터 셀렉터 - 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다.

찾기 셀렉터 - 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다. [ 자손 셀렉터(공백문자), 자식 셀렉터(>), 형제 셀렉터(+) ]가 있다.

커맨드 문법

size() - 확장 집합의 엘리먼트 개수를 반환

예제) $('a').size()

설명) 모든 <a> 타입의 엘리먼트의 개수를 반환

get(index) - 확장된 집합에서 하나 또는 모든 일치하는 엘리먼트를 가져온다. 매개변수가 명시되지 않았다면 모든 엘리먼트를 자바스크립트 배열로 반환

예제) $('img[alt]').get(0)

index(element) - 확장 집합에서 전달된 엘리먼트를 찾고, 집합에서 찾은 엘리먼트의 인덱스를 반환. 집합에 해당 엘리먼트가 존재하지 않으면 -1을 반환

예제) var n = $('img').index($('img#findMe')[0]);

add(expression) - expression 매개변수로 명시한 엘리먼트를 확장 집합에 추가한다. 표현식에는 셀렉터, HTML, 코드, DOM 엘리먼트, DOM 엘리먼트 배열이 올 수 있다.

예제1) $('img[alt]').add('img[title]')

예제2) $('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')

설명2) alt 어트리뷰트를 가진 모든 <img>엘리먼트의 확장 집합을 생성한 뒤 두꺼운 테두리를 만드는 클래스를 적용. title 어트리 뷰트를 가진 <img> 엘리먼트를 추가하고, 마지막으로 투명도를 주는 클래스를 적용.

not(expression) - expression 매개변수의 값에 따라서 일치하는 집합에서 엘리먼트를 제거.

예제) $('img[title]').not('[title*=puppy]')

설명) title 어트리뷰트를 지닌 모든 <img> 엘리먼트를 선택할 때, title 어트리뷰트 값이 puppy를 포함하는 엘리먼트를 제외.

filter(expression) - 전달 받은 셀렉터 표현식이나 필터링 함수를 이용해서 확장 집합에서 엘리먼트를 필터링.

예제) $('td').filter(function(){return this.innerHTML.match(/^\d+$/)})

설명) 모든 <td> 엘리먼트로 구성된 확장 집합을 생성한 다음 엘리먼트 각각에 대해 filter() 메서드에 전달된 함수를 호출.

호출된 함수를 this값으로 현재 순회 중인 엘리먼트를 이용.

전달된 함수는 정규 표현식을 사용하여 숫자로 내용이 구성된 패턴을 만족하는지 검사.

필터 함수를 호출한 결과로 false를 반환하는 엘리먼트가 모두 확장 집합에서 제거

slice(begin, end) - 일치하는 집합에서 연속하는 일부분을 포함하는 새로운 확장 집합을 생성하고 반환

- begin : 반환되는 부분 집합에 포함될 첫 엘리먼트의 위치로, 0부터 시작

- end : 반환되는 부분 집합에 포함될 마지막 엘리먼트의 바로 다음 위치로, 0부터 시작하며, 생략하면 집합의 마지막까지 포함한다.

예제1) $('*').slice(2,3);

설명1) 페이지에 있는 모든 엘리먼트를 선택한 다음 세 번째 엘리먼트를 담은 새로운 집합을 생성

예제2) $('*').slice(0,4);

설명2) 페이지에 있는 모든 엘리먼트를 선택한 다음 처음 네 개의 엘리먼트를 포함한 집합을 생성

예제3) $('*').slice(4);

설명4) 페이지의 모든 엘리먼트와 일치한 다음 처음 네 엘리먼트를 제외한 모든 엘리먼트의 집합을 반환

  < 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드 >

  children() - 확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환

  contents() - 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환. 텍스트 노드도 포함되며 주로 <iframe> 엘리먼트의 콘텐츠를 얻고자 사용

  next() - 확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환

  nextAll() - 확장 집합 내의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환

  parent() - 확장 집합 내에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환

  parents() - 모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환. 바로 위 부모와 상위의 모든 조상이 포함되지만 문서 루트(document root)는 포함되지 않는다.

  prev() - 확장 집합 내의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환

  prevAll() - 확장 집합 내의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환

  siblings() - 확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환

find(selector) - 원본의 모든 엘리먼트 중 전달된 셀렉터 표현식과 일치하는 엘리먼트로 구성된 새로운 확장 집합을 반환

예제) wrappedSet.find('p cite')

설명) 변수 wrappedSet에 할당된 확장 집합에서, 문단 <p>에 포함된 모든 인용문 <cite>로 구성된 확장 집합을 반환

is(selector) - 확장 집합에 전달된 셀렉터 표현식과 일치하는 엘리먼트가 있는지 확인. 엘리먼트가 하나 이상 셀렉터와 일치하면 true를, 그렇지 않으면 false를 반환

예제) var hasImage = $('*').is('img');

설명) 현제 페이지에 이미지 엘리먼트가 있으면 hasImage 변수의 값을 true로 설정

end() - jQuery 커맨드 체인에서 사용하며 이전 확장 집합으로 돌아간다.

예제) $('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

설명) 페이지의 모든 <img> 엘리먼트로 구성된 원본 확장 집합을 close() 메서드를 통해 복사본 확장 집합을 생성한 뒤, 복사본인 두 번째 확장 집합을 반환한다. 복사본 확장 집합에 appendTo() 커맨드를 수행한 뒤, end() 커맨드를 통해 현재 확장 집합(복사본 확장 집합)에서 앞으로 돌아가서 이전 확장 집합(원본 확장 집합)을 반환하고, 원본 확장 집합에 addClass() 커맨드를 수행한다.

andSelf() - 커맨드 체인에서 이전 확장 집합 두 개를 하나로 합친다

출처: https://crosstheline.tistory.com/41 [이거 알아영???ㅎㅎㅎ]

- 소 스 -

<HEAD>
<TITLE> 링크에 밑줄 없애기 </TITLE>

출처: http://it77.tistory.com/126 [시원한물냉의 사람사는 이야기]

평소에는 링크 텍스트에 밑줄을 넣지 않다가, 마우스가 그 위를 지나갈 때(호버)에만 밑줄(언더라인)을 넣는 방법입니다. 링크에 항상 밑줄이 있는 것이 기본값이지만, 그러면 가독성이 떨어지기에, 마우스가 지날 때에만 밑줄을 넣는 방법이 많이 사용됩니다.

또한, 마우스를 가져가면, 링크 텍스트를 빨간색으로 변경시켜 알아보기 쉽게 하는 법도 있습니다.

a:link 는 보통 때의 링크 텍스트의 스타일이고

a:visited 는 이미 방문한 적이 있는 링크의 스타일이고

a:hover 는 마우스가 링크 위를 스쳐 지날 때의 색깔이고

a:active 는 좀 모호한데, 링크를 완전히 클릭하지 않고, 마우스로 선택만 해 둔 상태의 스타일입니다.

마우스 호버 때에만, 링크에 언더라인, 색상 변경 예제

파일명: example.html

출처:http://mwultong.blogspot.com/2007/02/html-css-mouse-hover-underline.html

한 서버에서 여러 웹 서비스를 운용해야 하는 경우가 있습니다.

단순히 도메인이 여러개라서 한 도메인으로 사용자를 전달한다거나, 사용자 페이지와 백 오피스를 함께 운용할 수도 있지요.

이런 경우 Apache나 Nginx를 이용한다면 설정 파일을 이용해서 VirtualHost를 활용하곤 합니다.

만약 모든 서비스가 Node.js로 운용되고 있다면 굳이 Apache나 Nginx를 찾지 않고도 VirtualHost를 사용할 수 있습니다.

사전 준비: hosts 파일 편집

hosts 파일은 로컬에 보관하는 일종의 전화번호부입니다.

DNS 동작에서의 hosts 파일 역할에 대한 자세한 설명은 다음 링크에서 확인하실 수 있습니다: hosts 파일 - 생활코딩

hosts 파일은 아래 위치에서 찾을 수 있습니다.

- Windows: %SystemRoot%\system32\drivers\etc\hosts

(예. Windows가 C드라이브에 설치된 경우는 C:\windows\system32\drivers\etc\hosts)

- *nix: /etc/hosts

hosts 파일 하단에 아래 3줄을 추가하고 저장합니다. 이 때 관리자 권한이 필요할 수 있습니다.

아래 세 줄은 오른쪽의 도메인을 왼쪽의 IP, 즉 현재 PC, 다시 말하자면 localhost로 연결한다는 의미입니다

아래는 터미널을 이용해서 hosts 파일을 편집하는 예시입니다.

1. vim, nano 등의 에디터로 hosts 파일을 엽니다.

2. 하단에 앞서 기록된 3줄을 입력합니다.

사전 준비: 의존성

1. 아래 명령어를 입력하여 필요한 패키지를 설치합니다.

- npm i --save express vhost

실습

1. 이전 예제들을 활용할 수 있도록 일부 변경합니다.

- 이전 예제들은 모두 3000 포트를 이용하도록 지정되어 있었습니다. 지정된 포트를 다른 포트로 변경하거나, 서버 실행 코드를 삭제합니다.

- 이전 예제들의 app.js 파일 하단에 아래 코드를 추가하여 모듈로 내보냅니다.

- module.export = app;

2. Sample Code: 아래 코드를 app.js로 저장합니다.

app.js:9: e2j.jetalab.internal로 접속한 경우 excel-to-json app을 연결합니다.

app.js:10: mail.jetalab.internal로 접속한 경우 mailer app을 연결합니다.

app.js:12: 이외의 요청인 경우 static 폴더의 정적 파일을 서비스합니다.

app.js:14~16: 어떤 서비스로도 처리되지 않는 경우 'Page Not Found!' 메시지를 전송합니다.

3. 터미널에서 아래 명령어를 입력하면 서버가 실행됩니다.

- node.app.js

3. 터미널에서 아래 명령어를 입력하면 서버가 실행됩니다.

excel-to-json과 mailer 서버가 실행된 것을 볼 수 있습니다.

4. http://e2j.jetalab.internal:3000 도메인으로 접속하면 excel-to-json 화면이 표시됩니다.

5. 마찬가지로 http://mail.jetalab.internal:3000 도메인으로 접속하면 메일 발송 화면이 표시됩니다.

6. http://jetalab.internal:3000 으로 접속한 경우 static 디렉토리 내부의 정적 파일을 서비스 합니다.

/static/index.html 파일을 추가하고 접속한 화면입니다.

GitHub

본 강의에 사용한 코드는 GitHub에 공개되어 있습니다.

https://github.com/jETA-Kor/examples

참고 문서

- hosts 파일 - 생활코딩: https://opentutorials.org/course/228/1457

- vhost - npm: https://www.npmjs.com/package/vhost

출처: https://jetalog.net/73?category=741674 [jetalog.net]

Express.js 서버로 업로드 한 Excel 파일을 JSON 형식으로 변환하기

재무제표, 수익률 데이터, 용돈 데이터 등등...

종종 Excel로 기록된 데이터를 Node.js에서 다뤄야 할 경우가 있습니다.

Express.js로 구현된 웹 페이지에 사용자가 엑셀 파일을 업로드하면, 해당 파일을 읽어들여 json 형식으로 돌려주는 예제를 공유합니다.

사전 준비

1. Dependencies: 아래 명령어를 이용해 필요한 패키지를 설치합니다.

- multiparty: multipart/form-data 형식으로 전송된 파일을 좀 더 편리하게 다룰 수 있도록 도와줍니다.

- xlsx: Excel 파일을 다룰 수 있도록 도와줍니다.

실습

1. Sample Code: 아래 코드를 app.js로 저장합니다.

app.js:30: multiparty를 이용해 Form 데이터를 처리합니다. 이 때, autoFiles를 true로 지정하면 POST 방식으로 전달된 파일만 처리하도록 할 수 있습니다.

app.js:35: xlsx를 이용해 전달된 파일을 객체로 변환합니다. 이 객체에는 파일 정보, 테마, 시트별 데이터 등 다양한 정보가 담겨있습니다.

app.js:40~43: 시트별 내용을 결과 객체에 담습니다. 이 때 42행에 있는 xlsx.utils.sheet_to_json()이 시트의 내용을 JSON 객체로 변환하는 작업을 수행합니다.

2. 터미널에서 아래 명령어를 입력하면 서버가 실행됩니다.

3. 테스트 할 엑셀 파일을 생성합니다.

4. 실행된 서버에 접속하면 File을 업로드 할 수 있는 페이지가 표시됩니다.

5. 테스트 파일을 선택하고 업로드하면 JSON 변환 결과가 표시됩니다.

6. 테스트 파일과 비교해보면 올바르게 파싱된 것을 확인할 수 있습니다.

GitHub

본 강의에 사용한 코드는 GitHub에 공개되어 있습니다.

https://github.com/jETA-Kor/examples

참고 문서

node.js에서 multipary와 multer를 이용한 파일 업로드 하기: http://bcho.tistory.com/1078

npm - multiparty: https://www.npmjs.com/package/multiparty

npm - xlsx: https://www.npmjs.com/package/xlsx

출처: https://jetalog.net/58?category=741674 [jetalog.net]