jyoon dev log

파일상에 useMemo를 사용한 적이 없는데 로컬 호스트가 열리지 않았다. 경고 react.development.js:207 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in t..

1. label 태그에 스타일 적용하기 input에 아무것도 입력하지 않았을 때, Course Goal text red, border red, color green 으로 바뀐다. return ( {/*아무것도 입력안하면 글자가 빨간색으로 바뀜-> 스타일 프롭스 추가해서 요구되는 객체를 전달한다 */} Course Goal Add Goal ); }; 2. invaild 클래스를 동적으로 추가하기 CourseInpus.css .form-control.invaild input { border-color: red; background: #ffd7d7; } .form-control.form-control.invaild label { color: red; } CourseInput.js const CourseInpu..

React Hooks 1. react.lazy(), suspense 를 사용해서 동적으로 리소스 받아오기 react.lazy()와 suspense 는 같이 사용해야 한다. (앱의 볼륨이 작으면 속도감이 안 올 수 있다, 대형 프로젝트에서는 빠른 속도 체감할 수 있다.) 동적 import를 사용해서 받아오고, 받아온 것들을 suspens 컴포넌트 안에서 실행시킨다. App.js /* react 메소드 사용할 때 import React, { Suspense } from "react" 불러오기*/ import React, { Suspense } from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import useFetc..

Hook이란? Hook은 React 16.8에 새로 추가된 기능. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. Hook은 다르게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다. Hook은 클래스형 컴포넌트에서는 동작하지 않는다. function으로만 React를 사용할 수 있게 해주는 것이다. Hook 사용 규칙 1. 리액트 함수의 최상위에서만 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않는다. 컴포넌트 안에는 useState나 useEffect 같은 Hook 들이 여러번 사용될 수 있는데 React는 Hook을 호출되는 순서로 저장 해놓는다..

React가 DOM 트리를 탐색하는 방법 React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색한다. 즉, 같은 레벨(위치)끼리 비교한다는 뜻으로 너비 우선 탐색(BFS)의 일종이라고 볼 수 있다. 다른 타입의 DOM 엘리먼트인 경우 DOM 트리는 각 HTML 태그마다 각각의 규칙이 있어 그 아래 들어가는 자식 태그가 한정적이라는 특징이 있다. 태그 밑에는 태그만 오고, 태그 안에 태그를 또 쓰지 못하는 것. 자식 태그의 부모 태그 또한 정해져 있다는 특징이 있기 때문에, 부모 태그가 달라진다면 React는 이전 트리를 버리고 새로운 트리를 구축한다. //부모 태그가 div에서 span으로 바뀝니다. 부모 태그가 바뀌어버리면, R..

Virtual DOM React에는 Virtual DOM 이라고 하는 가상의 DOM 객체가 있다. 이 가상의 DOM 객체는 실제 DOM의 사본 같은 개념으로, React 는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분만 적용할 수 있다. Virtual DOM이 나오게 된 배경 DOM을 RealDOM으로 부르는 이유는 버츄얼 돔과 구분하기 위해서다. Real DOM (DOM-Document Object Model) DOM은 문서 객체 모델을 의미한다. 문서 객체란 브라우저가 자바스크립트와 같은 스크립팅 언어 , , 와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것을 의미한다. 돔은 브라우저가 트리 구조..

module.exports = { target: ["web", "es5"], //Entry: 속성을 설정하여 다른 (./src/script.js)엔트리 포인트를 지정했다. entry: "./src/script.js", //output: 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할 output: { //path, filename 속성을 사용하여 webpack에 번들의 이름과 내보낼 위치를 알려줌 path: path.resolve(__dirname, "docs"), filename: "app.bundle.js", clean: true }, module: { rules: [ { //로더는 웹팩이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환해 애플리..

🕹 번들링 - 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 - 실질적으로 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 번들링 작업에서는 필연적으로 용량을 줄이고 파일을 통일하는 툴링 작업이 필요하게 된다. 즉, 소프트웨어를 잘 만들어도 사용자에게 배포하기 위해 번들링이 꼭 필요하다. 🕹 Webpack webpack은 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다. Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 모듈 번들러(Module Bundler) 모듈 번들러란 복잡성에 대응하기 위해 하나의 시작점(Ex. React App의 index.js 등)으로부터 의존성을 가지는 모듈을 모두 추적하여 하나..

Redux의 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미. 즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙. 2. State is read-only 상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙. 3. Changes are made with pure functions 변경은 순수함수로만 가능하다는 뜻으로, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙. Stor..

상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다. 상태가 변경되면, React는 화면을 다시 렌더링 합니다. Action 어떤 액션을 취할 것인지 정의해 놓은 객체 // payload가 필요 없는 경우 { type: 'INCREASE' } // payload가 필요한 경우 { type: 'SET_NUMBER', payload: 5 } type : 해당 Action 객체가 어떤 동작을 하..