💻 프로젝트 소개
일정등록 및 삭제 등 전반적인 일정을 관리할 수 있는 사이트를 기획한 개인 프로젝트입니다.
📅 프로젝트 기간
2022.09.08 ~ 2022.10.19
리팩토링: 2023.01.12 ~ 2023.02.05
💡 기술 스택
👉🏻 Common :
- Git
- Github
👉🏻 Front-end :
- React.js
- Redux-Toolkit
- FireBase
- Tailwind CSS
📸 구현 목록
✅ Nav & Footer
- 로그인 성공 여부에 따라 SIGN UP, SIGN IN / LOGOUT 동적으로 바꾸기
Pages
✅ [SIGN UP]
- 이름, 닉네임(2자 이상), 이메일('@', '.'포함) 유효성 검사, 비밀번호(특수문자, 숫자, 소문자, 대문자 혼합 8자 이상) 유효성 검사, 체크박스 체크여부에 따른 버튼 활성화 / 비활성화 기능 구현.
- FireBase를 이용한 유저 정보 저장 및 관리.
✅ [SIGN IN]
- FireBase에 저장 된 유저 정보가 아닐 경우 로그인 실패, 오류 메시지 출력.
- 로그인 성공 시 메인화면으로 이동
✅ [Creating-List & Checking-List]
- 커스텀 DatePicker 이용하여 날짜 선택
- Redux-Toolkit을 이용하여 일정 전역상태 관리, 등록 및 삭제 액션함수 활용
✅ [반응형 디자인]
- 디바이스 별 반응형 디자인 구현
🤷🏻♀️ 개인적인 소감
✨ 좋았던 점
-
새로운 기술을 배우고 익히는데 두려움을 갖지 말자! 이번 프로젝트를 하면서 가장 크게 배운 점이다.
-
props로 데이터를 전달하면서 다리역할을 하는 컴포넌트들이 많아지면서 전역으로 데이터를 공유해야겠다는 생각이 들었다. useContext hook을 사용해볼까 하다가 전부터 Redux를 배워 사용해보고 싶다는 생각을 쭉 하고있던 터에 훨씬 더 가볍고 간편하게 활용할 수 있는 Redux-Toolkit을 사용하기로 결정했다. 공식문서를 몇차례 읽으면서 스토어와 슬라이스 생성에 대해 익히고 유튜브 강의를 보며 액션함수의 활용을 배웠다. 특히 상태슬라이스를 생성하고 reducers를 등록하는 부분이 헷갈렸는데 강의를 반복해서 보다보니 습득이 되가는 걸 몸소 느꼈고 작성한 코드가 정상적으로 돌아갈땐 너무나 기뻤다구....요...
-
이렇게 새로운 스킬을 쓰고 나니 전에 했던 고민들- 너무 어렵지 않을까? 내가 할 수 있을까? 원래 하던대로 할까?- 이 떠오르면서 겁먹고 시간을 허비했던 내 자신이 후회... 다시한번 프로젝트를 하는 이유는 기존의 실력을 복습하고 다지는데도 있지만 작은 부분이라도 새로운 도전을 하고 코드를 짜보는데 취지가 있다는 것을! 배우게 되었다.
-
처음 이 프로젝트를 기획하게 된 이유는 간단했다. 첫번째로는 기획부터 디자인, 기능 구현까지 원하던 거 혼자서 다 해보고 싶은 욕심에, 두번째로는 filter 함수를 활용해 리스트를 생성하고 삭제하는 코드를 복습해보고자 함에 있었다. 모든 부분이 마음에 쏙 드는 건 아니지만 로직을 다시 짜보고 익히는데 나름의 성공을 했다고 생각하기에 두번째 이유는 충족시켰다는 것.
☄️ 아쉬웠던 점
-
오랜만에 기획, 제작한 개인 프로젝트라 홀가분함과 뿌듯함도 남지만 역시 아쉬움이 늘 존재하는 것도 사실이다.
-
우선 개발에 있어서 기능구현도 물론 중요하지만 프론트엔드 개발자로서 이번 프로젝트의 디자인이 너무나도 아쉽다. 나름 메인 색상을 통해 통일성을 주려고 노력했지만 기능을 구현하는데 치우쳐 디자인의 퀄리티를 고려하지 못했다는 점이 아쉽다. 기획 단계에서 디자인의 스펙트럼을 넓게 뽑아내고 좁혀나가는 식으로 설계를 했다면 보다 탄탄하게 개발할 수 있지 않았을까.
-
기획한 기능들을 모두 구현하고 배포까지 한 상태에서 반응형 웹 작업을 하고 있다. 반응형 작업을 해보는건 독학으로 CSS를 공부할때 미디어쿼리를 사용해본 것 외엔 없었기에, 게다가 이번 스타일 작업은 Tailwind CSS를 사용했기에 생각보다 더딘 부분이 많다. 문서를 읽고 예제를 보면서 익히는 중인데 하면서도 이게 맞나 싶은 생각이 불쑥 불쑥 든다. 처음에 데드라인을 정해놓고 시작했지만 레이아웃을 짜고 기능을 구현하면서 하나 둘 욕심이 생긴 부분들이 모이고 모여 결국 기한 내에 프로젝트를 완성하지 못했다. 이게 내가 하는 개인 프로젝트의 가장 큰 취약점인 듯 하다. 다음 프로젝트에선 현업이라 생각하고 마감 기한내에 프로젝트를 완성시키는 것이 가장 큰 필수적인 목표이자 지켜야 할 약속이라는 것... 빨리 프로젝트를 끝내고 다음 프로젝트를 시작하고 싶은 마음이 너무 큰데, 조급하게 생각하지 말고 하나라도 제대로 하자ㅋㅋㅋ...😇
🤍 프로젝트를 마치며
잘한 점, 아쉬운 점들이 모여서 또 다른 성장을 만들어냈다고 믿는다. 프로젝트를 진행하면서 이룬 시간과 코드들을 절대 잊지 말기!
