728x90 반응형 자바스크립트15 React의 SPA(Single Page Application) 장점 과 단점 1.장점 기존에 서버는 모든 html을 전달하여 화면에 보여주었다. 그러다보니 페이지를 이동할때마다 새로운 html을 받아오고 리소스를 전달받아 해석하여 화면에 보여줬다. 하지만 요즘 웹에선 제공되는 정보가 정말 많기에 새로운 화면을 보여 주어야 할때마다 서버 측에서 모든 뷰를 준비한다면 성능상 문제가 발생할수있다. 예를들어 트래픽이 너무 많이 나올경우 사용자가 몰려 서버에 부하가 쉽게 걸릴수 있다. 그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다. 1.단점 spa의 단점은 앱의 규모가 커지면 자바스크립트 파일이.. 2021. 5. 8. canvas의 scale에 원리! *광고 클릭은 제게 큰 힘이됩니다! 업무를 함에 있어 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.. 2021. 3. 18. resize된 canvas위에 대한 mouse좌표 스케일링 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 2021. 3. 18. XMLHttpRequest를 통해 canvas의 그린 이미지를 서버에 던지기 //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.. 2021. 2. 26. What is Webpack? 웹팩이란 무엇일까? What is WebPack? WebPack 은 브라우저에서 자바스크립트 파일들을 묶어서(번들링) 사용하기 위함이며, 어떠한 자원(js,css,png,jpg등)이나 자산 등을 전송,구축 패키징이 가능하게 만드는 도구이다. 2000년대 초 쯤만하더라도 정적인 페이지를 운영하는 형식이라 페이지가 변화할때마다 새로운 HTMl을 요청하여 화면을 그렸다. 그 당시엔 자바스크립트는 DOM을 조작하는 간단한 역할만 했기때문에 HTML에 script태그를 넣는것을 충분햇다. 요즘 SPA(single page application)은 하나의 HTML에 수백개의 자바스크립트 파일을 포함하기에 비중이 어마어마하게 커졌다. 자바스크립트 파일이 많아지면서 기존에 생성된 전역변수가 덮어지는 실수가 생기기도 하고 많은 양의 스크립.. 2021. 1. 31. javasciript closure(클로저)란?? 클로저를 이해하려면 자바스크립트가 어떤 변수의 유효범위를 지정하는지 (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()함수 본문에서만 사용할.. 2021. 1. 7. 이전 1 2 3 다음 728x90 반응형
