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

STEP 1. typescript 적용해보기 일반적으로 관심사 분리만 생각하여 props로 전달하는 방식으로 개발 // TodoPage 컴포넌트 import { useState } from 'react'; type Todo = { id : number, value : string, status : string, isChecked : boolean, } const TodoPage : React.FC = () => { const [todos, setTodos] = useState([]); const [todo, setTodo] = useState({ id : 0, value : '', status : 'TODO', isChecked : false, }); const onChange = (e:React.Cha..

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

자바스크립트로 웹 통신을 하는 코드를 작성하려면 비동기 실행을 다루어야 한다. 비동기 처리를 하기 위해서는 Promise 객체와 async/await 구문 등에 대한 이해가 필수적이다. 들어가기전에 동기 실행과 비동기 실행의 의미에 대해 이해하고 Promise 객체에 대해 공부해보도록 하자. 🔖 동기 실행의 의미 동기(Synchronous) 실행의 경우, 한번 시작한 작업을 완벽하게 완료할 때까지 다음 코드가 실행하지 않는다. 예제 코드에서 fetch 함수가 동기 실행을 한다고 가정한다면 전체 코드의 실행 순서는 다음과 같다. console.log('시작'); fetch 함수(리퀘스트 보내기) 리스폰스가 올 때까지 코드 실행이 잠시 '정지'되고, 리스폰스가 오면 필요한 처리 수행 console.log('..

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

자바스크립트 배열 메서드 [2편] 배열 요소 추가 메서드 📋 원본 배열을 수정! 불변성 깨트림 💔 ⚪ push() 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다. ⚪ unshift() 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다. ⚪ splice() 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. array.splice(startIndex, deleteCount, item1, item2, ...); ☑️ startIndex (배열의 변경을 시작할 인덱스) ☑️ deleteCount (배열에서 제거할 요소의 수 / 옵션 요소) ☑️ item1, item2, ... (배열에 추가할 요소 / 옵션 요소) > 참고 및 출처 :..