페이로드 란?페이로드(payload)는 전송되는 데이터를 의미합니다. 데이터를 전송할 때, 헤더와 메타데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어, 데이터 전송의 효율과 안정성을 높히게 됩니다. 이 때, 보내고자 하는 데이터 자체를 의미하는 것이 바로 페이로드입니다. 우리가 택배 배송을 보내고 받을 때, 택배 물건이 페이로드이고, 송장이나 박스, 뾱뾱이와 같은 완충재 등등은 부가적인 것이기 때문에 페이로드가 아닙니다.추가적으로 위키피디아에 아주 이해하기 좋은 예시가 아래와 같이 나와있어서 첨부합니다.페이로드(payload)라는 단어는 운송업에서 비롯하였는데, 지급(pay)해야 하는 적화물(load)을 의미합니다. 예를 들어, 유조선 트럭이 20톤의 기름을 운반한다면 트럭의 총 무게는 ..

자바스크립트의 reduce 함수는 배열의 요소를 하나로 줄이는(reduce) 작업을 수행하는 함수이다. reduce 함수로 배열의 각 요소를 순회하면서 누적된 값을 계산하고 최종 결과를 반환할 수 있다. reduce()문법 : arr.reduce(callback[, initialValue]) 파라미터callback function : 4가지의 인수를 가진다.callback함수의 반환 값은 accumulator에 할당되고 순회 중 계속 누적되어 최종적으로 하나의 값을 반환합니다.accumulator accumulator는 callback함수의 반환 값을 누적한다.currentValue 배열의 현재 요소index(Optional) - 배열의 현재 요소의 인덱스array(Optional) - 호출한 배열ini..

반응형 웹을 만든 프로젝트가 여럿 있어 반응형 분기점에 대해 정리해 보았다. 각각의 범위는 일반적일 뿐이지 절대적인 것은 아니다.일반적인 Breakpoint~ 480px : Mobile세로481px ~ 768px : Mobile가로, Tablet 세로769px ~ 1024px 또는 1280px : Tablet 가로, 노트북1025px 및 1281px ~ : PC/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/@media all and (min-width:1024px) and (max-width:1279px) { 스타일 입력}/* 테블릿 가로 (해상도 768px ~ 1023px)*/@media all and (min-width:768px) and (max-width:1023px) ..

블로그를 만들면서 자세한 설명 글을 위해 codepen을 삽입을 해보았다.일반 삽입 방법오른쪽 하단의 Embed를 클릭한다.클릭하면 아래와 같은 모달창이 뜨는데 원하는 방식으로 코드를 복사해 와 적용하면 된다.  블로그에 적용 중인 코드iframe의 소스코드를 가져와 주소를 동적으로 받아오고 있다. See the Pen videoTag by pminsun (@pminsun) on CodePen.  티스토리 삽입 방법오른쪽 하단의 Embed를 클릭한다.HTML(Recommended) 복사한다.글쓰기 공간에서 기본모드에서 HTML 모드로 변경 후 원하는 위치에 복사한 코드를 붙여놓는다.

input 태그의 type이 checkbox이고 여러 개 있을 경우 카테고리 중 하나만 선택이 되어야 할 때가 있다. 자바스크립트를 통해 해결할 수 있다. ⭐ 주요 포인트onclick 시 모든 체크바스를 해제하고 선택 한 체크박스 만 체크되도록 한다.구현 방법하나로 묶을 checkbox는 동일한 name 값을 설정한다.checkOnlyOne(this) : 체크박스를 하나만 선택하도록 하는 함수입니다. 이 함수는 체크박스가 클릭되었을 때 호출된다.const checkboxes = document.getElementsByName("cate") : name 속성이 "cate"인 모든 체크박스를 가져와서 변수 checkboxes에 할당한다.checkboxes.forEach((cb) => { cb.checked ..

스크롤이 이벤트 발생 위치에 도달했을 때 쉽게 애니메이션 효과를 줄 수 있는 스크롤 애니메이션 라이브러리인 'AOS' 사용 방법에 대해 정리해 보았다.AOS 라이브러리 공식 홈 AOS - Animate on scroll libraryAOS Animate On Scroll Library Scroll downmichalsnik.github.io AOS 설치head 태그 안에 안내해 준 CDN 소스인 CSS와 JS를 넣는다.AOS 라이브러리 사용을 위한 초기화 스크립트를 작성한다. ...  data-aos 옵션 속성data-aos : 사용할 애니메이션 효과 명data-aos-offset : 애니메이션 효과가 시작될 객체의 위치 설정data-aos-delay : 애니메이션 재생 대기 시간 설정(defau..

프로젝트를 진행하다보면 컨셉에 따라 체크박스의 기본 디자인 대신에 다른 디자인으로 변경해야 하는 경우가 있다. 그래서 input태그의 checkbox를 커스텀하는 방법에 대해 정리해보았다. ⭐ 주요 포인트input 태그의 id, 와 label태그의 for 에 같은 값을 할당해야 label 클릭 시 input 체크에 영향이 미친다.checked 속성을 활용하여 체크 전 후 스타일링을 다르게 줄 수 있다.  Html 전체   Css label{ cursor: pointer;}.input_area input[type="checkbox"] { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #0..

gnb메뉴에 호버 시 서브메뉴(dropdown) 구현하는 방법에 대해 정리해보았다. ⭐ 중요 포인트서브메뉴 리스트( = ul.sub_menu )는 gnb메뉴( = li.gnb_menu ) 안에 배치 하며 기존에 서브메뉴는 opacity: 0; visibility: hidden; 상태이다가 gnb_menu:hover 시 opacity: 1; visibility: visible; 상태로 변경되면 된다.Html MenuOne MenuTwo submenu1 submenu2 ..

Html에 있는 select태그, option태그로는 커스텀에 한계가 있어 직접 만들어보는 방법을 알아보았다.Html기본 구조는 select태그 역할을 하는 선택된 값과 option들 값들을 분리하여 클래스 명이 selectBox인 div 태그 안에 배치 한다. drink coffee water latte jucie food pizza rice burger bread   Cs..

프로젝트를 진행 하다 보면 리스트 페이지에서 pagination기능을 적용하고는 한다. 따로 라이브러리는 사용하지 않고 자바스크립트로 pagination을 구현했다.현재 제작한 개인 블로그에서도 한 페이지 당 9개 포스트로 조건 별로 pagination을 구현했다.기본 paginationPagination 설정currentPage : 초기 값 1로 설정하여 첫 페이지부터 보이게 한다.indexOfLast / indexOfFirst ****: 현재 페이지에 따라 보여줄 블로그 목록의 시작과 끝 인덱스를 계산한다.{blogs?.results.slice(indexOfFirst, indexOfLast).map((item: ListResults) => ...} ****: 현재 페이지에 해당하는 블로그 목록을 슬라..