리액트(41)
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 38
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 와우 엄청 오랜만에 토이프로젝트 문서를 작성해본다. 그동안 작업을 안한 건 아니고 글을 적는 시간에 빨리 개발을 해야겠다는 생각에 글을 좀 자제했다. 그동안 한 일은 1. 투두를 클릭했을 때 띄워지는 모달의 모든 기능을 구현 - 수정, 내일하기, 날짜바꾸기, 순서변경, 삭제 수정, 내일하기, 날짜 바꾸기, 삭제 기능을 구현했다. 그리고 순서 변경을 별도 페이지로 리디렉션해서 순서를 변경하도록 해야하는데 이 로직이 조금 복잡해서 백엔드 팀원분과 나중에 같이 작업하기로 했다. 드래그 라이브러리를 사용해서 대충 만..
2022.03.21 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 36
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. 할 일 클릭 시 등장 모달 이제 뿌려진 할 일을 클릭하면 5개의 버튼이 있는 모달창을 띄워야 한다. 이 모달은 해당 할 일의 정보를 변경해주는 기능을 한다. 목표 설정할 때 썼던 MUI Dialog UI를 쓸까도 생각했는데 단순한 버튼만 있으면 되어서 이번에는 Modal을 적용해보았다. 원본과 비슷한 사이즈로 모달의 컨테이너와 버튼을 구현했다. {/* 모달 생성 */} export function TodoModal (props..
2022.02.08 -
[React] 클릭한 부분의 e.target 값 알아내기 (e.currentTarget)
투두리스트를 만들면서 목표 > 할일 구조를 만들어야 한다. 클론하고 있는 투두메이트에서는 목표를 '클릭'했을 때 하단에 input이 나오도록 되어 있다. 해당 목표 구조를 만들기 위해서 MUI UI 라이브러리를 이용해 아래와 같이 HTML DOM 구조를 생성했다. 내가 원하는 것은 에 onClick을 넣고 e.target.id 값을 얻어서 input hidden에 전달하는 것이었는데 실제로 클릭 이벤트를 넣어보니 누르는 위치값에 따라서 Button의 e.target 값, ListItem의 e.target 값, span의 e.target 값 이 나타났다. //목표 클릭 시 이벤트 핸들러 function clickTodoHandler(e){ console.log(e.target) } 내가 원하는 것은 But..
2022.02.03 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 34
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 아무래도 블로그를 자세하게 쓰면 시간을 많이 빼앗기는거 같아서 한 일 위주로 간단하게 작성해보려고 한다. 어제 밤 - 글씨체를 적용했다. - SCSS로 이용할 색상 변수들도 작업했다. HTML 삽입 미리보기할 수 없는 소스 1. 폰트 적용 stylesheet 폴더에 abstracts 폴더를 생성했다. 내부에 색상 변수를 사용하기 위해_variable.scss 파일과 믹스인을 지정하는 _mixin.scss 파일을 생성했는데 현재까지는 변수만 사용하고 있다. 그리고 글꼴도 ..
2022.02.03 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 33
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 연휴가 벌써 반이 지나갔다. 나흘밖에 안되는 짧은 연휴지만 오랜만에 길게 쉬어서 좋긴 하다. 프로젝트 코드를 훅훅 작성했어야 하는데 설준비하면서 틈틈이 하는 것도 쉽지 않았다 ㅠㅠㅠㅠ 어제까지는 짬짬이 목표Goals 컴포넌트를 전반적으로 수리했다. - 저번주까지 한 일 HTML 삽입 미리보기할 수 없는 소스 1. 목표 컴포넌트 상세 수정 목표 Goals 컴포넌트의 '공개 설정' 과 '색상' 부분의 State를 수정할 수 있는 기능을 만들었다. 처음 구현할 때는 구현 자체..
2022.02.01 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 32
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 이번엔 비동기 모듈을 만들어보자. 별도 설치할 필요 없는 다양한 자바스크립트 모듈이 있지만(HTTP Client 라이브러리 : HTTP 상에서 통신을 하는 자바 기반 컴포넌트) 리액트 프로젝트에서 많이 사용하고 있기도 하고 코드가 간결해보이는 axios를 사용해본다. axios는 yarn이나 npm을 통해 작업영역에 설치해서 사용해야 한다. 그래서 의존성이 생기는 것이 단점이다. 추천해주신 fetch도 사용해보고 싶었는데 레퍼런스가 조금 더 많은 axios로 선택했고 파..
2022.01.26