공부하는 비오

작년에 문제가 있어서 리액트 함수 컴포넌트 생명주기에 대해 찾아보고 공부했었는데, 그 문제를 해결하고 나서는 잊어버린채 살고있었다. 그러다가 최근 usePrevious라는 hook을 사용하면서 다시한번 함수형 컴포넌트의 라이프사이클을 공부해보았다. usePrevious는 useInput처럼 흔하게 사용되는 리액트 훅 중 하나이다. 현재 값 말고 직전의 값을 가져올때 사용한다. const usePrevious = (value: string) => { const ref = useRef(); const previousValue = ref.current; useEffect(() => { ref.current = value; }, [value]); return previousValue; }; 이 함수가 작동하는 ..

React 2022. 2. 6. 00:28

CRA를 통해 리액트 프로젝트를 생성했었다. 버전 업그레이드를 하고 싶은데 어떻게 해야하나 하고 리액트 공식 홈에 들어갔더니 yarn upgrade react-scripts@latest 라고만 나와있네 ^_^;;; 이거말고도 다른게 있을것 같은데... npx create-react-app info로 CRA 버전 정보를 확인해보자. 여기서보면 react, react-dom, react-scripts 를 버전업그레이드해주면된다! CRA는 react를 좀더 사용하기 쉽게 만들어주는 슈퍼셋 같은 느낌인데, 관련된 라이브러리들도 자동으로 버전관리를 해준다. 그래서 eject 하지 않는 이상 따로 버전관리를 할 필요가 없다. 이 기능을 해주는게 react-scripts 이다. 그래서 업그레이드된 CRA버전을 사용하..

Error 2022. 1. 20. 00:27

생성된 블록이 제대로된 블록인지 검증하고, 검증된 블록을 추가하는 함수를 만들어보자! 일단 블록 구조 검증(타입체크) 메서드 생성. 이번에도 class안에서 static을 사용해서 validateStructure 메서드를 만든다. (밖에서 만들어도 되지만... Block class와 관련된 함수이니 클래스안에 메서드로 만들어보자) 블록 검증 함수. 왜 이렇게 작성됐는지를 생각하려면 블록체인을 이해하면 된다. 블록으로 만드려고 하는 candidateBlock과 그 이전블록인 previousBlockd은 연결되어있으므로, 그 둘을 비교해서 다르면 false를 리턴하자. 아까 만들어뒀던 createBlock 함수에 addBlock을 추가하자. 그럼 addBlock을 호출하면, 블록을 만들고 검증해서, 검증된 ..

TypeScript 2021. 8. 17. 00:51

클래스로 Block을 만들고, blockchain의 타입을 Block의 배열로 지정해놓으면, Block이 아닌 다른 것들은 blockcahin에 들어갈 수 없다! :) - hash를 자동으로 만들기 위해서 crypto-js를 설치하자 :) typescript 에서는 모듈을 가져올 때 아래와 같이 import 한다. import * as {사용할 이름} from '모듈명'; - hash를 생성할 method를 만들어보자! static을 붙여줘야 블록을 생성하지 않고도 만들 수 있다. (static도 자바스크립트에는 없는 기능) class 밖에서 Block.calculateBlockHash = (...) => {...} 이거랑 똑같은 코드. static없이 method를 작성하면 new Block 으로 생성..

TypeScript 2021. 8. 16. 22:46

자바스크립트에서 타입스크립트의 interface를 대체할 만한게 있다면 class를 사용하는 거다. 하지만 타입스크립트와 class를 사용한다면 자바스크립트로 사용하는것보다 더 강력하게 사용할 수 있다. 예제와 함께 살펴보자. 일단 class의 각 property를 설정할 수 있다. public인지 private 인지 설정할 수 있다. private으로 설정한다면 class 내부에서만 사용가능하다. 외부에서 부르거나 변경이 불가하다.

TypeScript 2021. 8. 16. 16:58

오늘 이걸로만 6시간 가량 씨름했다 ^^ 더 이상 짜증낼기력이 남아있지 않아... 프로젝트에서 git clone을 했더니 permission error가 발생했다. 특이하게도 clone은 됐으나 npm i 하려고하니 에러가 발생했다. 🙄🙄🙄 어..? 나 SSH 발급받은거 있을텐데? ssh -T git@github.com 명령어를 입력하면 다음과 같은 화면이 뜬다. ssh가 제대로 등록되지 않은 상태다. 사실 이것만 가지고 씨름한건 아니고... 중간에 이건 해결됐지만 node-sass 에러나서 이걸로 2시간은 쓴거같다 ^^;;; 근데 이거 해결하려고 이것저것했더니 다시 Permission 에러 ㅎㅎㅎㅎㅎ 일단 node-sass 에러는 버전문제였다. node-sass가 몇버전이냐에따라 사용가능한 node 버..

Error 2021. 5. 12. 21:50

그동안 CORS에러가 발생하면 백엔드에서 Access-Control-Allow-Origin을 설정해주고, withCredential 설정을 통해 쿠키 문제를 해결했었다. 그런데 프론트에서 (CRA를 사용했다면 pacakge.json에서, CRA를 사용하지 않았다면 webpack설정에서) 해결할 수 있는 방법이 있었다! 그건 Proxy 서버를 설정해주는 것! CORS가 무엇인지 다시한번 살펴보자. CORS는 Cross-Origin Resource Sharing으로 자신의 출저(도메인, 포트, 프로토콜)와 다른 출저의 리소스를 교환할 수 없는 브라우저 보안 정책을 말한다. 다른 출처의 리소스를 교환하기 위해서는, 다른 출저의 리소스를 제공하는 서버쪽에서 CORS 설정을 헤더를 포함한 응답을 해야하야만 한다...

React 2021. 4. 29. 23:53

javascript에서는 없는 개념. interface를 사용하면 객체의 타입을 지정할 수 있다. interface에서도 선택적프로퍼티로 필수가 아닌 프로퍼티에 ?를 붙여 사용할 수 있다.

TypeScript 2021. 2. 16. 22:13