토이프로젝트
-
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기 3WEB Dev/Javascript | REACT | Node.js 2022. 4. 5. 00:07
이제 드래그는 되도록 만들었으니 드랍했을때 상태를 고정하는 함수를 만들어야 한다. 우리는 함수를 통해 정보를 전달해야하기는 하나 우선 화면을 바꾸는데 집중해서 함수를 만들어야 한다. 현재 적용하고 있는 함수는 onDragEnd 함수 하나밖에 없다. onDragEnd의 인자로 어떤 것이 전달되는지 확인해보면 아래와 같다. const onDragEnd = (res) => { console.log("목표 드래그") console.log("res", res) } 우선 목표 드래그의 onDragEnd 함수에 res 라는 인자를 전달하고 console.log로 찍어볼 수 있도록 했다. 그랬더니 우리가 이전에 지정한 draggableId를 포함해 combine, destination, draggableId, mode..
-
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기 2WEB Dev/Javascript | REACT | Node.js 2022. 4. 4. 00:08
Goal 컴포넌트를 드래그 할 수 있도록 만들었다. 이제 그 내부의 Todo 부분을 드래그 할 수 있도록 해야하는데 내부도 Droppable 영역으로 지정해야 하기 때문에 Droppable 태그를 넣어준다. 위와 같은 순서가 될 것이다. 이번에 리턴해 줄 Todo 는 Goal 안에서 map으로 돌고 있는 컴포넌트다. 아래와 같이 생겼다. return ( {/* Goal 컴포넌트 시작 */} {data.goalTitle} {/* Goal 컴포넌트 종료 */} {/* Todo 컴포넌트 map 시작 */} {data.todos.map((data, idx) => { return ( ); })} {/* Todo 컴포넌트 map 종료 */} ); 현재 Goal 컴포넌트가 드래그 되고 있고 이번에는 이 내부의 Tod..
-
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기WEB Dev/Javascript | REACT | Node.js 2022. 4. 3. 17:57
요소를 드래그 해 순서를 바꾸는 기능을 구현하고 있다. 드래그 앤 드랍은 HTML5에서 기본적으로 API를 제공하고 있다. 하지만 해당 기능을 일일이 적용해서 드래그 기능을 만들게 된다면 시간도 오래걸리고 어렵기 때문에 라이브러리를 사용한다. 엄청 다양한 라이브러리가 있고 여러 라이브러리를 테스트해봤는데 atlassian 의 react-beautiful-dnd 라이브러리가 가장 단순해서 적용하기 쉬웠었다. 하지만 실제로 내 프로젝트에 적용하기가 너무 어려워서 고전을 겪고 있다. 일단 순서를 바꿔야 하는 정보들을 map으로 돌려서 렌더링 하고 있고, 중첩을 지원하지 않는 다양한 제약이 있긴 하다. 그래서 다시 한 번 차근차근 개념에 대해 생각해보면서 글을 적으면서 만들어보고 성공이냐 실패냐를 정해야 할 거..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 38WEB Dev/ToyProject 2022. 3. 21. 23:25
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 와우 엄청 오랜만에 토이프로젝트 문서를 작성해본다. 그동안 작업을 안한 건 아니고 글을 적는 시간에 빨리 개발을 해야겠다는 생각에 글을 좀 자제했다. 그동안 한 일은 1. 투두를 클릭했을 때 띄워지는 모달의 모든 기능을 구현 - 수정, 내일하기, 날짜바꾸기, 순서변경, 삭제 수정, 내일하기, 날짜 바꾸기, 삭제 기능을 구현했다. 그리고 순서 변경을 별도 페이지로 리디렉션해서 순서를 변경하도록 해야하는데 이 로직이 조금 복잡해서 백엔드 팀원분과 나중에 같이 작업하기로 했다. 드래그 라이브러리를 사용해서 대충 만..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 36WEB Dev/ToyProject 2022. 2. 8. 15:45
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. 할 일 클릭 시 등장 모달 이제 뿌려진 할 일을 클릭하면 5개의 버튼이 있는 모달창을 띄워야 한다. 이 모달은 해당 할 일의 정보를 변경해주는 기능을 한다. 목표 설정할 때 썼던 MUI Dialog UI를 쓸까도 생각했는데 단순한 버튼만 있으면 되어서 이번에는 Modal을 적용해보았다. 원본과 비슷한 사이즈로 모달의 컨테이너와 버튼을 구현했다. {/* 모달 생성 */} export function TodoModal (props..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 34WEB Dev/ToyProject 2022. 2. 3. 20:47
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 아무래도 블로그를 자세하게 쓰면 시간을 많이 빼앗기는거 같아서 한 일 위주로 간단하게 작성해보려고 한다. 어제 밤 - 글씨체를 적용했다. - SCSS로 이용할 색상 변수들도 작업했다. HTML 삽입 미리보기할 수 없는 소스 1. 폰트 적용 stylesheet 폴더에 abstracts 폴더를 생성했다. 내부에 색상 변수를 사용하기 위해_variable.scss 파일과 믹스인을 지정하는 _mixin.scss 파일을 생성했는데 현재까지는 변수만 사용하고 있다. 그리고 글꼴도 ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 33WEB Dev/ToyProject 2022. 2. 1. 23:31
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 연휴가 벌써 반이 지나갔다. 나흘밖에 안되는 짧은 연휴지만 오랜만에 길게 쉬어서 좋긴 하다. 프로젝트 코드를 훅훅 작성했어야 하는데 설준비하면서 틈틈이 하는 것도 쉽지 않았다 ㅠㅠㅠㅠ 어제까지는 짬짬이 목표Goals 컴포넌트를 전반적으로 수리했다. - 저번주까지 한 일 HTML 삽입 미리보기할 수 없는 소스 1. 목표 컴포넌트 상세 수정 목표 Goals 컴포넌트의 '공개 설정' 과 '색상' 부분의 State를 수정할 수 있는 기능을 만들었다. 처음 구현할 때는 구현 자체..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 32WEB Dev/ToyProject 2022. 1. 26. 19:17
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 이번엔 비동기 모듈을 만들어보자. 별도 설치할 필요 없는 다양한 자바스크립트 모듈이 있지만(HTTP Client 라이브러리 : HTTP 상에서 통신을 하는 자바 기반 컴포넌트) 리액트 프로젝트에서 많이 사용하고 있기도 하고 코드가 간결해보이는 axios를 사용해본다. axios는 yarn이나 npm을 통해 작업영역에 설치해서 사용해야 한다. 그래서 의존성이 생기는 것이 단점이다. 추천해주신 fetch도 사용해보고 싶었는데 레퍼런스가 조금 더 많은 axios로 선택했고 파..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 31WEB Dev/ToyProject 2022. 1. 24. 22:19
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 벌써 31번째 글이다. 그동안 텀이 좀 있었는데 회의를 통해 백엔드 팀원분들과 소통하고 있었고, MUI의 캘린더 컴포넌트인 DatePicker를 가지고 투두메이트의 캘린더처럼 구현하는 시간이 꽤나 소요되었다. 캘린더 만드는 것은 이 코드를 거의 대부분 참조했다. renderDay 함수를 이용해서 각 날짜의 한 칸 한 칸을 새로 렌더링 해 주는 방법이다. 클래스를 붙여 스타일을 주는 것으로 대부분 해결했다. Customize Material-UI Datepicker Wit..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 30WEB Dev/ToyProject 2022. 1. 16. 21:21
🔷 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 메소드를 이용해 인덱스를 ..