전체 글

[자바스크립트] 원시값과 참조값 이해하기

왜 원시값과 참조값은 볼때마다 초면일까?... 이해할때까지 보고 또 보고 정리할거다. 원시값(Primitive Values) 개념 원시값은 하나의 단순한 값으로, 텍스트, 숫자, 불리언 등이 있다. 이 값들은 하나의 상자에 넣어서 보관할 수 있다. 특징 불변성: 한 번 상자에 넣은 값은 바꿀 수 없다. 새로운 값을 만들려면 새로운 상자를 만들어야 한다. 변수 간 복사: 값을 할당할 때 값 자체가 복사된다. 종류 문자열(String) 비유: 한 개의 단어가 적힌 종이 특징: 종이에 다른 단어를 적으면 새로운 종이가 필요하며, 한번 적힌 단어를 수정할 수 없다. 숫자(Number) 비유: 숫자가 적힌 계산기 디스플레이 특징: 계산기에 다른 숫자를 입력하면 현재 디스플레이에 있는 숫자는 그대로 남아 있고, 새..

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