반응형 프로그래밍언어 & 프레임워크/JavaScript13 [JS] PDF.JS 로 pdf를 이미지로 변환해서 보여주기 구현하게 된 배경회사에서 웹뷰이지만 모바일에서 PDF가 이미지로 보여야 한다는 요구사항을 받았습니다.여기서 제약사항은 HTML, CSS, JavaScript만 사용해야 한다는 것입니다.결과물은 페이지가 한 개만 있는 pdf 파일을 웹뷰로 보여주는 게 끝이었습니다(정적인 페이지). 모바일에서 웹뷰를 띄우고 거기다가 PDF를 이미지로 변환하는 것이기 때문에 너무 무거우면 안 된다고 생각했습니다.그래서 바닐라 자바스크립트를 사용해서만 구현하게 되었습니다. PDF.js란?웹 표준 호환 HTML5 Canvas를 사용해 PDF 파일은 렌더링 하는 자바스크립트의 라이브러리입니다.모질라 제단의 Andreas Gal가 2011년에 런칭 했습니다.웹 브라우저에서 기본적으로 PDF 문서를 볼 수 있는 방법을 제공하기 위해.. 2022. 6. 18. [모바일]이미지 터치 슬라이더 및 자동 슬라이드 기능 구현(자바스크립트) 모바일 기준으로 이미지 터치 슬라이더를 구현해봤습니다. 터치 슬라이더는 이미 다양한 블로그에서 정리를 해놔서 구현하기 쉬었습니다. 그런데 여기서 사람이 직접 슬라이드를 넘기는 것이 아닌 자동으로 시간이 지나면 슬라이드 되는 기능을 추가해봤습니다. 자동으로 슬라이드가 되는 기능은 setInterval을 사용하면 쉽게 구현 할 수 있지만, 터치를 한 순간에는 setInterval이 멈춰야 하기 때문에 그 부분에서 고민을 많이 했습니다. HTML 구현 코드 HTML은 위의 코드를 참고하셔도 괜찮고 직접 작성하셔도 됩니다. 여기서 class 값으로 JS에서 querySelector를 사용하기 때문에 그 부분만 유의하시면 될 것 같습니다. CSS 구현코드 body { margin: 0; display: flex;.. 2022. 5. 12. [노마드코더]반드시 "함수형 프로그래밍"을 알아야 할까? 참고자료 유튜브 노마드코더 채널 [반드시 "함수형 프로그래밍"을 알아야 할까?] => 링크 😎 개발자는 반드시 함수형 프로그래밍을 배워야 한다! '함수형 프로그래밍'은 코드 작성 '스타일'이라고 할 수 있다. 함수형 프로그래밍을 배우고 컨셉과 아이디어를 좋아한다면, 해당 개념을 좋아하는 언어에 적용할 수 있다. Clojure와 Scala는 함수형 프로그래밍으로 아예 설계된 언어이다. 배워두면 무슨 언어로 코드를 작성하든 도움이 된다! 이미 좋은 기술과 경력을 갖춘 시니어 개발자들은 점진적으로 함수형 언어를 사용하게 된다. => 점차 커리어가 발전함에 따라서 함수형 언어를 사용 함수형 방식에서는 버그 자체가 발생하기 어렵다. => 함수형 코드에서는 버그가 쉽게 숨겨지지도 않는다. 😀 함수형 프로그래밍은 일.. 2022. 3. 27. Ajax 개념관련 정리가 잘 되어있는 사이트들 * Ajax란? Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. 표현 정보를 위한 HTML (또는 XHTML) 과 CSS 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다). * AJAX란 무엇인가? https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%.. 2021. 7. 2. 지역변수와 전역변수(자바스크립트, JavaScript) 변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다. 지역변수 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 지역 변수(local variable)는 함수 안에서만 접근할 수 있습니다. 전역변수 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다. 전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에서 접근할 수 있습니다. let x = 3; // 글로벌 변수, 전역 변수(Global Variable) function myFunction(){ console.log(x); } myFunction(); // 3 cons.. 2021. 2. 25. DOM에 대해 잘 정리되어 있는 사이트들(DOM이란?) * HTML에 대한 사전지식을 가지고 DOM을 공부 하시는걸 권장드립니다. HTML을 무료로 배울 수 있는 사이트들 DOM이란? Document Object Model의 약자로 문서(Document)를 객체 모델(Object Model)로 구현한 것입니다. * 문서 객체 모델(DOM 위키백과 링크) DOM은 HTML문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었습니다. 이런 모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 사용합니다. 위 사진을 보면 DOM과 HTML이 엄연히 다른 것임을 알 수 있습니다. DOM에 대해 잘 정리되어 있는 사이트들 ddinggu velog(간단하지만 포인트를 정리한 블로그) 브라우저, HTML, DOM의 정의와 서로의 상관관계 DOM과 HT.. 2021. 2. 16. 이전 1 2 3 다음
