개발/오류

[Vite] Vite proxy 설정 (Error: connect ECONNREFUSED ::1:8000 at TCPConnectWrap.afterConnect [as oncomplete])

문제상황 현재 React 프로젝트에서 Vite를 사용하고 있다. 리액트는 빌드되어 백엔드에서 정적 파일로 배포할 것이다. 따라서, 현재 리액트에서 보내는 요청은 모두 localhost:8000/api로 시작하는 주소로 보내고 있다. 따라서 배포가 된다면 {서버 IP}:8000/api로 보내야 할 것이다. 같은 서버에서 백엔드가 정적 파일을 전달할 것이기 때문에 클라이언트는 상대경로를 이용해 api 요청을 보낼 수 있을 것이다. (/api/test => {서버 IP}:8000/api/test) 하지만, 로컬의 경우는 여전히 localhost:8000으로 api 요청을 보내야 한다. 해결과정 이를 해결하기 위해 proxy 설정이 필요했다. 개발 환경에서 보내는 요청은 localhost:8000으로 보내고 빌..

[Flutter] Android toolchain 오류 (Android SDK)

💣 문제 상황 플러터 개발환경을 구축하는 과정에서 Android Studio를 설치했지만 Android Toolchain 관련 오류가 발생했다. 안드로이드 스튜디오는 설치했고 정상적으로 인식되지만 Android toolchain이라는 부분에서 오류가 발생한다. 🔧 해결 방법 안드로이드 스튜디오를 설치하는 것에서 끝이 아니라 추가적인 설정을 해야 한다. 첫 화면에서 'SDK Manager'라는 부분에 들어간다. 'SDK Tools' 탭으로 이동하면 'Android SDK Command-line Tools'라는 항목이 있다. 이것을 체크하고 Apply를 누르면 설치가 진행된다. 설치를 해주면 된다. 다시 flutter doctor를 입력해보면 여전히 문제는 해결되지 않는다. 본인의 경우 SDK를 기본 경로가..

React (+TypeScript, Styled-Component, ResetCSS) 프로젝트에 구글폰트 적용 안됨 및 해결법

시작하며 개발을 하다보면 구글 폰트를 이용하는 경우가 있다. 구글 폰트 홈페이지에서 원하는 폰트를 골라 import 했는데도 적용이 되지 않는 문제점이 있었다. 알고보니 그냥 import 하는 것으로는 해결되지 않고 다른 방법을 이용해야 정상적으로 사용할 수 있었다. 구글 폰트, React 프로젝트에 적용하기 만약 위의 폰트를 사용하기로 했다고 생각해보자. 기존의 방식과 다른 점은 import를 하는 것이 아니라 위의 Download 버튼을 이용해 해당 글자체 파일을 다운받아야 한다는 것이다. 다운받은 파일은 src/Fonts 안에 넣으면 된다. 원하는 글꼴들을 넣었다면 위의 모습이 될 것이다. 이후, 해당 글꼴들을 사용하기 위해 GlobalStyle을 만드는 파일에서 해당 폰트를 불러와야 한다. 본인의..

WSL + VSCode Git 변경사항 감지 불가 및 속도 저하

WSL을 윈도우에 설치해서 사용하던 중 문제점이 발생했다. 1. WSL을 이용해 VSCode를 열고 파일을 수정할 때, 파일의 변경을 감지하지 못한다는 것 2. WSL을 이용해 VSCode를 열고 node 프로젝트를 npm 명령을 통해 실행시키는 경우, 시작시간이 매우 길어지는 것 3. 프로젝트를 실행시키면 CPU를 엄청 잡아먹는 프로세스가 작동하는 것 1. 파일 변경 감지 불가 파일의 변경을 감지하지 못하는 경우가 발생했다. 해결 방법은 프로젝트 디렉토리의 위치를 WSL에 설치한 리눅스 사용자의 디렉토리로 수정하는 것이다. 예를 들어, 윈도우 사용자 admin과 WSL에 설치한 Ubuntu의 사용자 hbsps가 있다고 가정하자. 현재 프로젝트 폴더는 admin의 바탕화면에 있다. (단순하게 우리가 사용..