코딩항해기

SweetAlert2스위트 알랏은 기본 alert()창 대신 사용할 수 있는 예쁜 알림창 라이브러리다. 다양한 스타일과 애니메이션을 제공하며 커스터마이징이 가능한 것이 특징이다. 또한 Promise 기반으로 동작해 사용자 응답에 따른 후속 처리가 용이하다.   SweetAlert2SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxessweetalert2.github.io  환경 구성CDN(* Jsdelivr CDN 서비스) CSS JS 분리버전   jsDelivr - A free, fast, and reliable CDN for JS and Open..

부트스트랩 Bootstrap프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크이다. HTML, CSS 기반의 템플릿 양식, 버튼, 네비게이션 및 기타 페이지를 구성하는 요소를 포함하며, 자바스크립트를 선택적으로 확장할 수 있다. Git-hub의 오픈 소스로 사용 가능하며 상업적 이용이 가능하다. 부트스트랩은 서로 다른 인터페이스를 사용한 여러 개발자들이 공동 작업을 하다보니 디자인이 불일치하고 관리가 어려워져 일관성을 유지하기 어려운 문제를 개선하기 위해 탄생했다. 부트스트랩은 글자, 인용문, 목록, 표, 아이콘 등 자잘한 것 뿐만 아니라 드롭다운, 버튼, 탭 등 웹 페이지에서 많이 쓰이는 요소를 대부분 내장하고 있어 재사용과 일관성을 유지하기 용이하다. 브라우저에 Bootstrap template 키..

콜백 함수 Callback function콜백함 수는 다른 함수에 매개변수로 넘겨준 함수를 말한다. 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출된다.  콜백 지옥 Callback Hell 콜백 지옥은 JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 중첩 깊이가 깊어지는 현상을 말한다. 이 경우 가독성이 떨어지고 유지보수에 어려움이 생기게 된다. 콜백 지옥 해결방법외부로 분리콜백 함수를 외부로 분리해 비동기 작업 결과를 처리하는 콜백 함수를 따로 정의해 사용하면 코드 가독성을 높일 수 있다. (피라미드가 생기지 않는다.) Promise 활용 [JS] PromisePromise Promis..

Promise Promise - JavaScript | MDNPromise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.developer.mozilla.org 자바스크립트의 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 좋지않다. 또한 발생한 에러의 처리가 곤란하며, 여러 개의 비동기를 한 번에 처리하는데도 어려움이 있다.  이러한 문제를 개선하기 위해 Promise가 도입됐으며, 단점을 보완하고 비동기처리 시점을 명확하게 표현한다. Promise 생성Promise는 생성자 함수를 통해 사용되며, 비동기 작업을 수행할 콜백 함수 resolve와 reject를 인자로 전달받느다.(resolve 성공 시 수행..

HTTP 에러코드에러 메시지100Continue101Switching Protocols200OK, 에러 없이 전송 성공202Accepted, 서버가 클라이언트의 명령을 받음203Non-authoritative Information, 서버가 클라이언트 요구 중 일부만 전송함204Non Content, 클라이언트 요구를 처리했으나 전송할 데이터가 없음205Reset Content206Patrial Content300Multiple Choices, 최근에 옮겨진 데이터를 요청함.301Moved Permanently, 요구한 데이터를 변경된 임시 URL에서 찾음302Moved Permanently, 요구한 데이터가 변경된 URL에 있음303See Other, 요구한 데이터를 변경하지 않았기 때문에 문제가 있음3..

자바스크립트로 페이지를 변경하는 방법에는 여러가지가 있다. 그 중 일부를 오늘 비교해 정리할 예정이다.먼저 가장 많이 사용되는 두 방식에 대해 비교하고 다른 페이지 함수에 대해 정리하도록 하겠다. location.replace() 와 location.href 차이 location.hreflocation.replace()기능새로운 페이지로 이동기존 페이지를 새로운 페이지로 변경형태속성메서드주소 히스토리기록됨 (이전 페이지 이동 가능)기록되지 않음 (이전 페이지 이동 불가)사용 예location.href = '이동할 페이지'location.replace('이동할 페이지')*둘 다 리다이렉트 방식으로 새로운 요청이 가기 때문에 요청에 데이터를 담아 보낼 수는 없다.*앞에  window.를(전역함수) 붙여도 똑..

[JS] CDN (Content Delivery Network) (+ 문제점)CDN (Content Delivery Network)간단하게 말하면 한 줄의 코드로 네트워크를 통해서 필요한 기술들을 가져와 사용할 수 있는 라이브러리라고 할 수 있다.CDN은 CDN은 콘텐츠를 분산하여 저장한 다음, 요청minibcake.tistory.com  제이쿼리는 외부 라이브러리이므로 따로 파일을 import 해야한다. 가장 간단하게 할 수 있고 보편적으로 많이 사용되는 방식이 CDN 방식이다. 제이쿼리 공식 사이트에 들어가면 CDN을 제공하고 있는데,https://releases.jquery.com/ jQuery CDNjQuery CDN – Latest Stable Versions jQuery Core Showing..

CDN (Content Delivery Network)간단하게 말하면 한 줄의 코드로 네트워크를 통해서 필요한 기술들을 가져와 사용할 수 있는 라이브러리라고 할 수 있다.CDN은 CDN은 콘텐츠를 분산하여 저장한 다음, 요청할 때마다 신속하게 전송해 주는 서버 집단으로, 인터넷 서버와 가까운 위치에 파일을 미리 복사해두고 이를 빠르게 다시 가져가 사용하는 방식이다. 파일을 쉽고 빠르게 다운로드해 사용하는 방식으로, 기존에 외부의 js를 사용하기 위해 코드를 직접 다운로드 받거나 복사해 사용했던 방식을 코드 한 줄로 대신할 수 있고, 웹사이트 로드 속도를 빠르게 해 준다는 이점이 있다.  웹사이트에 처음 접속했을 때 브라우저는 화면을 표시하기 위해 서버로부터 HTML, CSS, Javascript 등의 소..

자바스크립트 모듈 module개발하는 프로젝트의 크기가 커지면 파일을 여러 개로 분리해야하는 때가 온다. 이 때 분리된 파일 각각을 모듈 이라고 하며, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.모듈에 특수한 지시자 export를 이용해 내보내고, import를 이용해 다른 모듈을 불러와 불러운 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능하다.  모듈 명시모듈은 특수한 키워드나 기능과 함께 사용되므로 모듈임을 명시해야한다.  모듈 특징모듈은 로컬파일에서 동작하지 않고 http, https 프로토콜을 통해서만 동작하므로, 로컬에서 file:// 프로토콜을 사용해 웹페이지를 열면 import, export 지시자가 동작하지 않는다. 또한 모..

prop()Dom 속성(property) 값을 가져오거나 설정할 때 사용된다.주로 DOM 속성을 다룰 때 사용되며, attr() 메서드와 유사하지만, 다루는 대상이 다르다. 속성 값을 가져오기 (Getter (매개변수가 하나))var isDisabled = $("form button").prop("disabled"); // true 또는 false를 반환 속성 값을 설정하기 (Setter  (매개변수가 둘))$("form button").prop("disabled", true); // 버튼을 비활성화 attr() HTML요소의 속성(Attribute) 값을 가져오거나 설정할 때 사용된다. 특성 값 가져오기 (Getter (매개변수가 하나))var isDisabled = $("form button").at..