👨💻 프로그래밍/🧑🎨 Frontend 5 Redux 아키텍처, 사용할 수 있을 정도로만 알아보기 Redux 아키텍처, 사용할 수 있을 정도로만 알아보기 서버 개발자로써 프론트엔드를 자세히 깊게 배울 생각은 없었지만, 프론트엔드 작업을 하면서 자연스럽게 불편함과 필요함을 느껴 하나하나 배우다 보니 Redux까지 쓰게 됐습니다. 처음에는 굳이 Redux까지 도입해야 할까 싶었지만, 여러 Component에 걸쳐 Props를 전달하고, 상태를 관리하다 버그를 만나서 디버깅을 하다 보니, 자연스럽게 상태관리 Library를 쓰지 않으면 코딩이 너무 고통스러워서 Redux를 배우게 됐습니다. Redux, 뭐고 왜 필요할까? 웹 애플리케이션에서는 다양한 상태가 필요합니다. 점점 애플리케이션이 복잡해 지면서 자연스럽게 관리해야 할 상태가 늘어나고, Component들을 분리하면서 상태들을 Props를 통해 전달해야 하는 경우도 많아집니다. 이럴때 상태 관리 Libr.. 2023. 8. 13. React에서 바코드, QR 코드 개발하기 React에서 바코드, QR 코드 개발하기 바코드가 애초에 뭘까?보통 우리가 일상생활을 하면서 바코드가 뭐고 어떤 원리인지는 깊게 생각하지 않습니다. 바코드나 QR 코드는 언뜻 보면 굉장히 복잡해 보여서 어려울 거 같지만 사실 굉장히 간단한 기호입니다. 바코드와 QR코드는 그냥 일정한 규칙에 따라 넣은 데이터일 뿐입니다. 한글의 규칙을 모르는 사람에게 한글은 그냥 마법 같은 문제처럼 보이겠지만 사실 (꽤 복잡한) 규칙에 의해 정보가 적힌 겁니다. 바코드도 비슷합니다. 바코드 사이의 선의 간격이 정보를 (데이터를) 나타내고 있다고 보면 됩니다.여기서 같은 한국어인 하늘을 적어도 한글로 적으면 하늘이고, 알바벳으로 적으면 Hanol이듯, 바코드도 선의 간격과 선들로 정보를 나타내는 똑같은 원리를 사용한다고 해도 어떤 규격을 쓰느냐에 따라 정보가 달라.. 2023. 5. 29. CSS를 조금 더 우아하게 쓰기 위한 최소한의 SASS CSS를 조금 더 우아하게 쓰기 위한 최소한의 SASS SasS, 그게 우리 프로젝트에 도움이 됩니까? 사실, 간단한 프로젝트는 굳이 SaaS를 쓸 필요는 없다고 생각합니다. Bootstrap, Tailwind 같은 CSS Library를 쓰는게 오히려 디자인적으로도 개발적으로도 편리한거 같아요. 하지만! 조금만 디자인을 신경쓰기 시작해도 필연적으로 CSS를 사용해야 하고 CSS를 사용하는건 (개인적으로 느끼기에) 상당히 불편하고 암걸리는 경험입니다. 이런 CSS를 개선시켜 주는게 SasS입니다. 도움이 되는 유용한 Sass 기능 변수 Nesting Mixins 상속 (Inheritance) Partials Operators if-else Sass를 React에서 사용하기 위해서는? Sass는 브라우저가 이해할 수 없는 파일이기 때문에 보통의 CSS로 변환시.. 2023. 5. 26. React-chart-js에서 처음 로딩할 때 Tooltip 보이게 하기 React-chart-js에서 처음 로딩할 때 Tooltip 보이게 하기 해야 하는 것Chart.js라는 자바스크립트로 여러 그래프를 만들 때 자주 쓰는 라이브러리가 있습니다. Chart.jsSimple yet flexible JavaScript charting library for the modern webwww.chartjs.org 이걸 React에서 쉽게 사용할 수 있게 만든 게 바로 React Chart JS입니다. 아무튼, 이 Chat.js에는 다양한 그래프들이 있는데요. 그중에 Line Graph는 마우스를 Hover 하면 현재 값을 작게 보여주는 기능이 있습니다. 이걸 Tooltip이라고 합니다.Chart.js를 써서 개발하던 도중 처음 페이지를 진입했을 때 가장 높은 값에 Tooltip이 보인 상태로 로딩되면 좋을 거 같아 해당 기능이 있는지 찾아봤는데, 아쉽게.. 2023. 5. 5. Github Pages에 React Router 적용된 React App 배포하기 (404 문제) Github Pages에 React Router 적용된 React App 배포하기 (404 문제) Github Pages라는, Github에서 무료로 제공하는 호스팅 서비스가 있습니다. 보통은 HTML/CSS/JS로 만들어진 간단한 페이지를 배포하지만, React App도 build하면 결국 HTML/CSS/JS로 이루어져 있기 때문에 React App도 배포 가능합니다. 하지만 문제가 있습니다. React Router를 사용한 React App을 Github Pages에 배포하면 제대로 동작하지 않고 아래와 같은 화면이 나온다는 겁니다. 이건 왜 발생하고 어떻게 해결할까요?왜 안 될까?React Router에서는 HTML history라는 기술을 사용해 URI 이동을 구현하고 있는데, Github Pages에서는 HTML history를 지원하지 않는다고 합니다. 그래서 React Router가.. 2022. 11. 11. 이전 1 다음
