프론트엔드 5

GET방식 vs POST방식: 알기 쉽게 보는 차이점

안녕하세요 찐망고 입니다. 얼마 전 제자가 면접을 보면서 받은 기술적인 질문 중 하나인데요.머릿속으로 맴돌긴 하는데 긴장해서인지 정확히 답변하기가 힘들었다고 하더라고요그래서 쉽게 답변하기 위한 내용을 포스팅해보려고 합니다. GET 방식과 POST 방식은 웹에서 데이터를 전송하는 두 가지 주요 방식인데요  GET 방식목적: 주로 데이터를 요청해서 서버로부터 정보를 가져올 때 사용함특징:URL에 데이터를 포함해서 보내기 때문에 주소창에 ?name=찐망고&age=25 같은 쿼리 스트링이 보임URL 길이 제한이 있어서 아주 많은 양의 데이터를 전송하기엔 적합하지 않음보안 측면에서, 데이터를 URL에 직접 노출하기 때문에 민감한 정보를 보낼 때는 사용하지 않는 게 좋음사용 예: 검색어 입력 후 검색 결과를 보여주..

WEB/HTML기초 2024.11.16

Swiper 슬라이더와 탭 연동하기, loop해결

안녕하세요 찐망고입니다오늘은 tab과 swiper슬라이드를 연결할 건데요.예전 jQuery때랑 코드 부분이 조금 달라져서 포스팅해 봅니다.  1. Tab과 슬라이더를 연결2. Tab클릭 시 슬라이더가 첫 시작위치로 로드 되어야 함3. Tab클릭시 슬라이더는 모두 loop처리되어야 함 이 세 가지 조건에 맞는 슬라이더를 구현해 보도록 합니다. Tab부분은 기본적인 리스트 형태로 마크업을 할 거고요.리스트 하나는 ALL버튼입니다.처음 로드 되었을 때와 ALL버튼을 누르면 전체 swiper-slide가 다 보이게 할 거예요. 아래는 html코드입니다. ALL EYE LIP BASE OTHERS  플러그인은 swiper를 이용하여 따로 ..

플러그인/swiper 2024.10.28

자바스크립트 탭) HTML5의 data-속성과 getAttribute()

안녕하세요 찐망고입니다. 이번 포스팅에서는 자바스크립트의 getAttribute() 메서드와 HTML5의 data- 속성을 활용하여,마우스 이벤트에 반응하는 탭 구조를 만드는 방법을 소개하겠습니다. 아래 그림을 볼까요? 오른쪽 탭에 마우스를 올릴 때마다 왼쪽의 이미지가 바뀌는데요.HTML5의 data속성과 자바스크립트의 getAttribute() 메서드를 이용한 코드를 포스팅해볼까 해요 일단 getAttribute()는 JavaScript에서 사용되는 메서드로, HTML 요소의 속성(attribute)을 가져올 때 사용되는데요. 예를 들어, HTML 태그에 id, class, href 같은 속성이 있을 때, 해당 속성의 값을 가져오는 데 유용합니다.element.getAttribute(attributeN..

WEB/JS코드 2024.09.20

자바스크립트 함수에서 return 이해하기!

안녕하세요 찐망고 입니다.오늘은 함수에서 중요한 return을 이해해보도록 포스팅 할건데요 return이란?return은 함수의 결과를 함수 밖으로 돌려주는 역할을 하는데, 함수 내부에서 어떤 값을 계산하거나 처리한 후, 그 결과를 다른 곳에서 사용할 수 있게 해주는 것을 뜻합니다. 쉽게 말하면:함수를 하나의 기계라고 볼 때, 기계에 무언가를 넣어서 (입력값, 인자) 작업을 하고 나면, 기계는 그 작업의 결과(출력값)를 내놓는데, 그 결과를 밖으로 내보내는 게 바로 return입니다~~~~function addNumbers(a, b) { return a + b;}const result = addNumbers(5, 3); // 함수의 결과가 result에 저장됨console.log(result); // ..

WEB/JS이론 2024.09.19

HTML과 CSS: 인라인 스타일, 내부 스타일, 외부 스타일로 배우는 적용 방법

안녕하세요 찐망고입니다.CSS의 너무 기초적인 부분을 포스팅하려고 합니다. CSS(Cascading Style Sheet)란 웹 페이지의 겉모습을 정의하고 꾸미는 데 사용되는 스타일 시트 언어인데요. 주요 기능은 다음과 같습니다:  레이아웃 정의: 페이지의 구조와 배치를 지정합니다.스타일 설정: 텍스트의 글꼴, 색상, 크기 등을 지정합니다.디자인: 배경, 테두리, 여백 등을 설정하여 페이지의 시각적 디자인을 조정합니다.반응형 디자인: 다양한 장치(데스크톱, 태블릿, 스마트폰 등)에 맞게 레이아웃과 스타일을 조정합니다.   CSS는 기본적으로 선택자(Selector)와 선언(Declaration)으로 구성되며, 선언은 속성(Property)과 값(Value)으로 이루어집니다. h1 { color: ..

WEB/CSS 2024.07.25