crypto_yurright.log

AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST' 트러블슈팅

Sat, 02 Mar 2024 12:40:06 GMT

MinuteCandle.jsx:14 Uncaught (in promise) AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Request failed with status code 400"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}data: error: {name: 400, message: 'Missing request parameter error. Check the required parameters!'}[[Prototype]]: Objectheaders: AxiosHeaders {cache-control: 'no-cache, no-store, max-age=0, must-revalidate', content-type: 'application/json; charset=utf-8', expires: '0', pragma: 'no-cache'}request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}status: 400statusText: ""[[Prototype]]: Objectstack: "AxiosError: Request failed with status code 400\n at settle (http://localhost:3001/main.da0a1744dd95d793ed15.hot-update.js:1603:12)\n at XMLHttpRequest.onloadend (http://localhost:3001/main.da0a1744dd95d793ed15.hot-update.js:277:66)\n at Axios.request (http://localhost:3001/main.da0a1744dd95d793ed15.hot-update.js:773:41)\n at async getMinuteCandle (http://localhost:3001/main.da0a1744dd95d793ed15.hot-update.js:33:22)"[[Prototype]]: Error getMinuteCandle @ MinuteCandle.jsx:14 await in getMinuteCandle (async) (anonymous) @ MinuteCandle.jsx:17 commitHookEffectListMount @ react-dom.development.js:23123 invokePassiveEffectMountInDEV @ react-dom.development.js:25129 invokeEffectsInDev @ react-dom.development.js:27323 commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27302 flushPassiveEffectsImpl @ react-dom.development.js:27029 flushPassiveEffects @ react-dom.development.js:26956 commitRootImpl @ react-dom.development.js:26911 commitRoot @ react-dom.development.js:26656 performSyncWorkOnRoot @ react-dom.development.js:26091 flushSyncCallbacks @ react-dom.development.js:12017 flushSync @ react-dom.development.js:26176 scheduleRefresh @ react-dom.development.js:27769 renderer.scheduleRefresh @ renderer.js:592 (anonymous) @ react-refresh-runtime.development.js:275 performReactRefresh @ react-refresh-runtime.development.js:264 (anonymous) @ RefreshUtils.js:78 setTimeout (async) enqueueUpdate @ RefreshUtils.js:76 executeRuntime @ RefreshUtils.js:225 $ReactRefreshModuleRuntime$ @ MinuteCandle.jsx:23 ./src/components/MinuteCandle.jsx @ MinuteCandle.jsx:23 options.factory @ CancelToken.js:117 webpack_require @ global-this.js:4 _requireSelf @ xhr.js:191 apply @ AxiosHeaders.js:156 (anonymous) @ CancelToken.js:54 internalApply @ CancelToken.js:51 (anonymous) @ axios.js:84 waitForBlockingPromises @ axios.js:35 (anonymous) @ axios.js:80 Promise.then (async) (anonymous) @ axios.js:78 Promise.then (async) (anonymous) @ axios.js:57 Promise.then (async) hotCheck @ axios.js:47 check @ stripAnsi.js:18 (anonymous) @ dev-server.js:39 emit @ events.js:122 reloadApp @ reloadApp.js:16 warnings @ index.js:252 (anonymous) @ socket.js:40 client.onmessage @ WebSocketClient.js:23 Show 1 more frame Show less

axios 400 에러가 났다.

{name: 400, message: 'Missing request parameter error. Check the required parameters!'}

이 부분을 보니, 입력해야 하는 파라미터가 추가로 있나보다.

코드를 살펴보면

//MinuteCandle.jsx
import axios from "axios";
import { useEffect } from "react";

const MinuteCandle = () => {
  const getMinuteCandle = async () => {
    const response = await axios.get(
      `https://api.upbit.com/v1/candles/minutes/${1}`
    );
    console.log(response);
  };

  useEffect(() => {
    getMinuteCandle();
  }, []);

  return minute candle!;
};

export default MinuteCandle;

업비트 분(Minute) 캔들 문서를 보니, request parameters 이 부분 같다.

마켓 코드 조회 페이지를 보면, request parameter 없이 response가 있다. 이경우 추가로 입력하지 않아도 위에 적혀 있는 https://api.upbit.com/v1/market/all 만으로 결과를 얻을 수 있다.

하지만 분 캔들 문서는 다른 것이다. request parameter를 꼭 입력해줘야지만 response를 받을 수 있는 것이었다!

오른쪽에 나와있는 예시처럼

? 뒤에 parameter = 파라미터 값 & parameter = 파라미터 값으로 필요한 두 개를 입력해주니 해결되었다. (to 파라미터는 비어있어도 된다고 하니, 비어놓고 해봄)

수정한 코드:

//MinuteCandle.jsx
import axios from "axios";
import { useEffect } from "react";

const MinuteCandle = () => {
  const getMinuteCandle = async () => {
    const response = await axios.get(
      `https://api.upbit.com/v1/candles/minutes/${1}?market=KRW-BTC&count=1`
    );
    console.log(response);
  };

  useEffect(() => {
    getMinuteCandle();
  }, []);

  return minute candle!;
};

export default MinuteCandle;

업비트 원화마켓 비트코인의 1분봉 관련 수치가 들어온 것 확인할 수 있다. 각각의 값이 무엇을 의미하는지도 다음 글에서 정리해보도록 하겠다.

response data도 제대로 들어온 것을 확인할 수 있다.

Uncaught Error: Objects are not valid as a React child 에러 트러블슈팅

Sat, 02 Mar 2024 12:14:46 GMT

트러블슈팅

코드 깃허브: https://github.com/yurright/upbit-study

react-dom.development.js:14860 Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom.development.js:14860:1) at reconcileChildFibers (react-dom.development.js:15800:1) at reconcileChildren (react-dom.development.js:19143:1) at mountIndeterminateComponent (react-dom.development.js:20130:1) at beginWork (react-dom.development.js:21563:1) at beginWork$1 (react-dom.development.js:27400:1) at performUnitOfWork (react-dom.development.js:26532:1) at workLoopSync (react-dom.development.js:26439:1) at renderRootSync (react-dom.development.js:26407:1) at recoverFromConcurrentError (react-dom.development.js:25825:1)

