프론트엔드 개발자 엄성준 블로그

먼저 user 객체를 생성합니다. let user = { name: "sungjun", age: 50, size: { height: 200, weight: 70, } }; 다음으로 deepCopy 객체를 생성한 후 JSON.stringify() 함수를 통해 user객체를 문자열로 변환합니다. 그 후 JSON.parse() 함수를 통해 문자열 user를 다시 object 형태로 변환해줍니다. (정말 간편한 방법인 것 같습니다.) let deepCopy = JSON.parse(JSON.stringify(user)); 다음으로 deepCopy.size.height의 값을 250으로 변경하신 후 결과를 보시면 user객체와 별개로 값이 변경되는 걸 확인하실 수 있습니다. deepCopy.size.height =..

네 번째 미션을 진행하면서 학습한 점에 대해서 적어보겠습니다. 일단 이번 미션을 진행할 때 피그마로 시안을 봤을 때는 굉장히 쉽겠다라고 생각을 했었는데 flex로만 layout구조를 잡다 보니 grid는 좀 생소해서 이번 기회에 제대로 복습을 한 것 같습니다. 또한 JS를 이용한 Toggle이 구현되어 있었는데 그 함수 안에 동작을 추가해서 구성하는 줄 알았으나 이미 구현된 JS에 css를 통해서 미션을 해결해야 된다는 생각이 들어서 가상 요소 before after를 이용해서 문제를 해결했습니다. 또한 아래는 제가 이번 미션을 하면서 참고한 사이트 입니다. https://projects.verou.me/bubbly/ Bubbly — CSS speech bubbles made easy projects.v..

지금 까지 여러 강의를 수강하면서 잘 이해가 되지 않았는데 이번에는 이해가 되어서 글 작성을 해보려고 합니다. const obj = { property1: "1", property2: { subProperty1: '2-1', subProperty2: '2-2', } } 먼저 위와 같이 obj를 생성해 줬습니다. const obj2 = Object.assign({}, obj); //shallow copy(얕은 복사) 다음으로 obj2를 생성하고 Object.assign() 함수를 사용해 {} 빈 객체에 obj를 복사하였습니다. 이것이 바로 shallow copy를 의미합니다. 얕은 복사를 했을 경우 obj2의 property1의 값을 변경했을 경우 obj1의 값과는 무관합니다. 하지만 obj2 객체에 있는..

세 번째 미션을 진행하면서 학습한 점에 대해서 적어보겠습니다. 일단 이번 미션은 요소가 꽤나 많아서 진행시간이 현제까지 한 미션 중 가장 오래걸렸던 것 같습니다. WAI-ARIA에 대해서 학습한 적이 없었었는데 제로베이스 강의를 통해서 클론 코딩 중 예시를 찾게되어 이번 프로젝트에 적용하였습니다. 또한 가상 요소 선택자 ::befor, ::after를 통해서 요소를 넣었을 때 표현이 되지 않아서 무엇이 문제일까 했었는데 position:absolute를 사용하면 적응이 되는 점을 알게되었습니다. 다른 부분에서는 크게 어려운 점이 없었던 것 같습니다.

강의 수강 중 string()과 toString()의 차이가 궁금해서 검색을 해봤습니다. 검색의 결과는 형변환만을 해줄 때 둘의 차이는 없습니다. 하지만 String()은 undefined나 null값을 넣었을 때 문자로 출력해줍니다. 이에 반면 toString()은 TypeError를 나타내 줍니다.

문서의 전체 높이 : document.documentElement.scrollHeight 브라우저가 보여주고 있는 높이(vh) : window.innerHeight 스크롤의 위치 : document.documentElement.scrollTop 스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이)

보조 기억 장치 (Auxiliary Memory Unit) - 용량이 큰 자료를 장기간 저장할 때 주로 사용 - 필요시 중앙 처리장치가 자료를 보조 기억 장치로부터 주 기억장치로 옮겨 사용 함 - 주기억 장치보다 용량이 크지만 속도는 많이 느리고 전원이 꺼져도 기억하는 내용은 사라지지 않음 - 용도에 따라 다양한 형태의 보조 기억 장치가 존재 함 보조 기억 장치(RAID, SSD) SSD - 회전판이 제거되어 제로 스핀 시스템이라고 불림, HDD와 달리 플래시 메모리로 구성 됨, 지연 시강 없는 빠른 로드 속도, 경량성 및 효율성, 낙할 및 충돌 발샐 시 충격 완화 기능으로 높은 내구성, 저발열 및 저소음 RAID - 오류 복구 정책은 지원하지 않음, 여러 개의 하드 디스크를 묶어 하나 처럼 사용할 수 ..

오늘 두 번째 미션을 진행하면서 학습한 점에 대해서 적어볼까 합니다. background-img를 url로 임포토 하는 법을 학습했고 background-position 속성을 이용해서 0% 0% 각각 x 축과 y축의 %를 조절하여 제가 보여주고 싶은 부분의 background-img를 보여줄 수 있었습니다. 다른 부분은 수월하게 진행했던 것 같습니다. 아래는 제가 background-position 속성을 학습할 때 참고한 mdn링크입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/background-position background-position - CSS: Cascading Style Sheets | MDN The background-position..

오늘 처음으로 HTML/CSS 미션 5개 중 첫 번째 프로젝트를 완료하였는데요. 진행하면서 어려웠던 점에 대해서 적어볼까 합니다. 먼저 저는 다음과 같이 프로젝트를 private Repository를 통해서 git hub에 업로드를 하고 있습니다. 제가 오늘 프로젝트를 진행하면서 느낀 점은 HTML, CSS는 어느 정도 실력이 있다고 생각했었는데 아직 부족하다고 느끼게 되었습니다. 오늘 구글링을 참 많이 했던 것 같습니다. 특히 가상 선택자 ::before, ::after에 대해서 아예 모르고 있는 상태여서 zero-base에서 제공해 주는 강의와 구글링을 통해서 학습한 것 같습니다. 이전에는 js를 통해서 구현하는 줄 알았던 부분이 알고 보니 css를 통해서 구현이 가능하다는 것을 깨달은 것 같습니다...

제가 2022.12.01부터 제로베이스 프론트엔드 스쿨 10기 수강생이 되었는데요. 앞으로 강의 수강 중에 학습한 점이나 기억하고 싶은 부분 등을 이곳에 기록하겠습니다. 시멘틱 태그(sementic tag)란 - HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그 시멘틱 태그(sementic tag) 예시 - 이 페이지에서 최상위 제목을 의미 - div 태그와 똑같은데 주요 링크를 모아둔 박스를 의미 , , , , - layout 태그 a태그 1. 절대경로 : 인터넷, url로 접속 가능한 경로 2. 상대 경로 : (통상적으로) 개발 환경에서 시작되는 경로 : . 현재 파일이 위치한 경로 : .. 이전 경로 / 상위 경로 ..