따꿍의 프로젝트

발단대장님이 또 신기한거 가져오셨다.덕분에 많은걸 배워보는것 같다. 평소에 사용하는 vh대신 dvh를 사용하고 있는 것을 확인할 수 있다. dvh가 대체 무엇일까? dvh에 대하여뷰포트 단위로 높이 값을 주고 싶을때 대게 vh단위를 사용하는데,vh는 모바일 환경에서 모바일 주소 표시줄 영역에 의해100vh로 높이 값을 설정했다고 해도 화면이 짤리는 경우가 발생할 수 있다. dvh는 주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되고 있건 상관 없이현재 보여지는 뷰포트 높이를 동적으로 가져온다. 위 이미지의 예시 처럼 100dvh는 주소표시줄의 유무에 따라 값이 달라진다.div {height:100dvh;} 이 외에도 svh(short viewport height - 주소표시줄 보이는 상태 기준의 높..

한줄 정리var, let, const 모두 변수를 선언할때 사용하는 키워드로요즘 ES2015 이상 (현대 JS에서는) let과 const를 통상적으로 사용합니다. 그 이유에는 var의 특성이 한 몫 했습니다. 예전 문법 var의 특징예전 JS에서는 변수를 선언할때 var을 사용했습니다. 하지만 var은 여러 문제점이 있었습니다.var a = 'a'; 첫번째 문제점은,var의 스코프 범위가 블록 스코프가 아닌, 함수 스코프를 따라서 예측하기 어려운 동작을 만들 수 있다는 것입니다.if (true){ var a = 'a';}console.log(a); 블록 스코프를 따르면 console.log의 a는 정의가 되어 있지 않아 문제가 발생해야지만var은 함수 스코프를 따라, if 블록 스코프에서 정의된..

한줄 결론JS에서 얕은 복사와 깊은 복사의 근본적 차이점은얕은 복사는 객체의 1단계만 복사하고 내부 참조는 공유하는 것임에 반해깊은 복사는 모든 중첩 구조까지 재귀적으로 복사해서 완전히 독립적인 객체를 만드는 것이라는 점입니다. 설명객체 안에 또 객체가 있는 상황에서얕은 복사는 객체의 1단게만 복사하고 내부 참조는 공유해서 복사본의 내부 객체가 원본의 내부 객체 주소 그대로 사용합니다.따라서 얕은 복사본의 내부 객체를 수정하면 원본 객체도 따라 바뀌고원본 객체의 내부 객체를 수정해도 얕은 복사본의 내부 객체가 따라 바뀝니다. const obj = { a: 1, b: { c: 2 } };const copy = { ...obj };copy.b.c = 3;console.log(obj.b.c); // 3 ❗ ..