기록과 내재화

on vs handle이벤트 핸들러 함수를 props로 넘길때, 언제 on을 쓰고 언제 handle을 붙일까? handle은 함수를 정의할때 사용on은 이벤트핸들러 함수를 prop으로 받는 component 쪽에서 prop 이름으로 사용 export default function App(){ function handleSelect(){ console.log('Selected!') } return ( Component )}export default function TabButton({children, onSelect}){ return ( {children} )}

gh-pages 패키지 설치// yarnyarn add gh-pages// npmnpm install gh-pages package.json 설정{ // .... "scripts": { // ... "predeploy": "npm run build", // 추가! "deploy": "gh-pages -d build", // 추가! }, "dependencies": { // ... }, "devDependencies": { // ... }, // .... // 배포할 웹사이트 주소 "homepage": "https://danimkim.github.io/react-essentials" // 추가!} vite.config.js 설정배포주소가 기본 github.io 이면 별도의..

public 폴더  vs src 폴더 하위 /public- 브라우저에서 접근가능하다- 절대경로 사용가능// 올바른 예시 - 절대경로 사용. 파일이름을 바로 사용한다.// 잘못사용한 예시 - public 폴더 경로를 쓰지 않는다.💡 favicon과 같은 index.html 파일에서 직접 사용하는 이미지 파일을 위치시키는 것이 좋다. src 폴더 하위 (ex. src/assets)- 브라우저에서 접근 불가능- 코드 파일에서 import 해서 이미지를 사용하며, 빌드시 이미지 최적화됨import Image from '@assets/image.png'//..return ( ) 💡 컴포넌트에 사용되는 이미지 등의 asset 파일은 src 폴더 하위에 위치시키는 것이 좋다.

Component Functions컴포넌트명은 대문자로 시작해야한다렌더가능한 값을 리턴해야한다// 예시 1 - 리액트 컴폰넌트 예시import React, { useState } from 'react';function Counter() { // 컴포넌트 함수는 대문자로 시작 const [count, setCount] = useState(0); return ( // 화면에 렌더링 가능한 요소를 반환 Count: {count} setCount(count + 1)}> Increment );}export default Counter;  컴포넌트 렌더링부분 return 할때 하나의 요소만 리턴해야하는 이유 JSX 요소를 리턴할 때 여러 요소를 병렬..

화살표 함수의 this화살표 함수는 this 를 가지고 있지 않다. 화살표 함수가 정의 됐을때 자신의 상위 스코프의 this 를 가리킨다. 그에 따라 의도와 다르게 동작할 수 있으므로 다음의 경우 화살표 함수를 사용하지 않아야 한다.- 메소드- 생성자 함수- addEventListener의 콜백 함수 자바스크립트 classES6에서 추가된 문법. 자바스크립트는 클래스 없이도 프로토타입의 chain, closure 등으로 객체지향 프로그래밍이 가능한 언어이나 객체지향 프로그래밍 언어에 익숙한 개발자들이 좀더 쉽게 이해하고 사용할 수 있도록 일종의 syntactic sugar로서 class 문법이 사용된다. 즉, 여전히 자바스크립트 내부적으로는 프로토타입 기반으로 동작한다. for반복문 for ... of ..

리액트란?사용자 인터페이스 구현을 위해 사용하는 자바스크립트 라이브러리 (바닐라 자바스크립트와 비교했을때) 리액트를 왜 쓰는가?사용자에게 모바일앱과 같은 경험 제공페이지 깜빡임 없이 부드러운 페이지 전환페이지 re-loading 없이 페이지 내의 요소 업데이트사용자가 어떤 요소와 상호작용할때 페이지 깜빡이거나 로딩하는 과정 없이 백그라운드에서 데이터를 fetching하고 관련 결과를 페이지에 자동으로 업데이트 좀더 간편한 멘탈모델* 제공- 애플리케이션이 규모가 커질수록 바닐라 자바스크립트로만 개발하기에는 코드가 복잡해질 수 있다- 복잡하게 짜여진 자바스크립트 코드는 에러 발생하기 쉽다(error-prone)- 유지보수 하기 어렵다. *멘탈 모델이란프로그래밍의 멘탈 모델은 프로그래머가 프로그래밍 개념, 프..

handleSubmit이 작동되지 않았던 이유는validate 에서 errors 객체에 속성들이 존재하기 때문이었다. validate가 모두 통과되면 error 객체에 아무런 속성이 없어야하는데 내가 애초에 errors 객체를 안에 속성이 있는 객체로 정의했기 때문에 formik이 errors 객체 안에 속성들이 있으니 validation을 통과하지 못했다고 판단해서였다.   타입 땜에 안에 속성에 값이 빈 string인 것들로 정의했는데 그러면 안되고 빈 객체를 IErrorMessage로 타입 캐스팅에서 사용해야 validation에 문제가 없으면 빈 객체가 반환되면서 validate가 통과된다.

1. 프로젝트 생성yarn create vite my-app --template react-ts  타입스크립트 없이 리액트만 사용하고 싶다면 react-ts → react를 써준다.프로젝트가 정상적으로 생성 되면 yarn을 한번 더 입력해서 패키지 설치를 해준다. 2. (optional) eslint 설정 프로젝트를 생성하고 나면 eslint 에러가 나는 것을 확인할 수 있다.  해당 '~~' is assigned a value but never used 에러 해결하기 위해서 eslint config 파일에 rules에 no-unused-vars 옵션을 off로 설정해주는 규칙을 추가해준다.  참고자료https://vitejs.dev/guide/#scaffolding-your-first-vite-proj..