본문 바로가기

프로그래밍/Web38

[WEB] Node.js를 더 쉽게 쓰기위한 PM2 소개 PM2에 대해서 다뤄보겠다. 내가 node.js로 웹개발을 하면서 굉장히 유용하게 쓰고있는 패키지이다. npm을 이용하여 굉장히 쉽게 다운 받을 수 있고, node.js를 실행 시킬 때 항상 재실행을 하지 않아도 되서 유용하다. PM2 공식 페이지 : https://pm2.keymetrics.io PM2 - Home Advanced process manager for production Node.js applications. Load balancer, logs facility, startup script, micro service management, at a glance. pm2.keymetrics.io PM2 깃허브 : https://github.com/Unitech/pm2 GitHub - Unite.. 2021. 12. 3.
[WEB] 진행바(Progress Bar) 추가하기(블로그, 쇼핑몰) 정확한 명칭은 Scroll Indicator 이다. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_indicator W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com W3Schools에서 scroll indicator를 검색해보면 예제가 나와있다. 그 중에서 내가 필요한 부분만 잘라냈다. 내가 제일 좋아하는 노래인 '당신과는 천천히'의 가사를 붙혀넣어 봤다. See the Pen Untitled by Jirong (@jirongkim.. 2021. 11. 6.
[html] 서버 없이 이메일을 보내보자! 구글 스프레드 시트를 이용하여 서버 없이 이메일을 보낼 수 있는 방법이 있다. https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how GitHub - dwyl/learn-to-send-email-via-google-script-html-no-server: An Example of using an HTML form (e.g: "Contact Us" on a web :email: An Example of using an HTML form (e.g: "Contact Us" on a website) to send Email without a Backend Server (using a Google Script) perfect.. 2021. 10. 31.
Mixed content / Failed to load response data... 문제 해결방법 예기치 못한 에러가 발생하였다. 우선 크롬의 Network를 들어가서 확인해보니 jqeury-latest.min.js가 제대로 다운로드가 안 되는것 같았다. 사파리는 되고, 로컬로 테스트 했을 때도 됐는데.. 왜 push 후 크롬으로 하니까 안 되는것일까..! blocked:mixed-content Failed to load response data : No data found for resource with given identifier 구글링을 해보니.. http의 보안상 문제 때문에 https를 써야한다고 한다. 그래서 나는 jquery를 호출하는 링크에 s를 살짝쿵 붙혀놓았더니.. 정상동작한다 ㅋㅋㅋ 이 소스코드를 맨 위에 붙혀놓아도 된다고 한다. 2021. 10. 30.
Sweetalert로 예쁜 알림창, 경고창을 띄우자 기존에 Alert는 되게 구렸다. 구린걸 싫어하는 개발자들이 SweetAlert이라는 것을 만들었다. https://sweetalert2.github.io SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 사용법과 예시는 공식페이지에 잘 나와있어서 간단하게만 소개하겠다. 우선 script 태그를 선언해서 sweetalert 패키지를 다운로드 받아주자. 1 cs 그리고는 사용하고 싶은 디자인을 선택한다. https://sweetalert2.github.io/#examples 여기에서 Try me를 눌러가면서 선.. 2021. 10. 28.
[부트스트랩5] 버튼 사용하기 부트스트랩(bootstrap)의 버튼(Buttons)을 사용해보자. 부트스트랩을 모른다면? 여기를 참고하자 우선 완성된 모습이다. PrimarySecondarySuccessDangerWarningInfoLightDarkLink 사용방법은 아주 간단하다. 우선 부트스트랩의 Buttons 페이지에서 원하는 형태의 버튼을 선택한다. 나는 Example Buttons를 모두 가져와봤다. Button 태그에 class 명을 바꿔줌으로서 디자인이 바뀐다. See the Pen Bootstrap v5 Buttons by Jirong (@jirongkim) on CodePen. 2021. 10. 28.