전체보기

NextJS를 처음 배우면서 공식 홈페이지에 있는 내용을 따라하며 정리하려고 하며 당해 포스트는 그 첫 시작이며, React가 Dom을 어떻게 다루는지에 대해 주요하게 다루려고 한다. Getting Start with React 리액트를 project에 도입하기 위해서는 unpkg.com 이라는 곳에서 2가지 스크립트(react, readt-dom)를 로드 해줘야 한다. react: React library의 코어 react-dom: React를 이용하여 DOM을 컨트롤 할 수 있는 DOM methods를 제공해준다. 만약, 우리가 JavaScript만을 이용하여 h1태그를 div태그 안에 넣으려고 했다면, 아래와 같이 긴 코드가 필요했겠지만 const header = document.createElem..

깊은 복사와 얕은 복사의 차이, 깊은 복사를 할 수 있는 방법에 대해 정리해보고자 한다. 1. 깊은 복사 vs 얕은 복사 2. 깊은 복사 하는 방법 3. 얕은 복사 하는 방법 깊은 복사 vs 얕은 복사 쉽게 말하자면, 깊은 복사는 객체의 실제 값을 복사 하는 반면, 얕은 복사는 객체의 주소(reference)값을 복사한다. 원시 값(Number, String, Boolean, Null, undefined 등)을 복사 할 때에는 항상 깊은 복사가 되므로, 이 경우 깊은 복사와 얕은 복사를 구분할 필요가 없다. 이 구분이 중요해지는 시점은 참조 자료형(Object, Symbol, Array)을 다룰 때이다. [ 얕은 복사 예시] 얕은 복사는 주소 값만 복사하고, 깊은 복사는 객체의 실제 값을 복사한다고 하였..

docker-compose를 이용하여 container를 띄우려는 상황에서 아래와 같은 에러 메시지가 발생하였다. ERROR: for backend Cannot create container for service backend: failed to copy files: failed to open target /var/lib/docker/volumes/89ac4968a7b20ef32b4cc04fe9e79c96cc46d0727617b0ae44b92304ca937070/_data/@angular-devkit/schematics/node_modules/rxjs/_esm2015/internal/operators/materialize.js.map: open /var/lib/docker/volumes/89ac4968a..

정상적으로 작동은 하지만, 콘솔창에 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length') 라는 에러가 발생하였다. 어떻게 해결 할 수 있었는지 알아보자. Problem 위 에러가 의미하는 바는 명확하다. 화면을 렌더하려고 하는데 undefined, 즉 아직 정의되지 않은 속성을 읽으려고 하고 있다는 뜻이다. 아래의 간단한 예시 코드를 통해 알아보자. 아래의 코드를 처음 렌더할 때 info.someProperty는 아직 undefined된 상태 이므로, 에러가 발생하게 될 것이다. {{info.someProperty}} ////////...///// data(){ return { info:..

CSS를 이용하여 반응형으로 정사각형을 어떻게 만들 수 있을지 알아보자. 그리고, margin이나 padding 값을 %로 입력 했을 때 무엇을 기준으로 그 값이 정해지는지 알아보자. 해결책 [ 원리 ] 우선, 반응형 정사각형을 만들 때 먼저 알아야 하는 것은 margin이나 padding 값을 %로 입력 했을 때 무엇을 기준으로 그 값이 정해지는지 이다. 결론부터 얘기하자면 margin이나 padding의 % 값은 부모 태그의 넓이를 기준으로 삼게 된다. 이때 조금 주의해야 하는 점은, 좌우 margin, padding 뿐만 아니라 위아래 margin, padding 역시 상위 요소의 넓이를 기준으로 삼는 다는 것이다. [ 방법 - 1 ] 정사각형 컴포넌트 height를 0으로 두고, width를..

아래 사진 AAAA hash값 처럼 표시되는 글자가 넘칠 때, 넘치는 부분을 '...' 표시로 생략하고 싶을 때가 있다. 어떻게 할 수 있는지 알아보자. 목표 나의 목표는 아래 사진의 AAAA hash 칼럼에서 한 줄을 넘어가는 text들은 모두 '...'으로 표시 하는 것이다. Solution 아래 CSS 코드를 이용해 한 줄만 출력하고, 넘치는 부분은 '...' 으로 깔끔하게 표현 할 수 있다. .hash__wrapper { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 위의 코드의 뜻을 쉽게 말하면, Text가 넘치든 말든 한줄로 표현하고(white-space: nowrap), 만약 넘친다면 숨기는데(overflow: hidde..