안녕, 반가워 안녕, 반가워

🐜 Mine 애플리케이션 프로젝트 - 로그인 기능 구현 코드숨에서 배운 것을 기반으로 프로젝트에 적용해보겠습니다. 이번에는 로그인 기능을 구현해보려고 합니다. (1) 로그인 페이지 만들기 그림과 같이 로그인 페이지를 만들어봅시다. 이메일과 패스워드를 입력할 input과 로그인 버튼을 만들어 보겠습니다. 아래와 같이 코드를 작성해보았습니다. ① input 입력값이 변경되도록 onChange 이벤트를 등록하자. ☑️ 이메일 변경 함수 : handelChangeEmail ☑️ 패스워드 변경 함수 : handelChangePassword 이메일과 패스워드 변경 함수를 만들어 주도록 하겠습니다. 아래와 같이 changEmail , changePassword 액션을 만들어 주도록 하겠습니다. ② 리듀서 및 액션 정..

🐜 Mine 애플리케이션 프로젝트 - 달력 페이지(4) 👀 문제 1) 🔎 앗?! 오늘이 토요일인데 여전히 푸른색이라구요!!!!! 오늘 날짜는 8월 28일(토요일) 입니다. 제가 오늘 날짜 표시하는 기능을 잘 만들었다고 생각했는데 이게 무슨 129.. 여전히 푸른색(SaturdayColor)이네요. 예외 상황을 생각하지 못했습니다 😱😱😱 그렇다면 이 문제를 얼른 해결해야 겠죠?! 곰곰히 생각을 해보았습니다.🤔 토요일(SaturdayColor)/ 일요일(SundayColor)이 오늘일 경우에 대한 처리를 해주어야 합니다. 아래와 같이 조건문을 추가해 주겠습니다. 👀 문제 2) 🔎 앗?! 2021년 8월 달력이 이상하다구요 ?!?! 달력 페이지를 잘 만들었다고 생각했지만, 그림과 같이 이전 달이 필요하지 않는..

🐜 Mine 애플리케이션 프로젝트 - 달력 페이지(3) 📓 토요일, 일요일 숫자에 색상 넣기 이제 토요일과 일요일에 색상을 넣어주도록 하겠습니다. 화면에서 7월 달력이 그려진 모습에서 색상을 넣어줄 날짜를 확인해보겠습니다. 그리고 console.log(dates); 로 현재 그려지는 데이터가 어떻게 생겼는지 확인해보겠습니다. 토요일과 일요일이 가지는 공통점을 찾을 수 있습니다. 공통점을 찾았으니 조건문을 만들어서 토요일(푸른색), 일요일(붉은색)에 색상을 넣어주는 함수를 만들어 주겠습니다. 저는 colors 파일을 만들어서 색상을 import해서 사용하였습니다. 그리고 아래와 같이 dateColorStyle() 함수를 만들어 주었습니다. 🚨 "6월 27일" 도 빨간색으로 변경되는 문제가 발생!! 당연한 ..

🐜 Mine 애플리케이션 프로젝트 - 달력 페이지(2) 1편에서 달력을 그려내기 위해 고민했던 부분과 달력을 그려내는 과정에 대한 내용들을 적어보았습니다. 2편에서는 월 이동하는 기능과 데이터 스키마 문제점 발견으로 달력을 다시 그려려내는 과정과 정적으로 정의된 데이터를 동적으로 변경 하는 것에 대해 정리해보려고 합니다. 📓 월 이동하는 기능을 추가해보자 월 이동하는 기능 만들기 이전 편에서 7월 달력을 만들어보았습니다. 달력 로직이 잘 만들어졌다면 8월이 되어도 9월이 되어도 달력이 잘 그려져야 겠죠? 이번에는 월 이동하는 기능을 추가해서 월 이동이 되어도 달력이 잘 그려지는 기능을 만들어보겠습니다. [1] MonthSwiperContainer 컴포넌트 만들기 월 이동하는 기능을 만들기 위해 구조를 먼..

