개발이야기/Javascript 썸네일형 리스트형 React에서 Axios 헤더 설정 마스터하기: API 통신의 비밀 풀기 1. 개요: Axios 헤더 설정의 중요성 React에서 Axios를 사용하여 API 통신을 할 때, 헤더 설정은 보안과 효율성 측면에서 핵심적인 역할을 합니다. 올바른 헤더 설정은 데이터 요청과 응답을 원활하게 관리하며, 이 블로그에서는 React에서 Axios의 헤더를 어떻게 설정하는지에 대해 알아보겠습니다. 2. Axios 헤더 설정 방법 예시: // Axios 라이브러리 설치 후 // npm install axios import axios from 'axios'; // 헤더 설정 예시 const config = { headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_ACCESS_TOKEN', // 기타 원하는 헤.. 더보기 사용자가 PC인지 Mobile인지 확인방법 사용자가 PC인지 Mobile인지 확인방법 IT시대에 홈페이지는 온라인 간판으로 불리웁니다. 요즘은 PC보다는 Mobile(모바일) 사용율이 더 많아짐에 따라 모바일홈페이지, 반응형 홈페이지를 지향하는 웹 프레임워크가 많이 나오고 있습니다. 그누보드(Gnuboard)는 모바일버전으로 따로 관리할 수 있고, 부트스트랩 기반이나 워드프레스 같은 프레임워크는 반응형으로 작동이 됩니다. 따라서 개발자들도 코딩작업을 하다보면 접속한 사용자가 PC인지 Mobile인지 확인해야할 경우가 많습니다. 그래서 Javascript와 PHP버전으로 확인하는 예제를 보여드리겠습니다. 123456789var filter = "win16|win32|win64|mac"; if( navigator.platform ){ if( filt.. 더보기 ajax통신간 jsonp를 이용한 크로스도메인 이슈 해결 ajax통신간 jsonp를 이용한 크로스도메인 이슈 해결 웹 사이트 개발 시, 주요한 이슈중의 하나를 꼽자면 크로스 도메인(Cross Domain)이 있습니다.최근 대부분의 웹 브라우저는 Javascript(JQuery)를 이용하여 AJAX 등을 통해서 다른 도메인의 서버의 URL 을 호출하여 데이터를 가져오는 경우, 보안 문제를 발생시킵니다.만약 우리 웹 서비스에서만 사용하기 위해 다른 서브 도메인을 가진 API 함수를 제공하는 API 서버를 구축하였는데, 다른 웹 서비스에서 이 API 서버에 접근하여 마음대로 API를 호출하여 사용한다면 분명 문제가 됩니다. 그래서 Javascript 는 동일 출처 정책(Same Origin Policy) 라는 정책을 두어 다른 도메인의 서버에 요청하는 것을 보안 문.. 더보기 jQuery .data 사용 방법 jQuery .data 사용 방법 [공식 API 명세] 제이쿼리(jQuery)를 사용하다 보면 특정 Dom이나 오브젝트(Object)에 특정한 값 또는 데이터를 담고 싶을 경우가 생깁니다. 이럴때 마다 기존에는 폼(Form)을 이용해서 데이터를 주고 받거나 했을 겁니다. 오늘 이 글을 보신 후 부터는 .data()를 사용해 보시기 바랍니다. 간단한 사용명세는 위의 링크에 나와있습니다. 선언(Set) 방식은 크게 2가지 입니다. (selector).data( key, value )(selector).data( key ) 위에서 말하는 selector는 $('#test') 이런형태의 오브젝트 형식을 말합니다.2개의 차이는 자바스크립트(Javascript) 내에서 셋팅하는 방식 입니다. Html 내에서 셋팅하.. 더보기 로컬스토리지, 세션스토리지, 쿠키의 차이점 로컬스토리지, 세션스토리지, 쿠키의 차이점 웹개발을 하다 보면 자동로그인이나 자동로그아웃등 세션이나 쿠키같은 임시 저장기능을 사용해야할 경우가 많습니다. 오늘은 로컬스토리지(Local Storage) 세션스토리지(Session Storage) 쿠키(Cookie)에 대해 소개해 드리겠습니다. 기존에 많이 사용하던 쿠키 외에 로컬스토리지와 세션스토리지는 Html5에서 새롭게 사용되는 저장소 입니다. 그렇다면 쿠키와의 차이가 뭘까요? 쿠키는, 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재하고, 소멸시간을 지정 할 수 있으며 4kb 내의 데이터만 보관할 수 있습니다. 또한 매 http 통신시 쿠키정보가 함께 전송이 되기 때문에 로컬/세션 스토리지를 사용할때보다 미세하게 나마 통신속도가 느립.. 더보기 페이지 이동 여러가지 방법 페이지 이동 여러가지 방법 개발자들이 웹코딩을 하다 보면 여러가지 자바스크립트(Javascript), 제이쿼리(jQuery), PHP, Html 등으로 페이지 이동을 해야 할 경우가 있습니다. 한가지 언어만 사용해도 되고, 상황에 따라 2가지 이상의 언어를 섞어서 사용해야할 경우도 있습니다. 이번에는 각 상황별 페이지 이동을 시키는 여러가지 방법을 소개 하겠습니다. 12345location.href='경로/파일명'; location.replace('경로/파일명'); history.back() history.pushState(state, title, url);cs location.href : 페이지 깜빡임이 있으며, 페이지 자체를 이동시킴location.replace : 페이지 깜빡임이 있으며, 페이지 주.. 더보기 Collapse와 Accordion를 jQuery로 직접 구현하기 (Javascript) Collapse와 Accordion를 jQuery로 직접 구현하기 (Javascript) 부트스트랩(bootstrap)에 있는 Collapse나 Accordion을 (숨기기/보이기) 구현하고 싶은데 부트스트렙 같은 프레임워크(FrameWork)을 사용하지 않고는 구현할 수 없을까? 한참을 구글링 하다 제이쿼리(jQuery) 자체 기능으로 된다는 사실을 알았다. 코드는 간단하다. 아래는 예제 입니다. 쪽지 제목 1 (클릭해보세요) Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc... 더보기 이전 1 2 다음
