Front-End
JS 자료형과 타입 변환 모음
자료형 변수에 저장할 수 있는 자료형은 다음과 같습니다. 문자열: String 숫자형: Number 논리형: Boolean 빈 데이터: undefined 자료형 구하기: typeof 지정한 테이너 또는 변수에 저장된 자료형을 알고 싶을 때 typeof를 이용하면 구할 수 있습니다. let num = 5; let str = "문자열"; let obj = {name: 'kim', age: 25}; console.log(typeof num); // numver console.log(typeof str); // string console.log(typeof obj); // object 문자열 문자열 → 숫자 Number(): Number("100"), Number(" ") 빈 문자열인 경우 0 반환 단항 + 연..
JS 호이스팅과 var, let, const 차이점
호이스팅 호이스팅(hoisting) JavaScript의 인터프리터가 함수나 변수 선언을 선언들이 속해 있는 스코프의 최상단으로 끌어올리는 동작을 의미합니다. 즉, 함수나 변수를 선언하기 전에도 사용할 수 있다는 것을 의미합니다. 코드 실행 전, 자바스크립트 엔진이 해당 스코프에서 선언된 함수와 변수를 모두 찾고, 함수 선언문을 가장 최상단에 끌어올리고 그 다음으로 변수 선언을 올립니다. 아래 예제들을 보면서 설명하도록 하겠습니다. console.log(value); var value = "hello"; // undefined 여기서 변수 value 선언이 끌어 올려지기 때문에 다음과 같이 해석됩니다. var value; // 변수 value 호이스팅 console.log(value); // value ..
JS 현재 창 인쇄하기: window.print()
JS는 window.print() 메서드를 통해 현재 브라우저 창을 인쇄할 수 있습니다. DOCTYPE html> 현재창 인쇄 인쇄
JS 데이터 표시하는 방법(innerHTML, write(), console.log(), alert())
innerHTML document.getElementById(id)를 사용하여 HTML 요소에 접근할 수 있습니다. 아래처럼 innerHTML 속성을 사용하여 HTML 내용을 작성할 수 있습니다. DOCTYPE html> h1 태그 div 태그 document.getElementById("test").innerHTML = "id가 test인 곳에 innerHTML 사용"; document.write() document에 출력하는 문법입니다. 아래 예제와 같이 HTML 문서가 로드된 이후, document.write()를 사용하면 기존 HTML이 모두 삭제됩니다. 때문에 document.write()는 테스트용도로만 사용하는 것이 좋습니다. DOCTYPE html> h1 태그 div 태그 TEST docu..
Vue.js 우편번호 서비스 연동하기 (Daum 우편번호)
Daum 우편번호 서비스를 이용하여 Vue.js 환경에서 우편번호 서비스를 연동하였습니다! https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net public/index.html index.html에 다음 코드를 넣어, 스크립트를 호출하게 해주어야 합니다. 컴포넌트에 다음 코드를 넣어주면 됩니다. 코드는 실제 사용한 코드와는 상관없이 용도만 알기 쉽도록 올렸습니다. 우편번호 찾기 위에 쓰인 변수들은 상단에 링크 걸어놓은 Daum 우편번호 서비스 가이드에 잘 설명..