front end/javascript 7

javascript jsdoc에서 일반 변수가 아닌 json object를 표현하는 방법

프로그래밍에서 주석은 정말 중요합니다. 주석을 잘 써놓으면 정말 도움이 많이 됩니다. 오픈소스 라이브러리를 사용할 때나, 다른 사람과의 협업에서도 주석을 보며 일을 합니다. /** * 숫자를 더한다. * @param number1 숫자 1 * @param number2 숫자 2 * @returns {*} 숫자1 + 숫자 2 */ function plus(number1, number2) { return number1 + number2; } 이런 코드와 주석이 있다면 이 함수를 사용하는 부분에서 아래처럼 표시가 됩니다. object 형태의 파라미터(매개변수)를 표현하는 방법은 여러 가지가 있습니다. 방법 1. /** * 두개의 숫자를 더한다. * @param json * @param json.number1 ..

javascript에서 브라우저 종류 확인하는 방법

const agent = window.navigator.userAgent.toLowerCase(); let browserName; if(agent.indexOf("edge") > -1) { browserName = "MS Edge"; // 예전 MS edge } else if(agent.indexOf("edg/") > -1) { browserName = "크로미움 기반 Edge"; } else if(agent.indexOf("opr") > -1 && !!window.opr) { browserName = "Opera"; // 오페라 } else if(agent.indexOf("chrome") > -1 && !!window.chrome) { browserName = "chrome"; // 크롬 } else ..

javascript에서 UUID 생성하는 방법

UUID란? 범용고유식별자(Universal Unique Identifier, UUID)는 어떤 개체(데이터)를 고유하게 식별하는 데 사용되는 표준입니다. 네트워크 상에서 서로 모르는 개체들을 식별하기 위해서는 각각의 고유한 이름이 필요합니다. 같은 이름을 갖는 개체가 존재한다면 구별이 불가능해지기 때문입니다. 이를 위하여 탄생한 것이 UUID이며 국제기구에서 표준(rfc4122)으로 정하고 있습니다. UUID 표준에 따라 이름을 부여하면 고유성을 완벽하게 보장할 수는 없지만 실제 사용상에서 중복될 가능성이 거의 없다고 인정되기 때문에 많이 사용되고 있습니다. UUID의 정의 16바이트(128비트) 길이의 숫자입니다. 이 숫자는 32개의 16진수로 구성되며, 5개의 그룹으로 표시되고 각 그룹은 하이픈으로..

javascript random number generation

Math.random()의 문제점 애플리케이션을 개발하다 보면 랜덤 하게 수를 생성(난수) 해야 하는 경우가 있습니다. 예전에는 일반적으로 javascript에서 random number를 생성할 때 Math.random()을 사용했습니다. 하지만 이 함수에는 문제가 있습니다. MDN의 문서에 따르면 Math.random()은 암호학적으로 안전한 random number를 생성하지 않기 때문에 보안과 관련된 로직에서는 Math.random()을 사용하지 않는 것이 좋다고 합니다. 그래서인지 보안 취약점(시큐어 코딩) 프로그램을 실행하면 Math.random()이 취약점이라고 표시됩니다. 이러한 문제들 때문에 W3C는 Web Crypto API를 만들어 공개했습니다. 이 기능은 대부분의 브라우저에서 사용할..

FormData를 이용한 javascript file upload

일반적으로 파일 업로드를 사용할 때 다음과 같이 submit 방식을 사용합니다. 하지만 이 방법은 form 자체가 submit 되어야 하기 때문에 제약이 많습니다. 이 경우 다음과 같이 FormData를 이용해서 서버로 전송할 수 있습니다. 1. 테스트를 위한 서버 코드 작성 서버 코드는 Spring boot로 되어 있습니다. import java.util.List; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; impor..

javascript에서 소숫점 반올림하는 방법

프로그래밍을 처음 배우면 꼭 나오는 소수점 반올림을 javascript에서는 보통 이렇게 합니다. Math.round(123.4567 * 100) / 100 위 코드는 다음과 같은 원리로 동작합니다. 나타낼 소수점 아래자리 개수만큼의 10의 자승을 곱한다.(소수점 2번째 자리까지 표시한다면 10의 제곱인 100을 곱하고, 소수점 3번째 자리까지 표시한다면 10의 세제곱인 1000을 곱함) 입력값을 반올림한 수와 가장 가까운 정수 값을 반환하는 Math.round() 함수를 사용하여 정수로 변환한다. 곱했던 수 만큼 다시 나누기한다. 이렇게 하면 123.46이라는 숫자가 반환됩니다. 위의 방법보다 더 간단히 반올림할 수 있는 방법은 .toFixed()라는 메서드를 사용하는 방법입니다. 이 방법은 무려 In..

javascript - How to get value of selected radio button?

Hong Kim Lim get value 위와 같은 코드가 있다고 가정할 때, 선택된 라디오 버튼의 값을 구하는 방법은 다음과 같습니다. querySelector 이용 이 방법은 IE9 이상 및 기타 모든 브라우저에서 동작합니다. function getValue() { alert(document.querySelector('input[name="userName"]:checked').value); }​ checked 속성으로 유효성 체크 function getValue() { if (document.getElementById('r1').checked) { alert("r1 : " + document.getElementById('r1').value); } if (document.getElementById('r..

728x90
loading