본문 바로가기

javascript114

day.js 사용 방법 - JavaScript 날짜 라이브러리 day.js 사용 방법 - JavaScript 날짜 라이브러리 day.js 는 많은 JavaScript 날짜 관련 라이브러리중 가장 가벼운 라이브러리입니다. 업데이트가 중단된 moment.js 보다 약 33배 가벼우며, immutable 한 구조라서 굉장히 많이 사용되고 있는 라이브러리 입니다. 또한 moment.js 와 문법이 비슷하여서 moment.js 대체로 굉장히 많이 사용되고 있습니다. 그럼 day.js의 사용방법에 대해 알려드리도록 하겠습니다. day.js 사용 준비 Module 설치하여 사용 하는 경우 npm install dayjs npm을 사용하여 day.js 를 설치하여 사용합니다. import dayjs from "dayjs"; day.js를 설치하였으면 위와 같이 import 하여 .. 2021. 10. 10.
moment.js 사용 방법 - JavaScript 날짜 라이브러리 moment.js 사용 방법 - JavaScript 날짜 라이브러리 moment.js는 JavaScript에서 사용되는 날짜관련 라이브러리 중 가장 많이 사용되었던 라이브러리입니다. 현재는 더이상의 업데이트가 없을 것이라 하였지만, 2011년부터 가장 많이 사용된 날짜 관련 라이브러리입니다. 그럼 moment.js의 사용 방법에 대해 알려드리도록 하겠습니다. moment.js 사용 준비 Module 설치하여 사용 시 npm install moment npm을 사용하여 moment.js를 설치하여 사용합니다. import moment from "moment"; moment.js를 설치하였으면 위 코드로 import 하여 사용합니다. 혹은, const moment = require("moment"); req.. 2021. 10. 9.
React 설치 및 프로젝트 생성 시작 방법 React 설치 및 프로젝트 생성 시작 방법 React는 많은 Front-end 개발 라이브러리 혹은 프레임워크들 중에서 가장 큰 생태계를 형성하고 현재까지 가장 인기있는 라이브러리입니다. React를 설치하고 프로젝트를 생성하여 시작하는 방법을 알려드리도록 하겠습니다. React 개발 환경 준비 npm 설치 확인 React 개발을 위해서는 npm이 설치되어 있어야 합니다. npm -v 위 명령어를 통해 npm 설치 여부와 버전을 확인해보시고, npm이 설치되어있지 않으시다면, https://nodejs.org/ 에서 설치하시면 되고, 최신 버전이 아니시라면, npm Upgrade 방법 npm Upgrade 방법 npm 업그레이드 하는 방법을 알려드리도록 하겠습니다. npm Update 방법 1. npm.. 2021. 10. 4.
JavaScript convert date format yyyy-mm-dd, yyyymmdd, yyyy/mm/dd (날짜 형식 쉽게 변경 하는 방법) JavaScript convert date format yyyy-mm-dd, yyyymmdd, yyyy/mm/dd (날짜 형식 쉽게 변경 하는 방법) JavaScript 에서 날짜 형식을 yyyy-mm-dd, yyyymmdd, yyyy/mm/dd 로 쉽게 변경하는 방법을 알려드리도록 하겠습니다. 코드만 조금 다를 뿐 같은 결과를 얻을 수 있으니 원하는 방법을 사용하시면 되겠습니다. 첫번째 방법 function convertDateFormat(date) { var year = date.getFullYear(); var month = date.getMonth() + 1; month = month >= 10 ? month : '0' + month; var day = date.getDate(); day = da.. 2021. 5. 25.
How to skip the preflight request - Preflight 요청 스킵하는 방법 How to skip the preflight request - Preflight 요청 스킵하는 방법 Http Request 과정에서 위 사진과 같이, Preflight Request가 발생하는 것을 스킵할 수 있는 방법에 대해 알려드리도록 하겠습니다. Preflight Request 우선 Preflight Request가 발생하는 이유에 대해서 간단히 설명 드리겠습니다. 브라우저에서는 cross-origin Actual Request(본 요청)을 하기 전에, OPTIONS Method 로 Preflight Request(사전 요청)를 전송하고, 요청 받은 서버에서 Access-Control-Allow-Origin 와 Access-Control-Allow-Methods, 즉 어떤 .. 2021. 5. 20.
JavaScript 반올림, 올림, 내림 방법 JavaScript 반올림, 올림, 내림 방법 JavaScript에서 반올림, 올림, 내림 방법을 알려드리도록 하겠습니다. JavaScript 반올림(round) 방법 var testNum1 = 10.1; var testNum2 = 10.9; var testNum3 = -10.1; var testNum4 = -10.9; testNum1 = Math.round(testNum1); testNum2 = Math.round(testNum2); testNum3 = Math.round(testNum3); testNum4 = Math.round(testNum4); console.log(testNum1);// 10 console.log(testNum2);// 11 console.log(testNum3);// -10 c.. 2021. 3. 26.
JavaScript Base64 Encoding, Decoding 방법 JavaScript Base64 Encoding, Decoding 방법 JavaScript 에서 Base64 Encoding 방법과 Base64 Decoding 방법을 알려드리도록 하겠습니다. Encoding and Decoding base64 in JavaScript var originText = "This is example text."; console.log("Original : ", originText); // Base64 Encoding base64EncodedText = btoa(originText); console.log("Base64 Encoded Text : ", base64EncodedText); // Base64 Decoding base64DecodedText = atob(base64.. 2021. 3. 25.
Node.js Socket.IO CORS allow all Node.js Socket.IO CORS allow all Socket.IO 모듈을 사용하면서, Access to XMLHttpRequest at '주소' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 에러를 만나실 수 있습니다. 위 에러에 대한 해결방법을 알려드리도록 하겠습니다. 물론 origin을 정하실 수 있겠지만 모두 허용하는 방법으로 알려드리려고 합니다. var io = require('socket.io')(http, { cors: { origin: "*" } }); 위 코드와 같이 socket.io 모듈 객체 .. 2021. 3. 23.
Node.js Socket.IO 사용 방법 Node.js Socket.IO 사용 방법 Socket.IO는 공식 홈페이지 설명을 빌려와 말씀드리자면, 브라우저와 서버 간의 실시간, 양방향, 그리고 이벤트 기반 통신을 가능하게 해주는 라이브러리 입니다. Socket 통신을 위한 모듈이라고 생각하시면 되겠습니다. 그럼 Socket.IO 사용 방법에 대해 알려드리도록 하겠습니다. Socket.IO 모듈 설치 npm install socket.io npm을 통해 Socket.IO 모듈을 설치합니다. Server-Side Code (Node.js) var app = require("express")(); var http = require("http").createServer(app); var io = require('socket.io')(http); var.. 2021. 3. 22.
JavaScript 진수 변환 방법 JavaScript 진수 변환 방법 JavaScript 에서 진수 변환하는 방법을 알려드리도록 하겠습니다. 10진수에서 n진수로 변환하는 방법 var decimal = 1023; var binary = decimal.toString(2);// 2진수로 var octal = decimal.toString(8);// 8진수로 var hex = decimal.toString(16);// 16진수로 위 코드를 보시면 바로 아시겠지만, {{10진수}}.toString(n) 를 사용해 10진수를 원하는 n진수로 변환하실 수 있습니다. n진수에서 10진수로 변환하는 방법 var binary = "1111111111"; var decimal = parseInt(binary, 2);// 2진수에서 10진수로 var oc.. 2021. 2. 24.
How to check jQuery version - jQuery 버전 확인 방법 How to check jQuery version - jQuery 버전 확인 방법 jQuery version 확인 방법을 알려드리도록 하겠습니다. jQuery().jquery $().jquery 방법은 여러가지가 있겠지만 모두 같은 버전을 확인하는 방법이라 위 두가지 방법만을 알고계시면 됩니다. 위 두가지 방법은 모두 같은 버전값을 알려줍니다. ※ jQuery를 사용할 때 $()를 많이들 사용하실 텐데요. 다들 아시겠지만 jQuery()는 $()을 사용할 수 있게된 버전 이전에 jQuery를 사용하던 방식이니, 최신 버전을 사용하고있지 않으신 분들은 $()가 사용되지 않을 수 있는 점 참고하시면 되겠습니다. 도움이 되셨다면 공감, 댓글 부탁드립니다! 궁금하신 점이나 요청사항은 언제든지 말씀해주세요! 피드.. 2021. 2. 23.
JavaScript MutationObserver 사용 방법 - HTML Dom 변경 감지 방법 JavaScript MutationObserver 사용 방법 - HTML Dom 변경 감지 방법 JavaScript에서 HTML 요소의 변경을 감지할 수 있는 MutationObserver라는 기능을 알려드리도록 하겠습니다. 웹 개발에서 HTML 요소를 감지하여 처리해줘야 할 때가 있습니다. 그럴때 굉장히 유용하게 사용할 수 있는 기능입니다. 또한 Google Optimize를 사용할 때도 굉장히 유용하게 사용할 수 있는 기능이니 마케터 분들께서도 알고 계시면 좋은 기능입니다. 먼저 MutationObserver 를 사용하는 기본 코드부터 보여드리도록 하겠습니다. // 감지할 타겟 var target = document.getElementById('target'); // 변경을 감지했을 때 실행할 부분 .. 2021. 1. 22.

티스토리툴바