One more thinking

위와 같이 코드를 입력했을 때 아래와 같은 에러 발생 In HTML, ‹div> cannot be a descendant of ‹p>.This will cause a hydration error. Q1. 에러의 원인이 뭐야?A1. 코드를 살펴보니 dangerouslySetInnerHTML을 사용하는 부분이  태그 내부에서 를 렌더링하려고 시도하고 있습니다. HTML 명세에 따르면  태그는 블록 레벨 요소인 를 자식으로 가질 수 없습니다.이 문제를 해결하기 위한 가장 간단한 방법은  태그를 로 변경하는 것입니다. 이제 hydration 에러가 해결될 것입니다. 변경사항을 설명하자면:1. 컴포넌트를 일반 로 변경했습니다.2. Material-UI의 sx prop 대신 일반 style 객체를 사용하여 mar..

기술이 된 상상 2025. 3. 13. 19:54

window.history브라우저의 세션 기록 스택을 조작할 수 있는 API를 제공합니다. 이를 통해 사용자는 브라우저의 뒤로, 앞으로 가기 기능을 제어하고, 현재 URL을 변경하지 않고도 히스토리를 조작할 수 있습니다.주요 메서드 및 속성history.length:현재 세션의 히스토리 스택에 있는 항목의 수를 반환합니다.console.log(history.length);history.back():히스토리 스택에서 이전 페이지로 이동합니다.history.back();history.forward():히스토리 스택에서 다음 페이지로 이동합니다.history.forward();history.go(n):히스토리 스택에서 상대적인 위치로 이동합니다. n이 음수이면 뒤로, 양수이면 앞으로 이동합니다.history...

기술이 된 상상/TIL 2024. 8. 8. 17:37

Viewport는 사용자가 웹 페이지를 볼 수 있는 화면 영역을 의미합니다. 이는 브라우저 창 또는 화면의 가시 영역을 나타내며, 특히 모바일 장치에서 중요한 개념입니다. 다양한 디바이스와 화면 크기가 있는 환경에서 웹 페이지가 어떻게 보일지 제어하는 데 사용됩니다.주요 속성width: viewport의 너비를 설정합니다. 값으로 device-width를 사용하면 디바이스의 너비에 맞춰집니다.height: viewport의 높이를 설정합니다. 일반적으로는 잘 사용되지 않습니다.initial-scale: 초기 확대/축소 비율을 설정합니다. 기본값은 1.0입니다.minimum-scale: 사용자가 페이지를 축소할 수 있는 최소 비율을 설정합니다.maximum-scale: 사용자가 페이지를 확대할 수 있는 최..

기술이 된 상상/TIL 2024. 8. 6. 12:08

ArrayBufferJavaScript에서 바이너리 데이터(원시 이진 데이터)를 다루기 위해 사용되는 객체이는 고정 길이의 원시 이진 데이터 버퍼를 나타내며웹 애플리케이션에서 파일 읽기, 네트워크 통신, 그래픽스 등 다양한 용도로 사용될 수 있습니다.기본적으로 ArrayBuffer는 크기만 정해진 연속적인 메모리 블록이를 직접적으로 조작하기 위해 TypedArray와 같은 뷰(View) 객체와 함께 사용됩니다 주요 특징고정 길이: 생성 시 크기를 지정하며, 한 번 생성된 ArrayBuffer의 크기는 변경할 수 없습니다.바이트 단위 접근: 데이터는 바이트 단위로 저장되며, 다양한 형식으로 해석될 수 있습니다.다양한 뷰: ArrayBuffer를 여러 형식으로 해석할 수 있도록 다양한 TypedArray 뷰..

기술이 된 상상/TIL 2024. 8. 5. 11:24

Next.js 문서 읽기 Building Your Application by Using App Router Next.js는 Full stack application을 유연하게 만들기 위해 빌딩 블록을 제공합니다. 이 가이드는 각각의 특징을 어떻게 사용하고, 애플리케이션의 동작을 어떻게 커스터마이징하는지 설명합니다. 내용은 기초부터 심화까지 연속적으로 구성되어져 있어서, 애플리케이션을 만들 때 단계별로 따라갈 수 있습니다. 하지만 경우에 따라서 순서에 상관없이 읽거나 일부를 스킵하셔도 됩니다. Next.js를 처음 사용한다면, Routing, Rendering, Data Fetching, Styling 섹션으로 시작하기를 추천합니다. 이 부분들은 처음 시작할 때 도움을 주도록 Next.js와 웹 컨셉의 기..

기술이 된 상상 2023. 11. 16. 07:22

Next.js 문서 읽기 Project Structure Next.js 프로젝트의 폴더 구조 개요를 설명합니다. app과 pages 디렉토리에서 top-level의 파일, 폴더, 설정 파일, 라우팅 컨벤션을 설명한다. Top-level folders app : App Router pages : Pages Router public : 정적 자원 src : 애플리케이션 소스 폴더(option) Top-level files next.config.js : Next.js 설정 파일 package.json : 프로젝트 의존성과 스크립트 instrumentation.ts : 원격 분석 및 계측을 위한 파일 middleware.ts : 요청 미들웨어 .env : 환경 변수 .env.local : 로컬 환경 변수 .en..

기술이 된 상상 2023. 11. 15. 07:39

Next.js 문서 읽기 Installation 시스템 요구사항 Node.js 18.17 이상 macOS, Windows(including WSL), Linux 자동 설치 create-next-app 을 통해 자동 설치 Good to know 기본으로 TypeScript, ESLint, Tailwind CSS 구성과 함께 제공 다른 파일들과 코드가 분리되도록 src 디렉토리를 구분하여 설정(option) 수동 설치 수동 설치 패키지 next@latest react@latest react-dom@latest package.json의 개발 단계별 스크립트 dev: development 모드 실행 build: production 모드를 사용한 빌드 start: production 서버 시작 lint: 내장 E..

기술이 된 상상 2023. 11. 13. 12:49

Next.js 문서 읽기 정의 Next.js는 풀스택 웹 애플리케이션을 만드는 리액트 프레임워크이다. 주요특징 Routing 파일시스템 기반 라우팅 중첩 라우팅 가능 로딩 상태, 에러 핸들링 Rendering Client-side와 Server-side 렌더링 가능 Next.js 서버에서 정적 혹은 동적 렌더링 가능 Data Fetching 서버 컴포넌트에서 동기/비동기 데이터 fetching 가능 요청 메모화, 데이터 캐싱, 재검증을 위한 확장된 fetch API 사용 Styling CSS 모듈, Tailwind CSS, CSS-in-JS을 포함한 스타일링 함수 지원 Optimizations 이미지, 글꼴, 스크립트 최적화 TypeScript 타입 체크, 효율적인 컴파일, 커스텀 플러그인 지원 App ..

기술이 된 상상 2023. 11. 12. 06:51