React9 Todo앱을 만들어 보자 -8- 오늘은 우리가 만든 기존 정렬기능에 더 세분화된 서브정렬을 넣어보자. 서브 정렬을 넣기 전에 먼저 기존정렬탭에 아마 아이콘이 없을 것 이기 때문에 아이콘을 먼저 넣어주자. components의 ArrayTab.js파일을 다음과 같이 수정해준다.import { Box, Tab, Tabs } from "@mui/material";import { useArrayTabState } from "../states";export default function ArrayTab() { const arrayTabState = useArrayTabState(); return ( 전체} /> 완료} /> 미완료.. 2024. 10. 12. Todo앱을 만들어 보자 -7- 저번 포스팅에 이어서 오늘은 할 일 수정 폼을 완성시키고 해당 폼을 할 일 추가에도 상용하기 위해 Props를 설정하고 컴포넌트 내에서 해당 Props를 받아 분기처리를 할 예정이다. Props란 컴포넌트 외부에서 해당 컴포넌트로 값을 전달(주입) 할 수 있는 객체들을 뜻한다. TodoForm을 만들기에 앞서 먼저 Header.js 컴포넌트에 추가사항이 있다. 현재 Header의 코드대로면 수정페이지에 진입했을때 헤더에서 '다음에 할래요' 버튼이 보이지 않기 때문에 edit페이지에 대한 분기처리를 추가해 준다.import { AppBar, Toolbar } from "@mui/material";import { hover } from "@testing-library/user-event/dist/hover".. 2024. 10. 8. Todo앱을 만들어 보자 -6- 지난 포스팅에서 할 일 추가 기능을 완성하고 메인페이지 리스트에 표시하는 기능까지 구현하였다. 이어서 간단하게 저번에 만든 체크아이콘의 수정을 간단하게 하고 시작하자.import { Button, Chip, Divider } from "@mui/material";import classNames from "classnames";import { useTodoState } from "../states/states";export default function TodoListItem({ todo }) { const todoState = useTodoState(); console.log(JSON.stringify(todo.id)); return ( .. 2024. 10. 6. Todo앱을 만들어 보자 -5- 지난 시간에 이어서 todo추가하기 기능을 완성하고 추가한 todo를 메인화면에 표시하는 것을 시작하기 전에 먼저 전체적인 테마 색상을 설정하도록 할 건데 색상의 조합은 아래 사이트에서 참고하였다. 해당사이트에서 마음에 드는 색상조합을 찾은 뒤 색상코드를 복사하면 된다.https://2colors.colorion.co/ Two Color CombinationsTwo color combination palettes2colors.colorion.co빨간동그라미 버튼을 클릭하면 복사할 수 있다. 마음에 드는 색조합을 찾았으면 우리가 만든 Todo앱에 적용시킨다. 다음과 같이 Root.js를 수정한다.import { RecoilRoot } from "recoil";import App from "./App";im.. 2024. 9. 28. Todo앱을 만들어 보자 -4- 저번 포스팅에서는 메인 페이지를 구성하고 메인 페이지에 todo가 없을 때 표시할 컴포넌트를 만들고 메인 페이지에 적용을 했다. 저번 포스팅에 이어서 오늘은 먼저 writepage에 들어갈 WriteTodoForm컴포넌트를 만들고 textfield를 적용 시키는 것부터 시작 해보겠다. 먼저 components폴더에 WriteTodoForm.js파일을 생성해준다.해당 파일의 코드를 아래와 같이 변경해준다.mport { TextField } from "@mui/material";export default function WriteTodoForm() { return ( );}https://mui.com/material-ui/react-text.. 2024. 9. 24. Todo앱을 만들어 보자 -3- 저번 포스팅에서는 리코일과 리액트 라우터를 설정하고 개발을 위한 프로젝트 세팅을 마무리했다. 오늘부터는 본격적인 개발을 해보도록 하겠다.우리가 만들 Todo App이다. 이름은 Happy Note로 정했다. 누군가가 만들어 놓은 걸 캡처한 게 아니라 내가 포스팅을 하기 위해서 직접 공부하며 개발했으나, 포스팅하는 속도보다 개발 속도가 훨씬 빨랐다. 그래서 이미 앱은 완성된 상태다. 위 사진을 보면 주소창에 localhost:3000/#/main으로 되어 있다. 마지막에 main이라는 단어가 있는데, 현재 보고 있는 이 화면이 메인 화면이라는 뜻이다. 이번에 개발하는 Todo App은 Main Page와 Write Page(작성 페이지), Edit Page(수정 페이지) 이렇게 세 가지 페이지로 구성했다... 2024. 9. 22. 이전 1 2 다음
