본문 바로가기

반응형

Develop Log/JavaScript

JavaScript - Lazy Loading 웹 페이지를 이용하는 사용자는 웹 사이트의 로딩 시간과 성능에 대해서 높은 기대치를 가지고 있다. 그렇기 때문에 로딩속도가 짧고 성능이 높은 사이트의 경우에는 많은 이용자가 방문을 하게 되지만 로딩 속도가 느리거나 컨텐츠의 확인에 시간이 걸리는 사이트의 경우 이용자의 이탈률과 불편함이 높아지게 된다. 이러한 문제를 해결하고 전반적인 사용자의 경험을 개선하기 위한 방법 중 하나로 Lazy Loading을 사용한다. Lazy Loading이란? Lazy Loading이란 웹 페이지의 성능을 최적화하기 위한 기법 중 하나로, 페이지의 로딩 속도를 빠르게 만들기 위해 필요한 리소스(예: 이미지, 스크립트, 동영상 등)를 초기 페이지 로딩 시에 모두 로드하는 것이 아니라 스크롤을 통해 해당 이미지가 화면에 나타나.. 더보기
코드를 더 이쁘게 - Prettier Prettier Prettier는 코드 포맷터(Code Formatter)로써, 일관된 코딩 스타일을 유지하는 데 도움을 준다. Prettier는 코드를 읽고, 이를 내부 표현으로 변환한 다음, 미리 정의된 규칙에 따라 코드를 다시 출력한다. 이 과정에서 모든 원래의 스타일링이 제거되고, Prettier에서 정의한 규칙에 따라 일관된 스타일이 적용된다. Prettier 기능 코드 포맷팅: Prettier는 코드를 분석하여 추상 구문 트리 (Abstract Syntax Tree, AST)를 생성하고, 그 트리를 사용하여 코드를 재출력 한다. 이 과정에서 Prettier는 코드를 새롭게 포맷팅 하며, 일관된 스타일을 적용한다. 통합: Prettier는 통합 개발 환경 (IDE) 및 코드 편집기, 버전 관리 .. 더보기
JavaScript 클로저(Closure)에 대해서 알아보자! 클로저(Closure) 클로저(Closure)란 자바스크립트와 같은 일부 프로그래밍 언어에서 사용되는 중요한 개념으로 비동기 프로그래밍, 함수 팩토리, 모듈 등 다양한 고급 패턴에서 활용되고 있으며 이런 특징으로 인해 클로저는 코드의 유연성과 재사용성을 높이는 데 도움이 된다. 함수와 그 함수가 선언된 렉시컬 환경의 조합이라고 정의하고 있으며, 이 렉시컬 환경은 클로저가 생성된 위치의 스코프에 있는 변수를 포함된다. 쉽게 말한다면 클로저는 자신이 생성된 렉시컬 환경을 기억하는 함수를 말한다. 렉시컬 환경? 렉시컬 환경(Lexical Environment)은 코드를 실행하는 동안 엔진이 변수나 함수 선언, 외부 환경에 대한 정보를 관리하는 내부 데이터 구조를 말한다. "렉시컬"이라는 단어는 문법 구조와 관.. 더보기
고차 함수(Higher-Order Function)를 알아보자! 고차함수 Higher-Order Function(HOF) 고차함수(HOF)란 함수형 프로그래밍에서 주로 사용되는 아주 중요한 개념으로, 다른 함수를 인자로 받거나, 함수를 결과로 반환하는 함수를 정의한다. 고차함수의 역할 콜백 함수 사용: 고차 함수는 콜백 함수를 인자로 받아 특정 작업을 수행하게 된다. 이는 비동기 작업이나 이벤트 처리, 배열 메서드 등에 활용되며, 자주 사용하는 예시로써 자바스크립트의 배열 메서드인 map(), filter(), reduce()가 있으며 이 메서드 모두 고차 함수이다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => { // map()에 들어가는 인자가 변수가 아닌 함수로 구성되어있다. .. 더보기
JavaScript ES6 (ECMAScript 2015 ) ES6 (ECMAScript 2015 ) ECMAScript 6 (ES6), 또는 ECMAScript 2015,는 JavaScript에 많은 새로운 기능과 개선사항을 도입한 아주 중요한 버전이라고 할 수 있다. 이 새로운 기능들은 JavaScript를 더 강력하고 유연한 언어로 만들어 주었으며, 개발자들이 더 효과적으로 코드를 작성하고 이해하도록 도와주게 되었다. ES6(ECMAScript 2015 )가 등장하기 전의 JavaScript는 간단한 스크립팅 언어로 시작되었다. 웹 페이지에 간단한 상호작용을 추가하거나 브라우저 동작을 제어하는 데에 주로 사용되었으며, 당시에는 모듈화, 클래스, 화살표 함수 등과 같은 고급 언어 기능이 없었기 때문에, JavaScript로 복잡한 애플리케이션을 만드는 것은 어.. 더보기
폴리필 (polyfill)이 뭘까 폴리필 - Polyfill 폴리필(polyfill)이란? 폴리필은 웹 개발에서 사용하는 용어로, 브라우저가 원래 지원하지 않는 기능을 스크립트를 통해 구현하여 해당 기능을 사용할 수 있도록 만드는 기술을 말한다. 웹 표준이나 ECMAScript(자바스크립트 표준) 같은 표준은 시간이 지남에 따라 새로운 기능이 추가되고 기존의 기능이 개선된다. 하지만 모든 브라우저가 새로운 표준을 바로바로 지원하지 않으며 추후 지원이 가능한 시점을 예상하기도 어렵다. 또한 이런 브라우저의 지원 여부와 상관없이 사용자가 오래된 브라우저를 사용하고 있다면 새롭게 지원하는 기능을 적용하여 사용할 수 없게 된다. 이런 경우, 웹 개발자는 폴리필을 사용하여 해당 기능을 이전 버전의 브라우저에서도 사용할 수 있게 할 수 있다. 가장.. 더보기
JavaScript - 논리연산자 논리 연산자 논리 연산자는 프로그래밍 언어 초창기부터 존재했다. 컴퓨터가 처리하는 데이터는 이진 형태(0과 1)이기 때문에 이런 이진 논리를 표현하기 위한 도구가 필요했고 이를 위해 논리 연산자가 도입되었다. JavaScript도 이런 이유와 같으며 최초의 버전의 JavaScript 부터 지원하고 있다. 논리 연산자의 특징 복잡한 조건식 표현: 논리 연산자는 여러 조건을 결합하거나 반전시키는 등의 복잡한 조건식을 표현할 수 있게 해준다. 예를 들어, if (age >= 18 && country === 'Korea')와 같이 표현할 수 있으며 if문에서 age가 18 이상이고 country가 'Korea'일 경우를 찾는 문장을 표현할 수 있게된다. 단축 평가(short-circuit evaluation):.. 더보기
javascript - spread, rest 문법 알아보기 JavaScript에서 spread, rest 문법은 ES6(ES2015)에서 처음 소개 된 문법이고 코드의 간결성과 가독성을 향상시키기 위해 탄생한 문법이다. 기존 JavaScript에서는 배열이나 객체를 복사하거나 병합하려면 for문이나 concat, slice등의 메서드를 사용해야 했다. 이런 방식은 번거롭고 에러를 발생시키기는 경우가 많았으며, 함수에 배열의 요소를 개별 인자로 전달하려면 apply 메서드를 사용해야 했는데 이런 메서드를 사용한 복사, 병합 등의 작업은 프로젝트의 규모가 커져감에 따라 코드의 복잡도가 증가하게 되고 가독성도 저하되는 경우를 발생시켰다. 이러한 복잡하고 가독성이 저하되는 부분을 해소하기 위해 spread, rest문법이 추가되어 배열이나 객체를 쉽게 복사하거나 병합할.. 더보기

반응형