Don’t worry about failures

xss 공격 종류 1. 저장 XSS - 웹 어플리케이션 취약점이 있는 웹 서버에 악성 스크립트를 영구적으로 저장해 놓은 방법. => 사용자가 사이트를 방문하여 저장되어 있는 페이지에 정보를 요청할 때, 서버는 악성 스크립트를 사용자에게 전달하여 사용자 브라우저에서 스크립트가 실행되면서 공격. 2. 반사 XSS - 검색, input 등 서버가 외부에서 입력받은 값을 받아 브라우저에게 응답할 때 전송하는 과정에서 입력되는 변수의 위험한 문자를 사용자에게 그대로 돌려주면서 발생. 3. DOM 기반 XSS - 피해자의 브라우저가 HTML 페이지를 구문 분석할 때마다 공격 스크립트가 DOM 생성의 일부로 실행되면서 공격. 페이지 자체는 변하지 않으나, 페이지에 포함되어 있는 브라우저측 코드가 DOM 환경에서 악성..

원시 타입 ( primitive type ) - 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터 값을 보관. - number, boolean, null, undefined 원시 타입의 경우 변수의 값을 새로 할당하게되면, 새롭게 메모리에 할당이 되며, 완전한 복제가 이루어진다. 기존의 주소를 변경해주는 것이 아닌 새로운 메모리에 복사되어 할당을 해준다. 참조 타입 ( reference type ) - 크기 정해져 있지 않음. - 변수에 할당될 때 값이 직접 저장X - 변수에는 데이터에 대한 참조만 저장. ( 주소를 저장 ) - 객체, 배열, 함수 변수의 크기가 동적으로 변함. 변수에 할당 시 데이터에 대한 주소가 저장되기 때문에 자바스크립트 엔진이 변수에 가지고 있는 메모리..

1. callback 2. promise 3. async 4 await 자바스크립트의 비동기에 대해 살펴보기 전에 동기와 비동기에 대해 가볍게 개념을 살펴보자. 동기와 비동기 동기와 비동기에 대한 개념을 이해할 때 '동' 이라는 단어로 연상을 시켰다. 무슨말인가 하면, 동기는 모든 사람들이 '동'일한 길만 지나간다. 비동기는 사람들 중 한명이 넘어지면 다른 길('동'일하지 않은 길)로 찾아 지나간다. 나는 이 말이 이해가 편했다. 조금 더 풀어서 개념을 챙겨보자. 동기의 경우 프로세스가 돌 때 하나의 프로세스가 딜레이가 발생했을 때 뒤에 프로세스가 앞의 프로세스가 완료될 때까지 기다렸다. 다음이 진행된다. 반면, 비동기의 경우 기다리지 않고 다음으로 바로 넘어간다. 여기서 처음에 많이 헷갈렸다. 왜 헷갈..

이벤트 캡처링 & 버블링 이벤트 등록 & 해제 이벤트 위임 방식 이번 스터디는 자바스크립트 이벤트 관리이다. 부끄럽게도 이벤트에 대한 관리를 생각해본적이 많이 없다. 이 주제에 대해 고민해본 적도 없었다. 버블링 우선, 버블링에 대해 살펴보겠다. 버블링은 내부 태그에 이벤트가 걸려오면 상위 태그로 전파되는 현상을 버블링이라고 한다. FORM DIV P 를 클릭했을 때 1. p 2. div 3. form 순으로 이벤트가 일어난다. 버블링 중단 이러한 버블링을 중단하는 함수도 제공한다. event.stopPropagation(), event.stopImmediatePropagation() FORM DIV P - event.stopPropagation() 위와 동일한 코드이지만, p 태그 내에 event.st..

javascript의 가장 기초인 this, bind, call, apply에 대해,, 1. this this는 ' 나를 호출한 애 ' 혹은 ' 처음 실행시킨 곳' 라고 보면 좋을거같다. global에서 console.log(this)를 확인해보면 window{} 결과가 도출될 것이다. 즉 window에서 console.log가 실행되고 호출한 애는 Window가 된것이다. 다음의 경우는 this가 무엇을 가르칠까 const obj = { a: function() { console.log(this) } }; obj.a(); 실행된 함수는 a라는 함수이다. 이 함수를 호출한 애는 누구? obj이다. 따라서 this는 obj가 될 것이다. 하지만, const a2 = obj.a; a2(); 이와 같이 실행되..

쿠키 - 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. - 쿠키를 통해 상태가 없는 HTTP 프로토콜에서 상태 정보를 기억 => 사용자의 상태 관리 - 모든 요청 마다 쿠키가 함께 전송되기 때문에, 성능이 떨어지는 원인이 될 수 있다.. - Set-Cookie HTTP 응답 헤더는 서버로부터 사용자 에이전트로 전송. 세션 쿠키 && 영속적인 쿠키 세션 쿠키 - 현재 세션이 끝날 때 삭제. 영속적 쿠키 - Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후에 삭제. 단점 - 4KB의 데이터 저장 제한 - XSS 공격 취약 -> 브라우저에서 악성 스크립트를 실행하는 공격, document.cookie를 통해 쿠키에 접근. => HttpOnly 속성 : 자바스크..

개발자 2년차가 되어가는 시점에서.. 연차는 쌓여가지만, 프런트엔드 개발자로써 전문성은 쌓이지 않는다는 생각이 종종 든다. 일을 하면서 배우는 것도 많지만, 기초 미흡, 변하지 않는 로직, 생각이 문제가 된다고 생각한다. 이 문제를 어떻게 해결해야될가 많은 고민을 하고, 주변에 도움을 구해봤다. 인강도 봐보고, 유튜브도 많이 보면서 공부를 했지만, 면접 질문을 기반으로 공부를 해보는 것 또한, 많은 도움이 된다고 추천을 받았다. 링크도 추천 받아 아래의 블로그 우선적으로 살펴 보면서, 이어나갈까한다. joshua1988.github.io/web-development/interview/frontend-questions/