WEB/JavaScript4

• 

  [Konva] 유사 CAD 프로그램 제작 - 성능 향상의 기록 Web으로 편집 프로그램 제작을 위해서 회사에서 선택한 것은 Konva.js 왜 선택했는지에 대해서는 넘어가고, 이미 konva로 프로젝트를 진행중이고, 성능 개선이 필요하다면 읽어보면 좋을 것 같다. 문제 상황 사내용으로 만드는 유사 CAD 프로그램이었다. 한 번에 그려지는 객체수는 (1)약 5만개 이상 그리고 각 객체는 (2)위치 이동이 가능해야하며 독립적이지 않고 (3)연관되어 있다. 성능 이슈 작은 개수는 충분히 편집이 가능할 정도의 성능이 나왔다. 하지만, 5만개 정도면 한 번 움직이는데 수 초가 걸릴 정도로 성능이 저하되었다. 도저히 편집기로 사람이 쓸 수 없을 정도였다. 크게 세 가지로 정리하면 1. 대량의 데이터를 한 화면에 보여줄 것 2. 한 화면에서 편집이 가능할 것 3. 1, 2가 너.. WEB/JavaScript 2023. 11. 20.

• [JavaScript] 즉시 실행함수/ 클로저 및 scope chaning 즉시 실행 함수 즉시 실행되는 함수 (function add(a, b){ console.log(a+b); }(3,4)); a, b라는 변수가 코드가 실행 후 사라지게 하고 싶을 경우, 즉시 실행함수 활용 -> 같은 변수명이 밖에서 사용되지 않았으면 좋겠을 경우, 활용하도록 한다. 호출없이 사용되기 때문에, framework에서 많이 사용된다. 클로저 디자인 패턴 중 하나로, javascript에는 접근제어자가 없기 때문에, 클로저를 활용하여 문제를 해결할 수 있다. ex) count -> java에서는 static private int count 선언하면 아주 간단히 해결 javascript에서는 function 내부에서 function을 return하도록 하여 return 된 function을 사용하도.. WEB/JavaScript 2023. 9. 6.

• [JavaScript] 기초 - 람다표기법(화살표 함수)/ for / 단축평가/ == vs === 자바스크립트에서는 함수를 매개변수로 전달한다.(Strategy Pattern과 유사하다. Java의 interface느낌으로) 함수를 표현하는 표기법 람다 표기법 = 화살표 함수 아래는 forEach를 실행하는 다양한 방법이다. var array = [100,200,300,400,500]; array.forEach(function(item){ console.log(item); }) for(var i of array){ console.log(i); } // in 키워드는 index를 가져옴 for(var i in array){ console.log(array[i]); } var log = function(i){ console.log(i); } var doc = function(item){ document... WEB/JavaScript 2023. 9. 6.

• [JavaScript] img src 변경하기 1. img 요소 가져오기 : 이 때 script가 해당하는 html(mainImg) 이후에 있어야 읽힌다. 이는 script를 읽는 도중에는 html이 안읽히기 때문, (javascript로 html 생성이 가능하기 떄문에 html read를 잠시 멈춤) 관련한 블로그 글 : https://blogpack.tistory.com/1087 document.getElementById("mainImg") //또는 $('#mainImg') 2. src 바꾸기 document.getElementById("mainImg").src = "원하는 img 경로 또는 주소" //또는 $('#mainImg').src = "원하는 img 경로 또는 주소" WEB/JavaScript 2022. 10. 15.