분류 전체보기 (139) 썸네일형 리스트형 [Styled-components] it looks like an unknown prop "X" is being sent through to the DOM 오류 해결 (X: 사용자 정의) styled-components: it looks like an unknown prop "backgroundcolor" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.) https://velog.io/@mintmin0320/style.. [Next] 동적라우팅에서 router.pathname, router.asPath 차이 파일 이름을 ...앞의 경로/completed/[userChallengId].tsx 이렇게 해서 동적라우팅을 구현했었다. const router = useRouter(); const asPath = router.asPath; const pathname = router.pathname; console.log(asPath); console.log(pathname); 그러면 아래와 같이 출력된다. ...앞의 경로/completed/651627fb3931e74294dda3ca ...앞의 경로/completed/[userChallengId] 완전 정확한 url을 확인하려면 asPath를 써야한다. [Next] Next내에서 .env 파일의 환경변수들이 안 읽히는 문제 해결 .env 파일에 환경 변수를 작성하고 import dotenv from "dotenv"; dotenv.config(); 도 해줬는데 const API_BASE_URL = process.env.API_BASE_URL; 이렇게 선언한 API_BASE_URL이 자꾸 undefined로 출력이 되는 거다. 그래서 찾아봤더니 next.config.js 파일에서 뭔가 설정을 해줘야하는 거였다. 그래서 next.config.js 파일을 이렇게 해줬다. /** @type {import('next').NextConfig} */ const nextConfig = { ... 앞의 설정들 env: { API_BASE_URL: process.env.API_BASE_URL, }, ... 뒤의 설정들 }; module.export.. [CSS] tsx 내의 string에서 줄바꿈이 안되는 문제 해결 const MyComponent = () => {.... return( )} const ChallengeInfo = ({ index, title, content }: IndexTitleContentProps) => { return ( {title} {content} ); }; 대충 요런 구조였다. 원래는 아무리해도 content의 내용에 줄바꿈이 적용이 안됐는데 이렇게 style={{ whiteSpace: "pre-line" }} 을 해주니까 content의 \n이 잘 작동했다. [Node] npm 명령어들 링크 모음 https://www.zerocho.com/category/NodeJS/post/58285e4840a6d700184ebd87 (NodeJS) npm 명령어 안녕하세요. 이번 시간에는 npm 명령어에 대해 알아보겠습니다. npm 명령어는 명령 프롬프트에 입력하는 명령어입니다. 지금까지 봤던 명령어는 npm init, npm start나 npm run, npm install 정도가 있겠네요 www.zerocho.com https://velog.io/@fgprjs/npm-run-dev npm run dev는 어떻게 동작하는가? npm run dev를 수행하면, npm은 run명령에 맞게 packages.json에 존재하는 scripts중 dev키를 찾아서 그것을 promiseSpawn(새로운 프로세스를 수행,.. [Front-End] Carousel https://programming119.tistory.com/211 [React🌌] 리액트 슬라이드 ⏩ / 캐로셀 (Carousel) 슬라이드? 캐로셀(Carousel) ! 우리나라 사람들은 보통 이렇게 버튼을 통해 자연스럽게 넘어가는 것을 슬라이드라고 부르죠! (영알못인 저만 그러는 걸수도..😂) 사실 이런 슬라이드는 정식용어는 programming119.tistory.com https://coding-with-jina.tistory.com/222 [React] 리액트 이미지 슬라이드(Carousel) 만들기 - React Material UI Carousel ● React Material UI Carousel 설치하기 1. 이 라이브러리/구성 요소를 사용하려면 Material UI를 설치해야함 np.. [axios] 서버로 데이터 전송 사용자가 화면에서 정보를 등록하면 그 정보를 recoilstate을 통해 저장 -> 마지막 단계에서 recoil에 저장된 정보를 axios를 통해 서버로 보냄 정보를 서버로 넘겨줄 때 헤더에 access token도 함께 넣어서 보내줘야 했다. import { styled } from "styled-components"; import { useRouter } from "next/router"; import { useState, useEffect } from "react"; import axios from "axios"; import { useRecoilValue } from "recoil"; import { registerHomeUpLoadFileState, registerHomeWholeInfoStat.. [Hardhat] .deploy VS .deployed contract 배포할 때 어떤 코드는 .deploy 까지만 하고 어떤 코드는 .deploy 이후에 .deployed 까지 해줘서 뭐가 다른걸까 궁금했다. 내 테스트코드의 일부다. GachaCard = await ethers.getContractFactory("GachaCard"); gachaCard = await GachaCard.deploy( FIRST_MINT_PRICE, MINT_PRICE, FIRST_MINT_AMOUNT ); await gachaCard.deployed(); .deploy()는 이 컨트랙트 배포를 트리거하고 .deployed()는 컨트랙트가 이미 블록체인에서 사용 가능한지 확인하고 배포가 아직 진행 중이면 배포 트랜잭션이 채굴될 때까지 기다린다. .deployed()는 컨트랙트.. [Hardhat] 명함 NFT 만들 때 보았던 링크들 모음 https://dev.to/jacobedawson/import-test-a-popular-nft-smart-contract-with-hardhat-ethers-12i5 Import & Test a Popular NFT Smart Contract with Hardhat & Ethers Today we're going to learn how to use the very cool smart-contract development framework Hardhat to... dev.to https://ethereum.org/en/developers/tutorials/how-to-mint-an-nft/ Home | ethereum.org Ethereum is a global, decentralized platform.. [Hardhat, javascript] test code에서 beforeEach 프로젝트폴더/test/MYNFT.js 테스트코드에서 beforeEach는 어떻게 쓰이는가. const { expect } = require("chai"); describe("MyTinaCard", function () { let sharedValue = 0; beforeEach(function () { sharedValue++; }); it("Test Case 1", function () { expect(sharedValue).to.equal(1); }); it("Test Case 2", function () { expect(sharedValue).to.equal(2); }); }); 여기서 npx hardhat test 을 하면 MyTinaCard ✔ Test Case 1 (64ms) ✔ Test Ca.. 이전 1 2 3 4 5 ··· 14 다음
