방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Javascript72 Javascript 프로퍼티 정의하기 자바스크립트(Javascript) 기초에서 나오는 개념 입니다. 자바스크립트에서 프로퍼티 정의는 프로퍼티를 추가하면서 해당 프로퍼티의 속성(attribute) 명시적으로 정의하거나 기존 프로퍼티의 속성을 재 정의하는 것을 의미 합니다. 쉽게 이해하기 위해 코드를 살펴보아야 하겠습니다! 아래와 같은 객체가 존재한다 가정하여 봅니다. let data = {}; data라는 변수에 속성을 정의하려면 일반적으로 아래처럼 할 수 있습니다. let data = {}; data.textData = '텍스트 데이터'; data.integer = 1234; console.log(data); textData라는 키 값으로 문자열 데이터를 대입하였고, integer라는 키 값으로 숫자 1234를 대입 하였습니다. 이러한 데.. 2022. 6. 20. Javascript new 연산자 없이 호출되기 방지 자바스크립트에서 생성자 함수를 만들기 위해서는 new 연산자를 사용합니다. 일반함수는 구현된 함수를 호출하여 사용한다면, 생성자 함수는 함수 자체를 인스턴스화 하여 만들어 사용 합니다. 일반함수 호출방법과 생성자함수 호출방법에서의 차이점 중 중요한 한가지를 꼽는다면, 바로 this 값 여부 입니다. 아래 간단한 함수를 정의하여 보았습니다. function world(){ this.name = 'hello world'; this.print = ()=>{ console.log('print 실행') } } let hello = world(); //hello값은 없습니다. window.name; //전역변수 name이 생성 되었습니다. window.print(); //전역함수 print가 생성 되었습니다. le.. 2022. 6. 15. Javascript Map 객체 문자로 변경(Javascript map object stringfy) 자바스크립트에서 맵(map)객체는 일반적으로 JSON.stringfy를 통해서 문자로 치환되지 않습니다. 아무생각없이 JSON.stringfy 함수를 사용해서 치환했는데 값이 나오지 않아서 조금 당황했던 것 같습니다. stringfy함수와 parse함수에는 변경할 값에 대한 규칙을 두번째 파라미터로 받습니다. 옵셔널한 기능이지요. 이러한 규칙을 함수형태로 만들어 사용하면 대체 가능한 기능을 만들 수 있습니다. //맵을 문자로 function replacer(key, value) { if(value instanceof Map) { //형식 확인 return { dataType: 'Map', //정의 value: Array.from(value.entries()), //entries 함수를 통해 배열로 변경(.. 2022. 5. 26. 새로운 자바스크립트(타입스크립트) 런타임 환경, 디노(Deno) node.js에서 자바스크립트(타입스크립트)는 v8기반의 엔진을 통해 실행 합니다. 그리고 패키지 관리는 npm을 통해 관리를 합니다. 그런데 요 디노(deno)라는 녀석이 이러한 개발 및 런타임 환경을 좀 더 편리하게 해 줄수 있다고 하였습니다. 구글링한 디노의 특징은 대략 아래와 같았습니다. - 타입스크립트(TypeScript)를 바로 실행할 수 있습니다. - 의존성 검사기(dependency inspector)와 코드 포매터(code formatter)를 가지고 있습니다. - 실행할 수 있는 파일 1개로 만들어 줍니다. 역시 머리보다 몸이 먼저인 사람은 한번 해봐야 뭔말인지 알 수 있을 것 같습니다. 백문이 불여일견! 먼저 디노(deno)를 설치하도록 합니다. 윈도우 기반이면 아래 명령어를 통해 쉽.. 2022. 5. 16. Javascript 간단한 알림 기능(Alert, alarm, toast) 핸드폰을 사용하면 간단한 알림메시지를 볼 수 있습니다. 이러한 기능을 Toast라고 불리는데(아이폰은 토스트라 불리우지 않을 수도 있습니다..ㅎ) 웹에서 간단하게 구현하기 위해 만들어 보았습니다. 구동모습은 아래와 같습니다. flex 속성을 부여하였기 때문에 브라우저 크기에 맞추어서 알아서 가운데로 이동하여 줍니다. 물..론 익스플로러 사용자라면 동작을 안할 수도 있습니다..ㅠ 위 내용에 사용된 소스코드 입니다. 딱히 어려운 코드는 아니므로 기능을 수정하시는 데 어렵지는 않을 것 같습니다. 굳이 부모 노드에서 자식 노드를 다시 생성하지 않아도 되는데.. 브라우저의 돔 접근을 최소화 하기 위해서는 조금 고민할 필요는 있겠습니다. 궁금한점이나 문의사항은 언제든지 연락주세요! 👻 2022. 4. 29. 'import' is only available in ES6 (use 'esversion: 6'). (W119) vs코드에서 간혹 만나는 경고문구 입니다. 개발하는 데 불편하므로 가급적 해결하고 넘어가는 것이 좋습니다. jsHint 에서 ES6문법이 적용되지 않아서 생긴 것이므로 아래처럼 간단한 방법으로 해결 가능 합니다. 1. 작업중인 root 폴더에서 .jshintrc 파일을 만들어 줍니다. 2. 키 값으로 esversion을 입력하고 값을 6으로 설정 해 줍니다. { "esversion": 6 } 궁금한점 또는 틀린부분 언제든 연락주세요!👻 2022. 3. 16. 이전 1 2 3 4 5 ··· 12 다음
