react(27)
-
[React] 리빙포인트: 주석 간지나게 달기😎
유튜브에서 코딩애플 채널을 참 좋아하는데, 너무 비전공자, 초보자들 위주로 타깃하지도 않고 중급자들이 알기 힘든 너무 전문적이고 지엽적인 지식을 다루지도 않는다. (그리고 그냥 재밌다) 자바스크립트 20년차 개발차처럼 주석 다는법이라는 영상을 보고 너무 신기했다. 방법은 아주 간단하다. /** * @contents: 글자로 nav표현하고 싶을 때 배열로 넘겨주세요. * @children: 맘에 안들면 입맛대로 만들어서 넣어주세요. / 평소처럼 주석 템플릿 안에 *(asterisk)를 하나만 넣지 말고, 두개를 넣으면 된다. 그리고 그 안에서 @를 사용하면 해당 컴포넌트에서 쓰이는 interface props의 간단한 설명을 같이 넘길 수 있다. 이렇게 해두면 interface의 변수명만으로 알 수 없는 ..
2022.09.28 -
[React] 그냥 프론트 metamask 계정을 가져오는 방법
Web3.0을 작업할 때 가장 좋은 점은 프론트엔드만 써도 꽤 그럴 듯하게 만들 수 있다는 점이다. 예를 들어, 저기있는 "Link With MetaMask" 저 버튼을 누를 때 크롬 확장프로그램인 메타마스크에 아무 조건(특히 CORS 같은 거 없이!) 접근할 수 있다. 생각보다 되게 쉬워서 놀랐다. 1. window.ethereum.request() const connectWithMetaMask = useCallback(async() => { // check the envs with hooks. if (!isMetaMaskInstalled && !isMobile) return; try { const account = await window.ethereum.request({ method: "eth_req..
2022.09.27 -
[React] url params 변경시 애니메이션 넣기
그냥 클릭할 때 애니메이션 넘기면서 조작하는 거야 아주아주 쉽지만, url params를 바꿀 때 애니메이션과 함께 넘어가는 건 한 번 생각해볼만 하다. 간혹 이런 사이트들이 있다. https://pvoznyuk.github.io/react-update-url-on-scroll/ react-update-url-on-scroll pvoznyuk.github.io 스크롤을 내릴 때 url params가 바뀌는 웹사이트들이 종종 있다. 회사의 소개 페이지나 포트폴리오 관련 페이지들이 종종 그러는데, react-router v5 시절에는 hashRouter를 이용해서 간단하게 구현이 가능했지만.. 이제 없어져버렸다. router 설정도 결국엔 body 태그 하단의 JSXElement를 모두 바꿔주는 역할이기 때..
2022.09.15 -
Typescript가 window.ethereum을 거부할때..
Typescript로 작업을 하게 되면 당연하지만, window.ethereum을 올바르지 않은 객체 접근이라고 뜬다. 그간 Theme를 설정하느라 XXXX.d.ts에 대해서 배워왔다. 이번에도 똑같이 설정해주면 되지않을까? 근데 어디에서 선언을 해줘야하는걸까? Trying to use window.ethereum.request in Typescript errors out with Property 'request' does not exist on type 'EthereumProvider' Except for one unanswered question from last November, I cannot find anything . . . . I am revamping some typescript code ..
2022.09.08 -
[React] 나도 만들래 슬랙: 멘션 기능!
슬랙을 쓸 때 저 멘션이 뭔가 참 너낌 있었는데 의외로 되게 쉽게 만들 수 있었다. 당연히 라이브러리를 썼고, React-mentions라는 라이브러리다. https://www.npmjs.com/package/react-mentions react-mentions React mentions input. Latest version: 4.4.7, last published: 2 months ago. Start using react-mentions in your project by running `npm i react-mentions`. There are 101 other projects in the npm registry using react-mentions. www.npmjs.com DT 패키지이니, Typ..
2022.09.07 -
[React] 리빙 포인트: Css in JS로는 font-face를 유니코드 별로 다르게 넣을 수 없다.
안녕하세요! 프로젝트를 세팅하다보면 이런 요구 사항을 받는 경우가 종종 있습니다. 한글은 Noto Sans KR로, 영어는 Arial로 가능한가요? 1. @font-face의 기본 당연히 가능하죠! css에서는 @font-face라는 문법을 지원한답니다. @font-face { font-family: Noto Sans KR; font-style: normal; font-weight: normal; // 여기에서 url로 지정해주면 됩니다. src: url("YOUR_FONT_PATHS"); } 기본적으로 이 스타일을 font-family로 지정해주고, style(Italic, oblique 등), weight(bold, bolder 등)도 지정해줄 수 있습니다. 만약 요청사항 처럼 다른 유니코드로 지정해..
2022.09.06