본문 바로가기

👨‍💻 프로그래밍/Frontend3

Redux 아키텍처, 사용할 수 있을 정도로만 알아보기 서버 개발자로써 프론트엔드를 자세히 깊게 배울 생각은 없었지만, 프론트엔드 작업을 하면서 자연스럽게 불편함과 필요함을 느껴 하나하나 배우다 보니 Redux까지 쓰게 됐습니다. 처음에는 굳이 Redux까지 도입해야 할까 싶었지만, 여러 Component에 걸쳐 Props를 전달하고, 상태를 관리하다 버그를 만나서 디버깅을 하다 보니, 자연스럽게 상태관리 Library를 쓰지 않으면 코딩이 너무 고통스러워서 Redux를 배우게 됐습니다. Redux, 뭐고 왜 필요할까? 웹 애플리케이션에서는 다양한 상태가 필요합니다. 점점 애플리케이션이 복잡해 지면서 자연스럽게 관리해야 할 상태가 늘어나고, Component들을 분리하면서 상태들을 Props를 통해 전달해야 하는 경우도 많아집니다. 이럴때 상태 관리 Libr.. 2023. 8. 13.
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.
Github Pages에 React Router 적용된 React App 배포하기 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.