반응형

JS/JS, TS 학습기록 6

[Javascript] fetch 함수로 api를 호출하여 응답을 받아보자

fetch 함수를 이용하면 새로고침 없이 api를 호출하여 http 요청을 보내고 응답을 받아올 수 있다. 이번 포스팅은 스프링으로 개발된 백엔드 코드의 api를 호출하여 json 객체를 fetch 함수를 이용하여 응답을 받아보는 걸 배운 과정을 기록할 것이다. 과정 속에서 내가 발생시킨 어이없는 실수, 멍청한 실수들을 기록해두어, 다음엔 실수하지 않도록 하기 위함이다. 꼭 백엔드 환경이 스프링+자바가 아니더라도 상관없다. 참고로 fetch 공식 문서는 아래 링크에서 확인가능하다. https://ko.javascript.info/fetch fetch ko.javascript.info fetch 함수 - GET 아래와 같은 응답을 보내주는 api가 있다. @GetMapping("/rooms") public..

[typescript] JS에서 length가 undefined로 뜨는 현상 고치기

객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자. 문제점 일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도록 하자. 도대체 왜 length만 이런 것일까? 그 이유는 여기서 알 수 있었다. 요약하자면 js에선 배열과 문자열에서만 length 속성이 있고, Object에선 length 속성이 없어서 그런 것이었다! https://www.delftstack.com/ko/howto/javascript/javascript-length-of-object/ JavaScript에서 객체 길이 가져 오기 JavaScript에서 객체의 길이를 얻는 다양한 방법을 보여줍니다. www...

[React TS][ERROR] is not assignable to type 'IntrinsicAttributes 해결

typescript로 리액트 코드를 작성하여 props를 넘겨주는 과정에서 아래 에러가 발생했다. js에선 타입을 지정해주지 않아 간단히 해결되지만, ts는 타입을 명시해주어야 했기 때문에 이러한 에러가 발생하는 것이다. 넘겨주려는 dummyList는 아래와 같다. const dummyList = [ { id: 1, author: 'author1', content: 'content1', emotion: '5', created_date: new Date().getTime(), }, { id: 2, author: 'author2', content: 'content2', emotion: '4', created_date: new Date().getTime(), }, { id: 3, author: 'author3..

[React] typescript로 이벤트들을 useState로 저장하면서 겪은 일

javascript로 프론트를 다루는 분들이라면 초보시절에 왜 에러가 뜨는지 몰랐다가 undefined가 전달되는 경우라든지, 타입이 잘못 전달됐다든지 하는 경우를 굉장히 많이 겪었을 것이다. 나도 요즘 이러한 경우가 많아 굉장히 많은 고통을 겪었으며, 내가 만약 js를 잘하게 돼서 에러가 하나도 없다고 하더라도, 팀원들과의 협업 과정을 위해서, 또는 배포 후 프로그램이 오작동하는 경우를 막기 위해서라도 ts를 익혀야할 필요성을 느껴서 typescript를 익히는 중이다. 음... 난 백엔드니까 이건 안해도 되지 않을까? 하는 마음도 있긴 했는데, 학교 수업 프로젝트에서 프론트 쪽도 좀 건드려보고 싶기도 하고, 내가 나만의 프로젝트를 나 혼자 만들 수 있으려면 프론트도 잘할 줄 알면 좋고, 뭐 아무튼 단..

[210827] Uncaught (in promise) Error: Request failed with status code 404 at createdError 에러 해결

로그인, 로그아웃 화면을 만드는 작업을 하던 중 위 에러가 콘솔창에 뜨기 시작했다. 정말 이상하게도, 로그인과 로그아웃 자체는 잘 되는데 뭔가 조금씩 버그가 있는 듯한 느낌? 아래 링크에서 내 질문을 확인할 수 있다. (자문자답 질문) https://www.inflearn.com/questions/293267 [34강] 로그인, 로그아웃 자체는 잘 되는데 콘솔에서 에러가 뜹니다. - 인프런 | 질문 & 답변 안녕하세요 :) 좋은 강의 잘 듣고 있습니다. 로그인, 로그아웃 자체는 잘 되는 것 같은데 콘솔창에서 /api/users/auth가 존재하지 않는다는 에러가 떠서 질문드립니다. 동일한 현상의 다른 질문들을 www.inflearn.com 해결방안 API 주소 자체는 오타 없이 /api/users/aut..

[MongoDB] 몽고디비 연결안됨 에러: UnhandledPromiseRejectionWarning, DeprecationWarning

카페에서 nodejs 공부하고 몽고디비를 연결하여 테스트해보려던 중 아래 에러가 발생했다. (node:2484) UnhandledPromiseRejectionWarning: ReferenceError: err is not defined at C:\Users\User\Desktop\web_workspace\boiler_plate\index.js:22:17 at processTicksAndRejections (internal/process/task_queues.js:93:5) (Use `node --trace-warnings ...` to show where the warning was created) originated either by throwing inside of an async function w..

반응형