본문 바로가기

Javascript/Javascript고급

자바스크립트의 알려지지 않은 연산자들 - "??", "??=", "?."

1 2020. 11. 3. 자바스크립트에 비교 및 연산 과정을 줄여주는 새로운 연산자들이 몇가지 추가되었습니다. 이미 연산자가 넘쳐나기 때문에 아직은 잘 사용되지 않고 있고 역시나 시간이 좀 지나야 합니다. 새로 추가된 연산자들은 "??", "??=", "=." 입니다. 다른 연사자들과 달리 의미가 바로 와닿지 않기 때문에 예제를 통해 알아 보겠습니다. ?? 두 값을 비교해 값을 반환받는 비교 연산자인 "||" 와 기본적으로 같습니다. "||"와 "??" 모두 논리적인 OR 비교를 하는 연산자로 두 항목 중 참인 항목의 값을 반환합니다. 두 항목 모두 참이면 첫 번째 항목이, 둘 다 거짓이면 두 번째 항목이 반환됩니다. 둘 중 한 항목만 참이면 참인 항목이 반환됩니다. "||" 연산자와 다른점은 자바스크립트의 기본 연산 규칙에 따..

프로미스 Async/Await

0 2020. 5. 30. 기존 프로미스의 사용 방법을 개선하기 위해 ES8에서 소개된 비동기 처리 함수입니다.Async 함수는 내부에서 프로미스를 사용해 비동기 요청 결과를 반환합니다. 프로미스와 다른 점은 일반 동기 함수를 작성하는 것처럼 코드가 구성되기 때문에 기존 코드와 이질감이 없어 가독성이 좋아집니다.Async 함수는 Await 와 쌍을 이루어 사용합니다.프로미스의 체인 방식 then() ~ catch() 를 대체하는 방식이므로 프로미스 객체를 생성하는 과정까지는 동일합니다. 프로미스 기초에서 구현했던 비동기 처리 함수를 Async/Await 로 재구성 해보겠습니다. //프로미스 인스턴스 리턴function asyncWork(value){ return new Promise((resolve, reject)=>{ setTi..

더 간편한 프로미스(Promise)를 위한 패치(Fetch)

0 2020. 5. 30. 프로미스(Promise) 기반의 AJAX 즉, 비동기 통신을 프로미스 기반으로 간편하게 사용할 수 있도록 구현한 메서드가 패치(Fetch) 입니다.기존 XMLHttpRequest 객체를 이용하는 AJAX와 기술적으로는 동일합니다. 일종의 프로미스용 래퍼(Wrapper) 라고 이해하면 쉽습니다. 사용 구문이나 구조가 XMLHttpRequest 보다 간단하기 때문에 프로미스를 비동기 통신에 사용하고 있다면, 패치를 이용하는 것을 추천합니다. !주의할 점 프로미스와 마찬가지로 패치 또한 인터넷 익스플로러에서는 지원되지 않습니다.패치 지원 여부를 확인해 패치를 사용할지 XMLHttpRequest 객체를 사용할지 구분하려면 if(windows.fetch) {} 와 같이 윈도우 전역 객체로 패치가 있는지 확인해서 ..

프로미스(Promise) 기초

0 2020. 5. 30. 프로미스(Promise)의 배경 프로미스(Promise)를 한 문장으로 표현하면 "비동기 콜백 지옥의 해결책" 라고 할 수 있습니다.XMLHttpRequest 객체로 비동기 통신을 하게되면 콜백 함수를 사용해 응답에 대한 처리를 해야합니다. 만약 XMLHttpRequest 객체로 받은 응답을 기초로 다시 비동기 요청을 한다면 어떻게 될까?실제로 복잡한 서비스를 구현하는 경우 2~3단계 이상 비동기 요청을 하게 되고, 각각의 돌아오는 응답을 처리하는 콜백 함수를 붙이게 됩니다. 개발된 코드는 초기 개발 후 이런 저런 변화와 업데이트를 거치게 되는데, 이렇게 2~3단계로 비동기 요청이 중첩되면, 비동기 호출의 콜백 함수의 어느 부분을 수정 해야하는지 판단하는게 쉽지 않아집니다. 이런 중첩된 비동기 호출과 콜..

