{"id":22671573,"url":"https://github.com/ahngh0113/todolist_react","last_synced_at":"2026-04-12T00:32:54.614Z","repository":{"id":46541460,"uuid":"410743703","full_name":"ahngh0113/todolist_react","owner":"ahngh0113","description":"CRA없이 React todolist 웹앱 개발","archived":false,"fork":false,"pushed_at":"2021-10-22T15:09:48.000Z","size":1065,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T11:24:05.052Z","etag":null,"topics":["babel","git-flow","netlify","node","react","react-hooks","styled-components","webpack"],"latest_commit_sha":null,"homepage":"https://skytodo-react.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahngh0113.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-27T04:42:13.000Z","updated_at":"2021-10-22T15:09:51.000Z","dependencies_parsed_at":"2022-09-18T03:41:37.222Z","dependency_job_id":null,"html_url":"https://github.com/ahngh0113/todolist_react","commit_stats":null,"previous_names":["ahngh0113/todolist_react"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ahngh0113/todolist_react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahngh0113%2Ftodolist_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahngh0113%2Ftodolist_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahngh0113%2Ftodolist_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahngh0113%2Ftodolist_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahngh0113","download_url":"https://codeload.github.com/ahngh0113/todolist_react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahngh0113%2Ftodolist_react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269229735,"owners_count":24382034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","git-flow","netlify","node","react","react-hooks","styled-components","webpack"],"created_at":"2024-12-09T16:15:39.404Z","updated_at":"2026-04-12T00:32:49.523Z","avatar_url":"https://github.com/ahngh0113.png","language":"JavaScript","readme":"# TODO LIST\n\n**할 일을 적고 체크, 수정, 삭제할 수 있는 웹앱**\n\n\u003ch2 align=\"center\"\u003e\u003cb\u003e Tech Stack \u003c/b\u003e\u003c/h2\u003e\n\u003c/br\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/React-61DAFB?style=flat-square\u0026logo=React\u0026logoColor=white\"/\u003e\u003c/a\u003e \u0026nbsp\n\u003cimg src=\"https://img.shields.io/badge/styled_components-DB7093?style=flat-square\u0026logo=styled-components\u0026logoColor=white\"/\u003e\u003c/a\u003e \u0026nbsp\n\u003cimg src=\"https://img.shields.io/badge/Node.js-339933?style=flat-square\u0026logo=Node.js\u0026logoColor=white\"/\u003e\u003c/a\u003e \u0026nbsp\n\u003cimg src=\"https://img.shields.io/badge/Webpack-8DD6F9?style=flat-square\u0026logo=webpack\u0026logoColor=white\"/\u003e\u003c/a\u003e \u0026nbsp\n\u003cimg src=\"https://img.shields.io/badge/Babel-F9DC3E?style=flat-square\u0026logo=Babel\u0026logoColor=white\"/\u003e\u003c/a\u003e \u0026nbsp\n\u003cimg src=\"https://img.shields.io/badge/Git_flow-F05032?style=flat-square\u0026logo=Git\u0026logoColor=white\"/\u003e\u003c/a\u003e \u0026nbsp\n\u003cimg src=\"https://img.shields.io/badge/Netlify-00C7B7?style=flat-square\u0026logo=Netlify\u0026logoColor=white\"/\u003e\u003c/a\u003e \u0026nbsp\n\u003chr\u003e\n\n### React\n\n- React Hook을 이용하여 개발.\n- contextAPI와 useReducer를 사용하여 state 통합 관리.\n- useRef를 통해 비제어 컴포넌트 구성.\n- useEffect를 이용하여 focus() or 서버에서 데이터 가져오기 수행.\n- useState를 이용하여 무한 클릭 방지.\n- React.memo를 통해 props를 비교하여 불필요한 랜더링 최소화.\n- Portals를 이용하여 modal 생성.\n- axios로 서버와의 통신.\n\n### Styled-components\n\n- CSS in JS로 JS안에 CSS를 작성할 수 있는 라이브러리.\n- props를 받아 지정 값을 설정할 수 있음.\n- responsive web을 위해 todo가 넘치면 '...'으로 표시.\n\n### Node.js\n\n- node 환경에서 개발.\n- npm을 통해 react, react-dom, axios, webpack에 필요한 모든 것, sweetalert, reset-css를 다운받아 개발.\n\n### Webpack\n\n- Webpack을 이용하여 번들 사용.\n- 'HtmlWebpackPlugin'을 통해 기존 HTML 사용.\n- 'MiniCssExtractPlugin'로 css파일을 생성하여 HTML에 연결.\n- 'CleanWebpackPlugin'로 bulid 시 필요없는 파일 삭제.\n- 'CopyPlugin'로 static폴더를 지정하여 이미지나 폰트 파일을 저장.\n- babel, css loader로 파일 읽기.\n\n### Babel\n\n- ES6^의 문법을 ES5이하의 문법으로 변환하여 모든 브라우저에서 동작할 수 있게 함.\n- React JSX문법을 컴퓨터가 읽을 수 있는 코드로 변환.\n\n### Git-flow\n\n- git-flow를 통한 브랜치 관리\n\n### Netlify\n\n- 배포를 도와주는 사이트.\n\n\u003cbr\u003e\n\u003chr\u003e\n\n##\n\n## Product\n\n\u003e 이미지 클릭 시 페이지 이동\n\n[\u003cimg src=\"https://images.velog.io/images/ahngh/post/290914f0-c43c-47b3-85e6-443a87a39475/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-09-29%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.52.27.png\" width=\"250\"\u003e](https://skytodo-react.netlify.app/)\n\n\u003cbr\u003e\n\u003chr\u003e\n\n## Express (server)\n\n\u003e https://github.com/Ahn-GiHwan/todolist_express\n\n\u003cbr\u003e\n\u003chr\u003e\n\n## v3.0.1\n\n- 수정 시 호출되는 모달창의 input placeholder값을 기존 todo값이 나오도록 수정.\n- 미사용 hook 제거.\n\n## v3.0.2\n\n- React.memo를 이용하여 랜더링 최적화.\n- Portals를 이용한 Modal창 생성.\n\n## v3.1.0\n\n- 서버와 통신(https://github.com/Ahn-GiHwan/todolist_express).\n- Skeleton UI로 로딩 중 일때 화면 출력.\n- 무한 클릭 방지.\n- contextAPI, Modal의 위치를 변경하여 랜더링 최적화.\n\n## v3.2.0\n\n- responsive web (todo가 넘치면 '...'으로 표시).\n- 10초마다 todos 업데이트 가능하게 함.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahngh0113%2Ftodolist_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahngh0113%2Ftodolist_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahngh0113%2Ftodolist_react/lists"}