윈도우 WSL2 Docker 개발 환경,리액트+Node.js 핫리로디드 요약(2023)

오늘은 윈도우 WSL2 Docker 개발 환경 기준 리액트/Node.js 핫리로디드 개발 환경 세팅을 정리해 보았습니다. 윈도우 기반 개발 환경이 wsl2 를 지원하며 아주 좋아졌다고 생각합니다. 하지만, 윈도우 wsl2 버전에서는 Docker를 Bind mount 하더라도 제대로 소스 반영이 되지 않습니다. 관련 이슈 : https://github.com/microsoft/WSL/issues/4739 몇몇 꼼수 등이 있으나 역시 projects 폴더를 그냥 wsl2 내부에서 만들어 리눅스 기반 시스템을 … Read more

Vercel 404 에러 해결 2가지- React 라우터

잘 사용하던 React 앱을 Vercel 클라우드에 올려본 후, 주소창에 경로(라우팅)를 변경하면 404 에러가 나서 그 해결책을 정리해 보았습니다. Vercel 클라우드는 리액트 기반 Next.js 프레임워크로도 유명합니다. 프론트엔드 전문 답게 Vercel 클라우드 역시 Serverless 혹은 Static 프론트엔드가 강점이 있는 클라우드인데요, 하도 괜찮다는 이야기가 많아서 한번 배포해 보았습니다. 다른 aws 등에서 잘 돌던 React 앱을 배포했고 전반적인 기능은 … Read more

리액트 로딩 스피너 라이브러리 react-spinners

오늘은 리액트 로딩 스피너 중 react-spinners 라이브러리를 리뷰하고, 사용법에 대해서 간단히 정리해 보고자 합니다. 웹사이트에서 시간이 걸리는 데이터를 조회할 때 화면의 변화없이 가만히 멈추어 있다면 사용자는 오류가 난 건지 시간이 걸리는 건지 알 수가 없습니다. 따라서 이럴 때 사용하는게 로딩 스피너인데요, 로딩 스피너를 통해서 현재 어떠한 처리가 진행 중임을 알릴 수 있습니다. 이럴 때 유용한 … Read more