분류 전체보기 (9) 썸네일형 리스트형 [논문 리뷰]Seeing Beyond the Brain: Conditional Diffusion Model with Sparse Masked Modeling for Vision Decoding(MinD-Vis) MinD-VisSeeing Beyond the Brain: Conditional Diffusion Model with Sparse Masked Modeling for Vision Decoding CVPR2023 1National University of Singapore, Center for Sleep and Cognition, Centre for Translational Magnetic Resonance Research 2The Chinese University ofmind-vis.github.io 본 리뷰는 해석과 내용에 대한 분석을 함께 포함하고 있다.CVPR2023에 선정된 논문으로, fMRI to Image 분야에서는 현재까지 state-of-the-art를 차지하고 있.. [React.js + Firebase] react-router-dom NavLink 사용법 - 초간단 사진 게시판 만들기(4) 💡 이번 포스트에서는 styled-components와 react-router-dom의 NavLink를 활용해서 firestore의 documents들을 메뉴처럼 접근 할 수 있도록 하겠습니다. 이전 포스트를 참고 하시면 코드와 프로젝트에 대한 진행상황을 파악하시기 수월합니다. [React.js + Firebase] react-router-dom 동적 라우팅 - 초간단 사진 게시판 만들기(3) 💡이번 포스트에서는 React에서 동적 라우팅을 사용하여 firebase의 데이터들을 원하는 url에 띄우는 방법을 알아 보도록 하겠습니다. 이전 포스트를 참고 하시면 코드와 프로젝트에 대한 진행상황 kmuhan-study.tistory.com react-router-dom(v6)에서 NavLink를 사용하는 법은.. [백준] 1697번 숨바꼭질 - Python 풀이 bfs 알고리즘을 사용해서 풀 수 있는 문제였습니다. 각각의 인접 노드는 x-1, x+2, 2*x로 이동 하는 경우이고, 0-1 너비 우선 탐색이므로, 다익스트라 알고리즘을 사용하지 않고도 bfs만으로 최단 거리를 구할 수 있었습니다. 💡0-1 너비 우선 탐색이란? 그래프 간의 간선의 가중치가 0 또는 1밖에 없는 그래프로, 만약 0과 1이 아닌 다른 수로 가중치가 부여되어 있는 그래프라면, 너비 우선 탐색 만으로 최단거리를 찾을 수 없지만, 0-1 그래프는 너비 우선 탐색으로 최단 거리를 찾을 수 있습니다. 그림과 함께 이해하도록 해봅시다. 그래프는 하나의 노드에서 자식 노드로 3개의 노드를 갖는 트리 형태로 가장 쉽게 표현 할 수 있습니다. 각각 1초라는 가중치를 가지고 있고 말이죠. 예제 입력으로.. [React.js + Firebase] react-router-dom 동적 라우팅 - 초간단 사진 게시판 만들기(3) 💡이번 포스트에서는 React에서 동적 라우팅을 사용하여 firebase의 데이터들을 원하는 url에 띄우는 방법을 알아 보도록 하겠습니다. 이전 포스트를 참고 하시면 코드와 프로젝트에 대한 진행상황을 파악하시기 수월합니다. [React.js + Firebase] React Suspense 적용 - 초간단 사진 게시판 만들기(2) 이 포스트에서는 react-router-dom을 활용해서 firebase에 저장되어 있는 데이터들을 동적 라우팅을 활용하여 클라이언트에 띄우는 과정을 다루고자 한다. 그 전에, 먼저 Suspense와 React lazy를 적용해서 kmuhan-study.tistory.com react-router-dom(v6)에서 동적 라우팅을 사용하는 문법은 다음과 같습니다. 원하는 경로 위.. [VSCode] Extension file-tree-generator로 파일 디렉토리 구조 자동 생성 이번주 프로젝트를 진행하면서 파일 디렉토리 구조를 설명해야 할 경우가 생겼었다. 이런 경우에는 지금까지 항상 vscode 좌측 Explorer을 캡쳐해서 첨부하는 방법을 사용했었다. 하지만 이렇게 일일히 캡쳐해서 사용하면 마크다운의 경우 이미지로 임베드해야하는 불편함이 생기며, 원하는 곳만 캡쳐하기에는 공간이 모자라는 경우도 발생하고 또 간편하게 볼 수 없어서 가시성이 떨어진다는 단점이 존재했었다. 그러던 중 VSCode의 아주 편리한 확장 기능을 찾아서 소개 해 볼까 한다. file-tree-generator 사용법은 간단하다. 패키지를 다운로드 받고, 좌측에서 폴더를 우클릭한다. 아이콘 끄기 켜기도 가능하고, 바로 복사해서 사용할 수 있기에 정말 유용한 기능인 것 같다. 이제 마음껏 파일 구조를 그릴.. [React.js + Firebase] React Suspense 적용 - 초간단 사진 게시판 만들기(2) 이 포스트에서는 react-router-dom을 활용해서 firebase에 저장되어 있는 데이터들을 동적 라우팅을 활용하여 클라이언트에 띄우는 과정을 다루고자 한다. 그 전에, 먼저 Suspense와 React lazy를 적용해서 사용자 경험이 빨라지도록 한다. 먼저 react-router-dom 패키지를 다운로드 받아준다. npm install react-router-dom react-router-dom은 v6 버전으로 바뀌면서 굉장히 사용하기 편리 해 졌는데 그중에서도 특히 동적 라우팅 부분에서 편리 해 졌다. 그 다음, src 폴더 하위에 Router.js를 생성한다. 💡메서드 설명 BrowserRouter: 브라우저의 history 스택에 접근하며 현재 URL에 따라서 어떤 컴포넌트를 불러와서 페.. [FirebaseError] the client is offline. - firestore 데이터 불러오지 못하는 에러 해결 Firebase와 React를 연동하는 과정에서, FirebaseError: Failed to get document because the client is offline 이라는 에러를 만났다. 외국 형님들의 StackOverflow를 참고하면 버전을 다운그레이드 하라는 해결법만 제시되는데, 필자 같은 경우에는 조금 더 근본적인 해결 법들이 먹혔다. 1. .env 파일의 위치 확인 firebaseConfig인 firebase의 설정값을 환경변수로 관리 해 주기 위해서 .env파일을 생성해서 process.env.REACT_APP_ 형식으로 코드를 작성 했었는데, 필지의 경우에는 파일이 src 디렉토리 안에 있었다. 이것이 문제였던 것으로 판단되는데, .env 파일은 항상 프로젝트 디렉토리의 루트 디렉토리.. [React.js + Firebase] Firestore 데이터 React로 연동하기 - 초간단 사진 게시판 만들기(1) 이 전 포스트에서 React와 Firebase를 활용하여 서버리스한 게시판을 만들기 위해 기본적인 세팅을 완료했다 이번 포스트에서는 연결 해 놓은 Firebase에서 Firestore이라는 빌드를 활용하여 아주아주 간단한 Back-end 환경을 구축 해 보도록 하겠다. 2023.05.25 - [Web] - [React.js + Firebase] 초간단 사진 게시판 만들기(0) - create-react-app, firebase 연동 [React.js + Firebase] 초간단 사진 게시판 만들기(0) - create-react-app, firebase 연동 간단한 기능의 게시판이나 웹사이트를 만들 때, React.js를 사용한 정적 페이지로 만드는 방법은 추후에 콘텐츠 수정이나 구조 변경을 해야 할 때.. [React.js + Firebase] React, firebase 연동하는법 - 초간단 사진 게시판 만들기(0) 간단한 기능의 게시판이나 웹사이트를 만들 때, React.js를 사용한 정적 페이지로 만드는 방법은 추후에 콘텐츠 수정이나 구조 변경을 해야 할 때 코드에 접근해야 하는 것이 필수적이다. 따라서 이번 시리즈에서는 Firebase를 활용하여 Serverless하고 가벼운 용도에 맞는 웹사이트를 구축해 보는 것이 목적이다. 개인적인 목표로는 복무하면서 만들고 공부했던 지식들과 하나의 웹사이트를 만들어서 호스팅하는 과정 까지 이해가 되질 않았던 부분들을 해결했던 과정에 대한 정리이기도 하다. 세팅 환경은 Mac이지만, Windows도 크게 다르지 않다. ➬Front-end: React.js 사실 Next.js를 사용하는 것이 SEO 측면에서 훨씬 우수하지만, 이번 프로젝트에서는 작년 react-router-.. 이전 1 다음
