전체 글

[자바스크립트] offsetX, screenX, clientX, pageX, layerX 각각의 차이

자바스크립트 MouseEvent 실행 시 (e)의 console을 찍어보면 다양한 속성들이 있는데, 이 중 X들을 정리해 보겠다. offsetX 이벤트가 발생한 요소(Element)를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다. 이 속성은 주로 이벤트가 발생한 요소 내부에서 상대적인 위치를 파악하는데 사용된다. 요소의 좌측 가장자리를 기준으로 하며, 오른쪽으로 갈수록 양수의 값을 가지고 왼쪽으로 갈수록 음수의 값을 가진다. 요소의 경계를 넘어가면 음수나 요소의 크기보다 큰 양수 값을 가질 수 있다. 스크롤이 발생하면, 요소의 위치가 변경되기 때문에 스크롤에 영향을 받는다. 즉, 스크롤이 발생하면 요소 내부에서의 상대적인 위치가 변하게 된다. 스크롤 up : offsetX 값 증가 / 스크롤 do..

[nunjucks] config.js의 변수를 macro에서 렌더링 되게하기

nunjucksRender가 Gulp의 스트림에서 각 파일을 처리할 때마다 data 옵션으로 전달된 객체를 템플릿의 컨텍스트로 사용하게 된다. 즉, 각 템플릿에서는 data 옵션에 정의된 변수를 직접 참조할 수 있어야 한다. 그러나 여기서 문제가 발생하는 부분은 Nunjucks의 macro가 별도의 scope를 가지고 있어서 macro 밖에서 정의된 변수를 직접 참조하지 못하는 것이다. 이를 해결하기 위해 변수를 macro에 인자로 전달해야 한다. //config.js const config = { local_name: "이름", }; module.exports = config; //gulpfile.js const config = require("./config.js"); function nunjucks..

[css] 변수를 음수로 지정하고 싶을 때

CSS 변수를 사용하여 음수 값을 불러오는 방법은 변수에 -100px를 저장하는 대신 100px를 저장한 다음, 해당 변수를 사용할 때 음수 부호(-)를 붙여서 사용하는 것이다. 예를 들어, --headerHeight 변수를 사용하여 음수 값을 적용하려면 다음과 같이 작성할 수 있다. :root { --headerHeight: 100px; } .selector { height: calc(var(--headerHeight) * -1); } 위의 예제에서는 calc() 함수를 사용하여 변수에 -1을 곱한 값을 적용한다. 이렇게 하면 --headerHeight 변수에 저장된 값인 100px에 -1을 곱한 결과로 -100px가 적용된다. 결과적으로 .selector 요소의 높이(height)에 -100px가 적..

[리액트] Hooks 알아보기

useState 상태(state) 관리를 위한 Hook. 함수형 컴포넌트에서 상태 변수와 해당 상태를 업데이트하는 함수를 제공한다. 컴포넌트의 상태를 변경하고, 변경된 상태를 화면에 렌더링할 수 있다. import React, { useState } from "react"; const Counter = () => { //count: 변수, setCount: 상태 업데이트 하는 함수 //=> 배열 비구조화 할당을 통해 각각의 값을 추출해서 사용 const [count, setCount] = useState(0); const increment = () => { setCount(counst + 1); }; return ( Count: {count} Increment ); }; useEffect 생명주기(lif..

프로그래머를 위한 ChatGPT 활용

코드 작성을 위한 프롬프트 [입력]을 받고 [출력]을 반환하는 함수를 작성하세요. [특정 조건]이 충족되면 [무언가를] 하는 스크립트를 작성하세요. [프로그램이 해야 할 일] 프로그램을 작성하십시오. [기능 설명] [프로그래밍 언어] 스크립트를 개발합니다. [프로그래밍 언어]로 [기능 설명] 기능을 작성합니다. [입력 소스]를 읽고 [원하는 출력]을 [프로그래밍 언어]로 출력하는 프로그램을 생성합니다. [프로그래밍 언어]에서 [문제 설명]을 해결하는 해결책을 제시하고 그것이 어떻게 작동하는지 설명하십시오. 저는 여러분이 Python 개발자 역할을 하여 [데이터 유형]을 입력으로 사용하고 [출력]을 반환하는 함수를 작성하기를 바랍니다. 웹 개발자로서 [color] 배경이 있는 HTML div의 [numbe..