vs 프로젝트에 패키지 사용하는것을 설정하고 command로 복원 하는 방법은 아래와 같다.
https://www.nuget.org/downloads
위 사이트에서 nuget.exe를 다운 받는다.. (버전은 상관없다.. 최신버전 받자)
nuget.exe restore 솔수션파일명.sln |
을 command에서 실행 한다.
참고로 최신 버전 받으면 최신 vs로 세팅 하게 된다.
restore 옵션 설명은 아래 링크에서 확인 할것
https://docs.microsoft.com/ko-kr/nuget/tools/cli-ref-restore
command로 할떄 msbuild을 설치하고 사용 하는데 과거버전을 사용할꺼면 아래와 같이 세팅 하자
-MSBuildVersion 12 |
뒤에 숫자는 vs 버전 이야기고 12버전은 vs 2013버전을 이야기 한다.
그리고 버전 별로 저장소(?)가 다를수 있다
vs 2013은 https://www.nuget.org/api/v2/ 에서 받아온다
(이것의 확인은 vs 옵션에 nuget 매니저 부분을 체크 하면 된다.
그래서 최신 nuget.exe에 세팅된 값과 다를수 있으니 저장소(?) 설정은 아래와 같이 한다.
-Source https://www.nuget.org/api/v2/ |
정상적으로 다 받아진다면 에러 없이 잘 받아질것이다.
예시 vs2013 솔루션 파일에서 nuget 패키지를 복원 한다면... 아래와 같다
nuget.exe restore 솔루션파일.sln -MSBuildVersion 12 -Source https://www.nuget.org/api/v2/ |
------------------------------------------------------------------------------------------------
전역으로 패키지를 받는 방법이 있을꺼 같은데.. 뭔지 모르겠다 나중에 찾으면 내용 업데이트 하겠다
http://supercoding.tistory.com/3에 나와있는 내용을 초금 수정 한 버전..
node.js에서 아래와 같은 값을 render로 보낸다 치면
문자열의 표시인 작은 따옴표가 없어지는 경우가 발생함..
이는 html을 컨트롤 하는데는 좋은데..
html 안에 client javascripte 안에 변수로 던저 줄때는 문제가 된다..
따옴표가 없으니 제대로 인식이 안되는
그래서 수동으로 따옴표 붙이는 작업도 해봤는데 뭔가 좀 거시기해서 구글링 해서 찾으니
json 인코딩을 이용한 처리가 있었음
- node.js 의 스크립트 파일
- handlebars의 html 처리
참고로 html 파일에 값은 따옴표 꼭 붙쳐줘야 제대로 인코딩 됨
node.js express에서 template engine 으로 handlebars를 사용하기로 하면서 몇가지 알게 된것을 정리 해본다.
template engine 중에 그나마 html 태그를 그대로 쓰는것중에 ejs 하고 handlebars가 있었다. 사람들이 가장 많이 이야기 하게 handlebars 라서 사용 하였는데 대쉬보드 형태의 페이지를 만든다면 layout 기능이 지원하는 handlebars 가 편한거 같다. ejs도 확장 기능으로 layout 지원하는거 같은데 아직은 뭔가 한참 만들고 있는느낌이라 패스..
#if #unless 로는 true / false 밖에 사용이 안된다. 그래서 따로 helper를 이용해서 조건문 연산자를 만들어 사용 하는거 같다. 아래 주소는 사용 방법이니 참고를...
[Javascript] handlebars.js {{#if}} 조건부의 논리 연산자
안에 페이지 보면 Handlebars.registerHelper() 요렇게 되어있는데 메인페이지에 선언해 뒤면 되고 앞에 Handlebars 는 var Handlebars = require('hbs') 해서 가지고 오면 된다.
{
main : { name: '나 메인'},
sub : { name: '나 서브'}
}
이런 값을 넘겨서
아래와 같이 템플릿으로 사용 할경우
{{#main}}
{{name}} <- 이것은 main의 값
// 여기서 sun 의 name 값을 가지고 올려면
{{../sub/name}} <- 요렇게 해야 sub의 name값을 가지고옴
{{/main}}
처음에는 ../이거 없이 했는데 값이 undefined 해서 나와서 환장 했음..
이 사이트가 아니였음 눙물 흘리고 계속 삽질 할뻔 했음.. https://taegon.kim/archives/4910
올려주신분에게 감사의 마음을...
node.js에서 async 를 쓰는 이유는 콜백사용으로 인해 중첩되는 함수들을 줄이기 위해서 라고 알고 있는데....
그중에서 가장 많이 쓰는게 waterfall 을 많이 쓰는거 같아 일단 정리 해본다.
waterfall<T, E>(tasks: Function[], callback?: AsyncResultCallback<T, E | Error>): void; |
함수 구조는 위와 같이 되어있다.
tasks는 대괄호 안에 순서대로 처리할 function을 넣어야 하고
AsyncResultCallback 위에 task function에서 에러가 나거나 마지막 함수를 처리 할때
들어오는 함수로 보면 될꺼 같다.
tasks에 선언하는 function의 인자값은 callback을 사용 하며 이것을 이용하여 다음 function으로 이동 하거나 에러를 보내서 AsyncResultCallback함수에 에러 값을 보내기도 한다.
callback을 함수로 사용 하면 첫번째 인자는 error 값을 보내게 되어있고 두번째 인자 부터는 다음 task에 전달할려고 하는 값을 넣을 수 있다.
일단 waterfall을 왜 써야하는지를 간단하게 보기 위해 아래와 같은 샘플 코드를 작성 해보았다
코드를 간단하게 설명하면 test.txt 파일을 읽어서 test_async.txt 파일로 쓰기를 하는 코드이다.
일단 test.txt 파일을 읽고 callback으로 파일을 제대로 읽었는지 확인후에
test_async.txt 파일을 쓰기를 하고 그 결과를 callback 으로 확인 하는 로직이다.
콜백 중첩이 2단계 정도라 보기 편하지만 점점 중첩 단계가 많아진다면 보기가 힘들어질것이다
그래서 async의 waterfall 로 처리한 코드 아래와 같이 작성하였다.
중첩되는 괄호가 없어서 보기는 편해졌다..
코드가 생략된 부분이 있어서 조금 풀어서 보면 아래와 같이 작성 된다.
2번째 사진처럼 구조를 알고 있다면 심플하게 작성하는것도 나쁘진 않지만.
코드는 명확하게 하는게 작업할때 더 좋다 그래서 3번째 처럼 작성 하는것을 추천함.
자세한 설명은 아래 정식 문서를 참조하기 바람..
https://caolan.github.io/async/docs.html#waterfall
vscode에서 node.js를 visual studio 에서 처럼 디버깅 하고 싶다면....
일단 아래와 같이 간단한 node.js 코드를 작성 해봅니다.
위에 사진과 같이 4번째 줄에 브레이크 포인트를 걸어두고 F5를 누르면 디버그 모드 해서 실행이 됩니다.
(node.js를 디버깅하니 뭐 기타등등 세팅은 기본되어있다고 치고..)
그럼 vscode에서 자동으로 launch.json 파일이 .vscode 폴더에 생성이 됩니다.
파일 내용은 아래 스샷 참조
기본 lanch로 실행하는건 visual studio 에서 디버깅 하는거랑 동일하다.
자동으로 node 실행 하고 디버그 상태가 되는.. 아래 스샷 처럼 브레이크 포인트에 걸린다.
그런데 node.js는 javaScript를 바꾸다보면 위와 같이 디버깅하는게 귀찮다.
그래서 보통 스크립트 파일이 변경되면 자동으로 재시작 해주는 어플리케이션을
이용 하고 로그를 보고 주로 수정한다. (이때 이용하는데 nodemon 어플이다.)
그런데 가끔 브레이크 포인트 걸어서 내용을 보고 싶을 때가 있는데
visual studio 디버깅 기능중에 프로세서 연결해서 디버깅 하듯이 vscode에서도 할수가 있었습니다.
일단 launch.json 에 구성 추가를 해야 합니다.
디버그에 설정을 선택하는 메뉴 에서 구성 추가를 하거나
launch.json파일을 열어서 구성추가 버튼을 누르면 됩니다.
일단 구성추가를 하게 되면 위 사진과 같이 메뉴가 나오는데
여기서 프로세서에 연결 을 선택 합니다
그럼 아래와 같이 launch.json에 코드가 추가되며
디버그 구성 선택 메뉴에도 추가 됩니니다.
추가된 구성에 name 부분은 Attach by Process ID 라고 표시되는데
한글로 나오는게 편해서 바꿔서 저장하였음다.
일단 여기까지 하면 프로세서 연결 디버깅 할수 있는 환경은 끝난 상태임다.
그럼 nodemon을 이용해서 일단 어플을 실행 합니다.
vscode에서는 콘솔창을 열수 있는데 아마 단축키가 ctrl+` 입니다.
그럼 vscode에 내장된 콘솔창을 이용해 아래와 같이 nodemon을 실행 합니다.
이상태에서는 에러가 나거나 console.log() 출력이 콘솔창에서 보이게 됩니다
여기서 우리가 하고 싶은것을 현재 실행된 상태에서 프로세서 연결해서 브레이크 포인트로 디버깅을
할려고 하는거니 일단 디버그에서 위에 세팅했던 프로세서 연결 구성을 선택하고 디버깅(F5)을 시작 합니다.
그럼 아래와 같이 프로세서 선택 화면이 나옵니다.
그럼 맨 첫번째 있는 node .\main.js를 선택 하면 브레이크 포인트 부분에서 디버깅 할수 있게 됩니다.
참고로 nodemon으로 실행시에는 javascript가 변경되면 자동으로 재실행 하기에 프로세서ID가 변경되게 되니
이때는 다시 프로세서 연결해서 디버깅 해야합니다.
아무튼 이것으로 대충 디버깅 설명을 마침니다.
node.js를 vscode로 개발하면서 추가로 설치한 확장 기능 정리해 둡니다.
Active File In Status Bar (마켓이동)
선택한 파일의 경로를 작업관리창에 표시해주는 기능
vscode-icons (마켓이동)
vscode 탐색기 부분에 폴더 파일이 아이콘으로 표시되서 보기 좋게 나옴 (이건 간지용으로 추천)
Rainbow Brackets (마켓이동)
괄호들을 짝을 맞춰서 색칠 해주는 기능
Settings Sync (마켓이동)
vscode에 설치한 확장기능을 github를 통해 동기화 해주는 프로그램
PC를 여러대 쓴다면 같은 환경 세팅을 위해서 세팅 해는걸 추천
사용방법은 구글에 물어보세요.. (github 계정 필수)
Visual Studio Keymap (마켓이동)
vscode는 키맵도 확장기능으로 설치 할 수 있었습니다.
제가 주로 쓰던 visual studio 키맵 세팅 파일도 있더라구요..
하지만 대소문자 바꿔주는 단축키는 다른걸로 잡혀서 수동으로 세팅 해서 사용
일단 이정도만.. 추가 적으로 사용 하는게 있음 갱신 하겠습니다.
node.js 개발할 때 JavaScript 수정 할때마다 어플리케이션을 재실행 해야하는데
그런 귀찮음을 해결 해주는 어플 2가지를 소개 합니다.
자세한 사용 방법은 구글에 물어보면 많은 분들이 설명해서 간단하게만 정리 해둡니다.
개발용으로 사용한다면 nodemon을 하는게 좋고 라이브 서비스에서 사용한다면 pm2가 좋은거 같심다.
pm2
공식 설명서 : https://pm2.io/doc/en/runtime/overview/)
설치 방법
npm install pm2 -g |
사용 방법
pm2 start app.js --watch |
로그 확인
pm2 log |
nodemon
공식 설명서 : https://github.com/remy/nodemon#nodemon
개발 할때 쓰는건 이게 심플 하고 좋은거 같심다. vscode에서 디버깅을 하기위해 attach를 해서 사용도 가능 합니다. 위에 pm2는 그게 안되서 조큼 귀찮긴 했죠.
설치 방법
npm install nodemon -g |
사용 방법
nodeman app.js |
사용법은 위 동영상을 보면 될꺼 같네요..
하지만 저걸로 끝이면 뭐 정리를 할 필요가 없었겠죠...
간단하게 위와 같이 list array에 values array 가 들어있는 구조 임다..
https://www.liquid-technologies.com/online-json-to-schema-converter
위 주소로 json을 가지고 가면 아래와 같이 머싯게 뽑아주긴 합니다.
하지만 여기 함정이 있더군요..
위 사이트는 고정 적인 값만 체크 하게 되는 문제가 있더라구요
예를 들면 list array에 object를 추가 하면 두번째 부터는 자동으로 값이 안튀어나오는...
그래서 최소한 구조만 넣고 다시 뽑아야 합니다.
그리고 "items" 부분에 있는 대괄호를 ([]) 제거 해줘야 합니다.
대괄호가 있으니 1개만 인식 하는 문제가 있습니다..
위에는 최소한의 값만 세팅해서 뽑고 items에 있는 대괄호를 수동 제거 한 상태
(하지만 테스트는 안해봤다는거...)
위 파일 저장 하고 동영상에 나온데로 하면 ctrl + 스페이스 누르면 각 상황에 맞는 key값이 나오는것을
확인 할 수 있습니다.
흠... 그리고 또 하나의 팁을 드리자면..
"description": key 값을 추가하면 각 키의 설명을 달수 있습니다..
그거 달아두면 뭐 팝업으로 설명 나오니...
더 자세한건 인터넷에 많으니 구글에게 물어보시면 됩니다..
RECENT COMMENT