react

❓ ERRORYou are running create-react-app 4.0.0, which is behind the latest release(5.0.1).We no longer support global installation of Create React App.

❓ ERROR...module build failed (from ./node_modules/@svgr/webpack/lib/index.js):...permission denied : /Users/사용자이름/.config/svgrrc✅ cmd켜고✅ sudo chmod -

💡 JavaScript XML의 줄임말💡 React에서 UI를 구성할 때 사용하는 JavaScript를 확장한 문법

❓ 강좌를 그대로 따라하고 npm start 하니 화면출력이 안됨 콘솔을 보니 아래와 같은 오류가 있었다❓ ERROR...the above error occurred in the component:in package.json..."react-router-dom": "

❓ ERRORWarning: ... contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (s

💡 컴포넌트의 속성(property)💡 변하지 않는 외부로 부터 전달받는 값

💡 React의 함수 컴포넌트는 props가 입력, JSX Element가 출력으로 순수 함수로 작동하는데, AJAX 등을 사용하는 경우 발생하는 Side Effect를 다루기 위한 Effect Hook📗 Pure Function vs Side EffectSide

💡 단기간에 일어나는 상태변화를 매번 렌더링 시키지 않고, 일괄 처리하기 하면서 성능을 최적화시킴

lifecycle 도형

jsx해결

💡 Component Driven Development의 약자💡 부품 단위로 UI를 만들어나가는 개발 진행 가능💡 재사용할 수 있는 컴포넌트 개발 가능📗 CSSCSS의 작업을 효율적으로 하기위한 구조화된 CSS 필요성 대두📗 CSS 전처리기CSS의 단점을 프로

💡 CDD를 지원하는 도구인 Component Explorer 등장💡 Component Explorer의 UI 개발 도구 중의 하나💡 각각의 컴포넌트들을 따로 볼 수 있게 해줌💡 재사용성을 확대하기 위해 컴포넌트를 문서화💡 자동으로 컴포넌트를 시각화하여 시뮬레

💡 DOM 엘리먼트 주소값을 활용해야 하는 경우(focus, media play 등)💡 컴포넌트가 Re-render되어도 바뀌지 않음💡 리엑트는 선언형 프로그램 원칙을 따르기 때문에 부득이한 상황에서만 사용

UI(Action) ➡️ Dispatch ➡️ Reducer ➡️ Store(상태 변경)

App.js 추가

index.js

margin 계산

의미

📗 npm init📗 package.json 생성

https://juni-official.tistory.com/158

의미

💡 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드📗 리액트 함수의 최상위에서만 호출조건문, 반복문 안에서 Hook을 호출하게 되면 호출되는 순서대로 저장을 하기 어려워지고, 결국 예기치 못한 버그를 초래📗 오직 리액트 함수 내에

💡 특정 값을 재사용하고자 할 때 사용하는 Hook💡 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value값이 동일할 경우에는 이전 렌더링의 value값을 그대로 재활용Memoization기존에 수행한 연산의 결과값을 메모리에 저장을 해두고,동일한 입력

클래스형 함수형

💡

webpack.config.dev.js 추가webpack.config.prod.js 추가

💡 상태관리 로직의 재활용 가능💡 함수형으로 작성하므로 비교적 명료

이전 이후

Custom Hooks 기본 이전

✅ ReactDOM.render를 지원하지 않음✅ createRoot API를 사용

💡 따로 분리, 필요할 때만 사용 가능💡 페이지 로딩 속도 개선서드파티 라이브러리로 번들 분할메소드 중 하나를 불러와 쓰는 방법이 좋음

렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고,로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능

https://velog.io/@hmds1606/json-server-%EC%84%A4%EC%B9%98-%EC%98%A4%EB%A5%98

💡 Test-driven Development💡 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론💡 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것Write Failing Test 실패하는 테스트 코드 작성Make

📗 \[].indexOf(cardLength) > -1📗 숫자 범위📗 정규식