셋(Set)의 이해

0 2020. 5. 29. ES6에서 새롭게 도입된 집합 컬렉션(Collection) 기능입니다.키가 없고 값만 가지는 집합 개념의 데이터 객체로, 값이 집합(셋)에 있는지 여부를 판단할 수 있는 기능을 제공합니다.키가 없는 맵(Map) 과 유사한 특징을 가지고 있습니다. 정확히는 키와 값이 같은 맵(Map) 이라고 봐도 됩니다. 2개의 셋에 모두 있으면, 교집합, 2개중 1개 이상의 셋에 있으면 합집합이 되는 방식으로 값이 어디에 속해있는지를 판단할 수 있습니다. 셋(Set)의 값 추가/삭제 셋 인스턴스를 생성 후 add(값)으로 셋에 값을 추가할 수 있습니다.값은 중복될 수 없습니다. 객체의 속성이 중복될 수 없는 것처럼 값 자체가 키이자 값이 됩니다. 셋의 값 삭제는 delete(값) 메서드로 합니다.삭제에 성공하면 true..

맵(Map)의 이해

0 2020. 5. 29. 맵(Map) 은 키(Key)와 값(Value)을 한쌍으로 해서 저장되는 데이터 저장 구조입니다.다른 개발언어에 익숙하면 컬렉션(Collection) 이나 딕셔너리(Dictionary) 와 같은 구조입니다.맵은 자바스크립트의 일반 객체 사용 방식과 동일합니다.실제 메서드들도 객체의 사용법과 상당히 유사합니다. 자바스크립트 객체와 맵의 결정적인 차이점은 사용할 수 있는 키의 범위입니다.자바스크립트 객체는 키로 문자열, 또는 잘 사용하지 않지만 심볼 2가지만 가능합니다. 반면에 맵은 문자열, 숫자, 객체, 배열, 함수 등 다양한 데이터 형을 키에 사용할 수 있습니다. 단, 다양한 데이터형을 사용할 수 있다는 것이 키로 다양한 데이터 자체를 사용하는 것이 아니라 해당 데이터형의 객체에 대한 참조 주소를 키로 사..

타이머를 이용한 지연 실행과 반복 실행

2 2020. 5. 29. 타이머 함수는 이미지 슬라이드, 시계, 타이머, 반응 대기, 로그인 유지를 위한 시그널 전송, 일정 주기의 화면 갱신 등 일정 시간 후에 실행하거나, 반복적으로 자동 재실행하는 웹 기능을 구현하는데 사용합니다. 자바스크립트는 이런 기능을 이한 전역 함수 2개를 제공합니다.setTimeout() 은 지연 시간 후 1번 콜백 함수를 실행하고 종료하며, setInterval() 은 지연 시간 간격으로 콜백 함수를 무한 반복 실행합니다. setTimeout(callback, 지연시간(ms));setInterval(callback, 지연시간(ms)); callback : 설정한 시간후 실행하는 함수입니다. 타이머 함수안에 직접 구현해도 되고, 별도의 함수를 정의해 이름으로 콜백 함수를 지정할 수 있습니다. 지연시..

0 2020. 5. 29. AJAX 로 받아오는 대부분의 데이터는 JSON 포맷입니다.AJAX 받아올 수 잇는 데이터 포맷에 제약이 있는 것은 아니지만, 웹에서 오고가는 데이터의 대부분이 JSON으로 표현이 가능하기 때문에 사실상 표준으로 정착해 있습니다. AJAX 응답으로 받은 JSON 데이터는 그냥 사용할 수는 없고 데이터 변환을 해야 합니다. 응답을 받은 XMLHttpRequest 객체에는 responseText 속성이 있고, 속성값으로 응답으로 받은 JSON 텍스트 데이터가 들어 있습니다.이 데이터를 JSON 객체로 변환해야 합니다. 자바스크립트에는 전역 객체로 JSON 객체가 있으며, json 문자열을 객체로 변환해주는 메서드가 제공됩니다. let json = JSON.parse(xhr.responseText); json..

XMLHttpRequest 객체 호환성 구현

