TODOLIST

카테고리 없음

modal 만드는 법 (수정 가능, 움직이는 완료 버튼)

백그라운드 클릭시 꺼지는 모달 우선 컨텐츠를 누르면 state를 이용해 모달이 켜지게 해줬다 //모달 온 const ContentsOnClick = () => { setModal(!modal); document.body.style.overflow = "hidden"; }; {props.item.title} {props.item.date} 그리고 컨텐츠 안의 내용을 모달이 켜질때 함께 보여지게 삼항연산자를 이용해 만들었다. {modal ? ( {/* 제목*/} {edit ? ( ) : ( {props.item.title} )} {/* 완료 버튼*/} Done {/*내용*/} {edit ? ( ) : ( {props.item.text} )} {/*날짜*/} {props.item.date} {edit ? "취..

프로젝트

Todolist-modal (typescript, react-query)

https://github.com/sjk990515/modalTodo (깃허브 파일 링크) GitHub - sjk990515/modalTodo Contribute to sjk990515/modalTodo development by creating an account on GitHub. github.com 반응형 투두리스트 실행방법 1. 다운로드하신 후 파일로 들어가 터미널을 연 후 npm i 로 필요한 파일을 설치해 줍니다. (사용 기술 : react, typescript, react-query, axios, json-server, styled-components, react-router-dom, styled-reset, uuid) 2. 파일 안에 터미널을 추가로 한 개 더 연 후 하나는 npm star..

카테고리 없음

Til (2022.12.15)

투두리스트 안 보고 처음 부터 만들어 보기 우선 npm create react-app . 으로 환경을 만들었다. 1. components 폴더와 css폴더를 만들었다. 2. app.jsx에 Header, Input, Contents, Contents 순서대로 컴포넌트를 선언했다. 3 Header컴포넌트로 헤더를 만들었다. 4 내용을 담을 배열을 todoContents로 선언하고 const[todo, setTodo] = useState(todoContents); 로 state를 선언했다. 5. Contents컴포넌트 안에 Todo,done제목은 active를 통해 삼항연산자로 작성해주고 TodoList컴포넌트를 선언했다. 6. TodoList컴포넌트에 작성하면 나올 내용의 구조를 만들어주고 props로 받..