Web (6) 썸네일형 리스트형 XSS (Cross Site Script) 공격 방어 웹 페이지를 만들 때 주의해야 할 점은 보안이다. 보안 취약한 사이트의 경우 공격을 받게 되는데 공격들 중 하나가 바로 XSS 이다. 이 공격은 서버로 보내는 입력값에 자바스크립트를 보내서 악의적인 스크립트를 실행시켜서 사용자의 정보를 빼내는 것이다. 정보는 사용자 개인적은 정보나, 쿠키 같은 것들이 해당된다. 게시글을 등록할 때 스크립트문을 넣어서 등록한 후, 게시글을 조회해서 정보를 뺏어오거나 이메일이나 메세지를 상대방에게 보내는 입력값에 스크립트문을 넣어서 정보를 뺏어오거나 하는 것이 해당된다. 자신의 사이트가 XSS 를 방어하고 있는지 확인하는 방법은 간단하다. 임의의 입력창에 라고 입력하고 저장한 후 상세화면으로 들어갔을때 해당 코드가 실행되는지 확인하면 간단하다. 데이터를 저장할 때 처리를 해.. [ Javascript ] 알아두면 유용한 문법 - Rest 안녕하세요 코띵입니다. 지난번에는 spread에 대해서 알아보았는데요, 어쩌면 그와 반대되는 개념을 포스팅해보겠습니다. | Rest spread와는 다르게 '모아온다' 라고 생각하시면 됩니다. 그 외 '나머지' 같은 의미라고도 할 수 있겠습니다. rest는 객체, 배열, 함수의 파라미터에서 사용할 수 있습니다. 예시를 들어보겠습니다. 먼저 객체의 경우를 보겠습니다. 1 2 3 4 5 6 7 8 9 const Dog = { name: '두부', attribute: 'cute', color: 'white' }; const { name, ...cuteDog } = Dog; console.log(name); // 두부 console.log(cuteDog); // attribute와 color의 값이 들어있음 비.. [ Javascript ] 알아두면 유용한 문법 - Spread 안녕하세요 코띵입니다. 오늘 배운 개념은 C언어 공부할 때 봤던 것 같은데요, 자바스크립트에서도 사용할 수 있길래 포스팅 합니다. | Spread 말 그대로 '펼친다' 는 개념인데요, 객체 혹은 배열을 펼칠 수 있다는 의미로 생각하시면 됩니다. 기존의 객체를 참고해서 새로운 객체를 생성하고, 새로운 객체에 추가적인 값을 넣어줄 때 유용합니다. 예시를 들어보겠습니다. 다음과 같이 3개의 객체가 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const person = { name: '샛별이' } const woman = { name: '샛별이', gender: 'woman' } const kindWoman = { name: '샛별이', gender: 'woman', character .. [ Javascript ] 알아두면 유용한 문법 - Template Literal 안녕하세요 코띵입니다. 저는 이 개념을 프로그래밍을 하면서 한 번도 써본 적 없었습니다. 알아두면 쓰이는 일이 있을 것 같아서 포스팅합니다. | Template Literal 이는 변수와 함께 하나의 문자열을 출력할 때 유용하게 쓸 수 있는 개념입니다. 다음과 같이 예시를 들어보겠습니다. 1 2 3 4 const person = { name: 'imcodding', hobby: 'coding' } 1 2 3 4 5 function print(person) { const { name, hobby } = person; const text = '저는' + name + '이고, 취미는 ' + hobby + '입니다.' console.log(text) } 위와 같이 객체가 있고, 객체를 출력하는 함수가 있습니다... [ Javascript ] 알아두면 유용한 문법 - 비구조화 할당(2) 저번에 비구조화 할당에 대해서 말씀드렸는데요, 오늘은 더 복잡한 객체일 경우 어떻게 사용하는지에 대해서 포스팅을 하겠습니다. 다음과 같이 객체를 선언합니다. 1 2 3 4 5 6 7 8 9 10 11 const Object = { state: { information: { name: 'imcodding', nation: 'korea', languages: ['korean', 'english'] }, isLoading: true, }, defaultValue: 5 } 위의 객체 형태는 객체 안에 또다른 객체를 가지고 있는 형태입니다. 이런 경우일 때도 객체 안의 변수를 사용하는 것처럼 객체를 꺼내면 됩니다. 1 2 3 const { name, nation, languages } = Object.state... [ Javascript ] 알아두면 유용한 문법 - 비구조화 할당(1) 안녕하세요, 코딩입니다. 요즘에 자바스크립트를 공부 중인데요, 공부를 하다보니 알아두면 유용할 개념들이 많더라구요. 그래서 자바스크립트도 포스팅을 하기로 했습니다. | 비구조화 할당 비구조화 할당은 쉽게 말해서 객체 안의 변수를 꺼내는 것을 의미합니다. 객체 안에 있는 값을 사용할 때, 매번 객체명을 붙이지 않아도 되도록 합니다. 1 2 3 4 5 6 const SherlockHolmes = { name: '셜록 홈즈', actor: '베네딕트 컴버배치', alias: '자문 탐정', age: '43' }; 우선 위와 같이 객체를 선언합니다. 그 다음엔 함수를 생성합니다. 1 2 3 4 function print1(actor) { const text = `${actor.name}(${actor.alias.. 이전 1 다음