All

[gulp] include + sass + watch 초간단 셋팅하기

node -v v18.12.0 gulp -v CLI version: 2.3.0 Local version: 4.0.2 1. 터미널을 연다. 2. 경로는 작업할 폴더를 향하게 한다. 3. html, scss 환경이다. 🤗 gulp 환경 셋팅 //package.json 생성 배포할 때 반드시 필요한 파일이다. //별다른 값이 없으면 계속 엔터친다. npm init //gulp를 전역적으로 설치한다. 최초 1회만 하면 된다. npm i gulp -g //해당 폴더에서 gulp를 로컬 설치한다. npm i gulp --save-dev //또는 npm i gulp -D //gulp가 잘 설치되었는지 버전 확인한다. gulp -v 🤗 필요한 패키지 설치 //인클루드 설치 npm i gulp-file-include -..

[자바스크립트] filter

자바스크립트의 'filter()' 함수는 배열을 순회하면서 주어진 조건에 따라 요소를 걸러내는 메서드이다. 이 함수를 사용하면 배열을 필터링하여 새로운 배열을 만들 수 있다. Array. 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다. - mdn 👉 얕은 복사 생성? 인스턴스의 filter() 메서드는 배열에서 특정한 조건을 만족하는 요소들을 선택하여 그 요소들로 이루어진 새로운 배열을 반환한다. 여기서 얕은 복사(shallow copy)한 개념이 사용된다. 얕은 복사는 원본 배열의 요소들을 복사하여 새로운 배열을 생성하지만, 그 요소들은 참조만을 복사한다는 뜻이다. 이 말은, 만약..

CSR과 SSR이란? 둘 의 장단점 비교

CSR과 SSR은 웹 개발에서 사용되는 두 가지 다른 방법으로 웹 페이지를 렌더링하는 방식을 말한다. 이 두 방식은 각각 클라이언트 측 렌더링(Client-Side Rendering, CSR)과 서버 측 렌더링(Server-Side Rendering, SSR)로 알려져있다. 각각의 방식은 그 동작 방식과 장단점이 다르며 특정한 사용 사례와 요구 사항에 따라 선택된다. 클라이언트 측 렌더링(CSR) CSR은 주로 싱글 페이지 애플리케이션(SPA)에서 사용되는 접근 방식이다. CSR은 웹 애플리케이션을 브라우저에서 렌더링하는 방식이다. 주로 JavaScript와 프론트엔드 프레임워크 또는 라이브러리(예: React, Vue, Angular)를 사용하여 구현된다. 클라이언트 측에서 모든 렌더링을 처리한다. 즉..

[자바스크립트] 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..

[CSS] 뒤가 투명한 png 이미지 하얗게 변환

뒤가 투명한 png 이미지 하얀색으로 변환 -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); 뒤가 투명한 png 이미지 검정색으로 변환 -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);

[CS] 인터넷은 어떻게 작동하는가

인터넷은 네트워크(서로 연결된 컴퓨터 또는 기타 장치 그룹)의 네트워크이다. 인터넷 작동 방식: 개요 표준화된 프로토콜을 사용하여 장치와 컴퓨터 시스템을 함께 연결하여 작동한다. 이러한 프로토콜은 장치 간에 정보를 교환하는 방법을 정의하고 데이터가 안정적이고 안전하게 전송되도록 한다. 인터넷의 핵심은 상호 연결된 라우터의 글로벌 네트워크로, 서로 다른 장치와 시스템 간의 트래픽 전달을 담당한다. 인터넷을 통해 데이터를 보낼 때 장치에서 라우터로 전송되는 작은 패킷으로 나뉜다. 라우터는 패킷을 검사하고 대상을 향한 경로의 다음 라우터로 전달한다. 이 프로세스는 패킷이 최종 목적지에 도달할 때까지 계속된다. 패킷이 올바르게 송수신 되도록 하기 위해 인터넷은 인터넷 프로토콜(IP) 및 전송 제어 프로토콜(TC..