Programming/Web9 [Network] 3-way handshake, 4-way handshake의 개념 및 동작 원리 OSI 7 계층과 TCP/IP 모델의 전송계층에서 사용되는 프로토콜인 TCP과 UDP의 가장 큰 차이점은 신뢰성에 있습니다. TCP는 3-way handshake와 4-way handshake를 통해 신뢰성을 구축하여 클라이언트와 서버를 연결하여 데이터를 보내고 UDP는 오직 데이터만을 빠르게 보내어 신속성을 보장합니다. 이번 포스팅에서는 3-way handshake와 4-way handshake의 개념 및 동작원리에 대해 살펴보겠습니다. 3-way handshake 3-way handshake는 세션을 연결하기 위해서 3번의 일련의 과정을 통해서 수행됩니다. 클라이언트는 서버에게 연결을 요청하겠다는 요청(SYN) 패킷을 보냅니다. 이때 클라이언트는 서버에 SYN+ACK 응답을 기다리는 SYN-SENT .. 2022. 3. 13. 세션(Session), 쿠키(Cookie), JWT(JSON Web Token) 의 개념 및 차이점 웹 개발을 할 때 세션과 쿠키를 사용하는 이유는 무엇일까요? 세션과 쿠키를 사용하는 이유는 아래와 같은 HTTP 프로토콜의 두 가지 특성(Connectionless, Stateless)에서부터 시작됩니다. 1. Connectionless(비연결성) HTTP 프로토콜은 인터넷상에서 데이터를 주고 받기위한 서버/클라이언트 모델을 사용합니다. 클라이언트는 request를 보내고 서버는 요청을 처리하여 response를 보내게 되는데 response를 받은 클라이언트는 연결 상태가 유지되지 않고 끊어버립니다. 이러한 작동방식은 많은 사용자들의 요청을 처리하기 위해 적합합니다. 2. Stateless(비상태성) 서버는 한번 끊어진 클라이언트의 상태 정보를 저장하지 않습니다. 따라서 어떠한 클라이언트의 상태정보를 .. 2022. 3. 12. Javascript, JQeury를 이용한 달력 만들기 Javasciprt와 JQeury를 이용한 달력 만들기입니다. 날짜를 클릭 시 input type="text"에 날짜가 입력되도록 구현하였습니다. 달력을 구현하는 script부분을 제외하곤 나머지 부분은 적절히 수정하여 사용하시기 바랍니다. HTML S M T W T F S ~ Javascript & JQuery CSS .calendar {width: 400px; padding: 5px 20px 20px 20px; box-sizing: border-box; border: 1px solid;} .calendar > .header {text-align: center;} .calendar > .header > .title {width:50%; display: inline-block;} .calendar.. 2021. 10. 16. CSS 프로그레스 바(progress bar) CSS와 JSTL을 이용한 진행 바(progress bar)를 그리는 방법입니다. c:set의 value 값에 계산할 값을 입력합니다. example) .progress_bar_wrap { list-style: none; display: table; width: 300px; height: 25px; background-color: #bcbaba; border-radius: 3px; margin-bottom: 5px; padding: 0; } .progress_bar_wrap > li { display: table-cell; background-color: #d1402d; border: 1px solid #b4301f; border-radius: 3px; } .progress_bar_wrap > li+li.. 2021. 10. 12. <button> 버튼 태그가 작동 안될 때 버튼 그냥 이렇게 쓰셨다면 type을 명시해줘보세요 저도 이렇게 해결했습니다. 버튼 2021. 10. 10. CSS 테두리만 있는 말풍선 그리기 배경색이 없고 border만 있는 말풍선 그리기 CSS입니다. .bollom { position: relative; padding: 10px 10px 10px 10px; background: #FFFFFF; border-radius: 5px; border: #7F7F7F solid 1px; position: absolute; font-size: 16px; text-align: left; width: 200px; height: 100px; } .bollom:after { content: ''; position: absolute; border-style: solid; border-width: 0 16px 20px 17.5px; border-color: #FFFFFF transparent; display: b.. 2021. 10. 10. 모달창 중앙정렬 하기 모달창 안의 레이어를 화면 크기에 상관없이 중앙에 배치하는 CSS position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 2021. 2. 18. 자바 스크립트 - Fancybox를 이용한 이미지 갤러리 만들기, Fancybox 이미지 동적으로 추가하기 이번 포스팅에서는 이미지 플러그인중 하나인 Fancybox에 대해 알아보도록 하겠습니다. Fancybox는 이미지, 텍스트, 동영상 등의 콘텐츠들을 라이트박스 형태로 제공해주는 플러그인입니다. 저 같은 경우는 이미지를 갤러리 형태로 오픈하기 위해서 사용했습니다. https://fancyapps.com/fancybox/3/ fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script Combination of jQuery, CSS transitions to spice up the way modal window opens. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. 2021. 1. 28. DOM 노드트리 순회하기 안녕하세요 혀니입니다. 개발 공부를 시작하고, Javascript, JQuery를 많이 사용했었지만, 회사에 입사하고 배우면서 그것들이 DOM(Document Object Model)이라는 것을 알았습니다. 보통 document.getElementsByTagName() 메서드를 사용하여 태그 네임을 가져오게 됩니다. 하지만 이번 포스팅에선 getElementsByTagName()을 쓰지 않고 태그 네임을 가져오도록 하겠습니다. 01. DOM의 구조 선택자를 사용하지 않고, 노드에 접근하기 위해선 DOM이 어떤 구조로 되어 있는지 알아야 합니다. DOM은 아래의 계층구조로 이루어져 있습니다. 어디서 많이 보지 않았나요? 네 바로 트리구조입니다. 그렇다면 트리순회를 통해 자식 노드부터 루트 노드까지 접근할 .. 2021. 1. 4. 이전 1 다음 반응형
