분류 전체보기

[ CSS ] CSS 렌더링 흐름

# Reference aproid blog - CSS Transition 성능 최적화 by aproid https://aproid.github.io/2019/03/21/transition-optimize/ CSS Transition 성능 최적화 — Aproid CSS3의 강력한 기능중 하나인 Transition, 하지만 대부분의 개발자는 Transition 사용의 주의점을 알지 못하고 사용하여 모바일같은 성능이 좋지 못한 기기에서 부드러운 효과를 보지 못하는 경우가 자 aproid.github.io yceffort blog - CSS 성능 향상시키기 https://yceffort.kr/2021/03/improve-css-performance#css%EB%8A%94-%EC%96%B4%EB%96%BB%EA%..

[ JS ] 아토믹 컴포넌트 디자인 개발 패턴

# Reference Brunch - 아토믹(Atomic) 컴포넌트 디자인 개발 패턴; 대형 프로젝트를 위한 코드 재사용 최적화 컴포넌트 관리법 by 한상훈 https://brunch.co.kr/@skykamja24/580 아토믹(Atomic) 컴포넌트 디자인 개발 패턴 대형 프로젝트를 위한 코드 재사용 최적화 컴포넌트 관리법 | 대형 프로젝트에서는 최적화된 코드 재사용이 필수입니다. 이를 위해서 대두된 코드 디자인 패턴 중 하나는 바로 아토믹(Atomic) 디 brunch.co.kr Github - Do-IT-Page 컴포넌트 구성방식 by Coreight98 https://github.com/Coreight98/Do-IT-Page/ GitHub - Coreight98/Do-IT-Page: 아주대학교..

[ JS ] 문자열내의 특정 문자열 모두 대치하기

0. 개요 js로 프로젝트 진행 중 최근에 새롭게 업데이트된 문자열 메서드를 공부하고 적용하고자 이 글을 작성함 1. 학습목적 문자열에서 특정 문자열을 모두 대치하는 다양한 메서드 확인 실전에서 활용 가능한 다양한 문자열 치환법 학습 2. 학습내용 js에는 prototype을 통해 지정된 다양한 메서드들이 존재합니다. 이 메서드를 통해 어렵게 구성해야 할 코드들을 간단하게 만들 수 있습니다. 만약 문자열에서 특정 문자를 찾고자 한다면, 우린 단순히 indexOf 라는 메서드를 통해 문자 내 특정 문자의 위치를 쉽게 찾을 수 있습니다. "abcdefg".indexOf(c) // 2 하지만 indexOf 메서드가 없다면? function findIndexOfChar ( base_string, characte..

[ JS ] Babel & EsLint

0. 개요 js에 대한 깊은 이해를 통해 최적의 성능을 낼 수 있는 웹애플리케이션 개발을 위해 개발언어로서 JS의 기본을 공부하기로 했습니다. js의 기초에 이어 js개발에 도움을 주는 프레임워크인 Babel 과 EsLint를 공부했습니다. 1. 학습목적 Babel과 EsLint의 필요목적 Babel과 EsLint의 동작원리 및 이용 2. 학습내용 1) Babel Babel은 자바스크립트 컴파일러로, 최신 버전의 js로 작성된 코드들을 하위버전의 브라우저가 읽을 수 있도록 변환해주는 역할을 합니다. 2) Babel을 사용하는 이유 js는 여러 버전들이 존재하는데, 표준화된 버전부터 따져보자면 1997년에 출시한 ES1을 시작으로 현재 ES9까지 출시되어 있습니다. 특히 ES6 이후 개발자들의 입장에서 유..

[ JS ] Prototype

0. 개요 js에 대한 깊은 이해를 통해 최적의 성능을 낼 수 있는 웹애플리케이션 개발을 위해 개발언어로서 JS의 기본을 공부하기로 했습니다.그 시작으로 js의 근간이 되는 prototype에 대한 개념과 활용에 대하여 공부했습니다. 1. 학습목적 개발언어적 관점에서의 javascript 분석 깊은 이해를 통한 최적화된 js 프로그래밍 지향 2. 학습내용 1) Javascript 소개 Javascript는 가벼운, 인터프리터 혹은 jit (just-in-time) 컴파일 프로그래밍 언어로, 일급함수를 지원하는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적언어 입니다. - MDN Web Docs MDN의 소개와 같이 js는 여러가지 특징을 가진, 특히 이 게시물에서 알아볼 '프로토타입' 기반 언어입..