오늘도 조으네💜

Javascript

📌 원시 데이터 : 변경이 불가능한 값 String, Number, Boolean, undefined, null 메모리 영역에서의 변경은 불가능하며, 새로운 값을 만들때 메모리에 같은 값이 있으면 이미 만들어진 메모리 주소의 값을 바라보지만, 새로운 값일 경우 새로운 메모리에 할당한다. let str = 'Hello'; str = 'world'; 첫번째 구문이 실행되면 메모리에 문자열 'Hello' 가 생성되고, 변수 str은 'Hello'의 메모리 주소를 가리킨다. 두번째 구문이 실행되면 이전에 생성된 'Hello'를 수정하는 것이 아니라 새로운 메모리에 새로운 문자열 'World'를 생성하고 변수 str은 이를 가리킨다. 따라서 메모리에는 'Hello'와 'World' 모두 존재하고 있으며, 변수 s..

2022. 9. 10.

Javascript

📌 Nullish coalescing operator : 병합연산자 null 병합 연산자(nullish coalescing operator)라고 불리는 ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있다. a ?? b의 결과는 아래와 같다. 👉 a가 null도 아니고 undefined도 아니면 a 👉 그 외의 경우는 b(a가 null 또는 undefined) nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다. x = (a !== null && a !== undefined) ? a : b; //❌ Bad Code 💩 function printMessage(text) { let message = text; if..

2022. 9. 5.

React

📌 propTypes를 통한 props 타입 검증하기 컴포넌트의 필수 props를 지정하거나 타입을 지정할 때 propTypes를 통해 검증할 수 있다. import PropTypes from 'prop=types'; const Button = ({text}) => { return {test} } Button.propTypes = { text: PropTypes.string // 해당 prop은 문자열 형태로 전달해야 한다는 것을 의미한다. } 📌 isRequired로 필수 propTypes 설정하기 필수적으로 사용하여야하는 props의 경우에는 isRequired로 설정하여 props가 지정되지 않았을 경우 생길 수 있는 오류를 방지할 수 있다. import PropTypes from 'prop=typ..

2022. 9. 4.

Javascript

📌 원시 데이터 : 변경이 불가능한 값 메모리 영역에서의 변경은 불가능하며, 새로운 값을 만들때 메모리에 같은 값이 있으면 이미 만들어진 메모리 주소의 값을 바라보지만, 새로운 값일 경우 새로운 메모리에 할당한다. String, Number, Boolean, undefined, null let str = 'Hello'; str = 'world'; 첫번째 구문이 실행되면 메모리에 문자열 'Hello' 가 생성되고, 변수 str은 'Hello'의 메모리 주소를 가리킨다. 두번째 구문이 실행되면 이전에 생성된 'Hello'를 수정하는 것이 아니라 새로운 메모리에 새로운 문자열 'World'를 생성하고 변수 str은 이를 가리킨다. 따라서 메모리에는 'Hello'와 'World' 모두 존재하고 있으며, 변수 s..

2022. 9. 2.

Javascript

👀 DOMContentLoaded 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않는다. 그러므로 해당 이벤트는 DOM이 준비된 것을 확인한 후 원하는 DOM 노트를 탐색해 핸들러를 등록하여 인터페이스를 초기화할 때 활용할 수 있다. window.addEventListener('DOMContentLoaded', function) Jquery에서 DOMContentLoaded 비슷한 기능을 하는것이 $(document).ready( )이다. $(document).ready(function() { // 실행될 코드 }) 👀 load HTML로 DOM트리를 완성하고, 이미지와 스타일시트 등의 외부 기타 자원도 모두 불러오는 것이 끝..

2022. 9. 2.

Dev Issue

모달이나 팝업같은 UI를 구현할 때 body 영역이 스크롤 되는 것을 막아햐 하는 경우가 있다. 이 경우, 모달이나 팝업이 떠 있을 때, body에 클래스를 부여하여 overflow:hidden을 추가하여 body 스크롤을 방지할 수 있다. 하지만!! 모바일 IOS에서는 여전히 스크롤이 되는 이슈가 있었다. 😫😫 (역싀 모바일 계의 IE...사파리..) 구글링을 하며 다양한 해결 방법을 접했지만, 완벽한 해결 방법을 찾기가 쉽지 않았다. 그나마 적용도 쉽고 내가 원하는대로 작동하는 소스를 찾아서 적용하였다. 적용한 방법은 아래와 같다. html, body { touch-action: none; /*최신 브라우저의 경우 이 속성만으로 스크롤 막기 가능*/ -webkit-overflow-scrolling: ..

2022. 9. 2.

HTML5 , CSS3

사용자 지정 CSS 속성은 CSS 저작자가 정의하는 개체로, 이 개체에는 문서 전반적으로 재사용할 임의의 값을 담는다. 복잡한 웹사이트의 경우 방대한 양의 CSS를 가지고 있는데, 많은 값을 반복적으로 사용하는 경우가 많다. 예를 들어 폰트의 색상, 배경 색상, 테두리 색상 등... 수백 곳 서로 다른 위치에서 동일한 속성값을 사용한다면, 추후 유지보수에 의해 그 속성값을 바꿔야 하는 경우 일일이 그 값들을 찾아서 하나씩 바꿔야 하는데, 이는 시간도 걸릴 뿐더러 실수도 많을 것이다. 이 때, 사용자 지정 CSS를 사용하면 CSS전반에 걸쳐 사용되는 임의의 값을 변수에 저장해두고, 여러 곳에서 참조하여 사용이 가능하다. 전체 수정을 하게 될 경우에도 사용자 정의 CSS의 속성값만 수정해주면 전체 반영이 되..

2022. 9. 2.

HTML5 , CSS3

✨ SVG란? SVG는 확장 가능한 벡터 그래픽으로 2차원 그래픽을 표현하기 위해 만들어진 xml파일 형식의 마크업이다. SVG는 텍스트 편집기에서 css, js로 수정이 가능하다는 장점이 있다. 또한, 벡터 기반으로 확대 축소해도 품질이 떨어지지 않는다. 👀 SVG 사용법 1️⃣ img 태그 사용 SVG는 이미지 태그 사용과 동일하게 삽입할 수 있다. 2️⃣ background-image 사용 .potion { width: 300px; height: 120px; background: url('potion.png'); /* svg 미지원 브라우저 대응 */ background: url('./potion.svg') no-repeat; } 이 두가지 방식의 단점은 CSS로 SVG내부를 제어할 수 없다. 따라..

2022. 9. 1.