쭈링이.log 쭈링이.log

SoliditySolidity는 이더리움 블록체인에서 계약지향 프로그래밍언어로블록체인 플랫폼의 스마트 컨트랙트 로직을 작성할때 사용한다.Solidity는 이러한 스마트 컨트랙트을 작성하고 배포하는 데 사용되며, 이더리움 가상 머신(Ethereum Virtual Machine, EVM)에서 실행될 수 있도록 설계되었다.Solidity는 자바스크립트와 비슷한 문법을 가지고 있으며, 이더리움의 특정 기능을 활용하여 스마트 계약을 작성할 수 있도록 지원합니다. 이더리움 블록체인에서 중요한 역할을 하는 Solidity는 이더리움 생태계에서 가장 널리 사용되는 스마트 컨트랙트  언어 중 하나이다.  DAppDApp은 분산형 응용 프로그램(Decentralized Application)의 줄임말로,중앙 집중형 서버가..

React Redux에서 store의 값을 수정하기위해 createSlice함수 속 reducers 속성이 필요하다.reducers 속성이란 현재 상태와 액션(action)을 인수로 사용하여 새로운 상태 결과를 반환한다. let user = createSlice({ name : 'user', initialState: 'zelord', reducers: { changeName(state) { // state는 값을 가리킨다. (zelord) return 'Kim zelord' // return으로 값을 전달한다. } }});// 다른 컴포넌트가 사용할 수 있도록 export 한다.export let { changeName } = user.a..

React Redux Redux란 javascript의 상태(데이터) 관리 라이브러리로 본질은 Node.js의 모듈이다. React 에서 Redux를 사용하여 props로 단계별로 내려 사용하지않고 컴포넌트들 간의 데이터 사용이 자유로워진다. Redux를 설치하기위해 터미널에 명령어를 입력한다. npm install @reduxjs/toolkit react-redux Redux를 설치하면 이러한 로그가 나타난다. redux로 데이터를 저장하기위해 store.js 파일을 만들어 스토어를 생성한다. // store.js // configureStore와 createSlice를 사용할 수 있도록 불러온다. import { configureStore, createSlice } from '@reduxjs/tool..

React Context API Context API 란 props를 일일히 자식 태그마다 넘겨보내지 않고 컴포넌트 트리 전체에 데이터를 쉽게 공유할 수 있도록 해주는 React 내장함수이다. Contex API를 사용하기위에 createContext함수를 import 해야한다. import { createContext } from "react"; createContext 함수란 context를 생성하여 공용하기위한 데이터(state)를 저장한다. export let Context1 = createContext(); 데이터를 공유하기위해 context를 생성하여 state 공유를 원하는 태그를 감싸준다. // 공용으로 사용할 데이터 let [product] = useState(['hat', 'shirt'..

React Axios React 에서 ajax를 사용하여 데이터를 가져오기 위해선 axios 라이브러리를 사용하여 데이터 통신을 할 수있다. 우선 터미널에 명령어를 입력하여 axios를 설치한다. npm install axios npm install axios 를 입력하여 설치하면 이러한 로그가 나타난다. 설치를 한 후 axios를 import를 해서 사용할 수 있도록 설정한다. import axios from 'axios'; axios의 데이터를 불러오는 get문법은 이러하다. axios.get('주소입력').then(() => { // 가져온 데이터를 활용한 코드 입력 }).catch(() => { // 실패시 코드 입력 }) get을 사용하여 가져온 후 then의 콜백함수를 사용하여 가져온 데이터를..

React useEffect dependency array useEffect 에서 두번째 파라미터를 옵션으로 dependency array값을 설정할 수 있다. useEffect 에서 dependency array 를 선언하면 useEffect가 mount된 후 선언된 배열속 값이 변경될때마다 실행하게된다. // useEffect 함수 useEffect(()=> { setTimeout(() => { setTemp(false); }, 2000); // dependecy array값으로 mount된 후 count의 값이 변경될때 실행된다. console.log('hello') }, [count]); count를 클릭 할 때마다 hello 로그가 찍힌다. dependency array에 값을 넣지않고 선언만 ..

React Lifecycle React Lifecycle 이란 컴포넌트들의 생명주기를 뜻하며 컴포넌트의 생성 부터 시작해 업데이트, 소멸이 되어 사라질 때 호출하는 메서드이다. 컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 순서에 따라 생명주기를 갖는다. useEffect useEffect 란 react lifecycle에 하나의 훅으로서 컴포넌트가 렌더링을 할 때 작업이 실행 되도록 리액트의 hook이다. useEffect를 사용하기위해 react에서 import를 해야한다. // useEffect 훅을 사용하기 위해 선언한다. import { useEffect } from 'react'; 컴포넌트속에 useEffect 함수를 선언하여 사용하면된다...

Styled Components React styled components 란 js파일에서 css를 사용할 수 있도록 도와주는 Css-in-js 라이브러리이다. styled components를 사용하기 위해 우선 설치를 해야한다. npm install styled-components 터미널을 연 후 npm install styled-components 명령어를 입력하여 설치한다. 설치가 완료되면 이러한 로그창이 나타난다. styled components 를 사용하기위해선 라이브러리를 불러와야한다. import styled from 'styled-components'; import로 라이브러리를 불러 온후 변수를 만들어 styled components 문법을 사용하면된다. // 태그로 사용할 변수명을 만..