본문 바로가기

javascript23

[Javascript][업무]파일 업로드 기능 구현하기

업무를 진행하면서 발생한 문제를 해결한 내용입니다. Jquery로 작성된 코드에서 문제가 있었습니다. 같은 파일을 연속적으로 업로드가 안 되는 문제였습니다. HTML과 Javascript 파일 업로드 방법 파일 업로드할 때, 사용하는 HTML 태그 업로드 이벤트를 실행하는 자바스크립트 - change() 사용 // 🛠 pure javascript document.querySelector('#fileUpload').change() => { var sFormData = new FormData(); sFile = document.querySelector('#fileUpload')[0].files[0]; sFormData.append('file', sFile); // 로직 작성 } // 🛠 Jquery $('#.. 2021. 7. 16.

[Javascript] (1)정규식 초 간단 필수 문법 정리-부정그룹

정규식 부정그룹 문법 2021. 5. 17.

Javascript 소수점 반올림 다루는 api

Math.ceil(소수) : 소수점 올림, 정수 반환 Math.floor(소수) : 소수점 버림, 정수 반환 Math.round(소수) : 소수점 반올림, 정수 반환 Math.ceil(소수)는 크거나 같은 값 중에서 가장 작은 정수를 integer로 반환합니다. Math.floor(소수)는 작거나 같은 정수 중에 가장 가까운 수를 integer로 반환합니다. Math.round(소수)는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환합니다. 참고 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global.. 2021. 4. 19.

[babel] 이제야 알게 된 babel의 기적. babel 학습하기.

2년 전에 스터디를 하면서 express를 잠깐 사용해 본 경험이 있습니다. 그 이후로는 전혀 사용해 보지 않았죠. 최근에 우아한 테크 러닝을 진행하면서 node가 설치된 서버에 express 프레임워크로 구축하고 개발하면서 에러가 발생했습니다. 개발한 코드를 실행하면서 node에서 발생한 에러였습니다. SyntaxError: Unexpected token export at Module._compile .. export랑 import 문법에서 에러가 자꾸 발생했습니다. 왜 안되지?...(웹 개발 2년 차) 원인 node에서 런타임 예외가 발생했습니다. node가 es6 이상의 문법에서만 지원하는 import와 export를 이해하지 못하고 에러가 나는 것이었습니다. 이 순간. 저는 깨닫고 말았습니다. 사.. 2021. 4. 2.

[Javascript] Web 이벤트 전파 막는 방법과 프론트 개발자가 반드시 알아야 하는 개념.

이벤트 버블링 하위의 객체에서 이벤트가 발생했을 경우, 상위 요소까지 이벤트가 전달되는 현상을 말합니다. 가장 하위 요소인 class_3을 눌렀더니, 콘솔에 모든 요소의 click 이벤트가 발생한 것을 확인할 수 있습니다. 이벤트 버블링이 발생한 현상입니다. 코드는 아래와 같습니다. Javascript에서 이벤트 버블링을 막는 방법 이벤트가 전파되지 않도록 하는 event 객체에 stopPropagation() 함수를 사용합니다. MDN Web API > Event > Event.stopPropagation() 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다. Vue.js에서 이벤트 버블링을 막는 방법 이 현상을 막는 방법은 다음과 같습니다. HTML 요소에서 이벤트 전파를 막는 방법입.. 2021. 3. 3.

[Javascript] 배열에 특정 원소가 있는지 찾는 방법

indexOf() 개인적으로 가장 편한 방법인 것 같습니다. 배열 안에서 찾으려는 값과 정확하게 일치(===)하는 첫번째 원소의 index를 리턴합니다. 만약 값이 없으면, -1을 반환합니다. indexOf()함수는 문자열에서도 사용할 수 있습니다. 문자열에서 특정 원소의 자릿수를 반환합니다. lastIndexOf() 그럼 반대로, 문자열의 뒤에서부터 찾으려고 한다면, 어떻게 하면 될까요? 문자열.lastIndexOf('찾을 문자열'); 을 하면 됩니다. 마찬가지로 찾는 문자가 없으면 -1을 반환합니다. includes() 배열이 특정값을 포함하고 있는지 여부를 true/false로 반환합니다. 2021. 2. 9.

