728x90 Web Development/Javascript7 [Javascript / Java] Fetch API 응답 결과 값을 변수에 할당하는 방법 A to Z (feat. async/await, Promise) Spring Legacy 프로젝트를 주로 진행하기 때문에, ajax를 자주 사용하곤 한다. 그리고 최근 프로젝트가 다시 만들어지면서, jQuery를 최신 버전으로 업데이트하여 사용하게 되었다. 여기까진 문제가 없었지만, 언제나 버전 업데이트가 불쑥 문제를 일으키곤 한다. 일단 구현할 기능은 다음과 같다. ⓐ 비밀번호를 입력 후 서버단으로 전송한다. ⓑ 서버에서는 전송 받은 비밀번호가 DB의 비밀 번호와 일치하는지 확인한다. ⓒ 확인 결과를 클라이언트단으로 넘겨준다. ⓓ 클라이언트 단에서는 결과에 따라 이어서 진행한다. 지금 적으면서 생각해보니, ⓒ단계 진행없이 서버단에서 다 처리한 후 처리 결과를 클라이언트로 넘겨주면 끝이었는데, 기능별로 메소드를 구성하려는 욕심을 내다보니 프로세스가 더 추가된 것 같다.. 2022. 11. 17. [Javascript / Spring Legacy / JSP] Spring Framework에서 자바스크립트 모듈 import 하는 방법 (without NodeJS) 오늘도 어김없이 스프링 프로젝트를 진행하는 도중, Javascript 라이브러리(three.js)를 쓸 일이 생겼다. 최근 Javascript 라이브러리는 NodeJS를 기본사양으로 하기 때문에 import/export로 모듈화하여 사용되는 경우가 많다. three.js도 그런 상황이었는데, 레퍼런스를 보고 따라하다보니 import를 해야했는데 NodeJS가 아니라서 에러가 지속적으로 발생하면서 해결되지 않았다. 그러나 결국 갖은 구글링과 시도 끝에 해결했는데 다른 사람들도 시간을 많이 낭비할 수 있을 것 같아 이렇게 공유하고자 한다. 참고로, three.js는 three.module.js 로 자바스크립트 모듈을 사용하는 방식과 three.js / three.min.js 와 같이 기존 방식을 모두 제공한.. 2022. 5. 18. [Javascript / JSP] 팝업창 load시 외부 script 소스 파일 참조 안 될 때 해결하기(feat. datepicker) 프로젝트를 진행하다보면 datepicker를 사용하게 되는 경우가 많다. 그런데 기본 페이지를 사용할 때는 문제없던 datepicker가, 팝업창에서 사용하려고 하면 먹통이 되는 경우가 곧잘 발생하곤 한다. 여러가지 문제가 있겠지만, 협업을 진행하는 프로젝트 사양을 다 정확하게 파악하고 해결하기란 쉽지 않다. 그래서, 오늘은 팝업창 내에 외부 script 파일이 참조 되지 않거나 불러올 수 없어 해결이 되지 않을 때, 쉽게 해결할 수 있는 방법을 공유하고자 한다. 예시는 datepicker 이지만 모든 외부 스크립트 참조에 해당하는 사항이니 유사한 문제면 다 해결할 수 있을 것이다. [ 해결 방법 ] 일단 기본 상황은 다음과 같다. 위처럼 기본 페이지 JSP에 각종 스크립트와 css가 참조되어 있는 상태.. 2022. 4. 8. [Javascript] Drag&Drop(파일 끌어다 놓기) 방식으로 파일 업로드 구현하기 프로젝트를 진행하면서 파일 업로드 시 드래그앤드롭으로 처리하는 기능을 구현해야했다. 다행히, 최근에 많이 사용되는 방식이기에 구글링을 통해 쉽게 코드를 발견할 수 있었다. 구현을 위해 참고한 블로그는 바로 고라니 님의 블로그 글이었다. 필자의 글은 실무 내용에 가깝기에, 상세한 내용을 알고 싶다면, 해당 글을 참고하면 좋을 것 같다. https://dev-gorany.tistory.com/254 글이 워낙 상세하게 설명되어있어, 쉽게 구현할 수 있었지만 내가 구현해야하는 프로젝트의 기능과는 차이점이 있었다. 글에서는 Drag&Drop을 하면 바로 업로드가 되는데, 나는 파일 선택까지만 진행이 되어야 했다. 파일 내용은 글을 저장할 때만 전달되어야했기에 file 내용만 바꾸는 식으로 코드를 변경해야했다. .. 2022. 4. 8. [Javascript] 현재날짜 yyyy-MM-dd 형태로 0채워서 출력하기(feat. padStart) 프로젝트를 진행하다보면 현재 날짜(오늘 날짜)를 yyyy-MM-dd 형태로 표현하는 것이 종종 요구되곤 한다. DB에서 날짜를 받아오는 것도 Date 타입 timestamp 타입 등의 사용으로 간혹 문제가 생기곤 하는데, 자바스크립트에서도 날짜를 따로 처리해야할 때가 있다보니 그냥 쉽게 정리해두려고 한다. - 요구 사항 - 1. 자릿수 형태를 맞출 것 2. 요일을 표시해줄 것 기존에는 따로 코드를 더 작성해서 0을 처리하곤 했었는데, 이번에는 Javascript에서 제공하는 padStart 를 이용해보기로 했다. padStart는 고정 자릿수와 채울 문자열을 파라미터로 받는 아주 간편한 내장함수다. 이를 이용해서 우선 코드를 작성해보겠다. initDate(); const initDate = () => {.. 2022. 2. 16. [Javascript / JSP] 원 버튼 다중 파일 다운로드(Multiple File all-download) 기능 구현(feat. iframe) 프로젝트를 진행하다가 '전체 파일 다운로드' 버튼을 클릭해 여러 개의 파일을 한 번에 다운로드해야하는 경우가 발생했다. 단순하게 개별 파일 다운로드를 반복문으로 처리하면 될 것 같다는 생각이 들었지만, 아래 에러 코드가 콘솔에 찍히며 난관에 부딪혔다. Error : java.io.ioexception 현재 연결은 사용자의 호스트 시스템의 소프트웨어의 의해 중단되었습니다 에러가 발생하고, 난관에 부딪힌 이유는 곧 밝혀졌다. HTTP가 한 번에 한 개의 파일만 전송 가능하기 때문이었다. ( 개별 파일 다운로드를 구현할 때, 서버에서 ModelAndView에 객체를 담아 다운로드를 구현하였는데 하나의 request에 다중으로 View를 구현할 수 없다 ) 그렇기에 처음으로 해당 기능을 구현하였을 때, 반복문의.. 2022. 1. 12. [Javascript] 객체(Object) 배열과 객체 간 비교(배열 내 객체 유무 확인 / Array Object == Object ) Javascript에는 객체 타입이 존재합니다. 객체 타입은 {name : "Tom", food : "pizza"}와 같이 Key, Value 값으로 편리하게 쓸 수 있는 장점이 있습니다. 그래서 실무에서는 이런 객체를 배열에 담고 쓰는 경우가 종종 있는데요. 그러나 배열에 넣고 쓰다보니 배열에 이미 들어있는 객체인지 중복 여부를 체크해서 처리해야되는 경우가 발생합니다. 단순한 타입 비교라면, 그냥 == 비교로 하면 되겠지만, 객체는 그렇게 할 수 없습니다. 객체 타입은 참조에 의해 할당되고 복사되는 타입으로, == 이나 Object.is() 비교를 사용했을 때, 객체 자체가 아닌 각각의 변수들이 저장하고 있는 객체의 참조를 비교하기 때문에, 객체 간 Key와 Value값이 일치해도 참조값은 다르기 때문.. 2022. 1. 7. 이전 1 다음 반응형