return에 promise object가 직접 들어가서 이 에러가 발생했다.

코드를 보니 App.jsx에 컴포넌트로 MinuteCandle 컴포넌트가 문제였는데

   //App.jsx
    const App = () => {
  return (
    
      Hi upbit!
      {/*  */}
      
        
      
    
  );
};

export default App;

MinuteCandle.jsx에서 컴포넌트를 보니 왜인지 async 함수로 정의되어 있어서 리턴값이 프로미스로 들어오는 게 문제였다.

//MinuteCandle.jsx
const MinuteCandle = async () => {
  return minute candle!;
};

export default MinuteCandle;

MinuteCandle 컴포넌트에서 async를 빼주니 해결되었다.

[solidity] i++; i =+; i = i + i; 가스비 비교

Sat, 30 Dec 2023 13:29:06 GMT

i++ < i+= < i = i + 1 가스비 비싼 순서

[solidity] string 비교하는 방법

Sat, 30 Dec 2023 11:49:55 GMT

스트링 비교해야 할때 해시함수 돌려서 확인한다.

TypeError: Built-in binary operator == cannot be applied to types string memory and literal_string"abc".

솔리디티 코드를 작성하다보면, 두 스트링 값이 같은지 확인해야 할 때가 있다.


   function getString(string memory _s) public pure returns(bool) {
       if ( _s == "abc") {
           return true;
       } else {
           return false;
       }
   }

그러나, 스트링 비교 코드를 작성하면, 타입에러가 발생해 난처할 것이다.

솔리디티는 스트링 비교 시, 해시함수를 돌려 일치여부를 확인해야 한다.

