본문 바로가기
반응형

axios7

Vue.js API사용하기, props대신 mitt - axios 라이브러리 fetch나 여러 방식이 있긴하지만 json으로 바로 바꿔주는 편리함이나 장점 때문에 react에서도 axios를 주로 썼다. vue에도 당연히 적용되서 사용해보고 간략한 사용법을 기록한다. npm install axios해준다음 script부분에 먼저 import를 해준다. 2023. 4. 2.
react에서 axios를 이용해 fomdata전송하기(문자열, 이미지) AWS S3에 문자열 언어코드, 국가이름 그리고 사진파일을 업로드 해달라는 팀원의 요청 나야 어렴풋이 밖에 모르지만 S3에 직접 백엔드가 db를 등록하면 안되냐고 했더니, 그것보다 이렇게 하는게 10배는 빠르다고 한다. 근데 db구성을 이렇게 하는게 맞나 싶긴하지만.. 시간도 없고 일단 해달라는대로 해주게 되었다. 그리고 생각해보면 나중에 추가할 때 관리자페이지에서 넣듯이 이런 페이지를 하나 만들어두면 유지보수 측면에서도 좋을거 같기는하다! api도 만들어줘서 FormData전송하는것도 해볼겸 오늘 바로 진행 해봤다. 이와같이 POST방식으로 data에 보내줘야한다고한다. 찾아보니 FormData는 정해진 방식이 있다. https://developer.mozilla.org/en-US/docs/Web/AP.. 2022. 4. 27.
axios를 불러온 변수를 이용해 하위 컴포넌트에서 또 axios사용하기 검정 테두리를 상위 컴포넌트로 보고 파란 테두리를 하위 컴포넌트로 본다. 그리고 그 안에 또 빨간색으로 하위컴포넌트가 있다. 위 페이지는 현재 라면랭킹 데이터가 없지만, 상위 컴포넌트에서 라면 랭킹 1~4위의 id값을 불러온다. 그리고 불러온 id값을 기준으로 1위부터 4위까지의 이름과 제조사를 4번 불러오게된다. 즉 요약하면 1. 랭킹 1~4위의 ID값을 받음 2. 그리고 그 ID값을 이용해 이름,제조사를 4번 불러오는것이다. 근데 랭킹을 이런방식으로 구현하는건 절대 좋지않다고 생각하지만, 지금 백엔드 개발파트친구의 일정상 어쩔 수 없다고 생각한다. 예를들어 랭킹 100위까지 있다면? 사용자 한명당 한페이지에서 100번의 API요청이 필요한거다. 백엔드에서 1~4위의 아이디 + 이름,제조사 까지 한번에.. 2022. 4. 2.
axios 여러개 요청하기 (멀티 리퀘스트) axios를 사용하다보면 get도 그렇고 post도그렇고 한번에 여러 api요청을 보내야 할 때가 있다. 그때마다 그냥 2~3거나 1~2개면 useEffect를 두번쓰거나해서 가져오곤 했지만 그냥 한번에 멀티리퀘스트를 보내는 방법이 있다. axios.all을 사용하는 것이다. function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Bo.. 2022. 4. 2.
프론트엔드 개발자에게 Swagger란, axios로 API사용하는법 백엔드 팀원들과 협업하다보면 만들어준 API를 사용해야할 필요가있다. 1)회원가입,로그인,게시글작성,삭제,수정 그리고 현재 나같은경우 2)db에 있는걸 분류해서 카테고리 묶음으로 원하는 데이터를 뽑아올때 3)혹은 그외 프론트에서 특정요청을 보내면 원하는 데이터를 받아오는 경우 예시를 살펴보자 우리팀 천재 백엔드 개발자 솬군이 만들어준 api다, 3개의 속성이 있고 각 속성은 0~3까지 가지고있다. 그리고 중간에 Request URL까지 떡하니 나와있으니 편하게 API사용하듯이, React의 경우는 Axios를 사용해주면 된다. 내가 0,0,0을 전송하거나 혹은 2,1,3등을 전송하면 원하는 목록이 쭉 날아오는 식이다. 내가 1,0,3을 날려봤다. 이와같이 해당하는 결과가 쭈르르르륵 날아온다. axios(.. 2022. 3. 25.
axios 요청값 배열 저장(json), 리스트 전체출력(jsx,map반복문) 매우매우 고군분투했다. console을 수도없이 찍어볼만큼 휴...! 하지만 요약해서 기록해두자 아래코드는 useEffect로 불러온 axios코드 부분이다. let [array,setArray] = useState([]) ........ return ...... .then((result)=>{console.log('요청성공') console.log(result) setArray(result.data) ...... { array.length ===0 ?null :( array.map(function(a,index){ return ( // {index} {a.name} // 아니 배열+1개까지뜨다가지금은 왜 되냐..? ) }) ) } ........ - 여러가지 시도를 해봤다. 그렇게 해본결과 알게된 특이.. 2022. 3. 25.
반응형

티스토리툴바