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

투두리스트를 만들면서 목표 > 할일 구조를 만들어야 한다. 클론하고 있는 투두메이트에서는 목표를 '클릭'했을 때 하단에 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..

🔷 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를 수정할 수 있는 기능을 만들었다. 처음 구현할 때는 구현 자체..

오늘도 딱 십오분만... [문제] 두 개 뽑아서 더하기 배열이 하나 주어지고 해당 배열 내의 숫자를 각각 더해 나온 숫자를 오름차순으로 정렬한 배열을 추출해야한다. 배열 내의 인덱스는 서로 다른 인덱스여야 한다. ex numbers[1]+numbers[1] 은 안됨 조건은 배열의 길이length는 2 이상 100 이하이고 배열 내의 숫자는 0이상 100 이하의 숫자이다. [풀이] 우선 거의 구구단과 흡사한 것이라고 생각이 든다. 조건문으로 배열의 길이를 정하고 시작하자. function solution(numbers) { var answer = []; if(2

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