function stringComp(string memory _s) public pure returns(bool) {
       if(keccak256(bytes(_s)) == keccak256(bytes("abc"))) {
           return true;
       } else {
           return false;
       }
   }

같은 스트링 해시하면 같은 값 나온다는 것 활용해서 같은지 판단!!!

require 이용해 가스비 최적화

function stringComp_eff(string memory _s) public pure returns(bool) {


       require(bytes(_s).length ==bytes("abc").length, "No");


       if(keccak256(bytes(_s)) == keccak256(bytes("abc"))) {
           return true;
       } else {
           return false;
       }
   }

함께 참고할 만한 글

[solidity] 가스비 최적화

Sat, 30 Dec 2023 11:42:02 GMT

바로 require 떠올리기

[solidity] require : 가스비 최적화 위해 함수 실행 조건 설정

Sat, 30 Dec 2023 10:55:20 GMT

require는 솔리디티 함수를 실행하거나 실행하지 않을 조건을 설정할 때 사용한다.

[등장배경]

보통 조건문은 if를 사용하지만** if문은** 의미 없는 경우의 수까지 함수를 실행시켜 가스비가 의미 없이 소비되는 경우가 발생한다.
솔리디티 코드를 작성할 때에는 가스비가 최소한으로 들도록 설계해야 한다.
따라서, 특정 경우 아예 함수를 실행시키지 않도록 할 필요성이 존재하여 require 문이 탄생하게 되었다.

[용법]


function A() {
require([실행 조건], "[false일 경우 띄울 메시지]");
rest of code;
}

require문 실행 조건이 true 이면 함수가 실행된다.
require문 조건이 false이면 require가 위치한 함수 내의 위치에 상관없이(return 전에 존재하는 한 - [예시2] 참고) 함수를 실행하기 전의 상태로 되돌린다. 이때, 가스비가 발생하는 transaction이 실행되지 않는다.

> 아래 [예시] 를 통해 require문이 가진 여러 특성을 살펴본다.

[예시 1] : *require 조건이 false이면, 상태를 변화시키지 않아 가스비가 발생하지 않는다. (에러 메시지 확인) *[예시 2] : *require 조건이 false이면, require문의 위치에 상관없이 전체 함수를 실행하기 전의 상태로 돌아간다. *[예시3] : require문을 return 뒤에 쓰지 않도록 주의할 것 [예시4] : require문이 존재하는 경우, 함수 속의 함수도 실행되기 전으로 돌아간다.

[예시 1] :

*require 조건이 false이면, 상태를 변화시키지 않아 가스비가 발생하지 않는다. (에러 메시지 확인) *

function require_2(uint _n) public returns(string memory) {


       require(_n <= 10, "_n should not be higher than 10. ");


       a = _n;
       if(0 <= a && a <= 2) {
           return "A";
       } else if(3 <= a && a <= 5) {
           return "B";
       } else if(6 <= a && a <= 8) {
           return "c";
       } else {
           return "D";
       }
   }

[예시 1]의 코드에서, require_2(11)을 입력해 require 조건을 만족하지 않을 경우, 다음과 같은 에러 메시지가 등장한다:

"the transation has been reverted to the initial state"
- 에러 메시지의 의미를 생각해보면, 원 상태로 복구되었다는 의미가 된다. 원 상태로 보구되었다는 의미는 곧 "상태(변수)가 변하지 않았다"가 되기 때문에 결국 *가스비를 쓰지 않는 것이다. *

[예시 2] :

*require 조건이 false이면, require문의 위치에 상관없이 전체 함수를 실행하기 전의 상태로 돌아간다. *

     function require_3(uint _n) public returns(string memory) {
       a = _n;
       require(_n <= 10, "_n should not be higher than 10. ");

       if(0 <= a && a <= 2) {
           return "A";
       } else if(3 <= a && a <= 5) {
           return "B";
       } else if(6 <= a && a <= 8) {
           return "c";
       } else {
           return "D";
       }
   }


   function getA() public view returns(uint) {
       return a;
   }

