프로그래밍
-
[Javascript] Math.floor 와 parseInt 차이점프로그래밍/JavaScript 2023. 4. 24. 15:44
▶Javascript Math.floor 와 parseInt 차이점 ▶설명 Javascript 함수 중에 Math.floor와 parseInt 2가지 모두 역할이 비슷해서 헷깔립니다. 2개의 함수의 차이점을 알아보도록 하겠습니다. ▶설명 Math.floor 참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor Math.floor() - JavaScript | MDN The Math.floor() static method always rounds down and returns the largest integer less than or equal to a given number. devel..
-
[Javascript] 랜덤 정수 생성하기 (Random Number)프로그래밍/JavaScript 2023. 4. 24. 15:05
▶Javascript 랜덤 정수 생성하기 (Random Number) ▶설명 Javascript 함수 중에 Math.random 함수가 존재합니다. 이 함수를 이용해 램덤한 정수를 반환하는 함수를 만들어보겠습니다. 참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random Math.random() - JavaScript | MDN The Math.random() static method returns a floating-point, pseudo-random number that's greater than or equal to 0 and less than 1, with approximatel..
-
[Javascript] 영어 대소문자와 숫자만 포함하는 정규식프로그래밍/JavaScript 2023. 4. 20. 14:17
▶Javascript 영어 대소문자와 숫자만 포함하는 정규식 ▶설명 사용자의 입력 값을 검사할 때, 일반적으로 아이디 같은 경우에는 영어 대소문자와 숫자만으로 이루어진 문자열인지 검사가 필요합니다. ▶정규식 문자열이 영어 대소문자와 숫자만으로 존재하는지 확인을 위한 정규식은 아래와 같습니다. /^[a-zA-Z0-9]*$/ 정규식으로 검사 방법은 아래처럼 진행하면 됩니다. var username = "이름"; var regex = /^[a-zA-Z0-9]*$/; if (!regex.test(username)) { alert("실패"); } else { alert("성공"); } ▶사용 예제 정규식을 사용한 간단한 테스트 코드입니다. 아래는 크롬의 개발자 도구의 콘솔 창에서 작성한 테스트 코드입니다. 테스트..
-
[Javascript] 문자열을 공백 구분자로 split 하는 방법프로그래밍/JavaScript 2023. 4. 18. 13:50
▶Javascript 문자열을 공백 구분자로 split 하는 방법 ▶설명 문자열을 공백 구분자로 split 하여 배열에 저장할 때, 공백이 여러개 있는 경우에 공백을 전부 무시하고 split 하고 싶은 경우가 있습니다. 그런 경우 해결 방법을 알아보도록 하겠습니다. 참고 : https://stackoverflow.com/questions/225337/how-to-split-a-string-with-any-whitespace-chars-as-delimiters ▶잘못된 방법 예시 먼저 공백으로 나눈다고 생각했을 때, 제일 먼저 생각나는 방법입니다. 아래는 크롬의 개발자 도구의 콘솔 창에서 작성한 테스트 코드입니다. 코드 console.log("a b c".split(" ")); 결과 ['a', '', ''..
-
[Node.js + Vue.js] Visual Studio Code 디버그 모드프로그래밍/Node.js + Vue.js 2020. 7. 1. 15:37
▶Node.js + Vue.js Visual Studio Code 디버그 모드 ▶설명 Node.js 개발을 진행하면서 디버그 모드를 사용하지 않는다면, 많은 불편이 있을 수 있습니다. Visual Studio Code에서 제공하는 디버그 모드를 설정하여, 개발 편의성을 올리도록 하겠습니다. 아래의 내용은 Visual Studio Code에서 디버그 모드를 사용한 경험을 기반으로 작성한 것입니다. 다른 분들은 더 많은 기능을 아실 거로 생각하지만, 제가 아는 내용만 간단히 작성하도록 하겠습니다. ▶Visual Studio Code 디버그 모드로 실행 이제 개발을 위해 백엔드 프로젝트를 Visual Studio Code 디버그 모드로 실행하는 방법을 알아보겠습니다. 우선 터미널에서 [Ctrl + C] 단축키..
-
[Node.js + Vue.js] 백엔드(Backend) 환경 세팅 with Express프로그래밍/Node.js + Vue.js 2020. 6. 12. 09:00
▶Node.js + Vue.js 백엔드(Backend) 환경 세팅 with Express ▶설명 프론트엔드의 경우에는 Vue.js를 사용하기로 하였습니다. 백엔드는 Node.js에서 흔하게 사용한는 Express 프레임워크를 사용하도록 하겠습니다. 이번 글에서는 Express Generator를 이용하여 Express 백엔드 환경을 세팅하도록 하겠습니다. ▶Express Generator 설치 [참고] Express Generator : https://expressjs.com/ko/starter/generator.html Express 애플리케이션 생성기 Express 애플리케이션 생성기 애플리케이션의 골격을 신속하게 작성하려면 애플리케이션 생성기 도구인 express를 사용하십시오. 다음의 명령을 이용..
-
[Node.js + Vue.js] 프론트엔드(Frontend) 환경 세팅 with Vue CLI프로그래밍/Node.js + Vue.js 2020. 6. 5. 13:24
▶Node.js + Vue.js 프론트엔드(Frontend) 환경 세팅 with Vue CLI ▶설명 이번 글에서는 Vue CLI를 이용하여 Vue.js 프론트엔드 환경을 세팅하도록 하겠습니다. ▶Vue CLI 설치 [참고] Vue CLI : https://cli.vuejs.org/ Vue CLI cli.vuejs.org 아래의 방법은 이전에 설치한 Visual Studio Code를 이용한 방법입니다. 1. Visual Studio Code 좌측에 EXPLORER 영역에서 우측 클릭 2. [Open in Terminal] 선택 3. 하단 터미널이 표시되는 것을 확인 4. Vue CLI 설치 여부 확인을 위해 아래의 명령어 실행 vue -V 5. Vue CLI가 설치되어 있지 않다면 아래를 실행 5.1...
-
[Node.js + Vue.js] Yarn 패키지 매니저 설치프로그래밍/Node.js + Vue.js 2020. 6. 3. 15:35
▶Node.js + Vue.js Yarn 패키지 매니저 설치 ▶설명 Node.js + Vue.js 프로젝트를 진행하면서 사용할 패키지 매니저는 Yarn입니다. 그러면 Yarn은 무엇일까요? ▶Yarn이란? Yarn은 facebook에서 개발한 javascript 패키지 매니저입니다. Yarn은 NPM 보다는 사용량이 적지만, 많은 인기를 누리고 있는 패키지 매니저입니다. Yarn에서 소개하는 기능은 아래와 같습니다. Ultra Fast (초고속) Yarn은 다운로드 한 모든 패키지를 캐시하므로 다시 다운로드 할 필요가 없습니다. 또한 작업을 병렬화하여 리소스 사용률을 극대화하므로 설치 시간이 빨라집니다. Mega Secure (뛰어난 보안) Yarn은 체크섬을 사용하여 코드가 실행되기 전에 설치된 패키지..
-
[Javascript] 화면 크기 변경 시에 축소프로그래밍/JavaScript 2020. 2. 6. 11:33
▶Javascript 화면 크기 변경 시에 축소 ▶설명 일반적이 반응형 홈페이지가 아닌 고정된 사이즈의 홈페이지를 만들어야 하는 경우가 있습니다. 그런경우 창의 최소 넓이 미만인 경우에는 Javascript로 zoom을 조정하여 비율 그대로 줄어들게 처리하면 편리합니다. ▶예제 코드 function resizeApply() { var minWidth = 1200; var body = document.getElementsByTagName('body')[0]; if (window.innerWidth < minWidth) { body.style.zoom = (window.innerWidth / minWidth); } else body.style.zoom = 1; } window.onload = function..
-
[Node.js + Vue.js] 프로그램 설치프로그래밍/Node.js + Vue.js 2019. 9. 22. 18:41
▶Node.js + Vue.js 프로그램 설치 ▶설명 [들어가며] 최근에 Node.js + Vue.js로 회사에서 작업을 진행해서 간단하게 프로젝트에서 사용한 TIP 같은 것을 정리합니다. 상세한 지식을 작성하기에는 배움이 모자라므로 어디까지나 참고만 하시고, 제대로 배우고 싶으신 분은 공식 문서를 보시는 것을 추천합니다. 이 글은 어디까지나 수박 겉핥기처럼 간단한 내용만을 담고 있습니다. [환경] OS : Windows 10 Node.js : 10.16.3 LTS Vue.js : 2.X Editor : Visual Studio Code 우선 Node.js와 Visual Studio Code를 설치하도록 하겠습니다. ▶Node.js 설치 Node.js 다운로드 1. https://nodejs.org/ko..