728x90 블록체인_9기/과제 블록체인_9기/과제 2023. 10. 4. 과제_230927_Blockchain(트랜잭션 사용해 로또 추첨하기) 과제내용 " 스마트 컨트랙트를 이용해서 로또 제작해보세요~ " 가 과제 내용이었다..... 힘... 내볼게요....ㅎㅎ 결과물 #. 폴더의 경로는 다음과 같다. 1. src/contracts/lotto.sol_로또 작업을 구현하기 위한 solidity 코드를 작성한다. Lotto 컨트럭트에서 사용할 변수를 선언한다. lottoNums : 로또 숫자를 뽑을 숫자 배열을 담는다. ( 1 ~ 45의 숫자) selecNums : lottoNums에서 뽑은 숫자 6개를 배열로 담는다. (중복되지 않아야 한다.) numHistory : 로또 추첨 결과(selecNums)를 담는다. (이중 배열) getSelecLotto 함수는 로또를 추첨한 결과인 selecNums를 반환한다. 'public view' 속성으로 읽.. 블록체인_9기/과제 2023. 7. 19. 51강_220718_React(useContext, useMemo 활용_TODOLIST 제작) 과제내용 TODO LIST 컴포넌트 부모 컴포넌트 내용 컴포넌트 전역으로 내용관리 작성 컴포넌트(팝업) 가능 게시판 제목과, 사용자 이름은 변경이 가능하다. 제목과 이름 변경 시, 리스트는 리렌더링 되지 않는다. 리스트가 렌더링 되는 경우는 리스트의 내용이 추가되었을 때만이다. 신규 작성 시, 작성 버튼으로 팝업이 열려서 작성 컴포넌트에서 수행한다. 결과물 💻 App.js_useContext를 사용할 수 있도록 Provider를 설정한다. createContext를 실행하는 Global객체를 선언하여, Provider로 state객체를 초기값으로 설정한다. 루트 컴포넌트인 App 컴포넌트 상위에 Global.Provider를 감싸 context를 사용할 수 있도록 설정하였다. import { create.. 블록체인_9기/과제 2023. 7. 10. 49강_220710_React(Redux 활용_간단한 주문페이지 제작) 과제내용 음식주문 페이지 ... 하지만 음식이 아닌 차를 넣어보았다...ㅎ 메인페이지 👉 로그인 페이지 👉 음식주문 페이지 👉 마이페이지 로그인을 해야 '음식주문 페이지'와 '마이페이지'로 넘어갈 수 있다. 주문한 음식들을 마이페이지에서 확인할 수 있다. react-router / react-redux 사용한다. props 사용하지 않기! 결과물 #. 폴더의 경로는 다음과 같다 1. redux/reducer/index.js_store로 설정할 객체를 선언하고, 스토어 상태를 변경하는 함수 reducer를 선언한다. my 객체에 store값으로 사용될 값을 선언한다. reduccer 함수에 전달받은 action 값에 따라 상태를 업데이트한다. 지금은 선택하는 값 밖에 안들어갔지만 추후에 익숙해지면 토글되는.. 블록체인_9기/과제 2023. 7. 7. 48강_220706_React(TODO LIST 제작) 과제내용 TODO LIST 제작 노출되어야 할 내용 순번 내용 할일 처리 체크 리스트를 작성할 수 있다. 자유작업 상세페이지 자유 작업은 진행하지 않고, 필수 작업만을 진행하였다. 결과물 #. 폴더의 경로는 다음과 같다. 1. main.jsx_전체를 그리는 컴포넌트 Main을 정의한다. import React from "react"; import { Header, Input } from "../components"; const Main = () => { // Todo 내용을 입력받아 값을 보내준다. // input의 기능을 함 // 내용을 리스트로 보내준다. return ( ); }; export default Main; 2. Input.jxs_내용을 입력받는 input을 그려주고, 입력받은 내용을 그리.. 블록체인_9기/과제 2023. 7. 5. 47강_220705_React(지뢰찾기 제작) 과제내용 지뢰찾기 만들기 3 X 3 랜덤한 위치에 3개의 지뢰를 넣어주고 타일 컴포넌트를 클릭하면 지뢰인지 아닌지 보여주기 지뢰를 모두 피해서 열면 게임 클리어 화면 띄워주고 성공하지 못하면 게임오버 화면 띄워주자 Σ(っ °Д °;)っ 결과물 컴포넌트 구조 Main.jsx Mine.jsx Gameend.jsx Gameover.jsx 1. Main.jsx_지뢰의 값을 배열에 넣고 랜덤으로 노출시킨다. 페이지의 전체구성은 render한다. random 함수는 지뢰의 상태 값을 담은 변수를 랜덤하게 재배치 시키는 함수이다. import React from "react"; import Mine from "./Mine"; const Main = () => { const arr = ["mine", "on", "on.. 블록체인_9기/과제 2023. 7. 4. 46강_220704_React(캘린더 제작) 과제내용 7월 달력 하나 만들어보기 함수형 컴포넌트로 제작 버튼 누르면 달력보이기 구성 달력 헤더 타이틀, 햄버거버튼, 요일 달력 바디 헤더 리본, 숫자 달력 푸터 본인이름, 회사명 넣기 결과물 #. 폴더의 경로는 다음과 같다. 1. Main.jsx_전체 사이트에 그려질 내용을 render한다. 달력이 보이기 전, 사이트 상단에 제목과 캘린더를 토글할 버튼, 캘린더 영역 컴포넌트를 render한다. ViewBtn : 캘린더 내용은 CBody 컴포넌트를 토글할 버튼 CBody : 캘린더 내용 전체를 담은 컴포넌트 import ViewBtn from "../components/ViewBtn"; import CBody from "../components/CalendarDiv"; const Main = () =.. 블록체인_9기/과제 2023. 6. 30. 44강_220629_React(로또 추첨기 제작) 과제내용 로또번호 추첨기 제작 예쁘게 만들기 this.state 사용 props 속성 값 관리 컴포넌트 최소 단위까지 쪼개보기 결과물 App 컴포넌트 페이지의 전체 그림을 render 한다. LottoSet 컴포넌트를 render 한다. LottoSet 컴포넌트 로또 추첨 기능을 하는 컴포넌트이다. 로또 추첨 결과를 가져와야 하므로, 추첨결과의 데이터를 가지고 있어 그리는 역할을 하는 컴포넌트들의 부모 컴포넌트로 설정했다. 로또 추첨을 동작하는 함수를 실행하기 위해 button 태그를 클릭하면 함수를 실행할 수 있도록 설정하였다. LottoDiv 컴포넌트를 render하고, 버튼을 눌러 추첨받은 번호 6개를 배열의 형태로 "lottonum" 객체에 담아 보낸다. LottoList 컴포넌트 render하고.. 블록체인_9기/과제 2023. 5. 30. 36강_220523_Node.js(게시판 페이지 만들기 총 복습) 미션내용 미션 내용은 다음과 같다. 기획과정 기획은 간단하게 구성하였다. 데이터베이스 테이블 생성, 페이지 생성 두 과정을 정리한 후 제작에 들어갔다. 데이터베이스 테이블 생성 Post 테이블 게시글이 담길 테이블이다. 구성 id : 테이블 생성 시 자동으로 생성될 고유키가 담길 컬럼 title: 게시글의 제목이 담길 컬럼 content: 게시글의 내용이 담길 컬럼 writer: 게시글의 작성자가 담길 칼럼 User 테이블의 id값을 참조할 컬럼이다. User 테이블 유저의 정보가 담길 테이블이다. 구성 id : 테이블 생성 시 자동으로 생성될 고유키가 담길 컬럼 user_id : 유저의 id값이 담길 칼럼 user_pw : 유저의 pw값이 담길 칼럼 user_name : 유저의 닉네임이 들어갈 칼럼 u.. 블록체인_9기/과제 2023. 5. 29. 35강_230522_Node.js(회원가입, 로그인 기능이 있는 게시판 페이지 구현) 제작내용 회원가입과 로그인 페이지가 있는 게시판 페이지를 구현하도록 한다. 데이터는 데이터베이스 공간에 저장되며, DB공간에 유저의 정보를 담는 User 테이블, 게시글 내용을 담는 Post 테이블을 제작한다. Post테이블은 User테이블의 고유 값인 ' id '컬럼을 참조하며 그 내용을 user_id 컬럼에 담는다. 유저 정보는 회원가입과 로그인 기능이 있으며, 회원가입 시 유저의 정보가 User 테이블의 데이터베이스에 담긴다. 로그인 시 DB에 해당 계정이 있는지 조회 후, 있으면 로그인을 성공시키며 로그인을 유지시킬 Access Token을 발행한다. 회원가입, 로그인 페이지를 제외한 모든 페이지는 로그인을 성공하여 Access Token이 유효할 경우에만 페이지에 접속할 수 있으며 해당 조건을 .. 이전 1 2 3 다음 728x90
