웹개발 (15) 썸네일형 리스트형 [javascript] structuredClone() 가이드: 깊은 복사부터 고급 활용까지 자바스크립트에서 객체를 복사하는 방법은 여러 가지가 있지만, 그중에서도 structuredClone()은 깊은 복사를 위한 강력한 도구입니다. 얕은 복사와 깊은 복사의 차이점부터, structuredClone()의 동작 방식, 장단점, 그리고 실제 개발에서 유용하게 사용할 수 있는 고급 활용법까지 자세히 알아보겠습니다. 1. 깊은 복사 vs 얕은 복사: 왜 structuredClone()이 필요할까요? 자바스크립트에서 객체를 복사할 때 얕은 복사와 깊은 복사라는 두 가지 방법이 있습니다.얕은 복사: 객체의 참조만 복사합니다. 즉, 복사된 객체와 원래 객체가 같은 메모리 주소를 가리키므로, 복사된 객체를 변경하면 원래 객체도 함께 변경됩니다. Object.assign()이나 스프레드 연산자(...)가 대표.. [motion] React에서 useScroll 훅 가이드 - 옵션과 사용법 정리 useSpring은 스프링 애니메이션을 구현하는 데 사용되는 훅입니다. 이 훅은 값을 변경할 때 자연스러운 스프링 물리 효과를 적용하여 부드러운 애니메이션을 제공합니다. useSpring의 사용 방법과 설정 옵션을 공식 문서를 바탕으로 정리해 보겠습니다.사용 방법1. 직접적인 값 설정useSpring을 초기 값과 함께 사용하여 스프링 애니메이션을 생성할 수 있습니다.예: const x = useSpring(0)와 같이 초기 값을 설정하고, x.set(100)으로 값을 변경하면 스프링 애니메이션으로 100으로 전환됩니다.즉시 값을 변경하고 싶다면 x.jump(100)을 사용할 수 있습니다.2. 다른 모션 값 추적다른 모션 값을 전달하여 그 값이 변경될 때마다 스프링 애니메이션을 적용할 수 있습니다.예: c.. [번역] CORS에 대한 가이드 https://www.devsecurely.com/blog/2024/06/cors-the-ultimate-guide?ref=dailydev CORS: the ultimate guide | DevsecurelyA simple and concrete guide on the world of CORS. It explain what it is, how it works, and how to set it up to protect your website.www.devsecurely.com Devsecurely님의 24.06.03일자 포스트입니다 순진한 고양이 사진을 보여주는 웹사이트를 방문한다고 상상해 보세요. 하지만 이 귀여운 고양이 사진 뒤에는 이 웹사이트의 초능력이 숨겨져 있습니다. 누군가 이 웹사이트를 방문하.. CSS에서 max-width 설정 시 반응형 중앙 정렬 문제 해결하기 (tailwind : max-w-screen-sm) 모바일 화면에서 max-w-screen-sm ( max-width: 640px ) 등의 고정 너비를 줄 경우, div가 부모 요소의 전체 너비(width: 100%)를 차지하게 되고,이로 인해 마치 가운데 정렬된 것처럼 보이는 시각적 효과가 생깁니다. 그로 인해서 해당 사이즈를 초과하는 테블릿이나 PC 화면에서는 컨텐츠가 가운데 정렬이 안된 것 처럼 보이는 현상이 생기게 됩니다.이때는 명시적인 중앙 정렬이 필요하게 됩니다. 해당 사이즈 이상의 화면에서는 별도로 미디어 쿼리를 주고 좌우 마진을 auto를 주면 좌우 정렬이 됩니다. @media (min-width: 768px) { margin: 0 auto ;}혹은 테일윈드에서는 md:mx-auto 추가 // ... existi.. [Next.js] Next.js 15의 새로운 Form 컴포넌트 가이드 기존 form 과의 주요 차이점 로딩 UI의 프리페칭 가능 ( 화면 미리 불러오기 )form 제출 시 부드럽게 페이지 전환 (깜빡임 없음) : 클라이언트 사이드 네비게이션preventDefault() 기본 수행쿼리 파라미터 를 name 속성에 맞춰 자동으로 붙여줌 기본 작성법import Form from 'next/form'function SearchForm() { return ( 검색 )} input name='query' 은 자동으로 쿼리 파라미터를 붙이는 기능입니다.url이 이렇게 됩니다 ......./search?query='인풋에서 쓴 내용' 컴포넌트의 동작은 액션 프로퍼티가 문자열인지 함수인지에 따라 달라집니다. 1. 액션이 문자열인 경우 은 .. [Next.js] redirect 함수, notFound 함수는 try/catch 밖에서 사용해야 합니다 1. Next.js의 redirect 함수는 특별한 타입의 에러(NEXT_REDIRECT)를 throw하는 방식으로 작동합니다. 2. try/catch 블록 안에서 redirect를 사용하면 redirect가 던진 에러가 catch 블록에서 잡혀버리고redirect 는 동작하지 않게 됩니다. 3. 클라이언트 컴포넌트의 경우, useRouter를 사용하는 것이 더 적절할 수 있음 4. 추가로 notFound() 함수도 아래와 마찬가지 패턴으로 처리해야 합니다. import { redirect } from 'next/navigation';// ... 생략 ... let isRedirect = false; try {// ... 생략 ... isRedirect = true; } catch (err.. [Next.js] Next.js의 환경 변수 파일 우선순위와 용도 1. 환경변수 로드 순서 : 우선순위 (높음 -> 낮음)시스템 환경 변수 .env.$(NODE_ENV).local .env.local (.env.test.local 제외) .env.$(NODE_ENV) .env $(NODE_ENV)는npm run devnpm run build / npm run startnpm test 에 따라 자동으로 할당되는 값이며 일반적으로 development, production, test 세가지 값을 가질 수 있습니다. 그래서 # 개발 환경에서 실행 시 우선순위1. .env.development.local2. .env.local3. .env.development4. .env# 프로덕션 환경에서 실행 시 우선순위1. .env.production.local2. .env.local3.. [TypeScript] TypeScript 초보자를 위한 tsconfig.json 가이드 타입스크립트를 초기화 하려면 글로벌 인스톨을 먼저 합니다.타입스크립트는 개발 단계에서만 사용하고 컴파일 시에는 자바스크립트로 변환되므로devDependencies 에 인스톨 해주면 됩니다. npm i -D typescript ts 파일을 js 파일로 컴파일 하기 위해선 터미널에 'tsc 파일명' 을 입력하면 js 파일로 변환이 됩니다.하지만 매번 코드를 수정, 작성하고 터미널에서는 tsc 명령어를 입력하기에는 너무 번거롭습니다. 그래서 tsconfig.json 을 생성하여 저장될 때마다 자동 컴파일이 되도록 설정을 하는 것입니다. 그 후 타입스크립트의 기본 설정을 위한 tsconfig.json 생성을 위해아래 명령어를 프로젝트 루트 터미널에 입력합니다.tsc --init 그럼 기본 설정에 관한 속성 및 .. 이전 1 2 다음
