20240516 ToDoList만들기

RingKim1·2024년 5월 16일

TIL

목록 보기
20/77

Today

React 프로젝트 생성

아래 방법 중 vite 추천

  1. CRA
    yarn create react-app app이름
    cd app이름
    yarn start

  2. Vite🔥
    1) 폴더 이름 설정, 라이브러리 및 프레임 워크 설정, 사용 언어 설정까지
    👉yarn create vite 후 설정

    2) 한번에 생성 하려면
    👉yarn create vite app이름 --template react

⚠️vite
프랑스어로 "빠르다(Quick)"를 의미,
발음은 /vit/ 비트 바이트

  1. 터미널을 열고 yarn 입력
    3번까지 실행하면 생성되는 파일들..

이제는 yarn 없이 못 산다...

  1. yarn dev를 입력 후

로컬에 들어가면

방금 생성한 템플릿 화면이 나온다..

  1. App.jsx에서 프로젝트 시작
    app.jsx에서 내용을 날리고 할 거 하러 가면 되겠다.

ToDoList

🌹crud의 꽃
계속해서 반복숙달을 통해 익숙해지는 게 답이다.

  1. 대략적인 와이어 프레임 그리기

  2. 리액트 기본원리 = 상태가 변하면 리렌더링 ⭐중요⭐
    useState Hook을 사용 과제 해결

❓Hook
React 버전 16.8부터 React 요소로 새로 추가
기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용
Hook의 개요

사실 기능만 하게끔 구현해놨지만 컴포넌트 분리 및 세세하게 함수명, 변수명 등 세세하기 수정할 요소도 많다.


Learn

  1. VSCode 익스텐션 prettier 설치
    리액트를 하게되면서 설치한 익스텐션, 저장하면 자동으로 설정되게끔 변경이 되기도 하고
    추후 협업에서 prettierrc를 따로 설정한다고 하여서 시도해봤는데 아직 익숙치 않음..

    기본값에 익숙해 져서 그런가 필요없어 보이기도 하고..


주절주절

아직도 배울게 많은데 할 것도 많고
24시간이 부족하다.

profile
커피는 콜드브루

0개의 댓글