위 코드를 보면, require문 전에 'a = _n;' 코드가 존재하는 것을 볼 수 있다. 이 경우, require문에 반하는 경우, a=_n;이 실행될까? 즉, require문은 require 문이 작성되기 전의 줄까지의 상태로 되돌리는 것일까? 아니면 function require_3()을 실행하기 전의 상태로 되돌리는 것일까? 실행해보면 결과를 통해 확인할 수 있다.
실행 결과, require 조건을 만족하지 않는 경우, a에 _n이 입력되지 않은 것을 볼 수 있다. (바로 전 줄로 돌아가서 a에 _n이 들어가는 게 아님!)
즉, require문은 아예 함수를 누르기 전으로 되돌린다.

[예시3] :

require문을 return 뒤에 쓰지 않도록 주의할 것

** [require문이 return 전에 존재하는 경우]:**

function require2_1() public pure returns(uint) {
       uint a = 1;
       bool b;


       require(b, "go back");
       return a;
   }

a가 반환되지 않는다. 즉, require 조건에 걸려, uint a = 1;을 하기 전의 상태로 되돌아간다.
** [require문이 return 뒤에 존재하는 경우]:**

function require2_2() public pure returns(uint) {
       uint a = 1;
       bool b;
       return a;
       require(b, "go back");

   }

얘는 a = 1 나옴. require 까지 못 감 return 뒤에 쓰지 않도록 주의할 것

[예시4] :

require문이 존재하는 경우, 함수 속의 함수도 실행되기 전으로 돌아간다.

contract Require3 {
   uint a;


   function setAasFive() public {
       a = 5;
   }


   function getInput(uint _n) public {
       setAasFive();
       require(_n >= 10, "go back");
   }






   function getA() public view returns(uint) {
       return a;
   }
}

getinput(7) 실행 시, require 조건이 false되어 getInput() 함수 내부에 있던 setAsFive() 함수조차 실행되기 전으로 돌아가 a가 0 으로 반환된다.

[solidity] uint <-> int 형 변환

Sat, 30 Dec 2023 10:27:07 GMT

uint 에서 int 로 형 변환 안 됨

 function sub(int _a, int _b) public pure returns(int) { // uint에서 uint로 변환 안 됨
       return _a - _b;
   }

오늘의 실수 solidity: 컨트랙트 재배포 시 주의사항

Tue, 26 Dec 2023 14:05:26 GMT

remix 에서 스마트 컨트랙트를 재배포했다면,

나의 코드에서 스마트 컨트랙트 주소를 다 바꾸는 것은 당연하고,

abi 를 교체해주어야 한다(스마트 컨트랙트 코드 수정한 경우!!)텍스트

컨트랙랙트트의 실실행 가능성은 injected metamask 세폴리아 사용하기 전에 상하이로 임시로 먼저 돌려보기! 세폴리아 다 써버림.

remix 비쥬얼스튜디오코드(vsc)에 설치하기

Tue, 05 Dec 2023 01:13:06 GMT

나는 sudo가 이상해서 vsc에 remix를 npm으로 설치하지 못한다.

이때 즉시 실행 명령어로 대체해서 사용할 수 있다. 매일 쓰기 때문에 여기에 적어놓는다.

npx @remix-project/remixd -s . --remix-ide https://remix.ethereum.org

참고로, 원래 리믹스와 비쥬얼스튜디오코드를 연결하는 명령어는 다다음과 같다:

remixd -s . --remix-ide https://remix.ethereum.org

만약 이게 안 된다면 맥의 경우 아래와 같이 sudo를 붙인 명령어를 치면 권한 문제가 해결되기도 한다:

sudo remixd -s . --remix-ide https://remix.ethereum.org

안 되면 궁극의 방책으로 내가 사용하는 npx 실행 명령어를 사용하면 된다.

결론: 보통 이 세 가지 명령어 안에서 리믹스 IDE와 비쥬얼스튜디오코드 연결 기능을 구현할 수 있을 것이다.

