본문 바로가기

react15

React 18 자동 배칭, Automatic batching Automatic batching for fewer renders in React 18 #21 React는 여러 개의 state update를 모아서 한 번에 re-rendering을 진행합니다. function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + 1); // 아직 리렌더링 안함 setFlag(f => !f); // 아직 리렌더링 안함 // 리액트는 이 함수가 다 끝나면 리렌더링 함 // 이를 batching이라 부름. } return ( Next {count} ); } 이런 처리 방식은 웹페이지의 렌더링 횟.. 2022. 3. 3.
React18 Suspense SSR 아키텍쳐 용어 성능 TTFB: Time to First Byte (첫 번째 바이트까지의 시간) - 링크를 클릭한 후 처음으로 들어오는 콘텐츠 비트 사이의 시간을 나타냅니다. FP: First Paint - 픽셀이 처음으로 사용자에게 표시되는 시점. FCP: First Contentful Paint - 요청 콘텐츠(기사 본문 등)가 표시되는 시점 TTI: Time To Interactive - 페이지가 상호작용 가능하게 될 때까지의 시간 (이벤트 발생 등). New Suspense SSR Architecture in React 18 #37 리액트 16.6.0 에 React.lazy와 함께 Suspense가 처음 등장했습니다. Suspense는 비동기 로딩의 필요성을 감지하고 대체 로드 UI를 렌더링 하는 것입니다... 2022. 2. 17.
Semantic Versioning, Tilde, Caret Semantic Versioning 소프트웨어 관리를 위해서는 의존성에 유의해야하는데 버전 번호를 어떻게 정하고 올려야 하는지 규칙과 요구사항을 제안 합니다. 버전은 .을 기준으로 3개로 구분합니다. Major . Minor . Patch 기존 버전과 호환되지 않게 API가 바뀌면 Major의 숫자를 올립니다. 기존 버전과 호환되면서 새로운 기능을 추가할 때는 Minor의 숫자를 올립니다. 기존 버전과 호환되면서 버그를 수정한 것이면 Patch의 숫자를 올립니다. 즉 최초 출시로 1.0.0 에서 이전 버전과 호환되는 버그 수정은 Patch를 수정하여 1.0.1로 업데이트 하고, 여기서 이전 버전과 호환되는 새로운 기능을 추가하면 Minor를 증가시키고 Patch를 0으로 (1.1.0) 업데이트 합니다. .. 2022. 2. 15.
[webpack] package.json package-lock.json 차이 package.json package.json 역할 애플리케이션이 필요로하는 패키지 목록 나열 다른 개발자와 같은 빌드환경 구성. (의존성이 달라 발생하는 문제 예방) package.json은 크게 2가지로 나눠집니다. 프로젝트 정보 name, version 등 패키지 정보 어플리케이션 내부에 직접 포함되는 모듈 (dependencies) 개발 과정에 필요한 모듈(devDependencies) 어플리케이션 내부에 직접 포함되는 모듈 (dependencies) 애플리케이션 내부에 직접 포함되는 모듈 정보를 담습니다. 의존성을 규정하는 것은 패키지 이름과 해당 패키지의 범위를 지정한 객체를 통해 이뤄집니다. "dependencies": { "@chakra-ui/react": "^1.7.4", "@emotio.. 2022. 2. 14.
[React] 클래스형 컴포넌트 LifeCycle 정리 생명주기 메서드 모든 컴포넌트는 다양한 종류의 생명주기 메소드를 가집니다. 그리고 이 메소드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다. import React from 'react'; import ReactDOM from 'react-dom'; import reportWebVitals from './reportWebVitals'; class Test extends React.Component{ constructor(props) { super(props); this.state = { name: 'jiwon', date: new Date() } } componentDidMount() { this.timerID = setInterval(() => this.tick(), 1000); /.. 2021. 12. 9.
Webpack이 뭔데!!(6) template engine을 webpack과 함께 사용해보기 Webpack이 바라보는 Module js sass hbs jpg, png hbs는 handlebars 의 약자로 이 확장자는 템플릿 엔진인handlebars가 사용하는 template 파일을 말합니다. 문서 내에 특정 데이터를 노출시켜야 할 때 직접 DOM을 파싱하고 데이터가 들어갈 공간을 찾아서 넣어주는 작업을 반복해야합니다. 이런 일을 많이해야할 때 템플릿 엔진을 사용합니다. 템플릿 엔진은 Model Template View 로 나눠져있습니다. Model은 문서에 노출시킬 데이터를 뜻하고 , Template 은 일반적인 문서와 비슷한데 모델이 갖고 있는 데이터가 어디에 어떻게 표현될 지 문서내에 작성이 되어있습니다. Model과 Temp.. 2021. 9. 14.
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'inline'. These properties are valid: object { allowedHosts?, bonjour?, client?, compre.. [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'inline'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddlewar.. 2021. 8. 29.
TestDome React Image Gallery App 문제의 요구사항을 살펴보자. 이미지와 함께 X버튼이 존재하고 X버튼을 누르면 해당하는 이미지가 삭제되는 형태다. 1. 이미지 리스트 2. remove 버튼 눌렸을 때 삭제되게 ( 코드의 아랫쪽을 보면 첫번째 링크는 생성되자마자 remove가 클릭되게 되어있음) links라는 props를 전달하고 links는 배열형태. 이 말은 X Jsx에서는 class 말고 className을 그리고 img 태그도 꼭 닫아줘야한다. class ImageGallery extends React.Component { constructor(props) { super(props); this.state = { links: props.links }; this.remove = this.remove.bind(this); } remove.. 2021. 8. 21.
TestDome React Focusable Input 렌더링 될 때 shouldFocus prop이 true면 자동 포커스 되게끔 하면 되는 문제다. functional component이므로 useRef로 DOM에 접근해서 focus() 메서드를 사용하면 될 것 같다. 우선 문제의 요구사항은 1. shouldFocus가 true일 때 input focusing 2. 오직 첫 렌더링때만 input focuing 3. react hook 사용 const FocusableInput = (props) => { const inputRef = React.useRef(); React.useEffect(() => { if (props.shouldFocus) inputRef.current.focus(); }); return ; }; docum.. 2021. 8. 20.
TestDome React Change Username 문제에서 요구하는 사항을 보면 1. h1태그 사이에 value 값이 뜨게 2. 버튼을 누르면 input값을 읽어 Username 의 value를 변경 3. Reference Hook 사용해서 Username의 value update // React is loaded and is available as React and ReactDOM // imports should NOT be used class Username extends React.Component { state = { value: "" }; changeValue(value) { this.setState({ value }); } render() { const { value } = this.state; return {value}; } } functi.. 2021. 8. 20.
Webpack이 뭔데!!(5) plugin 플러그인은 웹팩이 동작하는 자체적인 과정에 개입할 수 있어 웹팩이 동작하는 과정 전반적으로 광범위한 작업을 수행할 수 있습니다. 번들파일에 변화를 주거나 최적화하고, 애셋을 관리하고 또 환경변수 주입등과 같은 작업을 수행할 수 있습니다. plugin은 require()을 통해 플러그인을 요청하고 plugins 라는 key를 시작으로 설정할 수 있습니다. 이번에는 HtmlWebpackPlugin 을 사용해 볼 예정입니다. 이 플러그인은 번들러를 위한 html 파일을 자동으로 만들어주고 설정해줍니다. 플러그인은 loader 와 다르게 webpack package 내부에 있는 plugin과 외부 저장소에서 관리되는 plugin으로 나뉩니다. 이번에 사용하는 HtmlWebpackPlugin 은 외부.. 2021. 8. 6.
Webpack이 뭔데!! (4) Package.json package.json은 크게 2가지로 나눠집니다. 어플리케이션 내부에 직접 포함되는 모듈 예를 들어 Jquery같은 모듈이 있습니다. DOM선택을 쉽게하기 위해 Jquery등을 NPM을 통해 설치하면 이 모듈은 애플리케이션 내부에서 직접 동작하는 모듈입니다. 개발 과정에 필요한 모듈 개발 효율을 높이거나 코드 컨벤션을 검사하는 등등의 모듈, 즉 테스트 관련 모듈이나 트랜스 파일러 관련 모듈등이 있습니다. dependencies 애플리케이션 내부에 직접 포함되는 모듈 정보를 담습니다. 의존성을 규정하는 것은 패키지 이름과 해당 패키지의 범위를 지정한 객체를 통해 이뤄집니다. npm 을 통해 설치하는 모듈이 dependencies에 기록되어야할 때는 옵션으로 --save 를 사용합니.. 2021. 8. 4.
Webpack이 뭔데!!(3) Bundle이 중요한 이유? Bundle이란? 번들은 웹팩에 대해 이해할 때 알아봤습니다. 이번에는 번들을 왜 사용하는지, 이게 왜 중요한지에 대해 알아봅니다. 각 모듈을 요청해서 자원을 얻어와야 했던 것들을 묶어서 요청/응답 을 받기 때문에 파입 접근 횟수가 줄어들고 모듈 로드를 위해 검색하는 시간, network cost가 줄어듭니다. Webpack 4 이상의 버전부터는 development, production 모드를 지원합니다. production 모드에서는 로드 시간을 줄이기 위한 번들 최소화, 가벼운 소스맵 및 최적화에 초점을 맞추고 번들링을 진행합니다. 즉 코드를 압축해주고 난독화, 최적화(tree shaking) 작업을 지원합니다. tree shaking: 사용되지 않는 코드를 제거 Web.. 2021. 8. 2.
Webpack이 뭔데!!(2) ESM Keyword Nodejs 환경에서는 CommonJS 표준을 따르기 때문에 모듈을 다른 방식으로 접근할 수 있게 도와주는 도구가 필요합니다. $ npm install esm esm을 설치해준다. esm 모듈이 설치가 되었으면 명령문을 실행할 때 $ node -r esm index.js -r 이라는 플래그는 node 명령어를 실행할 때 실행하는 파일의 다른 모듈의 표준도 해석할 수 있게 실행해줍니다. 내보내기 export 혹은 export default 를 사용합니다. export, export default의 차이? 모듈은 크게 두 종류로 나눌 수 있습니다. 여러 개의 함수가 있는 라이브러리 형태의 모듈과, 개체 하나만 선언되어있는 모듈 export default 를 사용하면 해당 모듈엔 개체가 .. 2021. 8. 1.
Webpack 이 뭔데!!(1) 웹팩은 최신 프론트엔드 프레임워크에서 가장 많이사용되는 모던 Javascript 애플리케이션을 위한 정적 모듈 번들러입니다. 모듈 번들러란? 모듈 번들러는 웹 애플리케이션을 구성하는 웹 구성 자원들(HTML,CSS,JS,Images 등)을 모두 각각의 모듈로 보고 이들의 의존성을 묶고 조합해 합쳐진 하나의 결과물(static한 자원)을 만드는 도구입니다. 즉 js, sass, jpg, png, css 같은 많은 자원들을 하나의 파일로 병합하고 압축해주는 동작을 모듈 번들링이라고 합니다. 모듈이란? 모듈은 단지 파일 하나에 불과 합니다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 각 모듈은 전체 프로그램보다 영향 범위가 좁아 검증 및 디버깅 테스트.. 2021. 7. 30.

티스토리툴바