728x90 개발일지64 javaScript axios 사용하기 Axios란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다. 즉, http를 이용해 서버와 통신하기 위해 사용하는 패키지이다. Promise: 자바스크립트 비동기 처리에 사용되는 객체 (비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미함) Promise를 사용하면 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있으며, 다음 중 하나의 상태를 가진다. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태 이행(fulfilled): 연산이 성공적으로 완료됨 거부(rejected): 연산이 실패함 https://axios-http.com/kr/ Axios 브라우저와 node.js를 위한 Promise .. 2022. 8. 27. React map() 사용 시 unique "key" prop. 오류 컴포넌트를 map() 메서드로 돌릴때 아래와 같은 오류를 볼 수 있다. 일단 React에서 배열을 map으로 돌릴 때 배열의 원소가 key값을 갖고 있지 않아서 생기는 문제이다. 이 오류가 떠도 사용에는 문제가 없지만, 빨간 콘솔을 보기 싫으니 지워봐야겠다. // Home.jsx return 뭐할까용 navigate("/addPost")}>글쓰기 {todoList.map((item)=>( ))} 키값을 달라니 컴포넌트에 키를 추가해줘야겠다. // Home.jsx return 뭐할까용 navigate("/addPost")}>글쓰기 {todoList.map((item)=>( ))} 컴포넌트에 리스트의 각 id를 key값으로 줘봤다. index를 사용해도 된다고 하지만, 구글선생님은 그게 별로 좋은 방식이 아.. 2022. 8. 26. React에서 bootstrap/bulma css사용하기 리액트에 부트스트랩이나 벌마 패키지를 설치해 사용해볼 수 있다. 부트스트랩 yarn add bootstrap or npm i bootstrap 최상단(index/App.js) 파일에 import import 'bootstrap/dist/css/bootstrap.min.css'; 벌마 yarn add bulma or npm i --save react-bulma-components 동일하게 최상단 파일에 import import 'bulma/css/bulma.css' 컴포넌트 코드 function Test(){ return( Warning hero -- BULMA Warning subtitle buttons for bootstrap Primary Secondary Success Danger Warning I.. 2022. 8. 25. javaScript 배열 다뤄보기 2 들어가기 전에, 우선 아래의 메서드들은 모두 원본 배열에 영향을 주지 않는 메서드이다. 때문에 const를 통해 상수로 선언해도 아래 코드는 정상적으로 작동한다. 또한 함수 안의 화살표 함수 arr.filter/map/...((element)=>(element>2)) 와 같이 괄호()를 이용하면 return을 해줄 필요가 없지만, arr.filter/map/...((element)=>{return element > 2}) 처럼 중괄호를 사용하면 return을 꼭 해줘야 한다. Array.filter() 특정 조건을 부합하는 값만 모아서 새로운 배열을 만들어준다. // ex const arr = ['a', 'b', 'b', 'c'] const filtered = arr.filter((element)=>el.. 2022. 8. 24. 이전 1 ··· 10 11 12 13 14 15 16 다음 728x90
