서스포PAR_개발블로그

https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 💻 Hello, world! - ‘script’ 태그 ✔ 스크립트 후 🔥 모던 마크업 ✔ HTML4에선 스크립트에 type을 명시하는 것이 필수였습니다. 따라서 type="text/javascript" 속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었습니다. 이젠 타입 명시가 필수가 아닙니다. 🔮 외부 스크립트 ✔ 자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있습니다. 이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입합니다. ✔ 복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 됩니다. 🚨 주의 🚨 - HTML 안에 직접..

https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 💻 자바스크립트란? 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다. ✔ 자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다. 컴파일 : 인간이 이해할 수 있는 언어로 작성된 소스 코드(고수준 언어 : C, C++, Java 등)를 CPU가 이해할 수 있는 언어(저수준 언어 : 기계어)로 번역(변환)하는 작업을 말한다. ✔ 자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있습니다. 자바스크립트 엔진(JavaScript engine)..

애플 웹사이트 인터랙션 클론 코딩을 배우면서 스크롤 이벤트로 화면이 전환되는 구현을 진행중이다. 아직 20%밖에 보지않았지만 진행하기 이전에 스크롤 이벤트가 어떻게 되는지 알면 좋을 것 같아 강의를 중단하고 정리하기로 하였다. 🎁 Scroll Event에 대해서 알아보도록 하자 🎁 🙌 현재 뷰의 크기 // 기본 문법 window.innerHeight; //뷰의 세로 사이즈 알아내기 (픽셀단위) window.innerWidth; //뷰의 가로 사이즈 알아내기 (픽셀단위) // 익스플로러 5부터 7버전만을 위한 문법 1 document.documentElement.clientHeight document.documentElement.clientWidth // 익스플로러 5부터 7버전만을 위한 문법2 docum..

💖 전개(Spread Syntax) 연산자 1. Spread 라는 단어의 의미는 펼치다, 퍼뜨리다 이다. 2. 이 문법을 이용하면, 객체 혹은 배열을 펼칠 수 있다. (객체나 배열을 통채로 끌고와서 사용 가능!) 3. 기존의 것은 건들이지 않고 새로운 객체를 만들 때 사용한다. // 펼칠 대상이 객체인 경우 {...obj} // 펼칠 대상이 배열인 경우 [...arr] // 혹은 {...arr} 전개 구문의 문법 자체는 정말 간단하다. 그저 배열이나 객체 앞에 점 세 개를 붙여주면 된다. 🎁 MDN 문서 🎁 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax Spread syntax (...) -..

🎡 Array.prototype 메소드 모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다. 1. 원본 배열을 변경하는 메소드 2. 원본 배열은 변경하지 않고 참조만 하는 메소드 3. 원본 배열을 반복적으로 참조하는 메소드 💖 자바스크립트 원본 배열을 반복적으로 참조하는 Array.prototype 메소드 더보기 메소드 설명 forEach() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행함. map() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열로 반환함. filter() 해당 배열의 모든 ..

🎡 Array.prototype 메소드 모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다. 1. 원본 배열을 변경하는 메소드 2. 원본 배열은 변경하지 않고 참조만 하는 메소드 3. 원본 배열을 반복적으로 참조하는 메소드 💖 자바스크립트 원본 배열은 변경하지 않고 참조만 하는 Array.prototype 메소드 더보기 메소드 설명 join() 배열의 모든 요소를 하나의 문자열로 반환함. slice() 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 만든 새로운 배열을 반환함. concat() 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서..

🎡 Array.prototype 메소드 모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다. 1. 원본 배열을 변경하는 메소드 2. 원본 배열은 변경하지 않고 참조만 하는 메소드 3. 원본 배열을 반복적으로 참조하는 메소드 💖 자바스크립트 원본 배열을 변경하는 Array.prototype 메소드 더보기 메소드 설명 push() 하나 이상의 요소를 배열의 가장 마지막에 추가하고, 배열의 총 길이를 반환함. pop() 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환함. shift() 배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환함. unshift() ..

🎡 래퍼 객체(wrapper object) const str = "문자열"; // 리터럴 문자열 생성 const len = str.length; // 문자열 프로퍼티인 length 사용 예제에서 생성한 문자열 리터럴 str은 객체가 아닌데도 length 프로퍼티를 사용할 수 있습니다. 프로그램이 문자열 리터럴 str의 프로퍼티를 참조하려고 하면, 자바스크립트는 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환해주기 때문입니다. 이렇게 생성된 임시 객체는 String 객체의 메소드를 상속받아 프로퍼티를 참조하는 데 사용된다. 이후 프로퍼티의 참조가 끝나면 사용된 임시 객체는 자동으로 삭제됩니다. 숫저, 문자열. 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 ..