🔨 Development/Frontend & js

[ CSS ] CSS 모바일 Transition 개선

# 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 ] 문자열내의 특정 문자열 모두 대치하기

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

[ JS ] 1. 컴파일

js를 공부하며 느낀 엔진의 컴파일 과정을 알아야 하는 이유 (작성자 피셜): 1. 작성시점상 Chrome V8이 세계적으로 가장 많이 사용되는 js엔진이며, V8 뿐 아니라 다른 엔진들도 해당 방식을 사용합니다. 2. 엔진의 내부 프로세스를 알아보며 this나 js의 언어적 특성을 이해하는 것에 도움이 될 수 있습니다. 0. ???: js는 컴파일 필요없는 언어인데요? 글을 시작하기전, 원론적 개념에 근간하여 말을 하자면 js는 인터프리터 언어라 컴파일이 필요 없습니다..만 속도 향상 등의 목적을 위해 js엔진 내에서 일부 컴파일 과정이 있는 경우가 있습니다. 특히 최근 다수 사용되는 Chrome v8엔진이 그 예시입니다. 따라서 js는 선택적으로 컴파일하는 인터프리터 언어입니다. Chrome V8엔진..

[ vanilla js ] Web Worker API (개념편)

*Reference: https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API Web Workers API - Web API | MDN 웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 developer.mozilla.org Web Worker API 웹페이지에서 실행중인 주 스레드와 별개의 백그라운드 스레드에서 스크립트를 실행할 수 있는 기술 별개의 스레드에서 처리가 가능하므로 무거운 작업으로 인한 이벤트 리스닝 지연 등을 방지할 수 있음. *주의 1) window의 일부 메소드 사용 불가 (https:/..