- 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를 통해 테스트용 주소 작성 그리고 이걸 설치하기 전에 윈도우 내부에서 설정 오류가 발생했었는데,..

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 를 추가하라고 한다. 그대로 따라해보니 리액트에서 오류메시지는 뜨지 않았다.

아직 React의 key-props 그리고 컴포넌트들이 헷갈린다. 이참에 이 둘의 개념들에 대해 한 번 정리해보자. Warning: Each child in an array or iterator should have a unique "key" prop ... 리액트를 개발하다 보면 자주 나오는 Error.. 이전 포스팅에서도 이 에러에 대해 다뤘다. 왜 React의 Element에 key prop이 필요하고, key prop을 사용하면서 주의해야 할 점? - 재조정 (Reconcilation) key prop을 이해하기에 앞서 React가 화면을 어떻게 업데이트 하는지 알 필요가 있다. React는 새로운 엘리먼트를 그리기 위해 비교 알고리즘 (Diffing Algorithm)을 이용해서 효율성을 최대화..

1. state 리마인드 다시 한번 주의하자 리액트는 state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력한다. 그런데 state를 직접 변경하는 경우에는 render() 함수를 다시 실행하지 않는다. 즉 어떤 동작이 업데이트가 되면(+ 버튼을 누른다거나, - 버튼을 누른다거나.. 하면) render() 함수가 다시 실행되어 그 결과를 화면에 출력해주는 것이다. 2. 리액트 생명주기 큼직큼직한것만 보자면 constructor() 함수 실행 > render() 함수 실행 > componentDidMount() 함수 실행 1.Add또는 Minus 버튼을 누르면 setState() 함수가 실행되고 2. 버튼이 눌렸으므로 화면의 변화가 생긴다. render() 함수가 다시 ..

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

1. 리액트가 반환한 컴포넌트 renderFood()는 map() 함수가 반환한 리액트 컴포넌트를 출력하려고 사용해본 코드이다. function renderFood(dish){ return ; } // const renderFood = dish => ;도 같은 표현이다. function App() { console.log(foodILike.map(renderFood)); return( /*;*/ {/*{foodILike.map(dish=>())}*/} {/*위에서 food라는 컴포넌트를 만들고 여기서 사용*/} {foodILike.map(renderFood)} ); } 0번 인덱스에 대해서 구체적으로 보고 싶다면 다시 열어서 본다. 콘솔창을 보면 아래와 같은 에러가 발생하는데 key의 값이 실제로 없어서..