본문 바로가기

전체 글75

[React] SPA SPA (Single Page Application, 싱글 페이지 애플리케이션) 프로젝트에 라우터 적용 설치 $ yarn add react-router-dom // index.js import { BrowserRouter } from 'react-router-dom' React.DOM.render ( ... ) react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해줍니다. 1. Route 컴포넌트로 특정 주소에 컴포넌트 연결 Route라는 컴포넌트를 사.. 2020. 5. 20.
[React] 컴포넌트 성능 최적화 컴포넌트 성능 최적화 추가되어 있는 데이터가 무수히 많아지면, 애플리케이션이 느려집니다. 이러한 현상으로 렌더링 최적화를 하여 성능을 높여봅시다. 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle과 onRemove가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 많은 데이터 렌더링 성능 분석 결과에 나타난 Timings에 작업이 처리되는 데 1.02초가 걸렸습니다. 데이터가 많으면 많을수록 시간이 오래걸려 성능이 매우 나쁘다고 판단됩니다. 느려지는 성능 원인 분석 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수.. 2020. 5. 19.
[JS] 자바스크립트란? 자바스크립트란? 웹 페이지는 기본적으로 HTML, CSS, Script 요소들로 이루어져 있습니다. HTML: 어떻게 브라우저에 보여줄지 구조(layout)를 잡습니다. CSS: 구조를 잡은 것을 어떻게 보여줄지 스타일을 입혀줍니다. (위치, 크기, 색상 등..) SCRIPT: HTML과 CSS로 만들어진 정적인 페이지를 동적으로 동작할 수 있게 만들어줍니다. 초기의 자바스크립트는 웹페이지의 보조적 기능을 수행하기 위한 용도로 사용되었으나, 프론트엔드와 백엔드 영역의 프로그래밍 언어로 사용할 수 있는 애플리케이션 개발 언어로 성장했습니다. 중요한 로직들은 서버사이드에서 처리하고, 클라이언트단에서는 받은 데이터 또는 HTML등을 렌더링 해주는 수준이었습니다. JQuery 같은 라이브러리의 등장으로 DOM을.. 2020. 5. 19.
[React] 학습내용 STEP.1 React 입문 및 활용 STEP. 01 자바스크립트의 역사 HTML&CSS 로 만들어진 정적인 페이지를 동적으로 동작할 수 있게 만들어줍니다. 보조적 기능을 수행하기 위한 용도로 사용되었습니다. NodeJS: 브라우저 외부에서 JS를 실행 할 수 있는 환경 package.json: 프로젝트의 설명서 (버젼, 사용중인 패키지 등을 알 수 있다.) - dependencies: 서비스에서 필요한 패키지들 - dev dependencies: 개발단계에서 필요한 패키지들 Git: 소스코드 버젼관리를 해준다. 협업과정에서의 피로도를 줄여준다. ES Lint: 코드의 규칙을 정한다. 프로젝트 코드의 균일화 (.eslintrc 라는 설정파일을 추가해주어야한다) Prettier: 코드 포맷 규칙을 정한다. ES Lin.. 2020. 5. 18.

티스토리툴바