리액트 카카오맵 api

Sun, 03 Dec 2023 05:36:36 GMT

카카오맵 api 문서를 보아도, 여러 글을 읽어도 쉽게 지도를 띄우지 못했다.

그러나 최초로 성공한 경우는 아래 유튜브 영상을 참고한 경우였다. https://youtu.be/73BPjRKCBBs?si=5qSVCMNAp5vfP5p3

드디어, 지도는 띄웠다.

터미널 종료하기

Sun, 03 Dec 2023 05:34:49 GMT

비쥬얼 스튜디오 코드에서 작업하다보면 열려있던 터미널을 종료하고 새로 실행시켜야 하는 경우가 있다.

보통 ctrl c 를 하면 닫히지만 이상하게 내 컴퓨터는 작동하지 않는다.

그래서 터미널에서 코드로 종료할 수 있는 방법을 자주 활용한다.

lsof -i :3010

위에서 3010은 닫고자 하는 포트 번호

node의 PID 확인 (1615라 하자)

kill -9 1615

React Router Dom

Sat, 02 Dec 2023 16:19:32 GMT

리액트 라우터 돔이란?

리액트는 싱글 페이지 어플리케이션이다. 리액트 라우터 돔으로 멀티 페이지 앱을 만들 수 있다.
https://reactrouter.com/en/main
참고: 넥스트js에서는 라우팅 기능 포함됨. 따라서 cra로 작업할 때에 리액트 라우터 돔 사용

참고 코드: https://github.com/cryptojang/to-do-list-dr/tree/master

1. 리액트 라우터 돔 설치

터미널에서 작업할 폴더로 이동한 후 아래와 같이 설치한다.
```
npm i react-router-dom
```


### 2. 페이지 나누기
- 만들 페이지를 파일로 만든다.
- ex. main page : src 폴더 안에 pages/main.jsx
- 페이지를 특수한 컴포넌트로 만듬. 이때 페이지 파일명은 소문자로 만들고, 컴포넌트처럼 틀 만든다.
- 이런 식으로 로그인 페이지 등 쭉 파일 만들어서 src/pages/ 에 저장
![](https://velog.velcdn.com/images/crypto_jang/post/fe60424e-494d-48ea-b02b-f1e737d51345/image.png)


### 3. App.jsx 에 페이지 부착시키기

- 모든 페이지의 구조를 최상위 렌더링 페이지인 App.jsx에서 정리한다.
- 우선, 리액트 라우터 돔에서 BrowserRouter, Routes, Route 임포트한 후, BrowserRouter 안에 Routes 안에 Route 로 구조 세운다.

```js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Main from "./pages/main";
import A from "./pages/a";
import B from "./pages/b";
import C from "./pages/c";


const App = () => {
 return (
   
     
       } />
       } />
       } />
       } />
     
   
 );
};


export default App;

path: 페이지 경로
element: path에 넣은 경로에서 element에 나온 페이지 띄워준다 뜻
*브라우저 라우터: *가장 바깥에서 감싸줘야 함.
routes: 여러 개 존재 가능(localhots/user/a 식으로 가지치기 할 수 있음) -> 근데 라우츠 하나 안에서 /user/a 식으로 경로 설정하는 것도 가능
** route:** 하나의 페이지에 대한 내용 적어주는 곳

4. 버튼으로 이동하기 구현:

링크 컴포넌트 사용 (미리 만든 연결 버튼): 버튼으로 페이지 이동,뒤로 가기 눌렀을 때 뒤로 가는 기능을 미리 구현해놓음
리액트 라우터 돔에는 페이지 이동 컴포넌트 존재
```
import { Link } from "react-router-dom";
```

const Main = () => { return (

Main

a b c

); };

export default Main;


### 5. 동적 라우팅.
- id 값에 1,2,3,4, 등 들어올 수 있다
(http://localhost:3002/user/5 처럼)

- 코인별 소개 페이지 같이 반복적인 거 줄일 수 잇음
```js
} />