[Javascript] Web API DOM 클래스 다루기

HTML 요소의 클래스 이름을 변경하는 방법. MDN 문서 : className 예시 코드 html kisBlog css //css .title-red { color: 'red'; } .title-blue { color: 'blue'; } Javascript //Javascript const title = document.querySelector('.title-red'); if (title.className !== 'title-red') { title.className = 'title-red'; } else { title.className = 'title-blue'; } 클래스 이름 변경하는 법 MDZ : Element.classList Element.classList 프로퍼티는 DOMTokenList를.. 2021. 2. 5.

[Javascript] HTTP 요청과 응답 처리하는 방법. 프론트 개발자가 알아야 하는

Javascript HTTP 통신 하는 방법 ⚡️ XMLHttpRequest MDN-XMLHttpRequest 객체 짧게 XHR이라고 부릅니다. XHR은 객체입니다. 서버와 통신을 위해서 사용됩니다. HTTP 프로토콜 뿐만 아니라 file, ftp 도 지원합니다. 페이지 갱신 없이 필요한 데이터를 받아 올 수 있는 장점이 있습니다. ⚡️ fetch() MDN Fetch Web API ES6에 생긴 기능입니다. Javascript의 Web API의 비동기 네트워크 통신 함수입니다. XHR 대체제로 나온 기능입니다. 브라우저에 있는 Javascript 엔진을 통신 기능으로 사용합니다. 📩 GET 요청 사용 예시 //MDN 코드 사용 fetch('http://example.com/movies.json') .t.. 2021. 2. 1.

[Javascript] 제대로 된 문자, 숫자, 배열 객체 원소 정렬을 사용하는 방법

안녕하세요. 회사에서 에 문자와 숫자를 정렬하는 기능을 추가해야 했습니다. v-data-table vuetify의 에는 정렬 기능이 기본적으로 있어서 처음엔 을 사용했었습니다. 그런데, 표에 의 에 checkbox까지 들어가야 하는 디자인의 요구사항이 있었습니다. 물론 에도 에checkbox를 넣고 사용할 수 있는 기능이 있지만, 디자인대로 구현하기에는 어려움이 있었습니다. 그래서, 차라리 테이블의 목록을 정렬하는 기능을 제가 만드는 것이 낫겠다고 생각했습니다. 그래서 이번 포스팅에서는 Javascript를 사용해서 api를 통해서 받아온 [{},{},{} ...] 배열을 어떻게 정렬을 하는지에 대해서 알아보기 위해서 이번 문서를 작성하게 되었습니다. 재미있게 봐주세요. *목차 1. Javascript .. 2021. 1. 29.

[Javascript]자바스크립트에서 날짜 사용법

개요 api를 통해서 날짜 데이터를 전달할 때에는 어떤 값을 넘겨주는 것이 맞는 것일까요? 2021-01-12? 아니면, 밀리초? Javascript 내장 날짜 함수 Date() Date 객체는 밀리초의 값을 가집니다. 현재 날짜 구하기 const date = new Date(); // Mon Aug 23 2021 12:00:45 GMT+0900 (일본 표준시) 컴퓨터는 날짜 정보의 차이를 날짜 +시간 정보를 밀리세컨드 단위로 변환한 후에 계산을 합니다. 밀리 세컨드는 1/1000초입니다. let 객체명 = new Date(밀리 세컨드); let 객체명 = new Date(년,월,일,시,분,초,밀리 세컨드); let 변수명 = new Date('2020.04.22'); // Mon Apr 22 2019 .. 2021. 1. 28.

티스토리툴바