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

대상 독자플러터를 처음 접하는 모든 분들에게 추천합니다! - 플러터와 다트(언어)에 대해 전혀 모르지만 앱을 개발해보고 싶은 분!(저 포함)- 호기심 또는 유행을 따라 플러터와 다트를 찍먹해보고 싶은 분!- 앱 개발은 해야하는데 시간과 인력이 촉박하여 빠르게 개발을 해야하는 분!  특징책의 제목에서 매우 직관적으로 알 수 있듯이 이 책은 플러터를 요리할 수 있도록 해주는 책입니다.바로 플러터 조리법이라고 할 수 있습니다. 그리고 그 조리법은 매우 꼼꼼하고 조리있게 구성되어 있습니다. 첫번째는 무엇보다 개념을 잘 설명하고 있습니다.요리사는 재료에 대해 그리고 요리도구에 대해 매우 잘 압니다.그런 것처럼 플러터 그리고 다트에 대한 개념으로 시작해 개념에 대해 그림과 비유를 통해 이해하기 쉽게 풀어냅니다.마치..

책 보기 2024. 7. 19. 01:51

온보딩 프로세스에 대해 공부할 요량으로 읽고 싶었던 책이다.하지만 책을 읽을수록 조직에 대해 이해할 수 있는 매우 유용한 책이다.조직의 비전, 미션, 구조와 같은 것들을 이해하는 것이 직원으로써 어떤 의미가 있을까 조직의 비전, 미션, 구조는 어떤 의미가 있을까?의미를 알게 되면 이 조직의 수준을 알게 된다. 직원으로써 회사라는 조직을 이해하면 조직의 수준을 알 수 있게 된다.온보딩 프로세스를 통해서도 알수 있다. 온보딩 프로세스가 매우 잘 구성되어져 있다면 그만큼 조직이 짜임새 있고 수준이 높은 조직이라는 이야기다.혹은 아직 구성이 미비할 순 있지만 필요는 느끼는지도 매우 중요한 사항이 될 것이다.이런 내용들을 알게 되면 조직을 파악할 수 있는 능력이 생길 것이다.  이 책을 읽으면서 책의 주요 내용을..

책 보기 2024. 4. 29. 06:15

인사이트를 얻는다는 것은 어떤 것일까? 세상에는 미래를 예측해서 살아가는 사람들이 있다. 이러한 사람들이 세상에서 큰 영향력을 끼치는 사람들이다. 그리고 그 영향력을 통해 미래를 주도하며 살아간다. 그렇다면 그 처음인 미래를 예측하는 것은 어떻게 할 수 있을까? 우리가 책을 읽고 지식을 쌓는 이유는 미래를 읽는 식견을 넓히고 싶은 것도 하나의 이유일 것이다. 이 책은 저자의 식견을 통해 미래를 보는 책이다. 우리가 사는 현재의 기술이 얼마나 발전되었고 그 가치가 어느 정도일지 알려준다. 이 책을 읽는 독자는 그 정보를 통해 미래가 어떻게 변할지 예상해볼 수 있다. 나름 이러한 기술에 관심이 있었지만 초자동화라는 용어의 개념과 범위를 제대로 알지 못하고 있었다. 새로운 정보를 접하게 되었다. AI를 통한 ..

책 보기 2024. 4. 21. 23:46

스타트업을 창업하는 대표의 경험을 녹여낸 도서입니다. 스타트업 대표의 시각에서 노하우를 전달합니다. 스타트업 창업을 준비하는 사람에게 사전에 알면 매우 유용한 내용들로 가득합니다. 이전에도 이러한 노하우를 정리한 내용은 구하기 어려운 내용이었습니다. 원래 노하우는 구전으로 전달되기 때문에 지인을 통하지 않는다면 쉽게 알수 없는 지식입니다. 이 책에서는 스타트업 대표로 경험한 내용들을 녹여냈습니다. 특히 분야 별로 구분하여 정리한 체크리스트는 꼭 챙겨놓아야 할 정보입니다.구조화된 정보는 특히 중요한 자산이 될 것입니다. 만약 스타트업을 창업해 이제 업계에 뛰어들었다면 이 책은 보물이라 할 수 있습니다. 어떤 것이든 맨 땅에 헤딩을 통해 알아내는 것은 쉽지 않습니다. 이 책의 정보가 실질적으로 본인의 기업과..

책 보기 2024. 4. 14. 23:45