[javascript] 화살표 함수와 일반 함수의 차이
·
과거의 이력/javascript
https://hhyemi.github.io/2021/06/09/arrow.html JavaScript - 화살표 함수와 일반 함수의 차이 - CODE:H 화살표 함수(Arrow Function)란 화살표함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한표현으로 간단하게 사용가능하다. function fun() { // 일반함수 ... } const arrFun = () => { // hhyemi.github.io
[js] Ajax와 Axios 차이
·
과거의 이력/javascript
웹개발을 하다보면 클라이언트와 서버간 데이터를 주고받기 위해 비동기 HTTP 통신을 하게된다. 이번에는 현재 Vue 개발하면서 사용중인 Axios와 Ajax를 비교하여 정리하려고 한다. 📝 AJAX (Asynchronous Javascript And Xml) Ajax의 뜻을 보면 비동기식 자바스트립트와 XML이란 의미임을 알 수 있다. 자바스크립트를 이용해 클리이언트와 서버간 데이터를 주고받는 HTTP 통신이다. javascript로 Web 화면에서 데이터를 부르거나 조회하고자 할때, XMLHttpRequest(XHR) 객체는 반드시 필요하다. 이를 통해페이지 전체를 갱신할 필요 없이 필요한 데이터만 불러올 수 있다. 📌 특징 크게 3개자 형식으로 데이터를 전송한다. 1. CSV - , 로 데이터 속성을..
[js] 현재날짜 추출하기 (영어를 한글로)
·
과거의 이력/javascript
아래와 같은 영문으로 된 현재날짜를 년도, 월, 일, 요일로 뽑아내는 방법은 다음과 같다. Fri Jul 08 2022 00:00:00 GMT+0900 1. 년도 추출하기 getFullYear() 메소드 사용 console.log(date) // Fri Jul 08 2022 00:00:00 GMT+0900 /***** 년도 추출 *****/ date.getFullYear() // 2022 참고링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear 2. 월 추출하기 1. getFullYear() 메소드 사용 2. Intl.DateTimeFormat() 메소드 사용 console.log..
[js] 객체(Object) 특정 value값 확인하기
·
과거의 이력/javascript
dom 요소의 클래스 목록을 확인하면서, 특정 클래스 존재 여부를 판단해야하는 필요성이 있었다. 객체에 특정 값이 있는지 확인은 다음과 같이 할 수 있다. 1. 객체 형태 let classList = event.target.classList console.log(classList) 출력 >> {"0":"apple","1":"banana"} classList라는 변수가 내가 확인하고자 하는 객체이다. 2. value값만 리스트로 뽑아내기 let classListValues = Object.values(classList) console.log(classListValues) 출력 >> ['apple', 'banana'] 3. 특정값 여부 찾기 (메소드 최종 결과) let result = Object.value..
[Error] Uncaught (in promise) NavigationDuplicated 에러 해결하기
·
과거의 이력/javascript
에러 프로젝트 라우터 이동시 콘솔에 다음과같은 에러가 발생했다. Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/test". 이는 같은 라우터로 router.push('path')를 하게될때 발생한다. 위의 경우는 /test 링크에서 /test로 이동하려 할때 발생하는 에러이다. 해결방법 1 $router.push()의 에러 예외처리가 되지 않아 기본으로 콘솔에 에러가 찍힌다. catch문으로 위 에러를 잡아주는 방법이 있다. this.$router.push('/') 에서 this.$router.push('/').catch(()=>{}); 로 catch만 추가해주면된다. 하지만 이방..
[js] 이미지 404 에러 (img 404 error)
·
과거의 이력/javascript
이미지 경로를 포함한 객체에서 경로를 못읽을때 발생하는 404 에러 해결방안이다. (나의 개발환경은 vue.js 이다. 객체를 v-for로 반복문을 통해 호출하고, 객체의 path 값을 이미지 경로로 사용하여 렌더링한다.) 상황 1. HTML 부분 (vue.js 의 template) 객체의 이미지 경로는 다음과 같이 호출하였다. 2. 사용 객체 let imgArr = [ { name: '테스트 이미지', path: '@/assets/img/my-img.png' } ] 호출 대상이 되는 객체는 다음과 같은 형태이다. 이때 빌드를 수행하면 아래와 같은 404 에러가 발생한다. 해결방안 에러의 원인은 다음과 같다. imgArr 배열의 path 값을 넘겨받을때 ('@/assets/img/my-img.png'),..
[javascript] 자바스크립트 구조분해할당 (직관적인 코드를 짜는법)
·
과거의 이력/javascript
기본 선언방식의 아쉬운점 사실 로직을 짜다보면 가독성을 높이기 위해 변수를 선언하는 경우가 있다. 예를어 아래처럼 사용자 정보가 담긴 배열이 있다고 하자. (설명을 위해 복잡한 인덱스를 만들어보았다.) // 사용자 아이디 userInfoArr[0][1].userId[0]; // 사용자 이름 userInfoArr[0][1].userName[0]; // 사용자 주소 userInfoArr[0][1].userAddr[0]; 특정 값을 반복적으로 사용해야하는 경우가 있다고 할때 아래처럼 코드의 길이를 줄이고 가독성을 높이기 위해 명확한 뜻을 가진 변수명을 선언하곤 한다. const uInfo = userInfoArr[0][1]; uInfo.userId[0]; uInfo.userName[0]; uInfo.userA..
[javascript] 자바스크립트 소팅 sort() (큰수가 먼저 정렬되는 이유..?)
·
과거의 이력/javascript
sort() 란? sort 메서드는 배열의 요소를 정렬할때 사용하는 함수이다. MDN에서는 기본 구문을 아래와 같이 정의한다. arr.sort([compareFunction]) * 대괄호[] 는 괄호 안의 매개변수가 생략이 가능하다는 의미이다. 정렬의 경우 매개변수가 있을 경우와 없을 경우, 값이 다르게 출력되는 경우가 발생한다. 실제로 정렬 알고리즘을 풀면서 원하는 출력값이 나오지 않아 내용을 정리해보고자 한다. 10 이 2보다 먼저 정렬된다? 다음과같은 배열이 주어졌을때 sort 메서드로 정렬을 수행한 수 0번째 인덱스 값을 추출하려 한다. 2가 가장 작고, 7, 10 순으로 커지니 출력 기댓값은 2였다. 하지만 실제로는 10이 출력된다. 대체 왜일까? let sortArray = [7, 10, 2]..