Javascript (128) 썸네일형 리스트형 [node] 템플릿 상속 템플릿 상속은 이전 포스트인 nunjucks와 이어진다. 지난번에 생성한 template 하위 요소에 layout 폴더를 생성하고 base.html 파일을 생성한다. 생성한 파일에 아래와 같이 코딩한다. {% block content %}{% endblock %} 위의 이미지의 {} 안에 수정할 products.html의 파일의 내용이 들어간다. 완료 되었으면 아래의 소스코드를 products.html 파일에 넣어준다. {% set title = "관리자 리스트" %} {{ message }} {% extends "layout/base.html" %} {% block content -%} 제목 작성일 삭제 제품 이름 2020-03-07 삭제 작성하기 {% endblock %} 이렇게 하면 jQuery나 .. [node] View Engine - Nunjucks 관련 게시글 nunjuck macro developing-move.tistory.com/88?category=883220 [node] nunjucks macro base.html에 아래의 소스를 추가한다. {{ title }} List Write {% block content %}{% endblock %} 이 후 http://localhost:3000/admin/products/ (자신이 지정한 y와 같이 자신이 지정한 포트의.. developing-move.tistory.com vscode tempate 폴더 생성 이때 템플릿 구조도 url의 구조를 따라가야 한다. template 라는 폴더를 만들고 그 하위 폴더 admin을 생성한 후 admin 폴더에 products.html 이라는 파일을 생성한다.. [node] Express를 사용하여 웹 서버 띄우기(feat. nodemon) 해당 예시 실행을 위해서는 Express가 추가 되어 있어야 합니다. 혹시 설치가 되어있지 않거나, 설치법을 모르시는 분은 이전 포스트의 npm install을 보고 오시면 됩니다. 예시 작성을 위한 새폴더 생성 및 새 파일(app.js) 생성 새로 생성한 app.js 파일에 다음과 같이 코딩 const express = require('express'); const app = express(); // 익스프레스 가져오기 const port = 3000; // 포트 번호 app.get('/', (req, res) => { res.send('hello express'); //화면에 표출될 부분 }); app.listen(port, () => { console.log('Express listening on .. [node] npm install하기 https://www.npmjs.com/ npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com 해당 URL에 접속하면 원하는 npm을 검색하고 다운로드 할 수 있다. 우선 npm install을 위해 신규 폴더를 생성한다. cmd창을.. [node] 내보내기와 불러오기 지난번 게시물 hello node! 출력 하기의 활용이다. 이번 예시에서는 내보내기 파일과 불러오는 파일을 별도로 구분했다. 해당 예시에서는 내보낼 땐 Module.exports 변수를, 불러올 땐 require 파일명을 사용하였다. 먼저 내보내기 파일 생성 hello.js를 만들었을 때와 동일하게 myvar.js라는 파일을 생성한 후 module.exports.a = "hello a"; 작성 이후 불러올 파일(사용할 파일)인 index.js 파일 생성 생성한 파일에 myvar 파일의 경로 작성 및 console.log()로 출력할 메시지 입력. cmd 창에서 index.js를 실행한다. 같은 방식으로 함수도 내보낼 수 있다. 다시 myvar.js 파일로 돌아가 내용을 아래 이미지처럼 수정 index.j.. [node] 'hello node!' 출력하기 node 명령어를 통한 hello.js 실행 새 폴더를 생성하여 vscode에 드래그 앤 드랍한다. 이 때 생성산 새 폴더의 경로를 기억해 두는 것이 좋다. (CMD 명령어 입력 시 폴더의 경로를 알아야 함) 예시에서는 폴더명을 exercise라고 만들었다. 마우스 우클릭하여 새 파일을 생성한다. 파일 명은 hello.js로 생성했다. 생성한 hello.js 파일에 console.log("hello node!")라고 코딩한다. 윈도우 기준 cmd 창을 열어 새로 생성한 폴더(exercise)로 이동 및 hello.js를 실행한다. 이동 : cd 해당폴더 경로 실행 : node hello.js(실행할 js 파일명) hello.js 실행 시 hello node!가 뜨는 것을 확인할 수 있다. 출처 : 본 포.. node 설치 및 에디터(vscode) 설치 구글에 node download를 검색하여 다운로드 링크로 이동하거나 해당 URL 접속 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드가 완료되면 install 프로그램을 실행하고 별도의 설정 없이 next 버튼만 누르면 설치가 완료된다. 설치 완료 후 정상적으로 설치가 되었는지 확인 windowOS 기준으로 cmd창을 열어 node -v, npm -v를 각각 입력하여 아래 이미지와 같이 출력되면 정상 설치 완료 다음으로 vscode 설치 및 기본 세팅 방법이다. 구글에 vscode download 검색 하여 링.. [Javascript] 동기/비동기 처리와 callback 동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다. 아래 이미지와 같이 Syncronous 동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을, Asynchronous 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행할 수 있는 방식을 의미한다. 아래와 같이 함수를 작성하여 호출했을 때 동기적으로 실행된다. function work() { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + 'ms'); } work(); console.log('다음 작업'); 위의 결과와 같이 함수 로직이.. 이전 1 ··· 12 13 14 15 16 다음
