초보 개발자

react도중 갑자기 저런 오류가 발생하였다. 뭐지..? 한참을 찾다가 // 정상문장 // 오류문장 이렇게 해주었더니 오류가 해결되었다.

이번엔 코인들의 정보를가져와서 보여주고 달러를 기준으로 얼만큼 살 수 있는지 확인할 수 있는 기능을 만들어 보려고한다. 이걸 만들기 위해 먼저 4가지 state를 만들었다. 내가 얼마나 살 수 있는지 확인할 수 있는 money state, 그리고 현재 검색한 coin state, coin data를 가지고 올 동안의 loading state, coin list를 담고있는 coins state https://api.coinpaprika.com/v1/tickers 위의 url을 사용하여 coin list를 불러오는 걸 useEffect안에 넣어주어서 한번만 실행이되도록 해주었다. async await을 사용하지 않으면 then을 사용하여 해주어야하는 번거로움이 있어서 async await을 사용해주었다. 그..

간단한 TO DO LIST를 만들어 보려고한다. 전에 vanilaJS로 만들어 본 적이 있었는데 일일이 eventListener를 넣어주거나 화면을 새로고침해주거나 하는식으로 하였는데 이젠 React의 setState()기능으로 좀 더 수월하게 진행할 수 있을 것 같다. 일단 전체적인 코드는 이러하다. 화면은 아래와 같다 먼저 ustState를 사용하여 List와 todo state를 만들어주었다. string인 todo를 array인 list안에 집어 넣고 그 list를 출력하려고 하기 때문이다. onChange는 input에 타이핑이 될 때마다 setTodo를하여 todo state를 업데이트 하는 것이다. 타이핑이 끝나면 이제 엔터를 치던 버튼을 누르면 전송을 해야하는데 이때 onSubmit을 사용..

component를 호출하면 component안에 있는 code들이 실행이된다. 그리고 그 안의 state가 변화하면 자연스럽게 그 code들이 다시 실행이 된다. 하지만 우리가 component안에 API를 이용해서 데이터를 받아온다던지 하는 경우에 state가 변화할 때 마다 계속 code가 실행이 되어 데이터를 불러올 필요는 없을 것이다. 다시말해서 component의 내부의 몇몇 코드들은 처음 딱 한번만 실행되고 다시는 실행되지 않도록 하고 싶을 것이다. 이럴 때 useEffect를 사용하는데 첫번째 argument는 우리가 딱 한번만 실행하고 싶은 코드가 들어온다. 두번째 argument는 마법같은친구이다. 두번째 인자는 일단 나중에 살펴보자 처음 component가 render될 때 저 두 c..

원래 다시 시작하면 보통 버튼이 생기는데 이번에는 몇번이고 해도 생기지 않았다.. 그래서 블루투스 드라이버를 새로 깔아주었다. Windows® 10용 인텔® Wireless Bluetooth® (intel.co.kr) Windows® 10용 인텔® Wireless Bluetooth® 인텔® Wireless Bluetooth® 버전 22.80.1을 설치합니다. 드라이버 버전은 설치된 무선 어댑터에 따라 다릅니다. www.intel.co.kr 여기서 깔아준 뒤 다시시작 하면 깔끔하게 생긴다 ! 근데 생겼다가 다시 사라짐..? 하.. 이거때문에 몇시간동안 아무것도 못하고.. 바이오스에 가서 블루투스가 disabled인 상태를 enabled로 바꿔주라던데 또 바이오스에는 블루투스칸이 없네?? 하.. 이러고 있다..

create-react-app은 리액트 어플리케이션을 만드는 최고의 방식이다. 지금까지 우리는 스크립트를 import함으로써 만들었다. create-react-app을 사용한다면 ReactJS 어플리케이션을 만듦에 있어 훨씬 쉬워질 거다. 그 이유는 엄청 많은 스크립트들과 사전설정들을 우리를 위해 준비해주기 때문이다.

우리가 만든 컴포넌트는 재사용성이 뛰어나다. 하나를 만들어두고 props만 다르게 두고 주면 되기 때문이다. Btn이라는 컴포넌트를 만들고 App에서 만들어주었다 Btn()이렇게 하면 안되고 이렇게 해주어야 한다. 또한 여기에서 속성을 넣어서 보낼 수도 있다. 함수의 인자와 매개변수 관계라고 생각하면 될 것 같다. 그리고 저 속성에 넣는다고 적용이 되지 않는다 저 속성(props)를 보내고 컴포넌트에 보내고 컴포넌트안에서 그 속성을 사용해야만 적용이 된다. banana라는 속성과 onChange라는 속성을 보내고 Btn컴포넌트에서 banana는 버튼이름으로 onChange는 onClick의 실행함수로 넣어주었다. (실제 컴포넌트의 태그안에 안 넣어 주면 말짱도루묵!!) 여기서 우리가 banana에는 버튼..

state는 기본적으로 data가 저장되는 공간이다. 일단 state에 대해 설명하기 전에 우리가 전에 만들었던 vanilaJS를 reactJS로 구현해보려고한다. counter라는 변수를만들고 click버튼을 누르면 숫자가 하나씩 증가하는 기능을 만들었다. 하지만 counter는 잘 늘어가긴하지만 아무도 UI를 새로고침해주지 않아 그대로이다. 처음에!!! 페이지가 로드 되었을 때 (counter = 0일때) render를 해주는게 전부이다. 그 이후 리렌더링을 하지않고있다. 그럼 단순히 onclick을 했을 때 rendering시켜주면 counter값이 변경될 것이다. 하지만 이게 최고의 방법도 아닐뿐더러 더 쉬운 방법이 존재한다. 이 방법은 우리가 값을 바꿀때마다 다시 렌더링하는걸 잊어서는 안된다. ..