0 2020. 5. 28. 최신의 웹브라우저들은 자바스크립트 XMLHttpRequest 객체를 잘 지원합니다. 국내의 경우 공공기관 등을 통해 아직 인터넷 익스플로러 10/11 과 같은 구 웹브라우저가 적지 않게 사용되고 있습니다.구 브라우저들은 표준 XMLHttpRequest 객체를 지원하지 않습니다. 특히 인터넷 익스플로러는 독자 규격의 비동기 객체를 사용하기 때문에 표준 자바스크립트 XMLHttpRequest 를 사용할 수 없습니다. 웹브라우저 호환성이 필요한 경우, 자바스크립트 코드로 비동기 통신을 한다면 이런 비호환성 문제는 해결을 해야 합니다. 짧은 함수를 구현해 인터넷 익스플로러 여부를 체크하고, 웹브라우저에 맞는 XMLHttpRequest 비동기 객체를 반환받아보겠습니다. let isIE = false;functio..

AJAX 비동기 통신 기초(XMLHttpRequest)

0 2020. 5. 28. 비동기 웹 어플리케이션 제작을 위해 개발된 자바스크립트 기술입니다.AJAX 는 Asynchronous Javascript and XML 의 약자입니다. 최초에는 XML/XLST 포맷 데이터를 서버와 비동기로 주고받기 위해 고안된 자바스크립트 기술이었으나, 서버와 주고받는 데이터가 JSON 포맷으로 사실상 표준화 되면서 현재는 JSON 데이터를 주로 주고받는 웹 비동기 기술로 정착했습니다.AJAX는 HTML, XML, JSON 등의 다양한 데이터를 주고받을 수 있습니다. AJAX 를 위해서는 XMLHttpRequest 객체를 사용합니다.자바스크립트의 내장 객체로 비동기 통신 구현을 위한 객체이며, 대부분의 최신 브라우저에서 동일한 방식으로 지원합니다.단, 인터넷 익스플로러는 지원 객체 구조가 달라 인터넷 ..

HTML 테이블을 엑셀 파일로 저장하기

2 2020. 5. 17. 거의 대부분의 개발 환경에서 네이티브 엑셀 파일을 생성하고 다운로드 할 수 있도록 구현하는 방법은 서버사이드 기능으로 구현됩니다. 서버측 언어/기술로 코딩된 라이브러리나, 컴포넌트를 주로 사용하며, 화면 상에 보이는 표나 리포트 형태로 보이는 데이터를 엑셀 파일로 저장하는 것은 서버사이드의 기능 구현 방식을 주로 사용합니다. 엑셀로 저장 가능한 데이터가 대부분 테이블 형태로 표현이 되는 되는 데이터이기 때문에 웹 웹브라우저에 표시되는 화면 그대로 HTML 파일로 저장한 후, 엑셀에서 일부 가공을 하면 그대로 사용할 수 있기도 합니다. 어쨋든 이 방법도 네이티브 엑셀 파일은 아니기 때문에 이런 저런 번거로운 재가공 작업을 해야하고 데이터 포맷을 맞추는 번거로움이 있게됩니다. 자바스크립트 라이브러리를 이용하..

HTML 테이블을 CSV 파일로 다운로드 하기

0 2020. 5. 15. 현업에서 테이블 형태로 정리된 데이터를 엑셀 파일로 다운로드 받는 것은 생각보다 빈번하며 중요합니다.웹으로 모든 걸 구현해 온라인에서 해결할 수 있지만, 원시데이터를 다운로드 받아 엑셀에서 재가공하는 방식은 여전히 현실에서는 강력한 위력을 가지고 있습니다. 다만, 엑셀 파일로 테이블 데이터를 다운로드 하는 방식은 코스트가 많이 듭니다.서버에서 네이티브 엑셀 파일을 생성하는 기능을 추가로 구현하거나, 자바스크립트를 사용해 클라이언트 PC의 웹브라우저 표시 화면에 여러개의 모듈을 부착해 네이티브 엑셀 파일을 생성하는 무거운 작업을 실행해야 합니다. CSV(Comma Separated Values)는 단순 텍스트 데이터이고 콤마로 구분해 데이터를 단순하게 표현하기 때문에 최종 데이터 생성이 쉽고, 서버와 클라..

이전 1 2 다음

닫기

티스토리툴바