본문 바로가기

전체 글110

이미지 파일 저장하기 - multer 서비스를 제공하는 웹애플리케이션에서 사용자가 이미지파일을 등록하여 서비스를 제공하기 위해서는 이미지 파일을 불러와서 서버에 저장해야 합니다. express와 multer를 이용하여 이미지 파일의 정보를 파싱하여 저장하는 방법에 대해 알아보겠습니다. 1. multer 란? multer 는 파일 업로드를 위해 사용되는 multipart/form-data를 다루기 위한 node.js의 미들웨어 입니다. 효율성을 최대화 하기 위해 busboy를 기반으로 하고 있습니다. https://github.com/mscdex/busboy 2. multer 설치하기 $npm install multer multer는 body객체와 한 개 file또는 여러 개의 files객체를 request 객체에 추가합니다. body객체는 .. 2023. 9. 23.
평점 표현 하기 - Starability 라이브러리 블로그나 영화, 음악 등 정보를 보고 가입자가 평가하는 방법으로 댓글을 남기거나 평점을 매깁니다. 평점의 스케일을 표현하는 방법은 다양하지만 가장 일반적인 방법으로 별(star) 표시를 하는 라이브러리를 소개하고자 합니다. starability.css - Accessible rating with animations on top https://github.com/LunarLogic/starability GitHub - LunarLogic/starability: Accessible rating forms with cute animations on top. Accessible rating forms with cute animations on top. - GitHub - LunarLogic/starability.. 2023. 9. 18.
리액트 - Netlify 배포하는 방법 및 주의사항 리액트 개발 공부를 하면서 실제 외부에서 접근 가능하도록 무료 호스팅(hosting) 방법중에서 정적 컨텐츠를 호스팅해주는 Netlify 를 사용하는 방법과 주의사항에 대해 알아 보겠습니다. 1.  Netlify 와 github pages 차이점                                                                                           github pages                                        NetlifyNetlify가 전반적으로 사이트 배포 관리 기능이 gitub pages에 비해 훨씬 다양하고,  도메인 비교github pages - https://계정명.github.io/리포지토리명 으로 구성 .. 2023. 9. 7.
유효성 검증 - Joi 자바스크립트에서 사용자가 입력한 데이터의 유효성을 검증하는 라이브러리인 Joi 에 대해 사용방법에 대해 알아보겠습니다. 자세한 사용법은 아래의 Joi 사이트를 참고 https://joi.dev/ joi.dev address formula joi-date pinpoint joi.dev 1. Joi 특성 단순하게 보면 입력한 데이터의 검증은 if 문을 사용하여 값이 유효한지 판단할 수 있지만 입력한 데이터가 많을 경우 모든 값을 if 문으로 검증하기 어렵습니다. Joi 는 스키마 기반으로 사전에 각 필드별 유효한 데이터의 기준을 정해주고, 필요한 곳에 함수 형태로 불러서 사용할 수 있어 데이터 유효성 검증에 편하게 사용할 수 있는 라이브러리 입니다. 2. Joi 설치 및 셋팅 https://www.npmjs.. 2023. 9. 2.
bootstrap validation 폼(form) 태그에 적용하기 데이터를 신규 입력하거나 수정하기 위해 이용하는 폼(form) 태그 사용시 입력하는 데이터의 유효성 검증을 부트스트랩에서 제공하는 기능을 사용하는 방법에 대해 알아 보고자 합니다. Bootstrap form validation 적용 매뉴얼 https://getbootstrap.com/docs/5.3/forms/validation/ Validation Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript. getbootstrap.com 1. html form 양식에 적용 브라우저에서 제공되는 기본 valida.. 2023. 8. 29.
[Node.js] ejs-mate 사용하여 템플릿(template) 화면 만들기 node.js 를 통해 웹어플리케이션 만들 때 express 에서 제공하는 기본 템플릿 엔진대신 ejs-mate를 사용하면 각 화면에서 내비게이션바 같이 boilerplate(상용구) 같이 반복적인 기능을 효율적으로 구성할 수 있는 layout 템플릿 기능을 사용할 수 있습니다. 다음과 같이 예시를 들어 어떻게 효율적으로 화면을 구성할 수 있는지 알아보겠습니다. ejs-mate 설치 및 사용환경 구성 boilerplate 화면 만들기 다른 화면에 적용하기 https://www.npmjs.com/package/ejs-mate ejs-mate Express 4.x locals for layout, partial.. Latest version: 4.0.0, last published: a year ago. S.. 2023. 8. 27.
반응형