본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[기초] Javascript30

Javascript 에니메이션 (svg, canvas, gif)의 렌더링 개발간 반짝반짝(?) 거리는 아이콘이 필요하여 아래처럼 svg를 활용하여 제작을 해 보았습니다. svg 엘리먼트로는 circle과 text 및 animate를 사용 하였습니다. 이렇게 제작한 엘리먼트를 원하는 기능에 붙여서 사용을 하였는데.. 10개 내외정도만 사용할때는 문제가 없었습니다. 그러다가 대략 3,000개 이상을 웹 브라우저에 그렸는데 브라우저가 먹통이 되었습니다. 뭔일인지 보려고 개발도구를 켜 측정을 해보니 아래와 같은 상황이 벌어졌습니다. animate 엘리먼트를 통해서 브라우저에서 지속적인 렌더링이 이루어지다보니... 3천개나 되는 많은 갯수를 감당하지 못하고 메모리소비 + CPU점유가 발생 하였습니다. html canvas를 사용하여도 CPU에서의 연산이 계속 발생하므로 비슷하게 느렸습.. 2023. 1. 13.
자바스크립트 Object(Json) 객체에서 원하는 값 찾기(Javascript find data from json) 어떤 개발자 커뮤니티 사이트에서 매번 같은 내용을 올리시는분이 있었습니다. 특정 데이터 값이 아래와 같이 존재할 때 해당 값을 찾는 기능을 필요로 하셨었습니다..흠... 아래 코드는 원하는 데이터를 찾는 함수샘플코드 입니다. let json = { "data":{"number":"111", "test":"asdfasd"}, "data2":{"number":"222", "test":"asdf23123"}, "data3":{"number":"333", "test":"g3453"}, "data4": [ {"address":"1111", "string":"asdf"}, { "address":"2222", "array":[ {"number" : 5678} , { "address" : "3333"} ] } ] };.. 2022. 8. 30.
Javascript for in 반복문 자바스크립트에서 사용되는 반복문인 for 명령어는 in 이라는 명령어와 같이 사용할 수 있습니다. 일반적으로 for in 문법을 사용하면 데이터의 인덱스(색인) 을 반환하는 것 으로 알고 있습니다. 그러나 결론부터 이야기하면 for in 반복문을 통해서 나온 대상은 단순한 인덱스라 할 수 없습니다. let array = ['a', 'b', 'c']; for(let i in array) console.log(i); //0,1,2 값이 반환됩니다. 자바스크립트(Javascript)에서 배열은 객체 입니다. 함수나 클래스가 아니기 때문에 prototype 프로퍼티를 갖지 않고 __proto__ 프로퍼티를 가지고 있습니다. 이러한 프로퍼티는 Array.prototype으로 상속을 받고, 이 Array 객체는 O.. 2022. 6. 20.
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.