React(41)
-
[React] github page 그리고 react-router-dom
deeplink를 사용해볼 겸 간단하게 배포를 해봐야했다. static 웹페이지라면 github에 간단하게 배포를 해볼 수 있기 때문에 시도를 해보려고 했으나 뜻밖에 react-router와 github page에 대해서 공부하게 된 내용을 정리해보려고 한다. 프로젝트 별 Github Page 깃헙에서 새로운 레포를 만든 다음, 그 레포 이름을 `${MY_GITHUB_ID}`.github.io 이렇게 만들어주면 배포될 수 있는 페이지를 볼 수 있다고 알고 있다. 라우팅 되는 주소는 당연히 루트 주소! 루트 주소에 만들어도 꽤 유용하지만, 매번 다른 프로젝트를 만들 때 마다 루트를 태워보내는건 무척 비효율적이다. 이번 내 프로젝트 명이 "Mintty" 이니, 나의 경우에는 howdyfrom2019.gith..
2022.10.03 -
스플래시 화면과 돌아가기에 대해서
1. 스플래시를 한 번만 나오게 할 순 없을까? 란 생각 문득 문서를 만들다가 이런 생각이 들었다. (이 내용은 어쩌면 개발보다는 약간 기획에 더 가까울 지도 모르겠다.) 나는 메인 화면인 "/" 경로에서 스플래시를 무조건 한 번 돌리고, 그 다음에 안에 문서를 네비게이션을 클릭해서 들어가게 설계했다. 그리고 이 서비스의 가장 main contents인 메타마스크와 nft 민팅에 관한 정보를 담은 아티클을 볼 수 있다. 누군가 이걸 보고 세상 비효율적인 구조라고 피드백을 할 수 있겠지만, 애초에 그게 여기의 그라운드 룰이니.. 아무튼 웬만한 건 다 참을 수 있겠는데 이건 못참겠다. 사실 저 스플래시는 사이트에 처음들어올 때, "어떤 콘텐츠가 있을지에 대해 기대감을 주는 장치"이다. 그렇기 때문에 이미 메..
2022.10.01 -
[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] window.etheruem을 모바일에서 쓰려면?
window.etheruem에 대해서 아는가? 이 객체는 메타마스크를 설치한 사람만 볼 수 있는 정말 신기한 객체이다. 별다른 패키지 설치 없이 메타마스크를 설치했는지, 설치했다면 주소를 가져올 수도 있다. 다만 이건 오로지 데스크탑에 한정된다. chrome의 확장 프로그램으로 있는 메타마스크가 모바일 브라우저에선 당연히 없기 때문이다. 따로 meta mask 앱을 실행시켜서 인증을 받아야한다. 메타마스크의 window.ethereum 객체에 관해서 Best Practices | MetaMask Docs Best Practices If this page doesn't answer your question, please feel free to open an issue in our repository (op..
2022.09.25 -
[React] article 안의 한/영 전환은 어떻게 구현해야 할까?
드디어 메인 페이지에서 벗어났다! 무한한 감사를....🙏 이제는 우리 웹사이트에서 가장 중요한 콘텐츠인 docs를 만들어야 한다. 우리나라 웹 특성상 kr/en을 제공해야 할 일들이 종종 있다. 보통 우리나라와 해외 타깃으로 하는 UI 감성이 꽤나 다르게 때문에 아예 페이지를 다르게 파는 경우도 많다. 예를 들어, 메타콩즈를 살펴보자! 메타콩즈(for korean) MetaKongz Welcome to Kongz Universe ! themetakongz.com 메타콩즈(for global) MetaKongz Welcome to Kongz Universe ! www.themetakongz.com 막상 쓰고 보니 큰 차이가 있는 것 같진 않지만, 콘텐츠를 말하려는게 아니니.. 잘 보면 아예 url을 다르게..
2022.09.24