본문 바로가기

프론트엔드27

[프론트엔드] 코드 스플릿에 대한 정리 벡엔드뿐 아니라 프론트엔드 개발에서 성능 최적화를 위해서 고려해야 할 요소는 상당히 많다. 디테일한 부분을 제외하고 큼직만 한 요소들을 축약해서 꼽자면 리소스 용량을 줄이는 것(압축 및 캐시와 분할), 렌더링 비용을 줄이는 것(DOM, CSSOM, VDOM), 네트워크 비용을 줄이는 것(커넥션 릴리즈) 정도로 분류할 수 있을 거 같다. 그중 리소스 용량 즉 js나 html, css, image등의 파일의 용량을 관리하는 방식으로 웹을 최적화할 수 있는데 단순히 압축(webp, gzip 등)을 통해서 해당 리소스들의 용량을 줄이는 방향과 cache를 통해서 중복 요청을 줄이는 방법 등이 존재한다. 그리고 단순히 용량을 줄인다는 측면이 아닌 꼭 필요한 부분만을 미리 가져다 쓴다는 측면의 분할을 적용하기도 하.. 2022. 7. 20.
[React]React-dom 과 render 리액트 18기준 레거시가 된 render 함수의 구조를 간단히 들여다 보자 render함수는 react-dom 패키지의 ReactDomLegacy로 분류 되어 있다. export function render( element: React$Element, container: Container, callback: ?Function, ) { if (__DEV__) { console.error( 'ReactDOM.render is no longer supported in React 18. Use createRoot ' + 'instead. Until you switch to the new API, your app will behave as ' + "if it's running React 17. Learn " + .. 2022. 7. 17.
프론트엔드 설계 고민 -5- 큰틀은 대략적으로 잡았으니 조금 더 작은 부분들을 고민해보자. SPA 개발 즉, 모던 웹개발로 들어오면서부터 웹프론트의 UI의 경우 기본적으로 기존의 페이지 단위나 템플릿 단위의 개발에서 컴포넌트 단위의 개발로 개념이 조금 변경 되었다. 기존에는 마크업이나 스타일링을 HTML과 CSS로 그리고 JS로 필요한 동적인 조작을 하는 정도 였다면 모던 웹개발에서는 JS를 기반으로 HTML(마크업)과 CSS(스타일링)등을 모두 관리한다. (예: JSX) 그러다보니 기존 HTML, CSS와 많은 부분 같으면서도 다른 특징을 가지는데 HTML,CSS와 JS로 된 DOM, CSSOM의 차이점에서 오는 부분이라고 볼 수 있다. HTML과 CSS, JS로 개발을 진행할때는 각 영역이 독립적이고 서로 침범하지 않는게 미덕이.. 2022. 7. 10.
[JS]스와이프 기능을 만들어보며. 바닐라 js로 다양한 기능을 간단히 만들어보는 js-util 프로젝트의 10번째 모듈로 간단한 스와이프 슬라이드를 만들어 보았다. https://github.com/yoonjonglyu/js-util GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util html, css, js, vanillajs, animation, module & util - GitHub - yoonjonglyu/js-util: html, css, js, vanillajs, animation, module & util github.com 회사에서 자주 쓰이는 프론트엔드 기능중 하나로 슬라이드 기능이 없는 스와이프 기능이 있다. 해당 기능을 구현.. 2022. 7. 2.

티스토리툴바