20231103 TIL

 

오늘의 목표

• 베이직반 숙제 끝내기
• 개인과제

오늘의 개발, 새롭게 알게된 것

 

S.A

우선 필수 기능을 넣고 꾸미던가 하자. 이전 개인과제 할때 하루 종일 html이랑 css 했더니 시간도 부족하고  어차피js에서 다 무너졌었으니 최소한의 css만 하고 기능구현하기!

 

오늘 완성본!

css는 거의 안하고 구역 표시하려고 background color만 주고 배치만 해줬다. 

 

문제는 추가 하는 기능까지 넣어줬는데 얘가 게속 생겼다가 사라지는 것이다. 

???: 그것은 제 잔상입니다만.

암만봐도 강의에서랑 다른게 없는디.. 

 튜터님을 찾아갔다가 회의 중이시래서 팀원분들을 소환했다.. 화면공유로 코드를 공유하고 보다가 결국 코드 전체를 대화로 보내고  저녁을 먹고 왔더니 해결법을 알려주고 계셨다. 

 

문제코드 

const addListBtnEvent =() =>{
        const newlist = {
            id : todo.length +1,
            title: title,
            content,
        };
        setTodo([...todo, newlist])
        setTitle('')
        setContent('')

    };
return.. 
<form className='inputBox' >
                <div>제목:<input
                    value = {title}
                    onChange={
                        function (event) {
                            setTitle(event.target.value)
                        }
                    } 
                    /></div>

                <div>내용:<input
                    value = {content}
                    onChange={contentHandler} /></div>

                <button onClick={addListBtnEvent}>추가</button>
            </form>

문제 이유

form 태그가 가지고 있는 기능중에  새로고침이 있기때문에 지금은 어디에 연결해 둔게 아니니.. 새로고침 되면서 카드가 생겼다가 사라지는 것이었다.

 

수정코드 

    const addListBtnEvent =(event) =>{
        event.preventDefault()  //form에 있는 기본기능 없애기
        const newlist = {
            id : todo.length +1,
            title: title,
            content,
        };
        setTodo([...todo, newlist])
        setTitle('')
        setContent('')

    };
    return...
    
    <form className='inputBox' onSubmit={addListBtnEvent}> // 버튼에 onclick이 아니라 onsubmit으로 클릭이벤트 주기
                <div>제목:<input
                    value = {title}
                    onChange={
                        function (event) {
                            setTitle(event.target.value)
                        }
                    } 
                    /></div>

                <div>내용:<input
                    value = {content}
                    onChange={contentHandler} /></div>

                <button >추가</button>
            </form>

시멘틱 태그에 그런 기능까지 담긴 건줄은.. 몰랐다.. 

 

 

오늘의 목표 도달

• 베이직반 숙제 끝내기 
• 개인과제 => 추가 완료

오늘의 코드 평가 및 느낀점

시멘틱 태그.. 많이 찾아보자!