Algoroot's space

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 :..

나만의 개발용어 사전 만들기 📖 여기를 클릭해 살펴보세요. github link Introduction 🙌 모르거나 기억하고싶은 개발 용어를 기록하는 저만의 개발 용어 사전을 만들었습니다. SKill 🛠️ Vite React Redux database : Firebase Storage Service : AWS S3 bucket 구현 기능 💻 사전 만들기 CRUD 즐겨찾기, 즐겨찾기페이지 카드 색상 랜덤 배치 Figma Design 🖌 개발자 협업툴인 Figma로 디자인을 먼저 한 후 작업 하였습니다. What I've Learned 📖 Vite로 진행한 리액트 프로젝트 CRA 보다 Vite의 실행속도가 현저히 빠르다하여 강의는 CRA 기반 이었지만 Vite로 진행해보았습니다. 비교가 안되는 빠른 속도에 ..

엘리님의 자바스크립트 강의를 들은 걸 토대로 게임을 만들어보았다. 최대한 응용하고 발전시키려고 생각하다보니 거스름돈을 계산해 주는 게임을 만들면 좋을 것 같다는 생각을 해서 만들게 되었다. github address https://github.com/AlgoRoots/Kmoney-Math-Game-for-kids 아이들을 위한 거스름 돈 계산 게임 https://algoroots.github.io/Kmoney-Math-Game-for-kids/ 위 링크를 클릭해 게임을 실행해보세요! 편의를 위해 console창에 거스름 돈 값이 출력되도록 설정했습니다. 게임 bg를 넣어 소리가 갑자기 튀어나올 수 있어요! Introduction 아이들이 스스로 물건을 구입하게 하고 얼마의 거스름 돈을 받아야할지 계산하는..

노마드코더 바닐라 js 마지막 챌린지 제출 완료 Momentum Web https://algoroots.github.io/Momentum_Web/ github link https://github.com/AlgoRoots/Momentum_Web 총 3일의 충분한 시간이 주어졌지만, 몸이 좋지 않아 금요일 까지 피그마로 디자인을 마친 후 코딩작업은 일요일에시작했다..월요일 아침 6시까지 제출이었는데, 늦게 시작한 덕에 밤을 새버렸다. 노마드코더 강의안에 있는 내용도 물론 적용했지만, 뭔가 나만의 즐겨찾기 웹페이지를 시각화하고 싶어서 꼭 필요한 것만 가져왔다. (playlist, todolist, bookmarks, analog clock 등 추가) Music playlist를 만드는 과정에서 시간이 많이 지..

아직 토이 프로젝트를 할만한 실력은 아니지만, 그래도 앨리님 유튜브 무료 강의와 애플 코딩 강의를 들으며 추가하고 싶은 기능을 추가하며 만들어보았다. 이것 또한 다 만들어진 것은 아니며 오류를 해결 못한 부분도 있어 추후 업데이트할 예정이나, 우선 나중에 내가 얼마나 성장했는지 기록하기 위해 글을 남긴다. 사용한 이미지는 unplash에서 받은 무료 이미지를 사용하였다. 1. Navigation bar 스크롤 효과 스크롤바를 내리면 bar 컬러와 바뀌고 로고 크기가 살짝 바뀌게 구현했다. 2. 타이포 이펙트 추가 배운 이펙트라 써보고 싶어서 굳이 굳이 타이틀에 넣어봤다.. 나중에 완성되면 뺄 예정 3. 로그인창 구현 이메일, 비밀번호 형식에 안 맞을 시 그에 따른 문구 뜸 이메일 형식 추가 및 비밀번호 ..

쇼핑 리스트를 만들어보았다. 구현하고자 하는 것 은 아래와 같았다. 1. input에 쇼핑 item 넣고 Enter 혹은 아래 버튼을 누르면 쇼핑 목록에 추가된다. 2. input에 구매할 item 개수를 넣어 리스트에 개수도 추가된다. 3.아이콘을 이용해서 item을 삭제할 수 있다. 4. 체크 아이콘을 클릭하면 완료된 리스트로 보인다. ( 글씨에 줄 긋고 연하게, 아이템 박스 배경 없애기, 아이콘 배경 없애기, 아이콘 컬러 어둡게 바꾸기) 5. 삭제한 것을 반영하지 않은 items 개수와, check 아이콘을 클릭하지 않은 남은 items 개수를 상단에 표시한다. 추가로 input에 커서를 자동으로 넣고 스크롤도 items가 들어있는 div안에서 움직이도록 설정해줬다. 구현하고자 했던 것들 중 두 개..