You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
📁 Base64 / Blob / ArrayBuffer / File 다루기 총정리
웹 개발을 진행하다 보면 이진 데이터를 다루어야 할 때를 간혹 마주칠 수 있다. 브라우저에선 주로 파일 생성, 업로드, 다운로드 또는 이미지 처리와 관련이 깊고, 서버 사이드인 node.js 에선 파일 부터 버퍼 까지 원시 데이터를 다루는 상황이 있을 수 있다. 우리가 평소에 프로그래밍 하면서 직접 이진 데이터를 다루는 일은 별로 없다. 고급 언어를 사용해 프로그래밍 하기 때문에 사람이 읽을수있는 자연어로 코딩해두면, 내부적으로 프로그램이 알아서 이진 데이터로 변환하여 읽고 처리하기 때문이다. 하지만 정수, 실수, 문자가 아닌 파일이나 이미지, 비디오 같은 멀티미디어 같은 데이터를 다루어야 할때는 난감해진다. 이 멀티미디어 데이터를 정수, 문자 다루듯이 해야되는데 이진 데이터를 0과 1로 다룰수있는 것도..
🖼️ 자바스크립트 이미지 객체 사용법
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를..
🌐 MutationObserver - DOM의 변화를 감시
MutationObserver 동적으로 페이지를 구성할 때 페이지의 변경여부를 실시간으로 확인해야 하는 경우가 있다. 예를 들어, ajax로 DOM 엘리먼트를 추가/삭제 할 경우 그 변화를 감지해야 한다. 옛날에는 DOMSubtreeModified 를 많이 사용했었지만 DOMSubtreeModified을 잘못 사용하면 무한루프에 빠지기 떄문에 성능을 저해해서 DOM 이벤트 표준에서 지원이 중단되었다. setTimeout이나 setInterval을 사용하여 주기적으로 체크하는 방법도 있지만, 그것보다는 대체로 사용할 수 있는 것이 MutationObserver다. MutationObserver는 DOM의 변화를 주기적으로 감시한다. DOM의 속성, 텍스트, 자식 노드들에 대한 변경을 감지할 수 있다. Mu..
🌐 자바스크립트 URL 객체 사용법
URL 객체 이전에는 window.location.href를 통해 url문자열을 얻어와 문자열 파싱을 통해 쿼리 스트링을 사용했었다. 하지만 이제 url 정보값들을 객체로 받아와 간편하게 사용할수 있게 되었다. 기본 제공 URL 클래스는 URL 을 만들고 구문 분석하기 위한 편리한 인터페이스를 제공한다. // 사이트 주소 얻기 const link = window.location.href; // "http://testurl.co.kr:8080/path/main.html?param1=1¶m2=3#top" var url = new URL(link); /* url 객체 정보 */ { protocol: "http:" // 프로토콜 hostname: "testurl.co.kr" // 도메인, 아이피 port..
![[JS] 📚 자바스크립트 커스텀 이벤트 다루기 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F53eYm%2FbtriX8y8Mui%2FPGGCFdt9JQgQtQNNPYmfj1%2Fimg.png)
[JS] 📚 자바스크립트 커스텀 이벤트 다루기 💯 정리
이벤트 디스패치 자바스크립트를 사용하면 핸들러를 할당할 수 있을 뿐만 아니라 이벤트를 직접 만들 수도 있습니다. 새로운 커스텀 이벤트뿐만 아니라 목적에 따라 click, mousedown 같은 내장 이벤트를 직접 만들 수도 있습니다. 이렇게 만든 내장 이벤트들은 테스팅을 자동화할 때 유용합니다. Event의 생성자 내장 이벤트 클래스는 DOM 요소 클래스같이 계층 구조를 형성합니다. 내장 이벤트 클래스 계층의 꼭대기엔 Event 클래스가 있습니다. Event 객체는 다음과 같이 생성할 수 있습니다. let event = new Event(type[, options]); type – 이벤트 타입을 나타내는 문자열로 "click"같은 내장 이벤트, "my-event" 같은 커스텀 이벤트가 올 수도 있습니다...
🗺️ Geolocation API로 위치, 날씨 정보를 얻어오기
Geolocation API Geolocation API는 자바스크립트 프로그램이 사용자의 실제 위치를 브라우저에게 요청할 수 있도록 해준다. 물론 이런 정보들은 주요한 개인 정보와 관련되어 있으므로, 브라우저에서는 Geolocation API가 물리적인 위치 정보에 접근하기 전에 자바스크립트 프로그램이 항상 사용자의 허락을 받도록 하고 있다. Geolocation API는 환경에 따라 GPS를 비롯한 Wi-Fi, 휴대전화의 기지국, IP 주소 등에서 위치 정보를 알아낸다. 브라우저가 지원하는 Geolocation API는navigator.gelocation으로 정의되어 있다. Geolocation API 사용법 이 객체에는 다음 세가지 메서드가 존재한다. navigator.geolocation.getC..
![[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGmoz3%2Fbtruey8tTid%2FTOGapqcJOdmM1xEhmoKVk0%2Fimg.png)
[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)
LocalStorage / SessionStorage API 소개 html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다. 둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점이다. [ localStorage ] - 로컬에 도메인 별로 지속되는 storage - localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다. - 값을 지우려면 직접 지워줘야한다. (나는 지우기 직전까지 죽지않아) [ sessionStorage ] - 세션이(프로세스, 탭, 브라우저) ..
