본문 바로가기

FrontEnd71

패럴렉스 스크롤링이 웹 성능에 미치는 영향: 모바일 사용자 경험 소개 패럴렉스 스크롤링은 웹 디자인에서 많이 사용되는 기술 중 하나입니다. 이 기술은 사용자가 웹 페이지를 스크롤할 때 배경과 전경이 다른 속도로 움직이는 효과를 제공하여 시각적인 흥미를 끌기 위해 사용됩니다. 하지만 패럴렉스 스크롤링은 웹 성능에 영향을 미칠 수 있으며, 특히 모바일 사용자 경험에 미치는 영향은 더욱 중요합니다. 본문 1. 패럴렉스 스크롤링의 작동 원리 패럴렉스 스크롤링은 웹 페이지의 요소들이 다른 속도로 움직이는 효과를 제공하기 위해 CSS와 JavaScript를 사용합니다. 일반적으로 배경 이미지는 느리게 움직이고, 전경 요소는 빠르게 움직이도록 설정됩니다. 이를 통해 사용자는 스크롤을 할 때마다 시각적인 변화를 경험할 수 있습니다. 2. 패럴렉스 스크롤링의 웹 성능에 미치는 영향 .. 2023. 6. 22.
예시코드와 함께 알아보는 타입스크립트 디자인패턴: 옵저버 패턴 예시코드와 함께 알아보는 타입스크립트 디자인패턴: 옵저버 패턴 디자인 패턴은 소프트웨어 개발에서 자주 사용되는 문제 해결 방법을 정형화한 것입니다. 이러한 패턴은 코드의 재사용성, 유지보수성, 확장성을 향상시키는 데 도움이 됩니다. 타입스크립트는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 개발자가 코드를 더욱 안정적으로 작성할 수 있게 해줍니다. 이번 블로그 포스트에서는 타입스크립트에서 자주 사용되는 디자인 패턴 중 하나인 '옵저버 패턴'에 대해 알아보겠습니다. 1. 옵저버 패턴이란? 옵저버 패턴은 객체 간의 일대다 의존성을 정의하는 디자인 패턴입니다. 이 패턴은 한 객체의 상태가 변경되면, 그 객체에 의존하는 다른 객체들에게 자동으로 알림을 보내고 상태 변화에 대한 처리를 할 수 있도록 합니다.. 2023. 6. 22.
예시코드와 함께 알아보는 타입스크립트 디자인패턴: 싱글톤 패턴 소개 디자인 패턴은 소프트웨어 개발에서 자주 사용되는 문제 해결 방법을 정형화한 것입니다. 이러한 패턴은 코드의 재사용성, 유지보수성, 가독성을 향상시키는 데 도움이 됩니다. 이번 블로그 포스트에서는 타입스크립트에서 자주 사용되는 디자인 패턴 중 하나인 싱글톤 패턴에 대해 알아보겠습니다. 싱글톤 패턴은 오직 하나의 인스턴스만을 생성하고, 이를 전역에서 접근할 수 있도록 하는 패턴입니다. 본문 1. 싱글톤 패턴이란? 싱글톤 패턴은 클래스의 인스턴스를 하나만 생성하고, 이를 전역에서 접근할 수 있도록 하는 디자인 패턴입니다. 이 패턴은 여러 곳에서 동일한 인스턴스에 접근해야 하는 경우 유용합니다. 예를 들어, 로그 기록을 관리하는 클래스나 설정 정보를 저장하는 클래스 등이 싱글톤 패턴으로 구현될 수 있습니다.. 2023. 6. 22.
예시코드와 함께 알아보는 타입스크립트 디자인패턴: 팩토리 패턴 소개 디자인 패턴은 소프트웨어 개발에서 자주 발생하는 문제를 해결하기 위한 일련의 해결책입니다. 이러한 패턴은 개발자들 사이에서 공통된 언어와 구조를 제공하여 코드의 가독성과 유지보수성을 향상시킵니다. 타입스크립트는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 개발자들이 코드를 더욱 안정적으로 작성할 수 있게 도와줍니다. 이번 블로그 포스트에서는 타입스크립트에서 자주 사용되는 디자인 패턴 중 하나인 팩토리 패턴에 대해 알아보겠습니다. 본문 1. 팩토리 패턴이란? 팩토리 패턴은 객체를 생성하는 인터페이스를 정의하고, 이를 서브 클래스가 결정하게 하는 패턴입니다. 이 패턴은 객체의 생성과정을 캡슐화하여 클라이언트 코드와의 결합도를 낮추고, 유연성과 확장성을 높이는데 도움을 줍니다. 팩토리 패턴은 다음.. 2023. 6. 22.
IIFE(즉시 실행 함수 표현식) 즉시실행 함수 표현식 일반적으로 함수는 선언 후에 실행하도록 되어있다. function a() { console.log("a"); } a(); 즉시실행 함수 표현식은 함수의 선언과 동시에 실행하도록 하는 표현식이다. (function a() { alert("a"); })(); 이 표현식의 등장은 이전 포스트에서 다룬 'var'로 선언한 변수와 관련이 있다. 'var'는 블록 스코프가 아니기 때문에, var를 블록 스코프를 가질 수 있도록 방법을 고안하다가 IIFE가 등장했다. 2021/01/11 - [FrontEnd/Java Script] - 호이스팅이란? 즉시실행함수는 선언할때 괄호로 감싸서 (function a(){...})와 같은 형태로 만든다. 자바스크립트에서는 function 이라는 키워드를 만.. 2021. 1. 11.
호이스팅이란? 구형 자바스크립트 호이스팅은 구형 자바스크립트에서 발생하는 것이며, 현재 이런 코드가 있다면 개선해야 합니다. 호이스팅의 사전적 의미는 다음과 같다. hoisting 명사 1.끌어 올리기; 들어올려 나르기. 자바스크립트에서 발생하는 호이스팅은 변수를 끌어올린다 라고 생각하고 아래 내용을 보시면 도움이 되겠다. 변수 선언 호이스팅이라는 개념을 알기 전 변수 선언에 대한 개념이 필요하다. ECMA6에 들어오면서 JavaScript에는 'let'과 'const'라는 변수선언 예약어가 추가되었다. 이는 var가 가지고 있는 문제를 해결하기 위해서 만들어진 것이라고 한다. var 변수선언의 가장 큰 특징은, 블록 스코프가 없다는 것이다. 블록 스코프가 없다는 것은, 변수의 영향범위를 산정하기 어렵다는 의미이다. .. 2021. 1. 11.
this this : 메서드 내부에서 객체에 접근할 수 있는 지시자? 예약어? let company = { name: "nhn", where: "pangyo", companyName() { alert(this.name); // this 는 현재 메소드의 객체인 company를 나타낸다. } }; company.companyName(); 동일한 코드는 다음과 같이 작성할 수 있다. let company = { name: "nhn", where: "pangyo", companyName() { alert(company.name); return company.name; // this. 대신 user 사용 } }; company.companyName(); 다만 후자의 경우, 원하지 않는 형태의 동작을 할 수도 있다. 예를.. 2020. 12. 31.
Web Pack이란 무엇인가 단순 정의 WebPack이란 모듈을 번들링하는 도구다. WebPack 공식 홈페이지의 메인화면에서 돌아가는 이미지를 보면 보다 쉽게 이해가 될 것이다. 대충봐도 복잡한 의존성 모듈들을 묶어서 정적 요소로 합쳐주는 것이다. 다음은 공식 홈체이지에 잇는 예제이다. src/index.js import bar from './bar'; bar(); src/bar.js export default function bar() { // } webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle... 2020. 11. 6.
Stacking Context? Stacking Order? HTML에서 각 요소 레이어가 화면에 쌓이는 순서와 쌓이는 맥락(?)을 의미하는데, 아래 예제가 가장 유명한 듯 하다 Red Green Blue 주석처리한 opacity를 활성화하면 이렇게 된다. stacking order인지 context떄문인지는 모르겠다. 다른 예제로 z-index를 활용한 예제가 있는데, 보다 명확하게 이해할 수 있을 것 같다. (적어도 z-index를 활용한 부분에 대해서만큼은) Division Element #1 position: relative; z-index: 5; Division Element #2 position: relative; z-index: 2; Division Element #4 position: relative; z-index: 6; Division Eleme.. 2020. 11. 5.
반응형

티스토리툴바