전체 글 (188) 썸네일형 리스트형 블로그를 이전하게 되었습니다. → velog 블로그를 이전하게 된 이유 velog.io/@doodream/Tistory-velog-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%9D%B4%EC%A0%84 Tistory → velog 블로그 이전 안녕하세요! 🙋♂️ 기록하는 개발자 두드림 입니다! 블로그 이전 왜? 그동안 tistory 블로그에서 첫 개발 공부를 시작하면서 블로그를 이전하게 되었습니다. 하지만 비주얼적으로나 표현하고 velog.io 주소 velog.io/@doodream doodream (Doodream) - velog Tistory → velog 블로그 이전 안녕하세요! 🙋♂️ 기록하는 개발자 두드림 입니다! 블로그 이전 왜? 그동안 tistory 블로그에서 첫 개발 공부를 시작하면서 블로그를 이전하게 되었습니다. 하.. Next js - [window is undefined 에러] "window is undefined" 라는 에러를 next js 프레임워크로 마이그레이션 하면서 처음봤다. react에서 서버사이드 렌더링(next js 프레임워크)을 할때에 웹 페이지를 렌더링 할때에 초기에는 window나 document 전역객체는 선언되지 않기 때문에 해당 변수를 참조할수 없기 때문에 벌어진 일이다. 원인 그러면 중요한 키포인트는 해당 변수를 참조하지 않아도 페이지가 '일단은' 구동하기만 하면 이후에 선언되는 window나 document 변수들이 참조되면서 변수가 제대로 구동하게 하면 되지 않나? 그래서 나중에 배포할 때에 웹페이지를 static page로 빌드 하면서 '일단은' 구동하기면 하면 되도록 문제를 일으키는 변수들에 대해서 조건부 렌더링을 걸었다. 해결 문제를 일으킨 .. React - [깊은 복사 얕은 복사, 상태변수와 반환형 함수] 투레벨 프로젝트를 진행하고 있다. 그런데 문제가 생겨서 아무리 생각해도 이유를 찾지 못해서 다른 문제들 부터 해결하고 다시 도전해봤다. 문제 const removeToCart = (title) => { if (cart.length === 1) { setCart([]); window.localStorage.removeItem('cart'); return } setCart(cart.filter(product => product.title !== title)); console.log(cart); window.localStorage.setItem('cart', JSON.stringify(cart)); } 페이지를 만들고 있는데 오른쪽의 장바구니 페이지에서 상품 remove 버튼을 누르면 AddToCart컴포넌트.. CSS - Reset.css VS Normalize.css 웹 브라우저마다 각자의 HTML요소의 기본 스타일을 가지고 있다. CSS 스타일링을 적용할때 이러한 기본 스타일링들이 방해를 하기 때문에 초기화기법이 사용된다. Reset.css 모든 브라우저의 형태에서 내장스타일을 모두 없애버린 스타일이 0인 상태에서 시작되는 초기화 기법으로 h1, div, em등 각 태그에 적용되는 모든 스타일링을 처음부터 다시 만들어 나가야하는 초기화기법이다. 스타일링에 대한 시간이 오래걸리며 아얘 초기화를 하는 것이기 때문에 지속적인 업데이트가 필요없다. 또한 각 브라우저마다의 버그를 고치는 것이 아니라서 Reset.css를 만들며 브라우저마다의 버그를 발생시킬수 있다. Nomalize.css 모든 브라우저의 스타일링을 동일하게 유지하는 스타일기법이다. 기존의 기본 스타일링은 유.. CSS - 가로세로 가운데 정렬 position과 margin .position-margin { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 한 개의 엘레먼트가 있고 position 이 absolute일 경우 margin : auto는 먹히지 않는다. top, left, right, bottom이 없기 때문이다. 바깥여백이 만들어지지 않았다는 이야기이다. 하지만 4방위 속성들을 모두 0으로 맞추면 바깥 여백이 생겨나 버린다. 이때 margin으로 auto 속성을 부여하면 정확히 가운데 정렬이된다. flex .flex { display: flex; justify-content: center; align-items: center; } 상당히 애용하고 있.. CSS - z-index의 동작방식 쌓임맥락 (Stacking Content) 위 이미지를 보게되면 가상의 z-axis를 따라서 z-index가 생성되어 있고 z-index와 가장 먼저 보이는 엘레먼트가 비례하는 것을 볼 수 있다. 하지만 무조건 z-index가 높다고해서 가장 먼저 보이는 것은 아니다. z-index는 같은 레벨(부모 자식)상에서만 작용한다. 쌓임 맥락은 다른 쌓임 맥락을 포함할 수 있다. 쌓임 맥락에서 쌓임을 고려하는 것은 오직 자식 요소들에 대해서 만이다. 즉, 쌓임 맥락에서 여러 부모 자식간의 관계로서 총 쌓임 맥락이 형성되는 것이다. 이러한 관계가 아닌 형제 블록간의 쌓임 맥락의 우선순위는 다음과 같다. 이상태에서 같은 레벨(부모자식 혹은 위 관계에서 대등한)의 관계에서는 z-index에 따라 쌓임맥락이 결정된다... CSS - BFC (Block Formatting Content) BFC (Block Formatting Content) 웹페이지에 나타나 있는 블록들이 보여지는 CSS 렌더링의 일부이다. 너무 어려운 말이지만 그냥 Block의 속성이 다시 부여되어 다르게 렌더링 되는 현상혹은 그러한 컨텐트 라고 이해하면 된다. 블록 컨텐트의 서식 모델이라고 한다. 이러한 컨텐트를 생성하기 위해서는 다양한 속성들이 관여되어있는데 이들 중 하나라도 속성이 들어가 있는 엘레먼트들은 모두 BFC라고 할 수 있다. 문서의 루트 요소(). 플로팅 요소(float이 none이 아님). 절대 위치를 지정한 요소(position이 absolute 또는 fixed). 인라인 블록(display가 inline-block). 표 칸(display가 table-cell, HTML 표 칸의 기본값). 표 주.. CSS - 마진겹침현상 (Margin-Collapsing) 마진겹침현상 (Margin-Collapsing) display 형태가 block인 것들에 한해서 발생하는 현상으로 좌우로는 적용되지 않고 오로지 수직방향으로만 적용된다. 왜 이러한 현상이 일어나는 지는 알수 없으나 일종의 버그라고 생각하면 된다. 형제 블록 사이에서의 마진겹침 div { width: 100px; height: 100px; background-color: red; } .element1 { margin-bottom: 20px; } .element2 { margin-top: 40px; } 위 코드에서 element1, 2 모두 margin값이 주어져 두 블럭 사이의 수직간격은 60px가 되어야 하지만 마진 겹침 현상으로 인해 마진 값이 더 큰 40px로 적용되는 현상이다. 부모와 첫/ 마지막 .. 이전 1 2 3 4 ··· 24 다음
