XSS 공격 Cross Site Scripting의 약어입니다. CSS가 맞는 줄임이겠지만, 이미 스타일시트로 보편화되어 사용되고 있는 CSS가 있지요. 그래서 CSS가 아니라 XSS로 줄여서 말합니다. XSS 공격은 DOM에 악성 자바스크립트 코드를 삽입하여 공격하는 기법입니다. 입력창에서 이렇게 스크립트를 삽입할 수 있습니다. Submit function displayMessage() { var name = document.getElementById('name').value; document.getElementById('message').innerHTML = 'Welcome, ' + name + '!'; } 공격의 예시 코드를 삽입해 어떤 공격을 할 수 있을까요? 사용자의 쿠키를 탈취하는 스크립트 로..
자바스크립트에서 객체는 프로퍼티(Property, 속성)를 가지고 있습니다. 각 프로퍼티는 이름과 값이 있습니다. 이름은 문자열이고, 값은 어떤 타입이든 가리지 않습니다. const obj = { name: "객체" } 프로퍼티는 추가, 삭제가 가능합니다. 그러므로 객체는 프로퍼티의 집합이기도 합니다. 프로퍼티는 데이터, 접근자 프로퍼티로 나뉩니다. 데이터 프로퍼티(Data Property) const person = { age: 15, // 데이터 프로퍼티 name: "김개굴" // 데이터 프로퍼티 } 객체의 프로퍼티 대부분은 이름과 값이 있는 데이터 프로퍼티입니다. 이 객체는 두 개의 데이터 프로퍼티가 있습니다. 접근자 프로퍼티(Accessor Property) 위의 데이터 프로퍼티와는 좀 다른 모양..
객체에 대해 설명해 봐야 한다면 뭐라고 해야 할까요? 객체란? 객체에 대한 짧은 정의는 이렇습니다 자바스크립트의 가장 기본적인 데이터 타입 자바스크립트의 타입은 원시 타입과 객체 타입으로 나뉘어지죠 프로퍼티의 순서없는 집합 const 객체 = { name: '김객체' , human: false } 객체는 자신만의 프로퍼티를 가지고, 프로토타입으로 불리는 다른 객체에서 프로퍼티를 상속받기도 합니다. 자바스크립트가 프로토타입 기반의 객체지향 프로그래밍 언어라고 불리우는 이유입니다. 프로퍼티 프로퍼티는 이름과 값으로 이루어져 있습니다. 이름은 문자열이나 심벌 타입을 가집니다. 보통 대부분의 이름은 문자열입니다. 값은 이름과 다르게 타입을 가리지 않습니다. 어떤 타입도 가능하고 getter나 setter 또는 ..
API에서 날려주는 데이터를 UI에 더 잘 뿌려주기 위해 꼭 알아야 할 부분입니다. 이 글은 자세한 개념을 다루지 않고, 제가 기억하고 싶은 부분 중심으로 작성했습니다. 🥑 구조 Object.assign(target, ...sources) Object.assign({초기값, 객체들}) 뒤에 있는 객체들이 초기값 부분과 합쳐집니다. ❓ 왜 쓰는가 우리가 객체를 복제하고 싶을 때, 쉽게 이용할 수 있는 방법은 또 다른 변수에 객체를 담는 것입니다. const user = { name: "gaegul", gender: "female" } const newUser = user; // newUser에 user를 복제 console.log(newUser.name) // gaegul newUser은 user의 내용을..
🔢 자바스크립트로 계산기 만들기 eval() 함수를 이용하여 계산기를 만듭니다. 난이도 ⭐ 예제 Retro Calculator with JS 기능 정의 버튼 클릭 > 클릭 이벤트가 발생한 값 저장 숫자 연산 +, -, /, * 양수/음수 +/- 소수점 . = 버튼 클릭 저장된 값들을 연산 연산된 값들을 출력 A/C 버튼은 현재 값과 저장된 값 모두 삭제, C 버튼은 현재 입력된 값만 삭제하는 기능 기본 구조 테이블 태그를 사용하는 방법도 있지만 모던 웹 방식에 맞추어 flexbox로 레이아웃을 설계했습니다. 기능이 같은 버튼들은 공통 클래스명을 줍니다. AC C +/- / 7 8 9 * 4 5 6 - 1 2 3 + 0 . = 스타일링은 window 계산기 버전, 아이폰 버전 등 원하는 느낌으로 하시면 됩..
⏰실시간 시간 구하기 난이도 ⭐ 예제 Real Time Clock new Date() 현재 날짜와 시간을 반환합니다. const today = new Date(); console.log(today) // Tue Apr 28 2020 14:40:02 GMT+0900 (대한민국 표준시) getMonth() 자바스크립트의 월은 0부터 시작하므로 1을 더해줘야 1~12월로 나옵니다. const month = today.getMonth() + 1; getDay() 요일 정보는 숫자로 이루어져 있습니다. 0 (일요일) ~ 6 (토요일) 2는 목요일이겠죠? const day = today.getDay(); // 2 Intl.DateTimeFormat 언어에 따라 날짜와 시간 서식을 지원합니다. 숫자로 나오는 요일을 ..
