Forms Demo Enter a Username: Enter a Password Enter a color Enter a number 검색 쿼리 구조 쿼리 구조는 회사마다 다르다. //유튜브 https://www.youtube.com/results?search_query=dog // 네이버 https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%9E%94%EB%82%98%EB%B9%84 //Reddit https://www.reddit.com/search/?q=rabbit : 그동안 태그에 대해서 거의 잊다시피 했는데 웹부캠 강의를 들으면서 다시 한 번 상기할 수 있었다. 은 UI항목(버튼,텍스트 등) ..

- truffle을 VSCode에 연동 성공하면 아래와 같은 폴더 구성이 완료됨 contracts파일, migrations 파일, test, client(Frontend)로 구성된다. 1. React에서 truffle을 사용해주기 위해 'truffle unbox react'를 사용해준다. 원래는 CRA(Create-React-App)을 통해 쉽게 React 프로젝트를 VSCode에서 구현할 수 있지만, Contracts 안에서 SimpleStorage.sol에서 컨트랙트 파일 작성 Migrations.sol은 삭제하면 안된다. 2. Ganache 시작 가나쉐를 설치해주고(SW 설치 필요) Quick start를 통해 테스트용 주소 작성 그리고 이걸 설치하기 전에 윈도우 내부에서 설정 오류가 발생했었는데,..

* 해당 강의는 Udemy의 React 완벽 가이드를 수강하고 작성한 TIL 입니다. 외국 강의이지만, 자막 설명은 물론 설명이 너무 잘 되어있어서 복기하기에 좋은 강의입니다 :) 1. let과 const의 차이점 let은 값을 수정할 수 있지만 const는 값을 수정할 수 없다. 그리고 JS에서는 대부분 const를 사용한다 const는 값이 변하지 않는 상수 변수이다. var을 사용하면 값이 바뀐 그대로 나온다. var 부분을 let 으로 변경하여도 brandy 그리고 jeonghoon이 출력된다. 그런데 여기서 let > const로 변경하면 어떻게 될까? TypeError가 발생한다. 상수 변수에다 값을 재할당(brandy > jeonghoon)하려고 했기 때문이다. 즉, const는 새로운 값을..

1. 페이지 이동을 위해 npm install react-router-dom을 설치하고 코드도 계속해서 보았는데 설정한 path대로 URL이 출력되지 않고 빈 화면만 나왔다. 구글로 서치하던 중에 기존에 설치했던 react-router-dom을 uninstall하고 npm install react-router-dom@5 로 했더니 원하던 결과가 출력되었다. 2. Unexpected use of 'location' no-restricted-globals 의 경우 스택오버플로우를 참고해보니 location 변수를 사용하는 곳 위에 // eslint-disable-next-line no-restricted-globals 를 추가하라고 한다. 그대로 따라해보니 리액트에서 오류메시지는 뜨지 않았다.

1. key props 값은 유일해야 한다 key={movie.id} Movie 컴포넌트에 위와 같이 key props를 추가해주면 된다. 2. HTML에서는 class라고 쓰지만, 리액트에서는 className을 사용한다. 3. PropType propTypes 전부 PropTypes 라고 써줬는데 리액트 화면에서 에러가 났다. propTypes로 쓰라고. 그런데 고치다보니 어떤건 propTypes를 써야 하고 어떤 속성은 PropTypes라고 쓰라고 하고 어떤 것은 ProtoTypes 라고 이건 무슨..? Quick Fix를 하니 결과는 잘 나왔다. 그런데 왜 어떤건 propTypes라고 써줘야 하고 어떤 것은 PropTypes라고 써줘야 하는 걸까 구글링을 해보았는데 이런 케이스를 찾지 못했다.. ..

1. 함수형 컴포넌트 function App() { return ( 우리가 클래스형 컴포넌트를 사용하는 이유는 state 를 사용하기 위해서이다. state는 객체 형태의 데이터이고 state를 사용하려면 반드시 클래스형 컴포넌트 안에서 소문자를 이용하여 state라고 적으면 된다. 2. state의 쓰임 state는 동적 데이터를 저장할 수 있어야 한다. 동적이라는 것은 값을 바꿀 수 있다는 말인데, 즉 값을 바꿀 수 있도록 코드를 작성해야 한다. (예를 들면 사용자 동작에 따라 state의 count를 바꿀 수 있도록) react는 state를 직접 변경하지 못하게 한다. add = () => { // console.log('add'); this.state.count=1; }; minus = () =..