CATEGORIES
파일에 있는 데이터를 불러오는 방법으로 load() 메소드를 사용하는 방법에 대하여 알아보려합니다.load() 메소드는 비동기 방식으로 특정 위치에 있는 파일의 객체 또는 문서를 불러올 수 있는 AJAX 메소드입니다. 이런 비동기 방식은 당연히 ajax()가 매우 익숙한데 이 메소드의 단축 메소드로 하는 일은 거의 동일합니다. 이런 단축 메소드는 get(), post(), getJSON()등이 이에 속합니다. 그럼 load() 메소드의 사용방법에 대하여 알아보도록 하겠습니다. 일단, load() 메소드의 사용방법은 아주 간단합니다. 아래는 간단한 사용방법입니다.$.load(url, data[Option], callback)// Ex) $.load('test.html', {bdn: 'js'}, functi
Last Modified : 2019-08-14 22:01:03
자바스크립트를 사용하여 비동기 AJAX를 사용하여 엑셀(Excel) 다운로드 받는 방법을 알아봅니다. 먼저 아래의 상황에서 ajax 다운로드를 수행하게 됩니다.- AJAX로 서버에 값을 전송- 전송된 값에 따라 엑셀(blob) 타입으로 서버에서 엑셀 파일을 리턴- 전달 받은 response를 다운로드 링크를 만들어서 클릭 이벤트를 실행- 다운로드 완료흠 ... 위 과정을 수행하기 위해서 처음에는 제이쿼리 $.ajax()를 사용하려 했는데 XMLHttpRequest 객체를 사용하는 편이 더 간단한 것 같아 이 방법을 사용했습니다. 여기서 가장 중요한 부분은 두 가지 입니다.! 잠깐 ~ Excel 다운로드에서 중요한 부분은?가장 핵심적인 부분은 다음의 두 개입니다.- new Blob를 만들고 타입에 엑셀 포맷을
Last Modified : 2020-09-16 14:42:11
자바스크립트를 사용하여 캔버스 요소를 이미지로 변환하여 서버에 비동기식 ajax로 전송하는 방법을 알아봅니다.# 자바스크립트 캔버스 이미지 서버로 파일 전달하기HTML5를 사용하여 Canvas 요소를 이미지로 변환하거나 저장할 수 있습니다. 그렇다면 변환된 캔버스 이미지를 서버에 ajax로 전달할 수 있을까요?캔버스 이미지를 서버에 ajax로 전달하기결론부터 얘기하면 가능합니다. 물론 과정은 조금 복잡하며 아래와 같은 순서를 따라야만 합니다.- Canvas 이미지를 데이터로 저장- 저장된 Canvas 이미지를 base64에서 디코딩- 디코딩된 값을 바이트 배열로 변환 후 저장- typed array인 8bit unsigned array로 변환- new blob() 생성자를 사용해 blob 값으로 변환- Fo
Last Modified : 2020-08-05 22:18:49자바스크립트에서 페이지가 모두 로딩된 후 함수 등을 호출하는 방법을 onload를 많이 사용합니다.그런데 만약 웹페이지에서 window.onload가 여러 번 사용하는 경우? 이 경우 예상과 달리 여러 번 호출되지 않고 단 한 번만 호출된다는 단점이 있습니다. 그럼 어떻게 해야하는지 대체할 방법을 알아봅니다.! 우선 onload 이벤트는 언제 필요할까요?만약 자바스크립트를 사용한 라이브러리를 만들었을 때 ... 그리고 이 라이브러리가 여러개이고 모두 페이지가 모두 로딩된 후 동작해야한다면 onload를 대체할 방법이 필요합니다.# window.onload 대체하는 방법그렇다면 바로 그 방법을 알아봅니다. 이 경우 생각할 수 있는 방법은 window.onload를 사용하는 대신에 바로 window.addEve
Last Modified : 2020-12-17 07:27:16
웹페이지에서 문서나 이미지 등을 다운 받는 기능을 구현하려고 합니다. 이 경우 만약 파일이름과 다른 특정 이름으로 다운로드 받게 하려면 어떻게 하면 될까요?# 원하는 파일명으로 다운로드 받기다운로드 기능을 구현할 경우 일반적으로 a 태그를 임의로 만들고 이 태그의 클릭 메소드를 실행시키는 방법이 많이 사용됩니다. 이때 a 태그를 생성하고 download 어트리뷰트를 추가 후 값을 설정하면 해당 파일의 이름으로 다운받게 됩니다.만약 자바스크립트에서 클릭시 동작하는 예제를 만들어보면 다음과 같이 작성할 수 있습니다.const linkEle = document.createElement('a');linkEle.src = "다운로드 파일 위치";linkEle.download = "다운로드시 파일 이름";linkEle
Last Modified : 2020-12-07 18:22:56
Python flask에서 파일을 업로드 할 경우 하나가 아닌 다수(multiple upload)라면 어떻게 해야할까요? 클라이언트측 html과 서버측 python 코드를 아래에서 알아보겠습니다.# Python flask에서 여러 파일 전송, 전달받기아래 예제를 통하여 html과 python 코드를 예제를 통해 알아봅니다. 먼저 파일을 전송하기 위해 간단한 입력폼이 필요합니다.@ upload.html<form method="POST" enctype="multipart/form-data" action="/uploadfile/"> <input type="file" name="file[]" multiple=""> <button type="submit">Submit</button></form>이때 중요한 부분
Last Modified : 2020-11-10 23:50:38
프론트 프레임워크 Next.js를 사용하는 웹 프로젝트에서 내부 및 외부의 스크립트 파일을 추가하는 방법에 대하여 알아봅니다.# next.js에서 script 파일 추가하기nextjs는 서버 사이드 렌더링을 위한 목적으로 많이 사용됩니다. next.js에서는 <script> 파일을 불러오고 싶을때 어떻게 사용할 수 있을까요? 크게 두 가지 방법으로 가능합니다.하나. 페이지가 열릴 때 함수를 사용하여 추가하는 방법둘. /page/ 라우팅 페이지에 추가하여 사용하기여기서는 두 번째 방법을 알아봅니다. 왜냐하면 가장 빠르고 쉬운 방법이기 때문입니다.! /page/ 라우팅 페이지에 추가하여 사용하기이 방법은 원하는 웹페이지만 쉽게 스크립트 파일을 추가할 수 있습니다. 서버 사이드 렌더링(SSR) 방식이므로 해당 페
Last Modified : 2020-07-13 20:59:31파일이 업로드 되기 위한 전체과정에 대하여 알아보려고 합니다. php는 파일업로드를 위해 관련된 다양한 함수 및 초변역변수 $_FILES를 제공합니다. 파일이 업로드되는 과정은 어떻게 될까요?1. 사용자가 브라우저를 통해 파일 업로드2. 전달된 폼 양식을 통해 서버로 파일 전송3. 전송된 파일이 서버의 임시 위치에 저장! 파일 업로드를 위해 필요한 폼 입력양식<body><form enctype='multipart/form-data' action='/save.php' method='post'><input type='hidden' name='MAX_FILE_SIZE' value='10000' /><input type='file' name='file' /></form></body>파일을 첨부하기 위한 폼양식은 다
Last Modified : 2015-11-15 15:17:53함수 오버로딩(Overloading)에 대하여 아시나요? 그렇다면 자바스크립트에서 함수 오버로딩을 비슷하게 구현하는 방법은 무엇일까요? 아래에서 알아봅니다.# 함수 오버로딩이란?전달된 인자에 따라서 다르게 동작하는 함수를 함수 오버로딩(Over Loading)이라고 부릅니다. 자바스크립트인 함수형 언어만 알고 있다면 함수의 오버로딩을 이해하는 것이 더 어려울 수 있습니다. 그 이유는 바로 자바스크립트는 자료의 타입을 선언하지 않기 때문인데 아래에서는 먼저 함수의 오버로딩이 왜 필요한가를 생각해봅니다.! 동일한 이름의 함수가 다른 동작을 하는 것이 가능한가함수의 이름이 같은데 다른 동작이 가능할까요? 예를들어 Plus()라는 함수가 존재한다고 생각해봅시다. Plus 함수는 전달받은 인자를 더해주는 간단한 동작
Last Modified : 2019-08-22 09:31:45이미지를 로딩할 경우 용량이 매우 큰 경우를 감안하여 완전히 로딩이 끝난 후에 추가하는 방법은 어떻게 할까요?var imgEle = new Image;위와 같이 인스턴스를 생성한 후 DOM에 추가하는 방법은 아래와 같습니다.# 제이쿼리인 경우$(imgEle).load(function () { // code).error(function () { // 에러에 대하여 처리}).attr('src', '파일명');# 자바스크립트 사용시imgEle = new Image;imgEle.setAttribute('src', '/');imgEle.onload = function() { // code};imgEle.src = '이미지 위치';아래는 addEventListner를 사용한 방법입니다.imgEle = new Im
Last Modified : 2017-09-21 00:18:28HTML Audio/Video 엘리먼트의 DOM메소드 load()가 하는 역할입니다.해당 DOM 요소의 load() 메소드는 비디오 태그가 가지고 있는 소스 및 설정을 적용하는 것이 아니라 업데이트를 하기 위한 태그입니다.즉 소스가 태그에 추가된 경우 load()를 사용하여 소스 및 설정 재적용할 필요는 없습니다.
Last Modified : 2017-04-25 15:06:00
모질라의 가장 잘 알려진 브라우저 Firefox(파이어폭스)의 정보 및 다운로드에 대하여 알아보겠습니다.# 파이어폭스 브라우저파이어폭스는 데스크탑과 모바일 버전으로 나누어집니다. 다운 받기 위해서는 아래의 링크에서 가능합니다.파이어폭스 다운로드(Download Link) 받기 클릭 >그렇다면 파이어폭스의 특징 및 장점은 무엇일까요?빠른 속도높은 수준의 웹표준 지향파이어버그를 사용한 개발에 효과적무료로 사용 가능일반적으로 크롬 또는 IE 사용자도 많지만 파이어폭스는 개발 및 디버깅에 큰 장점이 있는 다소 특화된 브라우저로 많은 사랑과 유저층을 확보하고 있는 브라우저 중 하나입니다. 또한 개발자도구는 사용하기 편리하고 빠른 속도 역시 장점이라 할 수 있죠.
Last Modified : 2019-01-07 06:06:55
웹개발에서 함수를 사용할때 배우게 되는 함수 오버로딩(Overloading)에 대하여 알아봅니다. 이 것은 무엇이고 자바 그리고 자바스크립트에서의 차이점은 무엇일까요?# 함수 오버로딩(Function overloading)먼저 함수 오버로딩에 대하여 알아보겠습니다. 함수 오버로딩(overloading)은 사전적의미로 본다면 over loading~ 뭔가가 전달되어 읽혀진다로 생각할 수 있습니다. 즉, 함수에 전달되는 것은 인자(arguments)이므로 전달된 인자가 어떻게 읽혀지느냐와 관련이 있습니다. 그 어떻게는 아래에 설명하겠습니다.함수(메소드) 이름은 동일하나 인자(매개변수)의 타입 및 개수가 다름 위와 같이 이름은 동일하나 전달할 인자의 타입이나 개수가 다름을 의미합니다. 자바를 예를들면 아래와 같
Last Modified : 2019-08-22 09:31:36AngularJS 앱을 로컬 개발 환경에서 실행하는 경우 ng 스크립트에서 자동으로 파일이 변경되면 리로드하도록 기본값이 설정됩니다. auro reload가 되는데요 ~ 만약 자동 리로드를 끄려면 어떻게 해야 하는지 알아봅니다.# AngularJS 로컬 개발시 자동 리로드 비활성화 하기방법은 간단합니다. 로컬 웹서버를 ng server로 띄울 때 옵션을 변경하면 되죠. 이때 사용할 옵션이 바로 --live-reload입니다.--live-reload false또는--no-live-reload이제 스크립트를 변경해야 합니다. 먼저 앱에서 package.json 파일을 열어 살펴보면 스크립트 목록에 아래와 같이 run 스크립트가 존재합니다."scripts": { "start": "ng serve", ...}이
Last Modified : 2020-03-29 10:38:03HTML5에서 파일 추가하는 방법에 Drag and Drop을 사용하는 방법입니다. 하나 또는 다수 파일을 드래그앤 드랍으로 추가하는~ 업로드하는 방법은 어떻게 될까요?
Last Modified : 2017-04-04 17:17:43php 프레임워크인 codeigniter를 사용하는 중에 파일업로드 허용 용량을 초과하였다는 에러가 발생하였습니다. 이 경우 해결 과정에 대한 방법과 접근 과정입니다.! codeigniter 업로드시 에러 발생php의 codeigniter는 너무 잘 알려진 프레임워크입니다. 이 프레임워크를 사용하면서 파일 업로드 기능을 수행중에 파일 업로드 용량을 초과하였다는 메시지가 발생하였습니다.처음에는 아무래도 프레임워크 설정 부분이 문제가 될 것으로 생각했습니다. 아마 업로드 설정 부분이 낮을 것으로 생각했는데 찾아보니 관련된 설정이 config에 존재하지 않더군요 ~ 또한 자바스크립트를 사용하여 업로드 크기를 제한하는 것도 아니었습니다. 결국 아무래도 php에 설정하는 업로드 용량에 문제인 것 같아 해당 설정 파일
Last Modified : 2021-07-12 20:22:45