You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
📚 Promise.allSettled 와 Promise.all 비교 정리
Promise.all 의 문제점 Promise.all([ promise1, promise2, ... ]) 의 형태로 사용되며, 배열로 받은 모든 프로미스가 fulfill 된 이후, 모든 프로미스의 반환 값을 배열에 넣어 반환한다. 그런데 만약 배열에 있는 프로미스 중 하나라도 reject가 호출된다면, 성공한 프로미스 응답은 무시된채로 그냥 바로 catch로 빠져버리게 된다. const promise1 = new Promise((resolve) => { setTimeout(() => { resolve(1); }, 3000); }); const promise2 = new Promise((resolve) => { setTimeout(() => { resolve(2); }, 2000); }); const pr..
📁 Base64 / Blob / ArrayBuffer / File 다루기 총정리
웹 개발을 진행하다 보면 이진 데이터를 다루어야 할 때를 간혹 마주칠 수 있다. 브라우저에선 주로 파일 생성, 업로드, 다운로드 또는 이미지 처리와 관련이 깊고, 서버 사이드인 node.js 에선 파일 부터 버퍼 까지 원시 데이터를 다루는 상황이 있을 수 있다. 우리가 평소에 프로그래밍 하면서 직접 이진 데이터를 다루는 일은 별로 없다. 고급 언어를 사용해 프로그래밍 하기 때문에 사람이 읽을수있는 자연어로 코딩해두면, 내부적으로 프로그램이 알아서 이진 데이터로 변환하여 읽고 처리하기 때문이다. 하지만 정수, 실수, 문자가 아닌 파일이나 이미지, 비디오 같은 멀티미디어 같은 데이터를 다루어야 할때는 난감해진다. 이 멀티미디어 데이터를 정수, 문자 다루듯이 해야되는데 이진 데이터를 0과 1로 다룰수있는 것도..
📚 자바스크립트 클래스 문법 - 완벽 가이드
ES6 클래스 문법은 좀더 JAVA스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법이다. ES5까지 자바스크립트에는 클래스가 없었다. 그래서 프로토타입 체이닝을 통해 클래스 비스무리하게 구현해왔었는데 ES6 버젼에 들어서면서 클래스와 비슷한 구조 문법을 추가하였다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동된다. 다음은 프로토타입 문법과 클래스 문법의 간단한 차이이다. 이 둘은 같은 결과를 출력하지만, 문법 생김새만 다르고 내부 로직은 완전히 같은 구조라는 점만 기억하면 된다. ES5 프로토타입 문법 // 생성자 function Person({name, age}) { this.name = name; this.age = age; } Person.prototype.in..
![[JS] 🚀 자바스크립트 최신 문법 정리 - ECMAScript 2022](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc9W0dd%2FbtrHewJXbk5%2F9nvs1CSssJ4OgR7fwyc4Jk%2Fimg.jpg)
[JS] 🚀 자바스크립트 최신 문법 정리 - ECMAScript 2022
JavaScript 최신 문법 정리 (ES6 ~ ES13) 자바스크립트의 혁명이라 할수 있는 ECMASript 2015(ES6) 이후 추가된 자바스크립트 최신 문법 중 자주 이용할것 같은 기능들을 추려 정리해본다. 정말 편한 기능들이 많으니 자바나 C처럼 생코딩으로 구현하려 하지말고 단축문법으로 개발시간을 확 줄여보자! ...들어가기에 앞서, 💩 이모티콘은 옛날 못생긴 문법을 의미하는거고, ✨ 이모티콘은 최신 트렌드 문법을 의미하는 것이다. 편리한 연산자 최신 문법 지수 연산자 아주 간단하게 곱셈 기호를 두번쓰면 제곱으로 처리 2**10 // 1024 Numeric separators 1000000000과 과 같은 단위가 큰 숫자의 가독성을 높일 수 있게 언더바(_)로 단위를 구분할 수 있는 표현이 허용..
🖼️ 자바스크립트 이미지 객체 사용법
Image 객체 보통 웹브라우저에서 이미지를 다룰일이 있다면, 자바스크립트로 태그를 생성하고 그 속성을 다룬다. var x = document.createElement("IMG"); DOM 엘리먼트 api로 이미지를 다루는데는 큰 제약사항이 없긴 하지만, 자바스크립트에선 따로 image() 클래스를 제공해주기도 하는데, 이미지 클래스를 이용해 동적으로 이미지를 다룰수 있다. 예를들어, html에 이미지 태그의 src 부분 이미지 url을 변수를 통해 동적으로 제어할 필요성이 있거나, 웹브라우저에는 당장 표시하지않고 나중을 위해 이미지를 미리 로딩하려 할때나 이미지의 크기를 바로 구할 때 쓰일 수 있다. Image 객체 사용법 Image 객체 생성 // image객체가 생성되어 속성들을 추가할수 있음 //..
🌐 Confirm password 폼 쉽게 구현하기
비밀번호 재확인 기능 구현 두 input 입력 태그창이 있고, 이 두 input창의 값(비밀번호)가 같아야 submit이 되게 처리할 경우, 구현하는 방법은 자바스크립트와 css로 하드코딩하거나 등 여러가지가 존재한다. 그중, 이번시간에는 setCustomValidity() 를 통해 간단하게 Confirm password를 구현해보는 시간을 가져보겠다. setCustomValidity HTMLObjectElement 인터페이스 의 setCustomValidity() 메서드 는 요소에 대한 사용자 정의 유효성 메시지를 설정한다. 아래사진에서 볼수 있듯이 input 타입에 적절하지 않는 값을 넣었을때 브라우저에서 띄우는 느낌표 말풍선의 내용을 설정 해 줄수 있다. 단, 오류메세지 말풍선의 내용을 api를 통..
🌐 브라우저 Resize 이벤트 최적화 하기
Window Resize Event 브라우저 & 윈도우 화면 높이 / 너비 구하는 법 window.innerWidth; // 브라우저 화면의 너비 window.innerHeight; // 브라우저 화면의 높이 window.outerWidth; // 브라우저 전체의 너비 window.outerHeight; // 브라우저 전체의 높이 [JS] 📚 브라우저 & 윈도우 화면 - 높이/너비 구하기 클라이언트(브라우저) 높이/너비 구하기 표준이 아닌 방법들로 해보니 브라우저 환경에 따라 인식이 이상하게 되는 경우가 발생했다. 제일 확실한 방법은 screen 객체를 활용하거나 HTML5 표준을 inpa.tistory.com 브라우저 resize 이벤트 최적화 window의 resize 이벤트를 그대로 사용하면 브라우..
🌐 이벤트 리스너 제거 & 이벤트 한번만 실행 방법
이벤트 제거하기 자바스크립트에서 addEventListener()를 사용해 이벤트를 추가한 경우, 반대로 이를 제거할 수 있으며 이때 removeEventListener() 를 사용한다. removeEventListener()함수는 EventTarget에 등록되었던 이벤트 리스너를 제거하는데, 이 이벤트 리스너는 이벤트 종류와 이벤트 리스너 함수 자체의 조합으로 식별되어 제거되며, 제공되었던 다양한 옵션의 일치하는 이벤트 리스너만 제거가 가능하다. element.removeEventListener('이벤트타입', 이벤트 콜백 함수) 다만 여기서 유의할점이 있는데, 보통 여러분은 이벤트를 등록할때 addEventListener의 콜백 함수를 익명함수로 해서 코딩을 할 것이다. 왜냐하면 익명함수로 하는것이 ..
🌐 text/javascript 와 application/javascript 차이점
다양한 script 태그 표기법 몇몇 웹페이지를 보면(티스토리 포함) 스크립트 태그에 자바스트립트의 마임타입으로 type=text/javascript를 사용하는 걸 볼 수 있다. 그런데 어떤 다른 웹페이지에서는 type=application/javascript로 사용한다. 보통 script태그는 그냥 바로 정의하고 src속성으로 소스 링크를 지정하고 마는데 저 type속성 지정문은 무엇을 뜻 할까? 이번 포스팅은 이 둘의 명확한 차이점을 정리하는 시간을 가져보자. text/javascript vs application/javascript 간단하게 둘을 비교하면 아래 표와 같다. text/javascript application/javascript HTML 4.01 (1999) 스펙 RFC 4329 (20..
🌐 웹페이지 접속 기기(모바일 / 태블릿 / PC) 구분하기
웹페이지 접속 기기 종류 체크 요즘은 반응형 웹이 기본인 시대라, css의 @media screen을 통해 PC와 모바일 화면을 다르게 설정 한다. 하지만 독자적인 모바일 기기용 UI를 구현할 경우, 홈페이지에 접속하는 기기가 모바일 기기 여부 또는 안드로이드 인지 아이폰인지 종류를 확인을 해야하는 경우가 생긴다. 이밖에 모바일 화면에선 일부 css나 자바스크립트를 로드하지 않게 하여 성능 최적화를 노릴때도 모바일 기기 감지가 필수적이다. (Detecting a mobile browser) 모바일 / PC 구분하기 자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent 라는 객체를 사용하여 아이폰, 아이패드, 아이팟, 안드로이드 기기 여부를 확인해 true/false를..
🐘 PHP ↔ MySQL 연결 및 다루기 (PDO 방식)
MySQLi 와 PDO 현재 PHP에서 MySQL 데이터베이스에 연결하기 위해 사용할 수 있는 API는 다음과 같다. MySQL improved extension(MySQLi extension) PHP Data Objects(PDO) 이 두 확장 라이브러리는 각각 장단점이 있으며, 사용 방법과 기능도 조금씩 다르다. 다만 두 가지 API는 각각 장단점을 가지지만, MySQL 환경에서 성능상의 큰 차이를 보이지는 않는다. 따라서 자신이 사용하기 편한 API를 선택하는 것이 좋다. MySQLi MySQLi는 MySQL 데이터베이스와 상호작용하기 위한 PHP의 확장 라이브러리이다. MySQLi는 객체 지향적인 접근 방식을 사용하며, 이전 버전의 MySQL과의 호환성도 지원한다. MySQLi의 장점은 다음과 같..
🐘 PHP ↔ MySQL 연결 및 다루기 (mysqli 방식)
MySQLi 와 PDO 현재 PHP에서 MySQL 데이터베이스에 연결하기 위해 사용할 수 있는 API는 다음과 같다. MySQL improved extension(MySQLi extension) PHP Data Objects(PDO) 이 두 확장 라이브러리는 각각 장단점이 있으며, 사용 방법과 기능도 조금씩 다르다. 다만 두 가지 API는 각각 장단점을 가지지만, MySQL 환경에서 성능상의 큰 차이를 보이지는 않는다. 따라서 자신이 사용하기 편한 API를 선택하는 것이 좋다. MySQLi MySQLi는 MySQL 데이터베이스와 상호작용하기 위한 PHP의 확장 라이브러리이다. MySQLi는 객체 지향적인 접근 방식을 사용하며, 이전 버전의 MySQL과의 호환성도 지원한다. MySQLi의 장점은 다음과 같..
