Bang's

알고있으면 좋은 Javascript Tip✨ AJAX란 무엇인가? JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 쉽게 말해, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. (1) AJAX를 사용하는 이유 AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이..

알고있으면 좋은 Javascript Tip✨ 기상청 날씨 API를 이용해 현재 날씨 받아오기 활용 사이트 : 공공데이터포털(https://www.data.go.kr/) (1) 활용 신청 진행하기 사용 할 API의 활용 신청을 진행하면 서비스 키를 발급 받아 사용할 수 있다. (2) 적용 전 테스트 진행하기 Service Key를 발급 받았다면 테스트를 먼저 진행해 본 뒤 코드에 적용하면 더욱 좋다. 요청변수를 작성하고 미리보기를 클릭하면 받아오는 데이터를 확인해 볼 수 있다. 좌표 값은 기상청에서 제공하는 기상청41_단기예보 조회서비스_오픈API활용가이드_최종 파일을 다운 받아서 적용해주면 된다. (xlsx 파일) (3) API 호출하기 const apiKey = "발급받은 API 인증키"; const ..

보호되어 있는 글입니다.

알고있으면 좋은 Javascript Tip✨ Axios란 무엇인가? Axios는 브라우저와 노드 환경에서 사용할 수 있는 프로미스 기반 HTTP 클라이언트 라이브러리다. Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다. 크로스 브라우징 최적화로 브라우저 호환성(구형 브라우저 지원)이 뛰어나다. (1) Axios 설치하기 브라우저에서 스크립트 태그를 통해 라이브러리를 로드한다. (스크립트 추가 방식) Node.js에서 npm을 사용하여 라이브러리를 설치다. (npm 설치 방식) npm install axios (2) Axios 기본 문법 import axios from 'axios'; // React 사용 시 모듈 불러오는 방법 const axios = require('axios'); //..

알고있으면 좋은 Javascript Tip✨ every & some 이란 무엇인가? every 배열의 모든 요소가 조건을 충족하는지 확인 한다. (AND, &&) callback 함수를 인자로 주면 각 요소들 중 하나라도 false를 리턴할 경우 false가 된다. some 배열의 1개 요소라도 특정 조건을 충족하는지 확인 한다. (OR, ||) callback 함수를 인자로 주면 각 요소들 중 하나라도 true를 리턴하면 값은 true이다. const array = [1, 2, 3, 4]; let result = array.some(num => num > 2); console.log(result) // true result = array.every(num => num > 2); console.log(r..

알고있으면 좋은 Javascript Tip✨ startsWith & endsWith란 무엇인가? startsWith 확인하고자 하는 문자열에서 특정 문자열로 시작하는지 확인하는 메서드이다. 특정 문자열이 있는 경우에는 true를 반환하고, 그렇지 않은 경우에는 false 를 반환한다. 검색해야 할 문자열은 필수 요소이며, 문자열은 대소문자를 구분한다. 문자열의 길이도 옵션에 포함되고, 문자열 길이를 넣지 않는 경우에는 전체 문자열을 대상으로 검색한다. endsWith 확인하고자 하는 문자열에서 특정 문자열로 끝나는지 확인하는 메서드이다. 특정 문자열이 있는 경우에는 true를 반환하고 그렇지 않은 경우에는 false를 반환한다. 검색해야 할 문자열은 필수 요소이며, 문자열은 대소문자를 구분한다. 문자열의..

알고있으면 좋은 Javascript Tip✨ trim이란 무엇인가? JavaScript의 내장함수이며, trim(), trimStart(), trimLeft(), trimEnd(), trimRight() 5개의 메서드가 존재한다. 다만 trimStart(), trimLeft(), trimEnd(), trimRight() 메서드의 경우 ES10에서 등장했기 때문에 IE에서는 사용이 불가능하다. 문자열의 앞 뒤, 즉 양 끝에 있는 공백을 제거하는 메서드이다. 원본 문자열을 변경하지 않고, 공백이 제거된 새로운 문자열을 반환해준다. (1) trim() 문자열의 앞, 뒤의 공백을 제거한다. const str = " Hello, world! "; const newStr = str.trim(); document.w..

알고있으면 좋은 Javascript Tip✨ Early Return이란 무엇인가? Early Return은 조건과 맞지 않는 결과를 일찍 반환하는 것을 말한다. (1) Early Return 장·단점 장점 소거법을 사용하여 빠르게 return 하기 때문에 코드 전체를 보지 않아도 된다. 코드를 읽을 때 return 을 발견하면 아래쪽 코드를 확인하지 않아도 된다. 코드의 더 아래쪽에서 의도하지 않는 값의 변화를 방지할 수 있다. 단점 함수의 반환이 흩어지게 되어 함수의 복잡도를 높이고, 오히려 가독성을 떨어뜨릴 수 있다. 간결한 코드에서는 오히려 if-else문이 더 명확할 수 있다. (2) if - else if - else 방식 const btn = document.querySelector("#add..

알고있으면 좋은 Javascript Tip✨ undefined 타입과 null 타입은? null과 undefined를 보이는 그대로 해석하면 ‘빈 값’과 ‘없는 값’을 의미하는 것처럼 보이지만 사실 큰 차이점이 있다. (1) undefined undefined는 원시 자료형 undefined로 분류된다. undefined는 ‘아무 값도 할당받지 않은 상태’를 의미한다. 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화한다. 쉽게 말해, undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다. // example 변수를 선언만 하고, 값을 할당(초기화..

알고있으면 좋은 Javascript Tip✨ Class란 무엇인가? Javascript의 class는 객체(Object)와 관련이 있다. 쉽게 말해, 클래스는 객체를 생성하기 위한 템플릿이다. 객체를 직접 작성하여 정의하고 생성할 수도 있지만, 클래스로 만들어주면 여러 객체를 더 쉽게 만들 수 있다. (1) Class를 사용하는 이유는? Class를 사용하는 가장 큰 이유는 재사용성이다. 작은 사이트의 경우 잘 만든 Function하나로도 충분히 개발이 용이했다면 좀 더 복잡한 사이트를 만들게 될 경우 Class의 장점을 더 잘 알 수 있다. (2) Class 기본 문법 Person이라는 이름의 객체가 생성된 걸 확인할 수 있다. class Person {} let user = new Person(); ..