FrontEnd 5

[structuredClone] Js 깊은 복사 쉽게 하기(Deep Copy)

얕은 복사 (Shallow Copy) 기본 데이터 타입의 경우 그 값이 그대로 복사한다.객체와 같은 참조 타입의 경우 메모리 주소만 복사한다. (원본데이터와 복사 데이터가 서로에게 영향을 미친다) ex) 얕은 복사 예시const obj = { a: 1, b: { c: 2 } };const shallowCopy1 = { ...obj };const shallowCopy2 = Object.assign({}, obj);console.log(shallowCopy1.b.c); // 2shallowCopy1.b.c = 3;console.log(obj.b.c); // 3 (원본 객체도 영향을 받음)shallowCopy2.b.c = 4;console.log(obj.b.c); // 4 (원본 객체도 영향을 받음)  ..

FrontEnd 2024.04.26

[SEO] 캐노니컬 태그 (Canonical tag) 특징 사용법

캐노니컬 태그 중복 콘텐츠의 문제를 해결하고 검색 엔진 최적화를 돕기 위해 사용되는 태그 캐노니컬 태그 특징 동적 페이지나 여러 URL로 접근 가능한 페이지에서 주된 페이지를 지정하여 중복 콘텐츠를 방지한다. 중복 콘텐츠를 방지하여 검색 엔진의 혼란을 줄여 페이지 랭킹을 향상할 수 있다. 캐노니컬 태그 주의사항 올바르지 않은 주소 사용으로 검색 엔진의 최적화를 방해할수 있다. 모든 페이지에 동일한 캐노니컬 태그 사용시 중요한 페이지에 대한 랭킹이 희석될 수 있다. 캐노니컬 태그 사용법

FrontEnd 2023.12.18

[Svelte] Svelte특징, Svelte Start Example

https://svelte.dev/ Svelte • Cybernetically enhanced web apps complete Built-in scoped styling, state management, motion primitives, form bindings and more — don't waste time trawling npm for the bare essentials. It's all here. svelte.dev Svelte JavaScript 프레임워크이다. 간결한 코드로 코드베이스로 개발 시간 단축과, 높은 가독성을 가진다. 컴파일 과정에서 코드 최적화 작업을 진행하여 런타임 성능을 향상 시켜 애플리케이션 반응속도 가 빠르다. (No virtual Dom) 변수나 상태변화를 명시적으로 추적..

FrontEnd 2023.09.24

[React] Sentry란? React+Sentry - Error Monitoring Example

https://sentry.io/welcome/ Application Performance Monitoring & Error Tracking Software Self-hosted and cloud-based application performance monitoring & error tracking that helps software teams see clearer, solve quicker, & learn continuously. sentry.io Sentry 오류 및 이슈 모니터링 및 오길 플랫폼 실시간으로 소프트웨어의 문제를 감지하고 해결할 수 있도록 도와주는 서비스 주요 기능 소프트웨어에서 발생하는 오류와 예외 사황을 모니터링하고 수집하여 실시간으로 알려준다. 사용자가 정의한 이벤트를 로깅하여 어..

FrontEnd 2023.07.30