You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌐 자바스크립트의 핵심 '비동기' 완벽 이해 ❗
자바스크립트의 동기와 비동기 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다. 우리가 프로그래밍을 하면서 일반적으로 각 함수와 코드들이 위에서 아래로 차례로 동작하는 방식이라고 할 수 있다. 이러한 코드 순차 실행을 동기(Synchronous) 라고 부른다. 그런데 동기 방식은 간단하고 직관적이지만, 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향을 줄 수 있다. 예를 들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면, 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 한다. 이렇게 되면 프로그램의 흐름이 멈추거나 지연되게 된다. 따라서 자바스크립트로 여러 ..
🌐 웹 애니메이션 최적화 requestAnimationFrame 가이드
자바스크립트 웹 애니메이션 웹페이지의 애니메이션을 구현할때 CSS의 animatoin , transition , transform 속성을 통해 구현할 수도 있지만, 보다 사용자와의 복잡한 상호작용을 구현하게 하기 위해 Javascript와 함께 사용하여 스타일을 변화시키도 한다. 예를들어 특정 영역을 클릭하거나 웹페이지를 스크롤할때 변화무쌍한 애니메이션 작업들이 그러하다. 그래서 간단하고 규칙적인 애니메이션은 CSS로만 요소의 좌표값이나 스타일 크기를 변화시키고, 세밀한 조작이 필요한 애니메이션은 자바스크립트로 스타일 속성을 변경 시키는 편이다. 하지만 자바스크립트로 스타일 속성을 변화시키는 방법은 CSS보다 (특히 모바일에서) 성능이 좋지 않다. 따라서 어쩔수 없이 자바스크립트와의 상호 협력이 필요할 ..
🌐 한방에 이해하는 attribute 와 property 속성 차이
Attribute vs Property 정의 차이 attribute 와 property 를 한국어로 번역하자면 둘다 '속성' 이라는 의미를 가지고 있다. 단순히 단어명이 같은 것을 떠나서 실제로 둘은 html 요소에 대한 클래스와 아이디와 같은 속성을 가리킨다. 이처럼 어트리뷰트와 프로퍼티의 둘은 같은 의미를 내포하지만, 웹 프로그래밍에서 이 둘은 구체적인 차이점이 존재 한다. HTML의 Attribute 어트리뷰트는 HTML의 속성이다. 엘리먼트에 아이디나 클래스와 같은 추가적인 정보를 일컫는다고 보면 된다 DOM의 Property 프로퍼티는 DOM의 속성이다. 즉, html의 attribute를 DOM 내에서 대신해서 표현이라고 보면 된다. 위 트리는 태그를 DOM 으로 표현한 것인데 위에서 clas..
🔊 웹에서 음악 객체(Audio) 다루기
HTML Audio 태그 HTML 태그는 웹 페이지에서 오디오를 재생하기 위해 사용되는 요소이다. MP3, WAV, OGG 등 다양한 오디오 포맷 파일을 웹에서 재생할 수 있다. audio 태그 속성 속성 값 설정 내용 src 파일 경로 재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등) autoplay autoplay 자동 재생 여부 설정(브라우저에 html파일이 로드되자마자 음악파일이 재생됨) loop loop 반복 재생 여부 설정 controls controls 컨트롤 패널(재생/정지 버튼 등) 노출 여부 설정 muted muted 음소거 설정 오디오 파일 포맷 지정 태그 내부에 태그를 통해 다양한 타입의 오디오 포맷을 입력해주면, 브라우저가 알아서 지원하는 포맷으로 재생한다. 그리고..
🌐 브라우저 이미지 캐시 방지하기
Disable Image Cache 웹페이지 속도 테스트나 혹은 이미지를 다루는 라이브러리 중에 이미지를 Ajax로 불러오다가 캐시에 의한 CORS 에러 문제 등 여러 이유들에 의해서 브라우저가 이미지를 캐싱 하지 않게 하고 싶은 때가 있을 것이다. 그러나 직접 서버에서 캐시 관련 헤더 설정을 할수 없거나 다른 업체의 서버를 사용하는 경우 결국 프론트단에서 처리해야 한다. ctrl + F5 강력 새로고침으로 임시적으로 해결할수는 있지만, 매번 이럴수도 없고 무슨 방법이 없을까 고민하겠지만 의외로 방법은 간단하다. 브라우저는 이미지를 완전히 같은 url 이름으로 불러들일때는 캐시한 이전 이미지를 불러온다. 이러한 특성을 이용하여 url의 쿼리스트링 값만 다르게 주는 것으로 캐시되지 않은 똑같은 이미지를 불..
🌐 html의 data-속성 사용법 완벽 가이드
HTML 데이터셋 속성 HTML의 데이터셋 속성은 커스텀 사용자 속성을 DOM 요소에 저장하는데 표준화된 방법을 제공한다. 한마디로 자바스크립트에서 변수를 사용하듯이, 일종의 html의 변수 역할이라고 말할 수 있다. 데이터셋 속성의 장점 일반 속성 과 데이터셋 속성 데이터셋도 일종의 속성(attribute)이다. 보통 html에서 속성이라 하는 것은 여러분도 잘 알듯이 id, class, src, title 등의 태그에 붙이는 어트리뷰트를 말한다. 이들 속성은 특정 태그의 소스 경로나 이름, 너비, 아이디를 기재하는데 정해져 있다. 그런데 html 태그에 그 엘리먼트만이 지니고 있는 고유한 커스텀 값을 지정해 사용하고 싶을 때가 있다. 마치 아래 코드 처럼 input 태그의 value 속성으로 값을 기..
🌐 HTML 요소의 위치 좌표 값 얻기
HTML 요소의 좌표 웹문서의 어떤 요소(element)의 위치 값을 자바스크립트로 구할 필요가 있을때, DOMRect 클래스의 getBoundingClientRect() 메서드를 통해 좌표 정보가 들은 객체를 얻을 수 있다. 대부분의 브라우저를 지원하며 쉽고 빠르게 위치 값을 가져올 수 있다 const rect = document.querySelector('div').getBoundingClientRect(); console.log(rect); getBoundingClientRect() 메서드의 반환 값은 엘리먼트의 padding과 border-width를 포함해 전반적인 사각형의 위치와 크기를 px 단위로 나타낸다. 각 속성의 값들이 나타나는 의미는 다음과 같다. x : 브라우저 창기준 x 좌표 y ..
🌐 한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링)
HTML 이벤트의 흐름 HTML 문서의 각 엘리먼트들은 아래와 같이 태그 안의 태그가 위치하는 식으로 계층적으로 이루어짐을 볼 수 있다. 이러한 계층적 구조 특징 때문에 만일 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 일어나게 된다. 예를들어 아래 3개가 중첩된 박스 영역에서 가장 자신 엘리먼트인 p 박스를 클릭하면 onclick 이벤트 스크립트가 p 뿐만 아니라 그의 부모인 div와 form 엘리먼트도 발생함을 볼 수 있다. FORM DIV P See the Pen event bubbleing 1 by barzz12 (@inpaSkyrim) on CodePen. 이러한 현상을 이벤트 전파(Event Propagation)라 부르며, 전파 방향에 따라 버블링과 캡처링으로 구분한다. 버블링..
🌐 insertAdjacentHTML로 쉽게 append 하자
DOM에 텍스트로된 html 삽입하기 개발자들이 제이쿼리를 애용해왔던 이유중 하나가 바로 텍스트로 된 html문자열을 그대로 함수에 넣으면 바로 DOM에 추가/삽입이 된다는 점이었다. $('div').append('안녕하세요'); $('div').prepend('안녕하세요'); $('div').after('안녕하세요'); $('div').before('안녕하세요'); 바닐라 자바스크립트에서도 append, after 함수가 있지만, 매개변수로 문자열이 아닌 document.createElement("div") 통해 만든 node 객체 만을 받을수 있어, 코드가 길어지고 가독성이 안좋아 별로 사용성이 좋지 않았다. 물론 innerHTML 프로퍼티로 html형식의 문자열을 넣을수는 있지만 어느 위치에 넣을지..
🤖 구글봇 / 크롤러 방문 감지하기
검색봇이 크롤링/스크랩핑 하는지 감지하기 우리가 잘아는 대표적인 검색봇은 구글봇이 있다. 이 구글봇이 우리의 티스토리나 웹사이트를 크롤링해야 구글 노출을 시켜준다. 다만, 구글봇도 하나의 사용자처럼 웹사이트를 방문해 조회하기 때문에 내 홈페이지를 조회한게 로봇인지 사람인지 구분할 필요성이 생길 때 가 있다. 이때 간단하게 웹브라우저 전반에 대한 정보를 제공하는 window 객체의 navigator.userAgent 에 적힌 정보를 뒤져서 졍규식으로 봇이름을 가지고 있는지 판별하는 식으로 감지할 수 있다. const detectRobot = (userAgent) => { const robots = new RegExp([ /bot/,/spider/,/crawl/, // GENERAL TERMS /APIs-G..
🌐 FormData 사용법 & 응용 총정리 (+ fetch 전송)
FormData API 보통 서버에 데이터를 전송하기 위해서는 HTML5 의 폼 태그를 사용해 다음과 같이 메뉴를 구성하여 제출 해본 기억들이 있을 것이다. 아이디 비밀번호 성별 남자 여자 응시분야 영어 수학 이 처럼 보통은 HTML5의 태그이용해 input 값을 서버에 전송하지만, 자바스크립트에서 FormData() 클래스를 이용해 똑같이 스크립트로도 전송을 할수 있다. 즉, FormData란 HTML 단이 아닌 자바스크립트 단에서 폼 데이터를 다루는 객체라고 보면 된다. 그리고 HTML에서의 Submit 제출 동작은 Ajax를 통해 서버에 제출한다고 보면 된다. let formData = new FormData(); // new FromData()로 새로운 객체 생성 formData.append('i..
🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기
HTML 드래그 앤 드롭 사용법 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이 사용하는 기능 중에 하나일 것이다. 파일 애플리케이션에서 문서를 복사해 이동하는 것 부터 주문 하려는 물건을 장바구니에 드롭하는 것 까지 일상생활에서 많이 접해 봤을 것이다. HTML 그리고 JavaScript에서의 드래그 드롭은 이벤트 기반으로 작동하게 되는데, 마우스 커서로 객체(object)를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 되어 동작이 완료되게 된다. 이번 포스팅에서는 자바스크립트를 이용해 드래그 앤 드롭 이벤트 동작 원리를 이해하고 여러 예제를 구현하는 시간을 가져볼 예정이다. 드래그 & 드롭 이벤트 종류 HTML에서 요소가 드래그 이벤트가 발생 할 수 있도록 해당..
