Algoroot's space

안녕하세요 이번에는 React-date-picker을 타입스크립트 + SCSS로 완전히 새로운 UI를 구현해본 경험을 소개하고자 합니다. 거의 전체를 SCSS와 조합하여 스타일링을 새로 한 것으로 모든 영역에서 커스텀하는 것이 필요한 분들께 도움이 많이 될 것이라고 확신합니다. ** 구체적인 스타일링은 삭제하였습니다. 궁금하신게 있다면 댓글 달아주세요 :) 좌측은 React date picker에서 제공하는 기본 UI이고 우측은 제공하는 기능들을 통해 직접 커스텀한 date picker입니다. 라이브러리에서 제공하는 Demo 사이트를 통해서 필요한 옵션들을 끌어와 사용하였습니다. React-date-picker 라이브러리에서는 커스텀을 위한 여러 props를 제공합니다. 제공해주는 Props에 맞게 컴포..

안녕하세요 너무 오랜만에 블로그에 찾아왔습니다. 공부하던 시절 개발 현직자 분들이 현업에서 일하며 글쓰기 쉽지 않다는 말이 이제서야 공감이 가네요.. 좀 더 부지런해져야 겠습니다. 오늘은 프로젝트에서 구현했던 부분인 슬라이더 라이브러리 Swiper를 소개해볼까 합니다. 개인프로젝트와 직접 업무에 뛰어들면서의 차이는 디자인과 같게 구현해야한다는 점이죠. 이러한 면에서 어느정도 커스텀이 유용한 라이브러리를 찾는 것도 중요하다는 생각이 드는데요, 처음에는 Slick이라는 라이브러리를 설치해 구현했다가 디자인대로 커스텀하는 것에서 불편함이 느껴져서 다시 찾아보았고, npm trends에서도 최근 1년 사용성도 더 많고 업데이트도 빠르며 데모(Demo)가 잘 나와있는 Swiper라는 라이브러리르 사용하게 되었습니..

Magazine Site 📖 Firebase 로 CRUD를 구현하고 2차에서는 백엔드에서 만든 API 를 받아와 CRUD를 구현 하였습니다. 4.15-4.18 => Firebase CRUD 구현 : Magazine Site with Firebase > 4.19-4.25 => Backend API 연결 - AXIOS, REDUX TOOLKIT Introduction 🙌 firebase service를 통해 구현했던 매거진 사이트를 백엔드에서 받아온 API로 붙여보는 시간을 가졌습니다. 이번 시간에는 axios와 Redux toolkit을 공부하여 적용시켰습니다. SKill 🛠️ React, Redux Toolkit Promise based HTTP client : Axios Storage Service :..

퀴즈를 만들며 이해했다고 생각한 순간 내일 또 새로울 것 같아 늦은 시각이지만 오늘 한 부분을 되짚어보았다. 확실히 글을 적으니 흐름을 이해하는데 더 도움이 된 것 같다. 특히 reducer를 만드는 부분에서 action을 발동시키는 부분이 헷갈렸는데 적어보고, 실행해보니 이해가 되었다. 아직 익숙하지는 않지만 이 부분은 많이 써보면 해결될 문제 같다. 내일 읽어 볼 자료 : 리덕스는 왜 필요할까? Redux 전역적으로 상태를 관리할 수 있는 라이브러리이다. 리듀서는 순수한 함수여야 한다. (리덕스 규칙) (몰라) 상태관리흐름도 아래는 기능별로 묶은 덕스(ducks) 구조를 따른 코드이다. 1. State 저장하고 있는 상태값("데이터") , 딕셔너리 형태 const ADD_LIST = "quiz/ADD..