소문자 대문자

Sat, 02 Dec 2023 15:50:42 GMT

대문자로 쓰기 Component 이름 pages 파일 내에서 Page 이름

소문자로 쓰기 pages 파일 이름.jsx,

npm 설치하고 사용해야 하는 것들

Sat, 02 Dec 2023 15:36:50 GMT

리덕스

npm install @reduxjs/toolkit react-redux

백엔드 만들기

npm init -y
npm i express
npm i nodemon
npm i cors

axios

npm i axios

router

npm i react-router-dom

react icon

npm i react-icon
npm install react-icons -save

slick

npm i react-slick slick-carousel

node module 설치

npm install

tailwindcss

npm i -D tailwindcss
npx tailwindcss init

리액트 배운 내용

Sat, 02 Dec 2023 12:02:00 GMT

11/06 세팅하기

create-react-app / tailwindcss
참고 코드: https://github.com/cryptojang/cra-tailwind-template

11/07 달력 만들기

component / props / JSON / map
참고 코드: https://github.com/cryptojang/calendar/tree/master

11/08 투두리스트 (no redux, no router, no local storage)

useState / 입력창 / 제출 기능 /
참고 코드: https://github.com/cryptojang/to-do-list/tree/master

11/09 계산기

useState / useEffect / componenet / props / tailwindcss
참고 코드: https://github.com/cryptojang/calculator

11/09 날씨 앱

api / axios / useEffect / geoLocation / substring
참고 코드: https://github.com/cryptojang/weather-api

11/10 코인 시세 가져오기

업비트 api / useEffect
참고 코드: https://github.com/cryptojang/coin-api

11/13 투두리스트 ***

react router dom / local storage / useParams / react-icons / 쿼리스트링 / JSON / parse stringify / 배열 수정 맵함수 / useNavigate / 삼항연산자/ useState / useEffect
참고 코드: https://github.com/cryptojang/to-do-list-dr

11/15 챗gpt 검색바

gpt-api / pop-up창(모달 창)
참고 코드: https://github.com/cryptojang/chat-gpt

11/16 테킷 클론 with 리액트

layout & comp / 폰트 추가 / classname 추가 / 색 추가
참고 코드: https://github.com/cryptojang/techit-clone

11/16 솔라나 클론

웹사이트 실제 화면과 동일한 화면 구현해보기
참고 코드: https://github.com/cryptojang/solana-clone

11/21 헤더 사라지는 스크롤이벤트(계속 감지)

addEventListener
참고 코드: https://github.com/cryptojang/disappear-header

11/22 무한 스크롤

intersection observer(특정 객체에 도달 시 인식)
참고 코드: https://github.com/cryptojang/infinite-scroll

11/23 다이나믹 스크롤(스크롤 따라 사이즈 바뀌는 인터랙션)

참고 코드: https://github.com/cryptojang/dynamic-scroll

11/27 투두리스트 **

리덕스 / 백엔드와 프론트엔드 / 익스프레스 / 포스트맨
참고 코드: https://github.com/cryptojang/frontend https://github.com/cryptojang/backend

11/29 암기장

구글 tts api / 음성 재생
참고 코드: https://github.com/cryptojang/review-english

11/30 춘짱 고양이 use animate

커스텀 훅스 만들기 (반복 긴 코드 줄이고 싶을 때)
참고 코드: https://github.com/cryptojang/use-animate

12/1 투두리스트

tdd
참고 코드: https://github.com/cryptojang/jest https://github.com/cryptojang/to-do-list-tdd

이외 이론 코드

TDD

Sat, 02 Dec 2023 11:52:34 GMT

테스트 파일로 먼저 구현하고 싶은 기능의 시험 코드 만들기 -> 테스트 오류 남 -> 코드 작성해서 오류 고침

참고 코드: https://github.com/cryptojang/to-do-list-tdd/tree/master

export import CJS EMS

