분류 전체보기 107

HTML Form

GET은 조회에만 사용!! > 데이터가 그대로 url에 노출됨 HTML Form 전송은 GET, POST만 지원하기 때문에 이론적인 HTTP API를 설계하기엔 문제가 있다. 같은 URL이라면 GET은 폼 형식 불러올때 사용하고, POST는 폼에 있는 데이터를 서버에 전송할 때 사용하는 것이 좋다. GET은 인수가 쿼리 파라미터로 url에 노출되기 때문에 보안에 취약하다. POST의 경우 HTTP body에 데이터를 넣어서 보내기 때문에 그나마 좀 낫다고 한다.. - HTML Form 데이터 전송 HTML Form submit시 POST 전송 예) 회원 가입, 상품 주문, 데이터 변경 Content-Type: application/x-www-form-urlencoded 사용 form의 내용을 메시지 바디..

네트워크/HTTP 2022.09.23

[javaScript] FileReader 객체

FileReader객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용( 또는 raw data 버퍼 )을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. 생성자 FileReader() : 새롭게 생성된 FileReader를 반환합니다. let reader = new FileReader(); 속성 FileReader.error : 읽기 전용 DOMError 파일을 읽는 도중 발생한 에러를 나타냅니다. FileReader.readyState : 읽기 전용 FileReader의 상태를 나타내는 숫자입니다. 상태 값 EMPTY : 0 : 아직 데이터가 로드되지 않았음 LOADING : 1 : 데이터가 로딩중 DONE : 2 :..

카테고리 없음 2022.09.22

본인이 아닌 경우 일회성 alert 띄우기

- 상황 요약 공개/비공개 게시글 리스트가 있고 게시글 제목을 클릭하면 로그인 페이지가 뜨는데 로그인 후 본인이 아닌경우 리스트 페이지로 이동후에 alert메시지를 띄워야 함. 하지만 인증 페이지(jsp)를 거쳐야 하기 때문에 RedirectAttributes를 사용할 수 없음 - 해결방법 ModelAndView 객체에 addObject로 객체 추가 ... 후에 본인 아닌 경우의 메시지 추가한 후 var msg = ''; 페이지 로딩시 메시지 확인해준 뒤 새로고침해주면 된다 ^^.. 이것때문에 몇시간을 삽질했던가.. $(document).ready(function(){ if ("NOTEQUAL".equals(msg)) { let text = "본인 글이 아님니다"; if(confirm(text)){ lo..

WEB/html, jsp, jstl 2022.09.21

[2022.09.20] 무지성으로 코드 복붙한 결과...

내 컴퓨터에서는 안나는 오류가 다른 이의 컴퓨터에서 나는데 이유를 몰라 삽질만 5시간째... 제작중인 사이트의 첫방문시에 쿠키 수집 허용을 요청하는데 이때 거부를 누르면 쿠키값을 가져올 수 없으니... 나는 쿠키 허용을 했지만 다른 동료들은 모두 쿠키 수집 거부를 누른것..! 그리하여 내 노트북에서만 작동하는 코드를 얻었던 것이다... 오늘의 요지는 무지성으로 갖다 붙여넣지 말고 붙여넣기 전에 조금이라도 이해하고 넣자... ^^... 내시간...ㅜㅜ

기타/삽질로그 2022.09.20

HTTP 메서드

1. 주요 메서드 - GET : 리소스 조회 - POST : 요청 데이터 처리, 주로 등록에 사용 - PUT : 리소스를 대체, 해당 리소스가 없으면 생성 - PATCH : 리소스 부분 변경 - DELETE : 리소스 삭제 1.2 기타 메서드 - HEAD : GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환 - OPTIONS : 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명(주로 CORS에서 사용) - CONNECT : 대상 자원으로 식별되는 서버에 대한 터널을 설정 (주로 사용 X) - TRACE : 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행 (주로 사용 X) 2. GET - 리소스 조회 - 서버에 전달하고 싶은 데이터는 query(쿼리 파라미터, 쿼리 스트링)..

네트워크/HTTP 2022.09.20

HTTP 의 기본

1. HTTP 전송 데이터 형식 - HTML, TEXT - IMAGE, 음성, 영상, 파일 - JSON, XML (API) - 거의 모든 형태의 데이터 전송 가능 - 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 - 버전은 HTTP/1.1 (1997년) 가장 많이 사용 ( RFC7230 ~ 7235 ) 1.1 기반 프로토콜 TCP : HTTP/1.1, HTTP/2 ( HTTP/1.1버전은 TCP위에서 동작 ) UDP : HTTP/3 1.2 HTTP 특징 - 클라이언트 서버 구조 - 무상태 프로토콜(스테이스리스), 비연결성 - HTTP 메시지 ( 메시지를 통해 통신함 ) - 단순함, 확장 가능 2. 클라이언트 서버 구조 - Request Response 구조 - 클라이언트는 서버에 요청을 보내고,..

네트워크/HTTP 2022.09.19

[ javaScript / ES6 ] Array Destructing

ES6 부터 새롭게 생겨난 배열 destructing에 대해 알아보자. - 배열에 변수 할당하기 배열에 있는 값을 새로운 변수에 할당하고 싶을 때 배열처럼 선언하면 간단해진다. let kors = [10, 20, 30]; let [eng,math] = kors; //eng:10, math:20 let [,eng, math] = kors; // eng:20, math:30 - 순서 재배열 변수에 선언된 값의 서로 바꾸고 싶다? 그렇다면 배열을 이용하면 쉬워진다! let x = 10; let y = 20; let z = 30; [y, z, x] = [x, y, z]; //y : 10, z : 20, x: 30 - 기본값 주기 할당할 변수 이외에도 추가 선언할 변수가 있다면 기본값을 주면 된다! let exa..

WEB/ES6 2022.07.01

1. 리액트의 이해

리액트는 어떤 데이터가 변할 때마다 어떤 변화를 줄 지 고민하는 것이 아닌 그냥 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용한다. 하지만 DOM은 느릴뿐더러 CPU 점유율도 늘어날 것이다. 리액트는 어떤 방식으로 이 과정을 빠르게 수행할 수 있을까? - 리액트의 이해 리액트는 오직 V (view)만 신경쓰는 라이브러리 입니다. 리액트 내에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트라고 합니다. ( 컴포넌트 : 재사용이 가능한 API로 수많은 기능들을 내장, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함 ) - 초기 렌더링과 리렌더링 리액트는 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링 이 존재합니다. 초기 렌더링 초기 ..

WEB/react 2022.06.23

침해사고 의미 및 종류

'침해사고' 란 ? - 사용자가 비합법적인 방법으로 시스템에 접근하여 시스템의 서비스를 지연시키거나 시스템을 파괴, 데이터를 변조, 삭제하는 등의 행위 VPN 주로 서버에 대한 원격 접속 용도로 사용되며, 공용 네트워크를 통해 내부 시스템 자원에 접근할 목적으로 쓰이는 가상 사설 네트워크 통신과정이 암호화된다는 점과 VPN을 이용하는 경우 익명성을 보장한다는 것을 역이용하여 공격자들이 추적을 피하는 방법으로도 VPN을 자주 이용함 크리덴셜 스터핑 (딕셔널 어택) 공격자가 여러 가지의 경로로 수집한 사용자들의 로그인 인증 정보(Credential)를 다른 사이트의 계정 정보에 마구 대입(Stuffing)하여 사용자 계정에 부정하게 액세스하려는 공격을 의미 워터링 홀 사용자들이 자주 들어가는 웹사이트를 악성..

보안 2022.06.22