프론트엔드/javascript (20) 썸네일형 리스트형 [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 차이 웹개발을 하다보면 클라이언트와 서버간 데이터를 주고받기 위해 비동기 HTTP 통신을 하게된다. 이번에는 현재 Vue 개발하면서 사용중인 Axios와 Ajax를 비교하여 정리하려고 한다. 📝 AJAX (Asynchronous Javascript And Xml) Ajax의 뜻을 보면 비동기식 자바스트립트와 XML이란 의미임을 알 수 있다. 자바스크립트를 이용해 클리이언트와 서버간 데이터를 주고받는 HTTP 통신이다. javascript로 Web 화면에서 데이터를 부르거나 조회하고자 할때, XMLHttpRequest(XHR) 객체는 반드시 필요하다. 이를 통해페이지 전체를 갱신할 필요 없이 필요한 데이터만 불러올 수 있다. 📌 특징 크게 3개자 형식으로 데이터를 전송한다. 1. CSV - , 로 데이터 속성을.. [js] 현재날짜 추출하기 (영어를 한글로) 아래와 같은 영문으로 된 현재날짜를 년도, 월, 일, 요일로 뽑아내는 방법은 다음과 같다. 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값 확인하기 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 에러 해결하기 에러 프로젝트 라우터 이동시 콘솔에 다음과같은 에러가 발생했다. 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) 이미지 경로를 포함한 객체에서 경로를 못읽을때 발생하는 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] 자바스크립트 구조분해할당 (직관적인 코드를 짜는법) 기본 선언방식의 아쉬운점 사실 로직을 짜다보면 가독성을 높이기 위해 변수를 선언하는 경우가 있다. 예를어 아래처럼 사용자 정보가 담긴 배열이 있다고 하자. (설명을 위해 복잡한 인덱스를 만들어보았다.) // 사용자 아이디 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() (큰수가 먼저 정렬되는 이유..?) sort() 란? sort 메서드는 배열의 요소를 정렬할때 사용하는 함수이다. MDN에서는 기본 구문을 아래와 같이 정의한다. arr.sort([compareFunction]) * 대괄호[] 는 괄호 안의 매개변수가 생략이 가능하다는 의미이다. 정렬의 경우 매개변수가 있을 경우와 없을 경우, 값이 다르게 출력되는 경우가 발생한다. 실제로 정렬 알고리즘을 풀면서 원하는 출력값이 나오지 않아 내용을 정리해보고자 한다. 10 이 2보다 먼저 정렬된다? 다음과같은 배열이 주어졌을때 sort 메서드로 정렬을 수행한 수 0번째 인덱스 값을 추출하려 한다. 2가 가장 작고, 7, 10 순으로 커지니 출력 기댓값은 2였다. 하지만 실제로는 10이 출력된다. 대체 왜일까? let sortArray = [7, 10, 2].. 이전 1 2 3 다음
