목차

1. React 세팅

    

2. Todo List 만들기

    

3. 느낀점

1. React 세팅
Create-react-app

npm 또는 npx로 설치

npm init react-app my-app

npx create-react-app my-app

React 애플리케이션을 만들기 위한 기본 파일 및 구조가 설정됨.

npx 사용이 더 좋은 이유

• 항상 최신 버전을 설치하므로 React를 설치한 후에도 다시 업데이트할 필요가 없음.

• 프로젝트의 루트 디렉토리에 React를 설치하지 않고도 React 스크립트를 실행할 수 있음.

• 프로젝트마다 React를 별도로 설치할 필요가 없음.

참고) 프로젝트 이름에 대문자 들어가면 오류

React 앱을 개발모드로 실행

npm start

something is already running on port 3000 에러

Y를 누르면 다른 포트를 만들어서 동작하게 함.

Vite

 터미널에 해당 명령어를 입력해준다.

npm create vite@latest

프로젝트 이름을 지정해준다.

Back-space 없이 그냥 입력하면 알아서 덮어 써진다.

React를 선택한다.

해당 명령어를 순서대로 입력하면 된다.

SWC(Speedy Web Compiler)

• 자바스크립트 프로젝트의 컴파일과 번들링 모두에 사용될 수 있는, Rust라는 언어로 제작된 빌드 툴

• 말 그대로 매우 빠른 웹 컴파일러의 기능을 제공하는 툴

   

   

  cd 입력하고 첫글자 누르고 tap 누르면 됨.

   

2. Todo List 만들기

Todo List 만들 때 발생한 오류

1) React에서 배열(리스트)를 렌더링할 때 각 항목에는 고유한 "key" prop이 있어야 함.

해결 방법

리스트로 렌더링되는 각 요소에 고유한 "key" prop을 추가하면 됨.

2) <input> 요소에 value prop을 썼지만 해당 요소에는 onChange 핸들러가 없음.

이런 경우 사용자 입력에 대한 처리가 없는 상태로 값을 변경할 수 없다고 경고 문구를 띄움.

해결 방법

1) defaultValue prop 사용

<input defaultValue={this.state.value} />

2) onChange 핸들러 추가

<input value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />

3) TypeScript에서 이벤트 핸들러의 매개변수 타입은 일반적으로 React.ChangeEvent를 사용함.

 import React, { ChangeEvent } from "react";

   handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log(e);
  };

3. 느낀점

이번 한 주 동안 기록할 만한 일이 없었다.

채용 공고를 깔짝이면서 둘러보는 데 쓸데없이 시간을 낭비하였고, 아무것도 하기 싫다는 생각으로 퍼질러서 정말 별 것도 하지 않았다.

하지만 이제는 강의를 열심히 듣고 과제를 완성해야겠다는 생각이 들었다.

현재의 상황에 집중하고 최선을 다해야하는 것이 맞는 것 같다.