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

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

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


자바스크립트22

자바스크립트 Promise 프로미스는 자바스크립트에서 동기 방식 처리를 위해 생긴 기술이다. 즉, 어떠한 행위를 걸어 놓고선 그 행위가 끝나면 다음 행위를 하라는 기술이다. 간단하게, ajax같은 기술을 사용하면 데이터를 받으면서 다른행위를 할 수 있는 것과 반대되는 개념이다. 1번부터 5번까지의 할 일이 있다면 반드시 1번 끝난 이후에 2번하라 라고 명령을 할 수가 있다. 아래 예제코드를 보면, function method(param){ //함수 선언 return new Promise(function(resolve,reject){ //프로미스 객체로 리턴 내부의 변수는 당연히 바꾸어서 사용 가능하다. if(param != null){ resolve('good working'); //resolve는 프로미스의 고유 기능, 성공시 .. 2019. 4. 27.
Formdata를 활용하여 ajax로 파일전송 하기 jquery.를 활용하다 보면 다량의 파일을 비동기 방식으로 전송해야 되는 요구사항을 많이 만난다. 사용자 입장에서는 화면이 바뀌지 않고 파일만 보내기 때문에 해당 페이지에서의 정보가 바뀌거나 새로고침이 되지 않아서 매우 편리하다. 이를 위해서는 Javascript에서 지원하는 formdata라는 객체를 활용하면 쉽다. //아래 내용이 일반 key, value로 전송되는 값이다. const sendingData = new FormData(); sendingData.append('id',1234); sendingData.append('text','텍스트'); //아래 부분은 input type file에서 파일 데이터를 가져와서 key, value로 전송하는 부분이다. //file1과 file2는 보내는 .. 2019. 4. 26.
Html 캔버스 Hover 이벤트 만들기 Html 캔버스에서는 그림을 그린 다음 그림을 1개의 객체로 보관하는 것이 아니라 그림 통째로 보관한다. 즉, html에서 div태그로 여러가지 그림을 그리면, 각각 이벤트나 움직임을 줄 수 있지만, 캔버스에서는 그렇지 않다. 왜냐하면 캔버스에서 객체는 1개이고, 그림을 사각형, 원형으로 그리더라도 그림1개로 저장되기 때문이다. 이를 해결하기 위해서는 수동으로 만드는 방법 밖에 없다. 원리는 간단하다. 사용자가 그림을 그릴 객체의 정보를 Javascript에서 배열이나 Object로 저장을 하고, 캔버스에서 마우스 이벤트를 감지하여 해당 영역에 값이 들어와있는지 계산하면 된다. const price = [50,50,20]; //x좌표, y좌표, 원 크기 const ctx = $(캔버스)[0].getCon.. 2019. 4. 26.
(기본/기초) Javascript 배열 Map, Filter, Reduce 자바스크립트 배열에서 forEach나 if문을 활용해서 나름 필터기능을 사용하고는 했었다. 함수형 기법을 조금 적용해 보면, 그러한 행위보다는 위에 나온 3가지 메서드를 활용하는 방법이 조금 더 효율적이고 코드가 깔끔 해 진다. Map은 배열 내부의 데이터를 변환하는 메소드 이며, Filter는 true, false를 반환하여 if문의 효과를 가져온다. Reduce는 데이터의 결과를 단일로 만드는 기능인데..필터기능이 추가된 것이라 보면 될 것 같다. 아래 소스코드를 보자. var array = [1, 2, 3]; array = array.map((res)=>{ return res * 2}); console.log(array); //1,2,3 배열값이 *2가된다. array = array.filter((.. 2019. 4. 26.

티스토리툴바