본문 바로가기

분류 전체보기72

[JS] 자바스크립트란? 자바스크립트의 역사와 간단한 동작원리를 알아봅니다. 일반적인 프로그래밍 언어와 다르게 웹 페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도를 목적으로 태어났다. 자바스크립트 엔진 내부에서 암묵적으로 처리해 주는 기능이 있습니다. 편리한 경우도 있지만 내부 동작을 이해하기 어려웠다. 하지만, 자바스크립트는 더 이상 제한적 용도의 프로그래밍 언어가 아닙니다. 프론트엔드와 백엔드 영역의 프로그래밍 언어로 사용할 수 있는 범용 애플리케이션 개발 언어로 성장했다. 자바스크립트 브라우저에 따라 웹 페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고, 웹 페이지를 개발하는 것은 무척 어려워졌다. 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트에.. 2020. 6. 29.
[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.

티스토리툴바