Ella 프론트엔드일지

1. XSS (Cross Site Scripting) - 웹 어플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점 - 주로 여러 사용자가 보게 되는 전자 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어진다. 이 취약점은 웹 어플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타난다. 이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 한다. 🔸XSS 예제 - 이용자가 XSS 게시물에 접속하면 공격자가 임의로 삽입한 스크립트가 실행되어 쿠키 및 세션이 탈..

0. 배경설명 인터넷을 통해 데이터를 보내려면 TCP/IP 프토토콜로 보내는 IP주소, 받는 IP주소, 순서, 검증 등의 정보로 데이터를 한번 감싸고 그안에 데이터는 HTTP 프로토콜이라는 규약으로 묶어서 데이터를 주고 받게 된다. 여기서 HTTP 프로토콜은 특징들이 있다. 🔸HTTP 프로토콜 특징 1) 무상태성 - HTTP는 각 요청과 응답이 독립적이며 서로 연결되어 있지 않다. 서버는 이전에 했던 요청에 대한 정보를 저장하고 있지 않다. - HTTP 상태 정보를 기억하고 있지 않기 때문에 동일한 클라이언트가 재요청할 때마다 모든 정보를 다시 보내줘야한다. 2) 비연결성 - 클라이언트가 서버에 요청을 보내면 서버는 클라이언트에 응답을 보낸 후 연결을 종료한다. - HTTP/1.1 부터는 "Keep-Al..

0. 변수 - 변수(Variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. - 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. - 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다. - 식별자(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 - 변수 값 : 변수에 저장된 값 - 할당 : 변수에 값을 저장 - 참조 : 변수에 저장된 값을 읽어들이는 것 1. 변수 선언 (변수를 생성하는 것) -..

0. Ajax (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 1) 브라우저가 2) 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - 브라우저가 가지고 있는 호스트객체 Web API 인 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법 (XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다.) => 즉, 자바스크립트를 이용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고 받는 방식 🔸Ajax를 사용하면 기존 방식과 어떤 차이가 있을까? - Ajax 가 등장하기 이전에는 웹브라우저가 어떤 정..

0. 동기와 비동기 - 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식 을 동기(synchronous) 처리 방식이라고 하며 - 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식 을 비동기(asynchronous) 처리라고 한다. (오해하면 안되는건, 비동기는 동시의 문제가 아니다. 순서의 문제다. 비동기도 정해진 순서가 있다) - 한번 비동기는 영원한 비동기다. - 대표적으로 타이머 함수인 ① setTimeout/ setInterval ② HTTP 요청 ③ 이벤트 핸들러 는 비동기 처리 방식으로 동작한다. 1. 자바스크립트 엔진 - 자바스크립트 엔진은 자바스크립트 코드를 이해하고 실행을 도와줌 - 자바스크립트 엔진은 Memory Heap..

0. 호출 스케줄링 - 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출) 할 수 있게 하는 것 호출 스케줄링을 구현하는 방법은 1. setTimeout 과 2. setInterval 이 있다. 1) setTimeout - setTimeout 함수로 생성한 타이머는 한 번 동작함 🔸setTimeout 예제코드 function sayHi() { alert('안녕하세요.'); } setTimeout(sayHi, 1000); - 위 코드를 실행하면 1초 후에 sayHi()가 호출된다. function sayHi(who, phrase) { alert( who + ' 님, ' + phrase ); } setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요. - ..