[Project] To do list 일정 수정 및 create

해당 프로젝트는 당당하게도 아래 계획표로 작성 되었으나..

React, Figma 기초지식이 없던나는  투두리스트 UI추출은 어떻게 해결 했으나..

수정 및 CRUD API를 제작하지 못했고, 리액트의 태초로 돌아가 생활 코딩 CRUD 강의를 수강하고,
클론 코딩 부터 시작하기로 했다.

그리고 이 프로젝트를 리빌딩 하고 회고하고자 글로 남긴다.                                                                                                      https://www.youtube.com/watch?v=kctNCMFxciQ 

프로젝트 일정표 ( 약 2주일 )

월	화	수	목	금	토	일
	[프로젝트 시작] 요구사항 정리 및 개발스택 정의 ✓	[UI/UX] UI/UX정의 및 제작 [GitHub] Repository 및 Git Clone✓		[Front End] React 학습 및 프론트엔드 제작✓
[Front End] React 학습 및 프론트엔드 제작 ▲		[Back End] CRUD API 제작 및 연결 [DataBase] 데이터베이스 E-R다이어그램 구조도 정의 및 생성, API 연결 → 생활코딩 React CRUD 학습 (~목)
[배포(선택)] AWS 서버를 통한 가배포 [Trouble Shooting] 서비스 트러블 슈팅		[Trouble Shooting] 서비스 트러블 슈팅

프론트엔드까지는 순조로웠으나, 리액트한 경험이 전무하고 아직 습득 능력이 늦어 흡수를 하지 못한것으로 보인다.

현재 수준을 인정 및 파악하고..! 생활코딩으로 배운 지식으로 혼자 제작 후 안되면 유튜브의 도움을 들어보도록 하자..!

추가 유튜브 참고는 "코딩알려주는누나"님의 유튜브를 참고했다.

https://www.youtube.com/watch?v=TjUju3aUIDM&t=33s 

 

여지저찌 TodoList의 Create기능은 완성! 피그마를 최대한 날려먹지 않아서 약간 다행이라고 생각하며

다음에는 delete를 만들어 보도록하자!

 

 

App.js

import './App.css';
import styles from './Main.module.scss';
import { useState } from 'react';
import TodoBoard from './components/TodoBoard.js';

const inputRec = "https://static.overlay-tech.com/assets/bf6404a9-6a23-4e2e-88ab-e88e7d2edbfc.png"
const listRec = "https://static.overlay-tech.com/assets/0722ba06-7ec5-4e65-bff3-4d14f2b86f54.png"
const toDoList = <><strong className={styles.toDoListEmphasis0}>✅ </strong>To DO List<strong className={styles.toDoListEmphasis0}>💬</strong> </>



function App (){
const [inputValue,setInputValue]=useState('')
const [todoList, setTodoList] = useState([])
const addItem = ()=> {
  setTodoList([...todoList,inputValue])
}


////////////Return////////////
return (<div className={styles.main}>
  <div className={styles.flexWrapperOne}>
    <p className={styles.todoList}>{toDoList}</p>

    <input type="text" value={inputValue} alt="" className={styles.inputRec} src={inputRec} 
    onChange={(event)=>setInputValue(event.target.value)}/>
    <button onClick={addItem} className={styles.addButton}>추가</button><br></br>
    <TodoBoard todoList={todoList}></TodoBoard>
    

  </div>
</div>);
} 



export default App;

 

TodoItem.js

import React from "react"
import styles from '../Main.module.scss';

function TodoItem(props){


    return(
        <div className={styles.TodoItem}>
        {props.item}
        </div>
    )

}

export default TodoItem

TodoBoard.js

import React from "react"
import styles from '../Main.module.scss';
import { useState } from 'react';
import TodoItem from "./TodoItem";

const listRec = "https://static.overlay-tech.com/assets/0722ba06-7ec5-4e65-bff3-4d14f2b86f54.png"

function TodoBoard(props){

    return(
        
        <div className={styles.listRec} src={listRec}>
        <br></br>
        {props.todoList.map((item)=><TodoItem item={item}/>)}
        </div>
    )
}

export default TodoBoard

자세한건.. ! Git Hub

https://github.com/silver-liq9118/todo_list

GitHub - silver-liq9118/todo_list: todo_list