POTATO THAT WANT TO BE HUMAN

script 태그는 head 안에 또는 body 안에 삽입될 수 있습니다. 두 개의 차이점은 무엇일까요? 차이점을 알아보기 전에 HTML 파싱에 대해 알아보겠습니다. 🤔 HTML 파싱 먼저 브라우저의 구성 요소에 대해 알아보겠습니다. 여기서 주목해야할 부분은 '렌더링 엔진' 입니다. 렌더링 엔진은 HTML, CSS를 파싱한 결과물로, 페이지를 화면에 표시합니다. 자바스크립트 코드는 자바스크립트 해석기에서 해석됩니다. 대표적인 렌더링 엔진으로는 사파리의 webkit, IE의 trident, 파이어폭스의 Gecko 그리고 크롬, 오페라, edge의 Blink(webkit에서 파생됨)가 있습니다. 🔍 파싱이란? 파싱은 해당 언어의 문법 검사기라고 할 수 있습니다. 네트워크로 받은 HTML과 CSS 파일을 토큰..

array에 담아둔 자료를 활용할 때 마지막 요소에 특정 이벤트를 주는 경우가 있다. array에서 마지막 요소의 index는 어떻게 알 수 있을까? 🔎 배열의 마지막 요소를 찾자 다음과 같은 배열 객체가 있다고 하자. const arr = ['red', 'yellow', 'green', 'blue', 'black']; 'red' 는 arr[0], 'yellow' 는 arr[1], 'green' 은 arr[2], 'blue' 는 arr[3], 'black' 은 arr[4] 입니다. 배열의 길이는? console.log('배열의 길이는 '+arr.length); // 배열의 길이는 5 그렇다면 배열의 마지막 인덱스는 배열의 길이 -1 이 됩니다. arr[arr.length-1]을 통해 배열의 마지막 요소에..

자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생깁니다. 대부분 데이터베이스 서버나 클라우드에 데이터를 저장하는 경우가 많을 것입니다. 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 그럴 때 웹 스토리지를 사용할 수 있습니다. html5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 web storage가 있습니다. web storage는 키 / 값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회합니다. 영구저장소(localStorage)와 임시저장소(sessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다. web s..

자바스크립트에서 페이지를 이동하게 하고싶다면? 🐌 대표적으로 사용되는 것이 location.href 입니다. location.href는 객체의 속성이며, 본인이 입력한 새로운 페이지로 이동할 수 있습니다. location.href = 'happytape.tistory.com' 자바스크립트에는 location.href 말고도 페이지 이동 수단이 있습니다. 바로 location.replace()입니다. location.replace('happytape.tistory.com'); location.replace()는 href와 마찬가지로 원하는 페이지로 이동할 수 있습니다. href와 다른 점은 href는 현재 페이지가 히스토리에 기록이 되어 뒤로가기가 가능한 반면, location.replace()는 히스토리..