갴발자 디찌 갴발자 디찌

1.장점 기존에 서버는 모든 html을 전달하여 화면에 보여주었다. 그러다보니 페이지를 이동할때마다 새로운 html을 받아오고 리소스를 전달받아 해석하여 화면에 보여줬다. 하지만 요즘 웹에선 제공되는 정보가 정말 많기에 새로운 화면을 보여 주어야 할때마다 서버 측에서 모든 뷰를 준비한다면 성능상 문제가 발생할수있다. 예를들어 트래픽이 너무 많이 나올경우 사용자가 몰려 서버에 부하가 쉽게 걸릴수 있다. 그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다. 1.단점 spa의 단점은 앱의 규모가 커지면 자바스크립트 파일이..

*광고 클릭은 제게 큰 힘이됩니다! 업무를 함에 있어 canvas를 많이 이용하는데 resize를 위해 scale조정을 많이 하는것을보고 정리를 해야할거같아 글을쓴다. 1.CanvasRenderingContext2D.scale 기본적으로 캔버스의 한 단위는 1픽셀이다. scale은 배율을 조정하는것으로써 0.5 배율이며 단위크기는 0.5픽셀이되면 스케일링이 2배이면 한 다위가 2픽셀이되도록 단위크기가 증가한다. .scale(x,y) x :수평 방향의 배율입니다. 음수 값은 수직 축에서 픽셀을 뒤집습니다. 값은 1수평 확장이되지 않습니다. y :수직 방향의 배율입니다. 음수 값은 가로 축에서 픽셀을 뒤집습니다. 값은 1수직 확장이되지 않습니다. 예를들어보자 class App{ constructor(){ t..

let rect = this.canvas.getBoundingClientRect(); let scaleX = this.canvas.width/rect.width; let scaleY = this.canvas.height/rect.height; //resize된 캔버스 마우스 pos 재정렬 this.mousePos.x = (e.clientX - rect.left)*scaleX this.mousePos.y = (e.clientY - rect.top)*scaleY

//canvas에 그려진 이미지를 base64로 변환 var dataurl = this.canvas.toDataURL("image/png"); var xhr = new XMLHttpRequest(); var data = { searchimage: dataurl }; xhr.crossOrigin = "Anonymous"; xhr.onload = function() { if (xhr.status === 200 || xhr.status === 201) { console.log(xhr.responseText); } else { console.error(xhr.responseText); } }; xhr.open('POST', '서버IP'); xhr.setRequestHeader('Content-Type', 'ap..

What is WebPack? WebPack 은 브라우저에서 자바스크립트 파일들을 묶어서(번들링) 사용하기 위함이며, 어떠한 자원(js,css,png,jpg등)이나 자산 등을 전송,구축 패키징이 가능하게 만드는 도구이다. 2000년대 초 쯤만하더라도 정적인 페이지를 운영하는 형식이라 페이지가 변화할때마다 새로운 HTMl을 요청하여 화면을 그렸다. 그 당시엔 자바스크립트는 DOM을 조작하는 간단한 역할만 했기때문에 HTML에 script태그를 넣는것을 충분햇다. 요즘 SPA(single page application)은 하나의 HTML에 수백개의 자바스크립트 파일을 포함하기에 비중이 어마어마하게 커졌다. 자바스크립트 파일이 많아지면서 기존에 생성된 전역변수가 덮어지는 실수가 생기기도 하고 많은 양의 스크립..

클로저를 이해하려면 자바스크립트가 어떤 변수의 유효범위를 지정하는지 (Lexical scoping)을 먼저 이해 해야한다. 1.Lexical scoping(어휘적 범위 지정) 아래 코드를 보자 function init() { var name = "Chrome"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); } init(); init()함수는 지역변수 name과 displayName()을 생성한다. displayName()은 init()안에 정의된 내부 함수이며 init()함수 본문에서만 사용할..

*글을 읽기전 광고 클릭은 제게 큰 힘이됩니다! 크롬에서는 replaceall을 사용하여 문자열에 공백을 전부 치환할수있다. 하지만 역시 문제는 실제 SI사업에서 explorer 11을 사용하는곳이 많아 explorer 11에서는 replaceall이 사용이 불가능하다. 그렇다면 어떻게 replaceall처럼 사용할수있을까? 바로 javascript 에서 존재하는 replace로 가능하며 replace(/"치환문자열"/gi,"") 정규식을 통하여 모든 문자열을 바꾸는식으로하면된다 정규식 gi설명은 g: 발생할 모든 pattern에 대한 전역 검색 i: 대/소문자 구분안함 m: 여러줄 검색 이런식으로 사용한다. 상급 개발자로 가기 위해선 정규식을 잘사용하는것도 한가지 방법이다.

1.Javascript Object 복사 javascript Object를 복사하는 방법은 2가지가 있다 첫번째는 얕은복사(Shllow Copy) 가 있고 두번째는 깊은 복사(Deepcopy)가 있다. 이둘의 차이가 무엇이냐고 물었을때 답할수있는것은 바로 새로운객체 생성되느냐 참조하느냐이다. 위 사진과 같이 객체를 생성하고 item,bitem속성을 넣어주고 복사를해보자 이것을 보고 깊은 복사(Deep Copy)라고 한다 얕은 복사에 특징은 메모리를 참조한다는것이고 만약에 a를 수정할시에 b는 a를 참조하고 있으므로 아래와같이 b의 속성들도 변한다는것이 특징이다. 얕은복사(Shllow Copy)는 참조하는것이 아니라 새로운 객체를 생성하는것으로 볼수있다. 위 콘솔 처럼 c라는 Object를 생성하고 속성을..