전체 글(112)
-
[CSS] display: flex 에서 sticky 사용하는 방법
예전 프로젝트에서 이거 때문에 삽질 좀 했던 것 같은데 또 까먹었다. 별거 없기 때문에 쓸 것도 없다. Check 1. 부모 요소에서 overflow 설정 부모 컴포넌트에서 overflow가 hidden; auto; scroll;이 아닌지 확인해준다. sticky는 뷰포트가 아니라 부모 컨테이너에 영향을 받는다고 한다. Check 2. 부모 요소의 크기를 설정해줬는가? 크기를 적절하게 설정해줘야 한다. 부모의 위치에 대해서 붙기 때문에, 개발자 도구에서 크기를 가지도록 설정해주면 된다. Check 3. [가장 중요⭐] align-self: start 해주기! align-self는 flex 내부 요소의 정렬을 스스로 설정할 수 있도록 지원해준다. start로 넣어주면 flex container 앞쪽으로 정..
2022.10.02 -
스플래시 화면과 돌아가기에 대해서
1. 스플래시를 한 번만 나오게 할 순 없을까? 란 생각 문득 문서를 만들다가 이런 생각이 들었다. (이 내용은 어쩌면 개발보다는 약간 기획에 더 가까울 지도 모르겠다.) 나는 메인 화면인 "/" 경로에서 스플래시를 무조건 한 번 돌리고, 그 다음에 안에 문서를 네비게이션을 클릭해서 들어가게 설계했다. 그리고 이 서비스의 가장 main contents인 메타마스크와 nft 민팅에 관한 정보를 담은 아티클을 볼 수 있다. 누군가 이걸 보고 세상 비효율적인 구조라고 피드백을 할 수 있겠지만, 애초에 그게 여기의 그라운드 룰이니.. 아무튼 웬만한 건 다 참을 수 있겠는데 이건 못참겠다. 사실 저 스플래시는 사이트에 처음들어올 때, "어떤 콘텐츠가 있을지에 대해 기대감을 주는 장치"이다. 그렇기 때문에 이미 메..
2022.10.01 -
라즈베리파이 64bit 환경에서 libcamera 사용 A to Z
1. rapistill은 32bit에서만 쓸 수 있다. 8월까지 모든 기능을 일단은(?) 다 만들어놨는데, 문제는 카메라가 말썽이었다. 64bit에서 32bit 라이브러리를 쓸 수 없다는게 말이 안되는데, 기본 os 설치할 때 설치되는 raspistill 기능이 64bit에는 빠져있다. 문제는 이제 Google Cloud API를 사용하기 위해서는 64bit os를 써야한다는 것..ㅠ 결론적으로는 64bit 용으로 새로 설계된 libcamera라는 라이브러리를 사용해야하고, 공식문서에도 그렇게 안내되어 있다. https://www.raspberrypi.com/documentation/accessories/camera.html Raspberry Pi Documentation - Camera The offi..
2022.09.30 -
[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 -
[JS] 양과 늑대 - dfs인데 왔다리갔다리 함..
dfs 응용입니다. 양만 먹어야 된대요.같이 한 번 볼까요? 문제 요약 2진 트리 모양 초원의 각 노드에 늑대와 양이 한 마리씩 놓여 있습니다. 이 초원의 루트 노드에서 출발하여 각 노드를 돌아다니며 양을 모으려 합니다. 각 노드를 방문할 때 마다 해당 노드에 있던 양과 늑대가 당신을 따라오게 됩니다. 이때, 늑대는 양을 잡아먹을 기회를 노리고 있으며, 당신이 모은 양의 수보다 늑대의 수가 같거나 더 많아지면 바로 모든 양을 잡아먹어 버립니다. 당신은 중간에 양이 늑대에게 잡아먹히지 않도록 하면서 최대한 많은 수의 양을 모아서 다시 루트 노드로 돌아오려 합니다. 예를 들어, 위 그림의 경우(루트 노드에는 항상 양이 있습니다) 0번 노드(루트 노드)에서 출발하면 양을 한마리 모을 수 있습니다. 다음으로 1..
2022.09.26