열이의 개발블로그

CSS를 추가하여 투두 리스트를 꾸며봅시다. ✅ App.js 수정하기 import { useState } from "react"; import "./App.css"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => { setToDo(event.target.value); }; const onSubmit = (event) => { event.preventDefault(); if (toDo.trim() !== "") { setToDos((currentArray) => [ ...currentArray, { text: toDo, checked:..

App.js에 스크립트 파트를 추가하여 동작하도록 만들어 봅시다. ✅ 새로운 할 일 작성하기 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => { setToDo(event.target.value); }; return ( Todo List + ); } export default App; useState 훅을 사용하여 input 태그에 입력한 값을 toDo라는 문자열 state로 지정해줍니다. input 태그에는 value 값으로 toDo를 중괄호로 사용해서 지정해주고 만약 input의 값이 변경된다면 onChange 이벤트가 발생하여 onChange..

React.js로 투두 리스트를 만들어 봅시다. ✅ 프로젝트 생성 npx create-react-app todo todo 라는 이름을 가진 프로젝트를 생성해줍니다. 터미널에 코드를 입력한다면 설치가 진행되고 위와 같이 로그가 나오면 프로젝트 생성이 완료된 것을 의미합니다! 맨 아래 부분에 있는 코드를 입력하여 프로젝트를 실행해봅시다. cd todo npm start 위와 같은 웹 페이지가 자동으로 열린다면 성공적으로 프로젝트가 실행된 것입니다! ✅ App.js 수정 우선 기본으로 작성된 App.js 파일을 수정해줍니다. React는 index.js를 바탕으로 실행되며 index.js 안에서 App.js를 불러와 랜더링하여 화면에 보여집니다. function App() { return ( Todo List..

✅ CSS 추가 index.html에 class를 먼저 추가해줍시다. Todo List script.js 코드를 수정해줍시다. const todo = document.querySelector("#todo"); const addBtn = document.querySelector("#addBtn"); const todoBox = document.querySelector("#todoBox"); addBtn.addEventListener("click", () => { const newTodo = document.createElement("label"); const checkBox = document.createElement("input"); const checkMark = document.createElemen..

✅ Javascript 추가하기 const todo = document.querySelector("#todo"); const addBtn = document.querySelector("#addBtn"); const todoBox = document.querySelector("#todoBox"); todo는 input에 입력된 값을 가져오기 위한 input 태그입니다. addBtn은 todo를 추가하기 위한 button 태그입니다. todoBox는 todo를 추가하는 todoBox div 태그입니다. addBtn.addEventListener("click", () => { const newTodo = document.createElement("li"); const checkBox = document.cre..

JS를 사용하여 기본적인 투두 리스트를 만들어 봅시다. ✅ 기본 세팅 우선 위와 같이 폴더 안에 3개의 파일을 만들어 줍시다. ✅ index.html Todo List + 타이틀과 인풋 박스를 만들어주고 아래에 Todo를 추가할 리스트 박스를 만들어줍니다. 또한, css와 js를 html에 연결해줍니다.

✅ Interface란? 인터페이스는 object(객체) 모양을 특정해주기 위한 것 interface Player { nickname: string, team: Team, health: Health } type Player = { nickname: string, team: Team, health: Health } 타입과 같이 인터페이스는 객체의 형태를 특정해주는 역할을 합니다. ✏️ 타입과의 차이점 type(타입)은 모든 타입의 모양을 설명하는 역할을 할 수 있지만 interface(인터페이스)는 object(객체)의 모양만을 설명하는 역할만 할 수 있습니다. // 에러 interface Hello = string; 위와 같은 코드는 사용할 수 없습니다. ✅ interface 상속 interface Us..

✅ Static 클래스를 통해 인스턴스를 생성할 필요 없이, 클래스의 속성 또는 메소드를 사용하는 방식 class Player { static firstName: string = "GilDong"; static hello() { return "hello" } } Player.firstName; Player.hello(); 위의 예시처럼 속성과 메소드에 static 키워드를 붙이면 클래스의 인스턴스를 생성하지 않고 속성과 메소드를 사용할 수 있습니다.

타입스크립트 타입의 확장된 문법을 확인해봅시다. ✅ Type Aliases(타입 별칭) type Nickname = string; type Health = number; type Friends = Array; type Player = { nickname: Nickname; healthBar: Health; }; const nico: Player = { nickname: "nico", healthBar: 10, }; type Food = string; const kimchi: Food = "delicious"; type alias를 이용하여 타입스크립트에서 만들고 싶은 무수히 많은 종류의 타입을 설명해주면 원하는 타입을 만들 수 있습니다. ✏️ 지정된 옵션 사용 type Team = "red" | "blu..

타입스크립트에서의 클래스를 알아봅시다. ✅ Class(클래스) 타입스크립트도 객체지향 프로그래밍 언어이기 때문에 객체를 생성하는 클래스 기능을 사용할 수 있습니다. Javascript class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 자바스크립트에서는 contructor 메서드를 만들고 그 안에서 this.height = height this.width= width 와 같은 식으로 작성해야 합니다. Typescript class Player { constructor( private firstName: string, private lastName: string, public nickName:..