- axios 라이브러리 fetch나 여러 방식이 있긴하지만 json으로 바로 바꿔주는 편리함이나 장점 때문에 react에서도 axios를 주로 썼다. vue에도 당연히 적용되서 사용해보고 간략한 사용법을 기록한다. npm install axios해준다음 script부분에 먼저 import를 해준다.

AWS S3에 문자열 언어코드, 국가이름 그리고 사진파일을 업로드 해달라는 팀원의 요청 나야 어렴풋이 밖에 모르지만 S3에 직접 백엔드가 db를 등록하면 안되냐고 했더니, 그것보다 이렇게 하는게 10배는 빠르다고 한다. 근데 db구성을 이렇게 하는게 맞나 싶긴하지만.. 시간도 없고 일단 해달라는대로 해주게 되었다. 그리고 생각해보면 나중에 추가할 때 관리자페이지에서 넣듯이 이런 페이지를 하나 만들어두면 유지보수 측면에서도 좋을거 같기는하다! api도 만들어줘서 FormData전송하는것도 해볼겸 오늘 바로 진행 해봤다. 이와같이 POST방식으로 data에 보내줘야한다고한다. 찾아보니 FormData는 정해진 방식이 있다. https://developer.mozilla.org/en-US/docs/Web/AP..

검정 테두리를 상위 컴포넌트로 보고 파란 테두리를 하위 컴포넌트로 본다. 그리고 그 안에 또 빨간색으로 하위컴포넌트가 있다. 위 페이지는 현재 라면랭킹 데이터가 없지만, 상위 컴포넌트에서 라면 랭킹 1~4위의 id값을 불러온다. 그리고 불러온 id값을 기준으로 1위부터 4위까지의 이름과 제조사를 4번 불러오게된다. 즉 요약하면 1. 랭킹 1~4위의 ID값을 받음 2. 그리고 그 ID값을 이용해 이름,제조사를 4번 불러오는것이다. 근데 랭킹을 이런방식으로 구현하는건 절대 좋지않다고 생각하지만, 지금 백엔드 개발파트친구의 일정상 어쩔 수 없다고 생각한다. 예를들어 랭킹 100위까지 있다면? 사용자 한명당 한페이지에서 100번의 API요청이 필요한거다. 백엔드에서 1~4위의 아이디 + 이름,제조사 까지 한번에..

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..

백엔드 팀원들과 협업하다보면 만들어준 API를 사용해야할 필요가있다. 1)회원가입,로그인,게시글작성,삭제,수정 그리고 현재 나같은경우 2)db에 있는걸 분류해서 카테고리 묶음으로 원하는 데이터를 뽑아올때 3)혹은 그외 프론트에서 특정요청을 보내면 원하는 데이터를 받아오는 경우 예시를 살펴보자 우리팀 천재 백엔드 개발자 솬군이 만들어준 api다, 3개의 속성이 있고 각 속성은 0~3까지 가지고있다. 그리고 중간에 Request URL까지 떡하니 나와있으니 편하게 API사용하듯이, React의 경우는 Axios를 사용해주면 된다. 내가 0,0,0을 전송하거나 혹은 2,1,3등을 전송하면 원하는 목록이 쭉 날아오는 식이다. 내가 1,0,3을 날려봤다. 이와같이 해당하는 결과가 쭈르르르륵 날아온다. axios(..

매우매우 고군분투했다. 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개까지뜨다가지금은 왜 되냐..? ) }) ) } ........ - 여러가지 시도를 해봤다. 그렇게 해본결과 알게된 특이..

휴우... 팀원이 만들어준 스웨거에서 POST요청을 하는데 자꾸 CORS오류가 났다. 분명 다른 사이트에있는 자료들을 axios로 가져오는데는 문제가 없는데 여기서만 CORS라...? 뭔가 문제가 있다고 생각했다. 분명 스웨거에서는 잘 작동했다. 근데 찾아보니 보통 이런경우는 백엔드 단에서 해결해줘야하는게 맞는거 같더라 물어보니 우리팀 천재 백엔드 개발자가 CORS 설정을 해줘서 잘 해결되었다. 이와같이 200OK..매우편안 여튼 일단 어딘가에서 제공되는 API가아니라 누군가 새로 만들어주는 거라면 물어봐보고 해결할 생각을해보자, proxySetup까지 찾아볼정도로 알아봤는데 다행이도 간단하게 해결 되었다. 참고한링크 https://qnrjs42.blog/react/react-cors [React] 다른..