본문 바로가기

프로그래밍233

React-Slick로 회전메뉴(Carousel/캐러셀 사용하기) 설치하기 $ npm install react-slick --save $ npm install slick-carousel --save 세팅하기 import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 사용하기 (기본형) function SimpleSlider() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( 1 2 3 4 5 6 ); } 총 6개의 페이지를 가지고, 각 점을 클릭할때마다 해당 페이지로 이.. 2022. 11. 9.
ERC-20 ( Ethereum Request for Comment 20 ) : 대체 가능한 토큰 솔리디티 파일을 이더리움 네트워크에 배포한 상태에서 시작한다. 만약 배포할 줄 모른다면 다음 글을 참고해서 따라하면 된다. [220713] 스마트 컨트랙트 구현하기 - 1) 트러플로 구현하기 개발환경 설치&세팅하기 // truffle 설치&세팅 $ npm init -y $ mkdir truffle $ cd truffle $ npm install -g truffle $ npx truffle init // react를 사용하는 front 디렉토리 만들기 $ npx create-react-app front // ganache 네트워크 실 hancoco.tistory.com 오픈제플린 라이브러리 설치 솔리디티 기반의 스마트 계약을 개발하는 표준 프레임워크인 오픈제플린 라이브러리를 설치해준다. $ npm inst.. 2022. 11. 2.
fatal: repository 'origin' does not exist / origin 연결 확인, 연결 끊기, 다시 연결하기 $ git pull origin main fatal: repository 'origin' does not exist 깃헙에서 직접 수정한 내용을 pull로 받아오려고했는데 origin이 존재하지 않는단다. 원격 레파지토리와 연결되어있는 상태가 어떤지 먼저 확인해봐야겠음. 현재 로컬 저장소와 연결되어있는 원격 레파지토리(remote repository) 확인하기 $ git remote -v 연결은 되어있는데 어디서 꼬인거지. 우선 연결을 origin이랑 연결을 끊었다가 다시 연결해주기로 했다. 기존 원격저장소와 연결해제 $ git remote remove origin 다시 origin 연결 상태를 봤을때 아무것도 뜨지 않으면 정상. 기존 원격저장소 다시 연결 $ git remote add origin 깃주.. 2022. 10. 31.
Expected an assignment or function call and instead saw an expression Expected an assignment or function call and instead saw an expression 해석 : 할당 또는 함수 호출을 예상했지만 대신 표현식을 보았습니다. 요소를 소괄호()로 묶어주지 않았거나, return을 사용해 값을 반환함에도 중괄호{}로 묶지 않았던가. // 해결전 const defaultValue = useMemo(() => {state, dispatch}, [state]); // 해결후 const defaultValue = useMemo(() => ({state, dispatch}), [state]); 2022. 10. 31.
.gitignore가 적용이 안 될때 .gitignore에 작성했는데도 자꾸 changes에 나타나는 문제. 보통 git이 이중으로 설치되었을때 나타나는 증상이라고 들었는데, 파일을 살펴봐도 git은 한번만 설치되어있다. $ ls -a // git이 어디에 설치되어있는지 확인한다 검색해보니 git에 쌓여있는 캐시문제라고 한다. 다음 코드로 캐시를 삭제한후에 다시 커밋을 하면 정상적으로 changes에 나타나지 않는다. $ git rm -r --cached . $ git add . $ git commit -m "delete cash" ( 출처 : https://jojoldu.tistory.com/307 ) 2022. 10. 27.
Uncaught TypeError: function is not iterable (cannot read property Symbol(Symbol.iterator)) 잡히지 않은 타입에러 : 함수를 반복할 수 없습니다. ( 속성 기호( 기호.반복자 )를 읽을 수 없음 ) 찬찬히 보니까 함수 뒤에 실행할때 붙이는 소괄호를 까먹었다. const [web3,account] = useWeb3; 소괄호 붙이니 함수가 문제없이 실행되면서 문제해결 const [web3,account] = useWeb3(); 2022. 10. 27.
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call') at Hmac.CipherBase 로그인을 했을때 jsonwebtoken 라이브러리를 사용해서 토큰을 생성하려고했는데, 토큰은 무사히 생성되었지만, 토큰을 가져와서 디코딩할때 다음과 같은 오류가 생겼다. //jwt.js function decodePayload(token) { return jwt.verify(token, secretKey, (error, decoded) => { if (error) { console.log("jwt 에러발생 : ", error.message); return; } else { console.log(decoded); // 유저 정보 object 반환 } }); } Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'cal.. 2022. 10. 26.
리액트로 동적라우팅 구현하기 ( react router v6 버전을 사용하고 있다. ) 지정되어있는 주소로 이동하는건 react-router-dom에 있는 ROUTER와 LINK로 구현한다. 매번 파라미터가 바뀌는 페이지로 이동하려면 동적 라우팅을 구현해야한다. Path Parameter 라우트 경로 끝에 매번 바뀌는 id값을 저장한다. //boardRouter.js router.post("/viewBoard/:id", boardController.viewBoard); useNavigate navigate 함수의 첫번째 인자에 이동하고 싶은 경로를 넣어주고, 두번째 인자의 state속성엔 전달하고 싶은 정보를 파라미터에 넣어서 전달할 수 있따. 여기에선 타이틀을 클릭하면 해당 게시글로 이동하도록 함수를 생성했다. //boardIte.. 2022. 10. 24.
a태그 대신 react-router-dom으로 링크 연결하기 REACT-ROUTER-DOM 기능별 설명 BrowesrRouter as Router 메뉴의 모든것을 감싸는 최상의 컴포넌트. 컴포넌트명이 길어서 보통 Router 로 줄여서 쓴다. Link 컴포넌트 a태그는 그 링크로 이동시켜줘서 더이상 사용을 못함 history.pushState()처럼 url만 바꿔주는 기능을 사용해야함 그게 Link 컴포넌트. Routes 컴포넌트 여기부터가 메뉴야! 메뉴의 범위를 지정해준다. 컴포넌트가 보여줄 영역을 감싸는 컴포넌트. Route 컴포넌트 메뉴 하나당 하나씩 할당할 수 있으며, URI에 맞는 컴포넌트를 찾아주는 컴포넌트. react-router-dom 설치하기 버젼 V6 (21.12.17)에 나온 기능이다. 이전 버전과는 차이가 있으니 사용하는 버전을 알고 사용하자.. 2022. 10. 22.
전역 스타일 만들고 적용 / GlobalStyle createGlobalStyle 설치하기 npm i styled-components 전역적으로 적용하고 싶은 스타일 작성하기 // GlobalStyles.jsx import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html, body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } * { padding: 0; margin: 0; box-sizing: border-box; text.. 2022. 10. 22.

티스토리툴바