🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 와우 엄청 오랜만에 토이프로젝트 문서를 작성해본다. 그동안 작업을 안한 건 아니고 글을 적는 시간에 빨리 개발을 해야겠다는 생각에 글을 좀 자제했다. 그동안 한 일은 1. 투두를 클릭했을 때 띄워지는 모달의 모든 기능을 구현 - 수정, 내일하기, 날짜바꾸기, 순서변경, 삭제 수정, 내일하기, 날짜 바꾸기, 삭제 기능을 구현했다. 그리고 순서 변경을 별도 페이지로 리디렉션해서 순서를 변경하도록 해야하는데 이 로직이 조금 복잡해서 백엔드 팀원분과 나중에 같이 작업하기로 했다. 드래그 라이브러리를 사용해서 대충 만..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. 할 일 클릭 시 등장 모달 이제 뿌려진 할 일을 클릭하면 5개의 버튼이 있는 모달창을 띄워야 한다. 이 모달은 해당 할 일의 정보를 변경해주는 기능을 한다. 목표 설정할 때 썼던 MUI Dialog UI를 쓸까도 생각했는데 단순한 버튼만 있으면 되어서 이번에는 Modal을 적용해보았다. 원본과 비슷한 사이즈로 모달의 컨테이너와 버튼을 구현했다. {/* 모달 생성 */} export function TodoModal (props..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 할 일(to-do) 만들기를 진행하고 있다. 저번주 후반부터 집중하고 있는데 목표에 맞게 할 일 값을 뿌려 주는 것이 생각보다 어려웠다. 여러모로 중심이 되는 기능이다보니 state 다루는 것도 뭔가 더 고도화 된 기분이다. HTML 삽입 미리보기할 수 없는 소스 1. Feed에 목표 뿌리기 atom으로 설정해 둔 goal 더미 데이터를 Main - Feed 에서도 쓸 수 있도록 한다. export const goalsData = atom({ // 로딩 시 모든 목표 뿌..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 아무래도 블로그를 자세하게 쓰면 시간을 많이 빼앗기는거 같아서 한 일 위주로 간단하게 작성해보려고 한다. 어제 밤 - 글씨체를 적용했다. - SCSS로 이용할 색상 변수들도 작업했다. HTML 삽입 미리보기할 수 없는 소스 1. 폰트 적용 stylesheet 폴더에 abstracts 폴더를 생성했다. 내부에 색상 변수를 사용하기 위해_variable.scss 파일과 믹스인을 지정하는 _mixin.scss 파일을 생성했는데 현재까지는 변수만 사용하고 있다. 그리고 글꼴도 ..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 연휴가 벌써 반이 지나갔다. 나흘밖에 안되는 짧은 연휴지만 오랜만에 길게 쉬어서 좋긴 하다. 프로젝트 코드를 훅훅 작성했어야 하는데 설준비하면서 틈틈이 하는 것도 쉽지 않았다 ㅠㅠㅠㅠ 어제까지는 짬짬이 목표Goals 컴포넌트를 전반적으로 수리했다. - 저번주까지 한 일 HTML 삽입 미리보기할 수 없는 소스 1. 목표 컴포넌트 상세 수정 목표 Goals 컴포넌트의 '공개 설정' 과 '색상' 부분의 State를 수정할 수 있는 기능을 만들었다. 처음 구현할 때는 구현 자체..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 이번엔 비동기 모듈을 만들어보자. 별도 설치할 필요 없는 다양한 자바스크립트 모듈이 있지만(HTTP Client 라이브러리 : HTTP 상에서 통신을 하는 자바 기반 컴포넌트) 리액트 프로젝트에서 많이 사용하고 있기도 하고 코드가 간결해보이는 axios를 사용해본다. axios는 yarn이나 npm을 통해 작업영역에 설치해서 사용해야 한다. 그래서 의존성이 생기는 것이 단점이다. 추천해주신 fetch도 사용해보고 싶었는데 레퍼런스가 조금 더 많은 axios로 선택했고 파..