1 Adding a Button
(1) Buttin UI React
- 첫번째 섹션: 아이콘이 있는 버튼 만드는 방법
- 두번째 섹션: 시멘틱 UI를 사용하여 간단하게 버튼 표현하는 방법
2 Layout.js
- <h3> 등의 태그를 사용하여 헤더를 추가할 시 모든 페이지에 수동으로 추가해줘야 함
- Layout.js 파일을 만들어 표시하고자 하는 일반적인 요소를 모두 담고 재사용! ex. 헤더, 바닥글, 사이드바 등
- index.js 파일에 import, rande() 수정
- Layout.js 작성
3 Assembling a Header
- 헤더로만 사용하기 위한 Header.js 파일 새로 작성
- Margin 속성으로 어색한 여백 값 조정 > style 속성으
- floated 속성으로 정렬 수정
- Button 다음에 Campain이 랜더링 되도록 하여 배열 수정
4 Final CSS Fix
- pages/campaigns/new.js 작성
- Head 태그는 Link 태그나 스크립트만 사용할 수 있음
5 Form Creation
- 폼 태그를 사용하여 내부에 구성요소를 배치할 수 있음
- 제출은 Button 태그를 사용한 다는 것에 유의
6 Input Change Handlers
- label : 제출 버튼에 나타날 값
- labelPosition: 제출 버튼이 나타날 위치
- value: 초기에 입력되어 있을 값
- onChange
7 Input Change Handlers
- 이벤트 핸들러: 새로운 메소드를 추가하고 제출 시 호출
- 제출된 구성 요소에 대해 어떤 요소인지 참조해줘야 함
- 브라우저에서 양식이 제출될 때 마다 브라우저는 자동으로 서버단에 양식 제출
- 트랜잭션을 보낼 accounts를 web3에서 가져옴
- 여기까지 코드를 짜면 잘못된 입력갑ex. 문자에 대해서는 오류만 출력하고 제대로 된 코드가 동작하지 않음
8 Form Error Handling
- try-catch 문으로 err의 경우에 에러문 출력하도록 함
- err Semantic Ui 적용
- 새로고침해도 에러메세지가 사라지지 않음
- 폼 태그에 빈 문자열인 errMessage를 넣어줘야 함 > !! 추가
9 Routing Issues
- 서로 다른 경로에서 페이지가 시작될 때 주소가 계속해서 유지되기를 바람
- Next Routes
- routes.js 파일을 생성하여 경로를 탐색하는 도우미 역할을 수행하도록 함 > 루트 파일이 해당 파일 쓰도록 해야함
- npm install next-routes --legacy-peer-deps
- new.js > 계약을 생성한 직후 사용자를 인덱스 경로로 리다이렉션
10 Header Navigation
- 라우팅 핸들러를 설정 안한 상태에서 URL 클릭 > 404 err
1 Adding a Button
(1) Buttin UI React
- 첫번째 섹션: 아이콘이 있는 버튼 만드는 방법
- 두번째 섹션: 시멘틱 UI를 사용하여 간단하게 버튼 표현하는 방법
2 Layout.js
- <h3> 등의 태그를 사용하여 헤더를 추가할 시 모든 페이지에 수동으로 추가해줘야 함
- Layout.js 파일을 만들어 표시하고자 하는 일반적인 요소를 모두 담고 재사용! ex. 헤더, 바닥글, 사이드바 등
- index.js 파일에 import, rande() 수정
- Layout.js 작성
3 Assembling a Header
- 헤더로만 사용하기 위한 Header.js 파일 새로 작성
- Margin 속성으로 어색한 여백 값 조정 > style 속성으
- floated 속성으로 정렬 수정
- Button 다음에 Campain이 랜더링 되도록 하여 배열 수정
4 Final CSS Fix
- pages/campaigns/new.js 작성
- Head 태그는 Link 태그나 스크립트만 사용할 수 있음
5 Form Creation
- 폼 태그를 사용하여 내부에 구성요소를 배치할 수 있음
- 제출은 Button 태그를 사용한 다는 것에 유의
6 Input Change Handlers
- label : 제출 버튼에 나타날 값
- labelPosition: 제출 버튼이 나타날 위치
- value: 초기에 입력되어 있을 값
- onChange
7 Input Change Handlers
- 이벤트 핸들러: 새로운 메소드를 추가하고 제출 시 호출
- 제출된 구성 요소에 대해 어떤 요소인지 참조해줘야 함
- 브라우저에서 양식이 제출될 때 마다 브라우저는 자동으로 서버단에 양식 제출
- 트랜잭션을 보낼 accounts를 web3에서 가져옴
- 여기까지 코드를 짜면 잘못된 입력갑ex. 문자에 대해서는 오류만 출력하고 제대로 된 코드가 동작하지 않음
8 Form Error Handling
- try-catch 문으로 err의 경우에 에러문 출력하도록 함
- err Semantic Ui 적용
- 새로고침해도 에러메세지가 사라지지 않음
- 폼 태그에 빈 문자열인 errMessage를 넣어줘야 함 > !! 추가
9 Routing Issues
- 서로 다른 경로에서 페이지가 시작될 때 주소가 계속해서 유지되기를 바람
- Next Routes
- routes.js 파일을 생성하여 경로를 탐색하는 도우미 역할을 수행하도록 함 > 루트 파일이 해당 파일 쓰도록 해야함
- npm install next-routes --legacy-peer-deps
- new.js > 계약을 생성한 직후 사용자를 인덱스 경로로 리다이렉션
10 Header Navigation
- 라우팅 핸들러를 설정 안한 상태에서 URL 클릭 > 404 err
