SSAFY 6기16 인프런 nft 강좌 #3 - react 개발 📌 Main 페이지 🔖 main.tsx import React, { FC, useState } from "react"; import { Box, Text, Flex, Button } from "@chakra-ui/react"; import { mintAnimalTokenContract } from "../contracts/index"; // import AnimalCard from "../components/AnimalCard"; interface MainProps { account: string; } const Main: FC = ({ account }) => { const [newAnimalCard, setNewAnimalCard] = useState(); const onClickMint = asyn.. 2022. 3. 14. 인프런 nft 강좌 #2 - react 세팅 📌 세팅 현재 web3 관련해서 create-react-app으로 생성 시 버그가 있으므로, 아래 boiler-plate를 clone해서 사용하자. ( https://github.com/h662/web3-boilerplate ) 🔖 UI chakra ui를 사용하자. ( https://chakra-ui.com/ ) npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 🔖 index.tsx import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import reportWebVitals from "./reportWebVita.. 2022. 3. 14. 인프런 nft 강좌 #1 스마트 컨트랙트 작성 📌 설치 npm i @openzeppelin/contracts npm install -g remixd deprecated 으로 설치 안된다. 아래 명령어를 이용하자 npm install -g @remix-project/remixd 📦 sample code - MintAnimalToken.sol // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol"; contract MintAnimalToken is ERC721Enumerable { constructor() ERC721("h662Animals","HAS"){} functio.. 2022. 3. 10. 인프런 Lottery Dapp 강좌 #1 📌 개발 환경 nodejs truffle npm -g install truffle@5.0.2 ganache-cli 블록체인을 쉽게 Mock을 해놓은 테스트해놓은 app vscode - solidity extension metamask 📌 truffle 세팅 폴더 생성한 뒤 해당 폴더에서 truffle init contracts 스마트 컨트렉트 관련 파일들을 작성 migrations 배포 관련 스크립트를 작성 test solidity, json을 이용해서 만드는 테스트가 있는데, 보통 json을 이용해서 만드는 테스트로 사용한다. 📦 Compile pragma solidity >= 0.4; contract Lottery{ } contracts 폴더 안에 Lottery.sol 파일 생성 후 위 코드 작성 t.. 2022. 3. 3. jpa study #4 - jpql & spring data jpa 📌 JPQL Application이 필요한 data만 db에서 쏙쏙 뽑아서 가져오려면, 결국 검색 조건이 포함된 SQL이 필요하다. JPQ는 SQL을 추상화한 JPQL이라는 객체 지향 쿼리 언어를 제공한다. JPQL은 Entity 객체를 대상으로 쿼리한다. 반면에, SQL은 Table 대상으로 쿼리한다. JPQL은 SQL로 변환돼서 실행된다. JPQL을 한 마디로 정의하면 객체 지향 SQL이다. 쿼리에 의해 가져온 Entity는 전부 영속성 컨텍스트에 의해 관리된다. ▸ JPQL 실습 -1) wildcard import entity.*; import javax.persistence.EntityManager; import javax.persistence.EntityManagerFactory; import .. 2022. 1. 20. jpa study #3 - 프록시 & 연관관계 매핑 & 고급매핑 📌 목차 Proxy proxy의 개념 FetchType.LAZY , FetchType.EAGER 패치조인 N+1 문제 참조) @ManyToMany @Embedded 값 타입 이후 학습해야 할 사항 JPQL -> ( QueryDSL : 스터디에서는 학습 x ) Spring Data JPA 📌 Proxy em.find() - em.getReference() em.find() DB에서 실제 Entity 객체를 조회 em.getReference() DB조회를 아직 하지 않은, 가짜 객체인 Proxy객체를 조회 ▸ proxy 예제 import entity.Member; import entity.Team; import javax.persistence.EntityManager; import javax.persiste.. 2022. 1. 13. jpa study #2 - jpa의 동작 원리 영속성 컨텍스트 📌 목차 1. jpa의 동작 원리 영속성 컨텍스트 2. Mapping 및 다양한 annotation 🔥 3. Spring Data jpa 📌 스터디의 목표 →1차 스터디 복습 :영속성 컨텍스트와 동작 원리에 대해서 이해할 수 있다. EntityManager(영속성 컨텍스트) 1차캐시 repeatable read 보장 쓰기 지연 sql 저장소 em.persist em.flush 변경 감지 필수 annotation들에 대해서 이해할 수 있다. @Id @Entity @Column @Enumerated @GeneratedValue 연관관계 매핑에 대해 이해할 수 있다. @OneToMany 연관관계 메서드 @ManyToOne @OneToOne 외래키의 주인 @ManyToMany mappedBy 3차 스터디 예정.. 2022. 1. 11. jpa study #1 - jpa의 동작 원리 영속성 컨텍스트 ▪︎전체 목차 1. jpa의 동작 원리 영속성 컨텍스트 🔥 2. Mapping 및 다양한 annotation 3. Spring Data jpa 📌 jpa의 필요성 PPT 참조 📌 개발 환경 세팅 maven으로 프로젝트 생성 ▸ maven으로 프로젝트 생성하는 이유 gradle과 spring boot로 순수 jpa를 이용해서 개발하려고 하면 복잡한 세팅을 해주어야 한다. 링크 : (https://kth990303.tistory.com/30) - (https://www.inflearn.com/questions/27532) 다른 거는 세팅할 수 있는데, persistence-unit을 설정하는게 까다로워 보였다. spring과 gradle이 핵심이 아니므로, 해당 스터디에서는 그냥 김영한 - jpa 강좌의 세.. 2022. 1. 9. 이전 1 2 다음
