HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행 제어 컴포넌트 (Controlled Component) , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 1. type = "text" { setTxtValue(e.target.value); }} /> cf) defaultValue cf) defaultValue? Likewise, and support defaultChecked,..
Webpack? (Review) 자바스크립트, HTML, CSS, 이미지와 같은 여러개의 assets (js, css,png,jpg 등)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러로 의존성이 있는 모듈을 취하여 해당모듈을 대표하는 정적 자산들을 생성 프로젝트 상단에 webpack.config.js만들기 webpack 번들링하는방법 2가지 옵션 설명 --mode 웹팩 실행모드, 현 포스팅에서는 개발버전인 dev or development를 지정 --entry 엔트리 포인트(시작점) 경로를 지정 --output 번들링한 하나의 결과물이 위치하는 경로 1) webpack.config.js파일을 사용하여 번들 설정 관리하기 webpack.config.js const p..
[React] Webpack이란?
Webpack이란? 자바스크립트는 모듈의 합! 즉 모듈이라는건 특정 기능을 갖는 작은 코드 단위를 의미 자바스크립트에서는 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축(js, 이미지,.scss, .hbs등등) 해주는 동작을 모듈 번들링이 필요! 웹팩 등장이유 1. 파일 단위의 자바 스크립트 모듈 관리 - 자바의 유효 범위는 기본적으로 전역변수이기 때문에 편하게 관리할 수 있다는 장점도 있지만, 복잡한 애플리케이션을 개발할때는 변수의 이름을 모두 기억하지 않는 이상 중복선언하거나 의도치 않은 값을 할당 할 수 있음(Scope 문제) - 기존에는 IIFE를 사용하여 스코프 오염을 막았으나 Common.js , export 모듈을 만들고 require를 불러와서 사용했으나 E..
사용자가 떠나지 않도록 하기위해 = 수익증대 프론트 엔드 개발자로서 경쟁력 갖추기위해 [핵심] 브라우저의 렌더링 원리 Performance 패널을 이용한 분석 Lighthouse 패널을 이용한 분석 Network 패널을 이용한 분석 webpack-bundle-analyzer를 이용한 분석 텍스트 압축 이미지 사이즈 최적화 적절한 사이즈로 변환 이미지 CDN을 통한 최적화 리소스 캐싱 이미지 preload 컴포넌트 preload Component Lazy Load React Code Splitting Image Lazy Load 병목 코드 제거 repaint, flow 줄이기 웹 성능 결정 요소 화면을 부르고 최적화시 로딩, 렌더링할것인지 중요, 브라우저가 서버가 어떻게 통신하는지 알 필요가 있음 1. 로..
[React] Component와 State and Props
1. React Component란? - 재활용 가능한 UI 구성 단위 2. Component 구성하는 방식 (1) Class 이용한 방식 (2) Functional Component(함수형 컴포넌트) 예시 - 사용할때? setState와 ref를 없을 때 바로 Functional Component를 바로 사용 예시1) Class 이용한 방식 import React from 'react'; import './App.css'; function App() { return ( React App ); } export default App; 예시2) Functional Component(함수형 컴포넌트) 예시 const GuGuDan = () => { return Hello, Hooks } - Functional..
[React] Webpack 플러그인 플로그인이란? 로더 -> 파일 단위로 처리 플러그인 -> 번들 출처 https://bogyum-uncle.tistory.com/112?category=805022 [WEBPACK] 플러그인(Plugin) 1. 플러그인(Plugin)이란, webpack으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용 webpack의 기본적인 동작에 추가적인 기능을 제공 로더가 파일 단위로 처리한다고 하면, 플러그인은 번 bogyum-uncle.tistory.com
[React] Webpack 로더(Loader)
Loader란? js파일이 아닌 HTML, css, img, 등을 변환할 수 있도록 도와주는 속성, webpack으로 애플리케이션을 빌드할때 import 한 웹 자원 파일을 해석하기 위한 적절한 로더 필요 웹팩의 로더는 각 파일을 처리하기 위한 것 -> 처리해야할 파일의 패턴을 명시 파일이 여러개라면 로더 함수도 여러번 동작 - 파일이 2개일시 2번 동작 loader 설치 방법 $ npm install [loader_name] loader 기본 my-webpack-loader.js module.exports = function myWebpackLoader (content){ console.log("mywebpackLoader 동작함"); return content } // mywebpackLoader 동..
Third-Party Library 1. react-split-it npm install react-split-it 1) 공식 Site https://www.npmjs.com/package/react-split-it/v/1.1.2 react-split-it splitter for react www.npmjs.com 2) 예제 https://greggman.github.io/react-split-it/ react-split-it a react adjustable splitter greggman.github.io
[React] React Redux Middleware 미들웨어
Redux (복습) Redux 특징 1) Middleware 개념 존재 - Redux로 상태 관리를 할 때에는 useReducer를 사용해볼때 접했던 개념인 리듀서 함수 사용 - Middleware 비 동기 작업 처리할때 많이 사용 2) Redux의 Connet 함수 사용시 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props로 받아올 수 있음 - connect 함수 사용 및 useSelector, useDispatch, useStore 사용하여 상태 조회하거나 액션 디스패치 가능 3) 하나의 커다란 상태로 관리가 가능 Redux 사용시? 1) 프로젝트 규모가 크고, 비동기작업시? 리덕스 Redux -> 불변성 유지 필요 왜? 객체의 변화를 감지할때 겉핡기 식으로 비교하여 좋은 성능을 유지하는것이 ..