8/10

type coercion

암묵적 형 변환 ( 자동 형변환)

== 에서는 일어나고 ===에서는 일어나지 않음

8/17 페어프로그래밍 연습 - todolist

tailwindcss 전역에서 임포트해야함 index.css에 넣기

import { useState, type ChangeEventHandler } from "react";
import Header from "./components/Header";
import data from "./constants/dummyData";
import type { Todo } from "./types/todo";

function App() {
  const [input, setInput] = useState("");
  const onInput: ChangeEventHandler<HTMLInputElement> = (e) => {
    setInput(e.currentTarget.value);
  };
  return (
    <>
      <div className="flex flex-col">
        <Header />
        <div className="mx-auto mt-16 w-full max-w-2xl rounded-lg border border-gray-200 p-6 shadow-sm">
          <input
            placeholder="please enter your todos!"
            value={input}
            onChange={onInput}
            className="w-full rounded-md border border-gray-400 p-2  placeholder:text-gray-400"
          />
          <div>
            {data.map((el: Todo) => (
              <div key={el.id}>{el.title}</div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

e.target

• 실제로 이벤트가 발생한 요소를 가리킴.
• 즉, 사용자가 클릭/입력/호버 등 행동을 한 가장 안쪽(깊은) DOM 요소.

e.currentTarget

• 이벤트 핸들러가 붙은 요소를 가리킴.
• 즉, 이벤트 리스너가 지금 실행되고 있는 그 컨텍스트의 요소.

순서

1. npm create vite@latest하고
2. tailwindcss적용하고
3. input ui만들고
4. card들 만들고
5. todo 생성기능 만들기 = localstorage에 저장 uuid로