본문 바로가기
반응형

분류 전체보기41

HTTPS HTTP의 취약점 1. 암호화 되지 않은 통신이기 때문에 도청 가능 HTTP를 사용한 리퀘스트, 리스폰스 통신 내용은 암호화 되지 않고 평문으로 통신하게 된다. 2. 통신 대상을 확인하지 않기 때문에 위장 가능 HTTP에 의한 통신은 상대가 누구인지 확인하는 처리가 없기 때문에 누구든지 리퀘스트를 보낼수 있고, 리퀘스트가 오면 상대가 누구든지 리스폰스를 반환하게 된다. 3. 완전성을 증명할 수 없기 때문에 변조 가능 리퀘스트, 리스폰스가 발신 된 후에 상대가 수신하는 사이에 메시지 내용이 변조되어도 알수가 없다. HTTP + 암호화 + 인증 + 완전성 보조 == HTTPS HTTPS HTTP통신을 담당하는 소켓이 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Sec.. 2022. 9. 27.
HTTP헤더 필드 General Header Fields 헤더 필드 명 설명 Cache-Control 캐시 동작 지정 Connection Hop-by-hop 헤더, 커넥션 관리 Date 메시지 생성 날짜 Pragma 메시지 제어 Trailer 메시지 끝에 있는 헤더(청크전송 인코딩) Upgrade 다른 프로토콜에 업그레이드 Via 프록시 서버에 관한 정보 Warring 에러 통지 Request Header Fields 헤더 필드명 설명 Accept 유저 에이전트가 처리 가능한 미디어 타입 Accept-Charset 문자셋 우선 순위 Accept-Encoding 콘텐츠 인코딩 우선 순위 Accept-Language 자연어 우선 순위 Authorization 웹 인증을 위한 정보 Expect 서버에 대한 특정 동작의 기대 F.. 2022. 9. 27.
TCP/IP의 계층(Layer) 구조 - 애플리케이션 계층 애플리케이션 계층은 사용자들에게 직접적으로 제공되는 프로토콜이 준비되는 계층 (HTTP, FTP, DNS, SMTP, TELNET...등등) - 트랜스포트 계층 트랜스포트 계층은 네트워크로 접속되어 있는 서버와 클라이언트의 데이터 흐름을 담당한다. TCP, UDP 두가지 프로토콜이 준비되어 있다. TCP(Transmission Control Protocol) 신뢰성있는 바이트 스트림 서비스, 용량이 큰 데이터를 보내기 쉽게 TCP 세그먼트라고 불리는 단위 패킷으로 작게 분해 하여 수신측에 전송 하고, 정확하게 전송 됐는지 확인하는 역할을 한다. Three way handshaking 패킷 데이터가 정확하게 전송 됐는지 확인하기 위한 기능, 1. 송신측에서는 최초 SYN 플래그로 수신.. 2022. 9. 27.
[VanilaJs] 게시판 만들기 (5) - 댓글 조회 및 등록 1. 댓글 데이터 구조 댓글 데이터 구조는 게시물 1개에서 commentList 배열 형식으로 진행 하였다. { "no":1, "title":"Bird of Paradise", "content":"Change Packing Material on Right Foot", "commentList": [ { "no": 1, "name": "작성자1", "comment": "ㅋㅋ", "date": "2022-02-20" }, { "no": 2, "name": "작성자2", "comment": "ㅎㅎㅎ", "date": "2022-02-20" } ], "date":"2021-07-12" } 2. 댓글 개수 출력 댓글이 존재하면 게시물 제목 옆에 댓글의 개수가 출력되게 된다. //로컬스토리지의 내용을 읽어서 테이블에.. 2022. 7. 7.
[VanilaJs] 게시판 만들기 (4) - 글 상세보기와 수정 1. 글 상세보기 글 상세보기는 mode가 Detail 일때, 수정이 불가능한 화면에서 게시글 내용을 확인 할 수있다. 해당 아이콘을 누르면 detailItem 함수에서 글번호 (no)값을 넘긴다. function detailItem(no) { modalOpen('Detail'); let detail = _storageData.filter((data) => { return data.no == no; }); let title = document.getElementById('title'); let content = document.getElementById('content'); title.value = detail[0].title; content.value = detail[0].content; title.r.. 2022. 7. 3.
[VanilaJs] 게시판 만들기 (3) - 글 삭제와 등록 저번에 만들었던 모달창을 활용하여 글을 삭제하고, 등록 하는 기능을 만들려고 한다. 1. 글 삭제 먼저 삭제버튼을 만들기 위해 각 열마다 삭제 버튼을 추가해 주려고 한다. bootstrap 아이콘을 사용하기 위해 cdn 링크를 추가해 주었다. 기존 boardListAction 함수에 action 영역을 만들어주고, 상세 페이지 아이콘에 상세페이지 동작(detailItem)함수와, 삭제 아이콘에 삭제 동작(deleteItem)함수를 추가하고, 해당 고유값(data.no)를 넘겨 주었다. 열마다 아이콘이 추가된 모습. function deleteItem(no){ if (confirm(no +'번 글을 삭제하시겠습니까?') === true) { _storageData = _storageData.filter(f.. 2022. 7. 1.
[VanilaJs] 게시판 만들기 (2) - Modal창 마크업 및 동작 vue.js를 사용했을 때 처럼 모달창을 재사용이 가능한 단독적인 템플릿으로 작성하고 싶었다. html안에서 html을 부르는 방법은 여러가지가 있었는데, 제일 안정적이라 판단한 js의 XMLHttpRequest객체를 사용해보았다. 먼저 modal.html 파일을 생성하고 마크업 부분은 아래와 같다. 글 등록 Save Close index.html에 모달을 활성화 할수있는 버튼과, 모달이 활성화 됐을때 그림자를 담당하는 영역, 모달창 html을 불러오는, 영역을 추가해 주었다. w3-include-html 속성을 참고하며 js부분을 확인해 보겠다. w3school에서 퍼온 html파일 로드부분을 추가해주었다. function modalOpen() { document.getElementsByClassNam.. 2022. 6. 28.
[VanilaJs] 게시판 만들기 (1) - 글 목록 조회 및 페이징 처리 1. 글 목록 조회 1-1. json 데이터를 localstorage에 저장 //data.json 내용을 로컬스토리지에 문자형식으로 넣는다. async function dataSet() { const data = await fetch("./data.json") .then(response => { return response.json(); }); window.localStorage.setItem('storageList',JSON.stringify(data)); } 개발자도구 -> Application -> Storage -> Local Storage 에 storageList이름의 키로 데이터가 저장된것을 확인 할 수 있다. //data.json 내용을 로컬스토리지에 문자형식으로 넣는다. async func.. 2022. 6. 28.
"RangeError: Maximum call stack size exceeded" "RangeError: Maximum call stack size exceeded" 스크립트상에서 호출이 많이 발생해서 생기는 오류라고 한다. 보통 재귀를 잘못 태웠을때 발생했는데, 라우터 이동할때 로직상 재귀가 없는데 발생하여 하나씩 지워보다가 발견한 문제는 mixin 이였다. 페이지마다 mixin을 사용해서 데이터를 불러오는 나름 함수를 공통화 시켜줬는데.. mixin 부분을 지우니 해결되었다. 결론은 1. mixin선언부가 잘못되었다. 2. mixin안에서 의도치않게 재귀타고있다. 약간 2번이 더 가까운데 다음에 더 알아보는걸로.. 2021. 6. 14.
[Vuetify] 데이터 테이블 헤더 show/hide 환경 - Vuetify2 데이터 테이블 헤더부분을 활성화, 비활성화해주는 예제입니다. headers: [ { text: 'Dessert (100g serving)', value: 'name', align: '', show: true }, { text: 'Calories', value: 'calories', align: '', show: true }, { text: 'Fat (g)', value: 'fat', align: '', show: true }, { text: 'Carbs (g)', value: 'carbs', align: '', show: true }, { text: 'Protein (g)', value: 'protein', sortable: true, align: '', show: true },.. 2021. 6. 12.
반응형

티스토리툴바