🐜 Mine 애플리케이션 프로젝트 - 달력 페이지(1) 오늘은 달력 페이지를 만들어 보겠습니다. 위 캡쳐한 그림처럼 제가 원하는 달력 모습이 나오기까지 수 많은 시행착오가 있었답니다. 저에게 가장 어려웠던 부분인데요. 달력이 제일 큰 난관이라고 생각했었는데.. 계속 추가적으로 기능을 만들면서 현재 직면하게 된 문제들이 모두 어렵긴 마찬가지네요. 그리고 이렇게 살짝만 보면 완벽하게 완성되어 보이지만 아직 해결하지 못한 문제가 있습니다. 그 부분은 추후 해결해보록 하겠습니다. 우선 이렇게 달력 만드는 과정에 대해 상세히 적어보도록 하겠습니다. ☑️ 달력을 그려내봄 ☑️ 데이터 스키마 문제점 발견으로 달력을 다시 그려내봄 ☑️ 토요일, 일요일 색깔 구분해주기 ☑️ 오늘 날짜 표시해주기 ☑️ 보여지는 달력에서 ..

🐜 Mine 애플리케이션 프로젝트 - 예산 페이지 📋 리액트, 리덕스를 이용해서 input값을 변경하는 과정과 테스트 코드 작성에 대한 간략한 소개 오늘은 예산 페이지를 만들어 보겠습니다. 우선 가장 기본적인 기능 먼저 만들어 보겠습니다. 우리가 저장해야 할 중요한 데이터가 있습니다. 바로 사용자가 입력하는 예산 금액이 되겠죠! 먼저 리액트로 input에 입력한 값이 변경되어 보이도록 코드를 작성해보았습니다. useState함수를 사용해서 중요한 변수를 저장하였습니다. 그리고 input value값을 budget으로 데이터 바인딩을 하였습니다. 이제 입력창에 이벤트가 발생하면 value값이 변경되는 이벤트 핸들러를 등록하면 됩니다. 리액트에서는 데이터를 변경할 때 setter함수를 사용하면 됩니다. 입력..

🐜 Mine 애플리케이션 프로젝트 - 하단 탭 하단 탭을 만들어 보겠습니다. 하단 탭 정도는 쉽게 만들 수 있을 것 같다는 자신감이 생기지 않나요? 홈 화면 만들었던 것처럼 해주면 될거 같네요!! 라우터 이동하기 Link 컴포넌트를 사용하면 되겠죠! 여기서 저는 현재 페이지에 해당하는 링크부분이 활성화 된 모습으로 표현하고 싶네요. 어떻게 하면 될까요? 구글에 폭풍 검색을 합니다. 흠🤔🤔🤔🤔🤔 검색 포인트를 잘못 잡은 것 같네요.. (검색 능력도 실력인데..) 여러번 검색했습니다 !!!!! 드디어 성공했네요~ 그래서 조금 더 특별한 NavLink 컴포넌트를 찾았습니다. NavLink 벨로그 참조 공식 문서를 차근차근 읽어봤더라면 쉽게 찾을 수 있었을 텐데.. 어쨌든 새로운 개념을 알게되었네요. 그리고 다..

홈 화면을 만들고 나서 그 다음 단계로 조금 더 쉬워보이는 '예산 화면을 만들어보자' 였습니다. 처음에는 예산 화면과 달력 화면 이렇게 단순하게 각 페이지라고만 생각하였습니다. 그림을 자세히 보니 공통되는 부분이 보였고, 코드숨에서 그동안 리액트로 관심사 분리를 했었는데, 관심사 분리를 하고 공통되는 컴포넌트를 재사용하면 좋을 것 같다는 생각을 하였습니다. 예산 화면은 + + 으로 이루어져 있다는 결론을 내리고, 컴포넌트 네이밍에 대한 고민을 수도 없이 했었습니다. 상단 탭인데 무엇이라고 해야 적절할까? 처음에 MonthlyBudgetContainer라고 생각해냈습니다. 직관적으로 네이밍을 했는데 먼가 마음에 썩 들지는 않았습니다. 보통 앱 화면에서 상단 탭, 상태 바, 네비게이션 바 등등 쓰는 용어가 ..