Sat, 02 Dec 2023 11:50:47 GMT

커먼JS 문법으로 export import 하기

참고 코드: https://github.com/cryptojang/jest.git

[export]

exports.sum = sum;
exports.sumOf = sumOf;

[import]

const { sum, sumOf } = require("./a");

EMS 문법으로 export import 하기

참고 코드: https://github.com/cryptojang/to-do-list-tdd/tree/master

[export]

const CreateTodo = ({ onInsert }) => {};
export default CreateTodo;

[import]

import { useState } from "react";
import CreateTodo from "./components/CreatTodo";
import TodoList from "./components/TodoList";

useRef 사용법

Fri, 17 Nov 2023 02:30:37 GMT

useRef 사용법

1 useref return 전에 넣어주고

2 꺼내고자 하는 요소에 ref로 넣어주고

3 꺼낸 변형된 값 사용할 곳에 함수 만들어서 함수 넣어주고

4 함수에 변형해서 사용할 ref 넣으면 됨

[CSS] ul 태그 기본 스타일 없애기

Sat, 04 Nov 2023 14:11:47 GMT

html에 < ul > 태그를 입력하면 특정 스타일이 입혀있다. 이 스타일을 없애고 싶다면

css 파일에서 아래와 같이 입력한다.

ul {
list style: none;
}

그렇다면 불릿도 안 넣는데 왜 div 대신 굳이 ul 태그를 사용할까? SEO를 위해서!

[Git] 깃과 깃허브의 차이점

Sat, 04 Nov 2023 13:48:35 GMT

crypto_yurright.log

AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST' 트러블슈팅

Uncaught Error: Objects are not valid as a React child 에러 트러블슈팅

[solidity] i++; i =+; i = i + i; 가스비 비교

[solidity] string 비교하는 방법

[solidity] 가스비 최적화

[solidity] require : 가스비 최적화 위해 함수 실행 조건 설정

require는 솔리디티 함수를 실행하거나 실행하지 않을 조건을 설정할 때 사용한다.

[등장배경]

[용법]

> 아래 [예시] 를 통해 require문이 가진 여러 특성을 살펴본다.

[예시 1] :

**[예시 2] : **

[예시3] :

[예시4] :

[solidity] uint <-> int 형 변환

오늘의 실수 solidity: 컨트랙트 재배포 시 주의사항

abi 를 교체해주어야 한다(스마트 컨트랙트 코드 수정한 경우!!)텍스트

remix 비쥬얼스튜디오코드(vsc)에 설치하기

리액트 카카오맵 api

터미널 종료하기

React Router Dom

리액트 라우터 돔이란?

참고 코드: https://github.com/cryptojang/to-do-list-dr/tree/master

1. 리액트 라우터 돔 설치

4. 버튼으로 이동하기 구현:

소문자 대문자

npm 설치하고 사용해야 하는 것들

리액트 배운 내용

11/06 세팅하기

11/07 달력 만들기

11/08 투두리스트 (no redux, no router, no local storage)

11/09 계산기

11/09 날씨 앱

11/10 코인 시세 가져오기

11/13 투두리스트 ***

11/15 챗gpt 검색바

11/16 테킷 클론 with 리액트

11/16 솔라나 클론

11/21 헤더 사라지는 스크롤이벤트(계속 감지)

11/22 무한 스크롤

11/23 다이나믹 스크롤(스크롤 따라 사이즈 바뀌는 인터랙션)

11/27 투두리스트 **

11/29 암기장

11/30 춘짱 고양이 use animate

12/1 투두리스트

이외 이론 코드

call back

redux

hoisting

useContext

함수형 컴포넌트와 클래스형 컴포넌트

useEffect

react router dom

array map 함수

props

component

useState

TDD

export import CJS EMS

커먼JS 문법으로 export import 하기

EMS 문법으로 export import 하기

useRef 사용법

[CSS] ul 태그 기본 스타일 없애기

[Git] 깃과 깃허브의 차이점

[예시 2] :