전체 글

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..