우선 이미지를 담아둘 폴더를 하나 생성한다. 그 다음 app.js에 아래의 소스코드를 추가한다. app.use('/uploads', express.static('uploads')); 완료 후 해당 폴더의 파일명으로 url에 접근하면 이미지를 확인할 수 있다. 출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online의 박준영 강사님의 강의를 보고 직접 정리한 내용입니다.

body-parser란 form에서 넘어 오는 데이터를 body-parser라는 미들웨어로 처리하는 것을 말한다. 우선 admin.js에 아래 소스를 추가한다. router.get('/products/write', (req, res) => { res.render('admin/write.html') }); 추가하였으면 template/admin 폴더에 write.html 파일을 새로 생성하고 아래의 소스 코드를 넣어준다. {% set title = "제품 등록" %} {% extends "layout/base.html" %} {% block content -%} 제품명 가격 설명 작성하기 {% endblock %} 여기까지가 body-parser를 테스트할 기본적인 준비다. 이제 해당 포트의 해당 url에..

미들웨어는 쉽게 말해 해당 url에 접근할 때 중간 요청을 가로채는 역할을 한다고 생각하면 된다. 테스트를 진행하기 전에 cmd 창에서 logger 확인을 위해 morgan을 intall한 후에 시작한다. 설치가 완료되었으면 app.js로 들어와 아래 소스 코드를 추가한다. const logger = require('morgan') // morgan 호출 app.use(logger('div')); 추가가 완료되었으면 cmd 창에서 app.js를 실행하고 해당 포트의 url에 접속할 때마다 아래와 같이 로그가 확인된다. 기본 세팅이 완료되었고 이제 미들웨어를 만들기 위해 admin.js로 돌아간다. 미들웨어는 3개의 인자(request, response, next) 를 갖는다. admin.js에 아래와 같..

▶ tabindex 속성 Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 숫자로 지정. 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨. - 대화형 콘텐츠? 사용자와의 상호작용을 위해 특별하게 설계된 요소. ex) , , ... - 대화형 콘텐츠: developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%EB%8C%80%ED%99%94%ED%98%95_%EC%BD%98%ED%85%90%EC%B8%A0 비대화형 콘텐츠에도 tabindex="0"을 지정하면 대화형 콘텐츠와 같이 탭 순서를 사용할 수 있음. tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능. - 탭 이동..

▶ draggable 속성 요소가 Drag and Drop API를 사용 가능한지 여부를 지정. drag해서 drop할 수 있는 명령 체계를 활용할 수 있는지 없는지 설정. 작성하지 않는 경우 true/false가 아니라 기본값이 auto로 지정됨. - auto는 드래그 가능 여부를 브라우저가 판단하는 것. ▶ hidden 속성 요소를 숨김 - hidden 속성을 통해 화면상에는 입력창이 나타나지 않지만 전송 버튼 클릭 후의 결과 화면에서 URL을 보면 에 지정된 값이 전송된 것을 확인할 수 있음. - hidden 속성을 통해 특정 부분을 숨길 수는 있지만 숨겨진 부분의 HTML 내용은 동작할 수 있는 부분임.

▶ data-* 사용자 정의 데이터 속성을 지정. 일반적으로 JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용. - HTML에서 보관하고 있다가 자스에서 필요할 때 활용 가능. data-*에서 data- 이후 * 부분에는 원하는 명칭을 지정할 수 있음.