Vuex actions 게시물 더보기 버튼 (feat. ajax)

보호되어 있는 글입니다.

2023.07.26

axios

보호되어 있는 글입니다.

2023.06.21

실시간 데이터가 중요하다면 react-query

react-query? react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 여러가지 장점이 있지만 주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행한다. 몇초마다 자동으로 데이터를 다시 가져온다. 요청 실패시 몇초 간격으로 재시도할 때 다음 페이지를 미리 가져올 수 있다 ajax 성공 / 실패 시 각각 다른 html을 보여준다. 직접 개발해도 되지만, react-query 라이브러리를 사용하면 편리하게 구현할 수 있다. SNS, 코인거래소 같은 실시간 데이터를 보여줘야 하는 사이트에서 유용하다. react-query 사용하기 1. 설치하기 npm install @tanstack/react-query 2..

2022.12.11

React Axios

Ajax란? 서버에 GET, POST 요청을 할 때 새로고침 없이 비동기적으로 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다. 방법 3가지 Ajax로 GET/POST를 요청하는 방법은 3가지가 있다. 1. XMLHttpRequest 라는 옜날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 (추천) Axios를 설치해보자 https://axios-http.com/kr/docs/intro 터미널 열어서 npm 명령어를 입력한다. npm install axios Ajax GET 요청하는 법 1. axios를 상단에 import 하고 2. axios.get(url) 로 요청을 한다. 3. 가져온 데이터를 사용한다. import axios from '..

2022.11.12

회원가입 - ajax

약관동의 > 회원가입 폼 > 가입완료의 순으로 진행되며 아이디, 닉네임 중복확인 시 새창을 사용하지 않고, 비동기 방식으로 바로 화면에 체크 여부가 보여진다. /member2/member.sql create table member ( id char(15) not null, pass char(41) not null, name char(10) not null, nick char(10) not null, hp char(20) not null, email char(80), regist_day char(20), level int, primary key(id) ); /member2/member_check2.php 각 약관의 동의(체크)여부를 따져 다음 단계로 넘어간다. checkbox의 name을 agree로 통일..

2022.02.16

Ajax로 불러온 엘리먼트의 이벤트가 작동 하지 않을때

Ajax로 불러온 클래스에 클래스명으로 이벤트를 걸면 해당 이벤트가 작동하지 않는다. click이벤트는 이미 페이지에 있는 요소에 대해서만 작동을 하기 때문에, Ajax를 이용해 동적으로 가져온 요소에 대해서는 작동하지 않기 때문이다. $('.class').click(function(){ }); 이럴때는 위의 소스를 아래와 같이 변경해준다. $('document').on('click', '.class', function(){ }); 동적으로 가져온 요소에 대해서는 이벤트 핸들러 등록을 해야한다. 이벤트 핸들러 등록을 하기 위해 .on()메서드를 사용한다. 참고:) https://xianeml.tistory.com/71 jQuery 제이쿼리 이벤트, Ajax 비동기 처리 🎯 자바스크립트 라이브러리 jQue..

2021.12.31