리액트(41)
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 31
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 벌써 31번째 글이다. 그동안 텀이 좀 있었는데 회의를 통해 백엔드 팀원분들과 소통하고 있었고, MUI의 캘린더 컴포넌트인 DatePicker를 가지고 투두메이트의 캘린더처럼 구현하는 시간이 꽤나 소요되었다. 캘린더 만드는 것은 이 코드를 거의 대부분 참조했다. renderDay 함수를 이용해서 각 날짜의 한 칸 한 칸을 새로 렌더링 해 주는 방법이다. 클래스를 붙여 스타일을 주는 것으로 대부분 해결했다. Customize Material-UI Datepicker Wit..
2022.01.24 -
[React] MUI Datepicker로 달력 구현 시 한글로 변환
MUI Datepicker language 설정 바꾸는 방법 (한글화) MUI는 Date-fns 에 의존하고 있는데 여기에서 제공하는 지역 설정을 적용하면 된다. Date-fns 설치는 아래 명령어를 사용한다. yarn add date-fns npm i date-fns 그리고 아래 패키지를 import 해주고 import DateFnsUtils from "@date-io/date-fns"; // or import AdapterDateFns from "@mui/lab/AdapterDateFns"; import { ko } from "date-fns/locale"; return 되는 부분에 locale props를 전달해주면 된다. 영어가 디폴트이고 locale={ko}는 한국어다. 나머지 언어는 공식 문서..
2022.01.22 -
[React] 카카오 계정 로그인 연결하기 테스트
투두메이트 클론 토이프로젝트를 진행하고 있는데 로그인으로 SNS 로그인 붙여보자고 주장한 사람 나야나... 우선 카페24가 제공하는 카카오 로그인이 너무 쉬워서 뚝딱 할 줄 알았는데 자체적으로 프론트 개발하고 서버 개발하고 데이터베이스 연결하는 것은 또 다른 문제였다. 실제 우리 서비스에 붙여보기 전에 테스트 해보려고 한다. 연결 내용은 아래 블로그를 참조하여 연습한 내용이고, 기본 앱은 내가 만들어 둔 앱을 사용한다. React.js 카카오 로그인, 사용자 프로필 가져오기 - Vlee's Tale 개요 이번 포스트에서는 React에서 카카오의 REST API와 Javascript SDK를 이용해 카카오 로그인을 구현해보겠습니다. 동작 순서는 다음과 같습니다. 카카오 로그인 링크 클릭 -> 인가 코드 발..
2022.01.19 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 30
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 editGoal 함수를 만들어 보자 editGoal은 인자로 editGoalItem.item을 받아온다. 즉, 수정을 위해 선택된 title의 id와 수정된 title을 인자로 넘겨받는다. 그래서 editGoal 함수를 만들고 e를 찍어보면 다음과 같이 나온다. //목표 수정 함수 function editGoal(e){ console.log('e : ', e) } 현재 goal state의 id값과 넘어온 e의 id 값이 같은 것의 인덱스 번호를 찾아야 하기 때문에 findIndex 메소드를 이용해 인덱스를 ..
2022.01.16 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 29
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 id값 전달하기 지금부터 할 것은 어제 GoalEditForm의 TextField에 기존 title이 올라가도록 만들었으니 이제 id값도 전달해서 해당 id값과 goal state를 비교해서 업데이트 해주는 코드를 만들려고 한다. Goals 컴포넌트에서 editEventHandler를 통해 전달된 id 값을 통해 GoalEditForm에 title이 전달되는데 이 때 id 값도 같이 전달되고, 이 아이디값을 가진 state를 만들어 줄 수 있도록 함수를 만들자. GoalForm에서는 newGoalItem 이라..
2022.01.16 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 28
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 해보아야 할 것은 이런 것이다. 조건문으로 어떤 상태가 add 이면, 컴포넌트가 Goal 컴포넌트 위 자리에 있고, 상태가 edit으로 바뀌면 이 Goal 컴포넌트 위에 있는 것이다. 왜 이렇게 생각했냐면 document.querySelector로 내부 내용을 바꾼다고 해도, 확인 버튼이 이미 onClick={onButtonClick}으로 설정되어 있기 때문에 수정할 때 얻은 아이디 값을 맞게 바꾸기 어려워서 이다. App에 State 만들기 처음 김다정님 책 따라 만들었던 것처럼 readOnly라는 s..
2022.01.16