본문 바로가기

웹개발/front-end38

자바스크립트 참조타입과 원시타입 그리고 깊은 복사(DeepCopy) 자바스크립트에서 자료형을 원시타입과 참조타입으로 분류합니다. 참조 타입의 경우 메모리 주소에 저장이 되기 때문에 값을 다른 변수에 복사를 해도 복사 된 변수에서 값을 변경하면 두개의 변수 모두 값이 동일하게 바뀌게 됩니다. 이 부분을 설명하기 위해 참조타입과 원시타입을 알아보고 깊은복사에 대해 알아보고자 합니다. 원시타입 자료형 : Number, String, Boolean, null, undefined, Symbol 참조타입 자료형 : Object, Array, Function, Map, Set, RegExp 등 원시 타입 변수는 값을 직접 저장하지만, 참조 타입 변수는 값이 저장된 메모리 주소를 참조합니다. 이 차이로 인해 변수 할당과 메모리 사용 방식이 달라집니다. 원시 타입과 참조 타입 변수의 차.. 2024. 4. 22.
[CSS]@Keyframes @keyframes는 css 애니메이션을 정의하는 규칙입니다. 애니메이션의 각 단계별로 정의 하는데 시작, 중간, 끝 상태를 지정할 수 있습니다. @keyframes 사용 방법 1. @keyframes 규칙 정의하기 @keyframes 규칙을 사용하여 애니메이션의 각 단계를 정의합니다. 0%부터 100%까지의 퍼센트 값을 사용하여 각 단계의 스타일을 지정합니다. @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } 2. 애니메이션 적용하기 정의한 @keyframes 규칙을 animation 속성을 사용하여 적용합니다. animati.. 2024. 4. 21.
웹사이트의 애니메이션 이미지 삽입 오래전에는 플래시를 사용하여 움직이는 애니메이션을 사이트에 삽입하였으나 요즘에는 css나 svg를 통해 애니메이션을 제작하고 이미지로 삽입을 합니다. 애니메이션을 어떻게 표현하는지에 대해 알아보고자 합니다. CSS 애니메이션 사용하기 CSS의 @keyframes와 animation 속성을 사용하여 이미지나 요소에 애니메이션 효과를 줄 수 있습니다. 이를 통해 이미지의 크기, 위치, 회전 등 다양한 속성을 애니메이션으로 구현할 수 있습니다. SVG 애니메이션 사용하기 SVG 파일 자체에 애니메이션 효과를 넣을 수 있습니다. SVG 파일은 XML 기반이므로 태그를 사용하여 애니메이션을 정의할 수 있습니다. Lottie 애니메이션 사용하기 Lottie는 After Effects로 만든 애니메이션을 웹, 모바일.. 2024. 4. 21.
자바스크립트 엄격모드 자바스크립트의 엄격모드는 코드의 안정성과 성능을 향상시키기 위해 도입된 기능입니다. 이 모드를 사용하면 자바스크립트 엔진이 더 엄격한 파싱과 실행 규칙을 적용하여, 일반적으로 무시되거나 묵인되는 일부 실수들을 에러로 처리합니다. 이를 통해 개발자는 코드의 잠재적인 문제점을 더 쉽게 발견하고 수정할 수 있게 됩니다. 엄격모드의 도입 배경과 목적 1. 도입 배경: ECMAScript 5에서 처음 소개되었으며, 기존의 "느슨한 모드(sloppy mode)"에 대한 대안으로 제시됩니다. 엄격모드는 자바스크립트의 안전성을 높이고, 최적화 작업을 용이하게 하며, 미래의 ECMAScript 버전과의 호환성을 준비하기 위해 도입되었습니다. 2. 목적: 실수를 에러로 변환하여 개발자가 즉시 수정할 수 있게 하고, 변수 .. 2024. 4. 6.

티스토리툴바