STUDY

기본적으로 두 방법 모두 웹사이트가 다양한 크기의 화면과 모바일 기기에서 더 나은 사용자 경험을 제공하기 위한 방법이지만 설계와 구현에 차이가 있다. 1. 반응형 웹(Responsive Web) 미디어 쿼리를 사용해 화면 크기를 확인하고 flex, grid 등을 활용해 화면 크기 변화에 따라 페이지 크기 및 레이아웃을 조절한다. 글자 크기 자동 조정은 em, 이미지 크기는 % 사용해 구현한다. 하나의 템플릿을 사용하여 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하지만 이미 PC용이나 모바일용으로 웹사이트가 구축되어 있을 경우, 사이트를 재구축해야한다. 또한 사용자는 모든 기기에 대한 css를 다운 받아야 하므로 로딩 시간 증가 및 데이터 낭비라는 단점을 가진다. 2. 적응형 웹(Adaptive W..

sandbox 속성은 HTML5에서 추가되었으며 iframe 에 지정하면 해당 프레임이 삽입되는 페이지에 제한을 둘 수 있다. sandbox 속성을 비워두면 모든 제한 사항을 적용하고 값을 지정하여 제한을 완화할 수 있다. allow-scripts : 리소스가 스크립트를 실행할 수 있도록 허용, 팝업은 생성 안됨 allow-popups : window.open()이나 target=“_blank”, showModalDialog() 등의 팝업(popup)을 허용 allow-forms : 리소스(resource)가 폼 데이터를 제출할 수 있도록 허용 allow-modals : 리소스가 모달 윈도우(modal window)를 열 수 있도록 허용 allow-same-origin : 리소스가 same-origin ..

UseEffect Effect Hook인 UseEffect는 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해줌 class 의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것 Hook: 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수 side effects(짧게 effects): 컴포넌트 안에서 데이터를 가져오거나 구독하고 DOM을 직접 조작하는 작업 componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 마친 이후 실행 componentDidUpdate: 리렌더링을 ..

const [form, setForm] = useState({ date: Date.now(), obj: {option: "", size: ""}, }); const inputHandler = e => { setForm({ ...from, //이전 상태 복사 obj: { ...form.obj, option: e.target.value } }) }

자바스크립트에는 원시타입과 참조타입이 있다 원시타입(Primitive type) Number, String, Boolean, Null, Undefined, Symbol 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장한다.(메모리 크기 고정) 값이 절대 변하지 않는 불변성을 지니고 있어서, 재할당 시 값이 변하는 게 아니라 변수가 새로운 메모리를 가리키게 된다. let a = 10; a = 50; 기존 메모리에 있던 10이라는 값이 50으로 변경되는 것이 아니라 새로운 50이란 값을 메모리에 생성하고 a는 새로운 메모리(50)을 가리키게 된다. let a = 1; let b = a; a = 2; console.log(a); //2 console.log(b); //1 console...

let inputElement = document.getElementById('input'); //정규표현식으로 숫자만 입력받게 체크 let phoneNumber = inputElement.value.replace(/[^0-9]/g, ''); let tmp = ''; if( phoneNumber.length < 4){ } else if(phoneNumber.length < 7){ tmp += phoneNumber.substr(0, 3); tmp += '-'; tmp += phoneNumber.substr(3); phoneNumber = tmp; }else if(phoneNumber.length < 11){ tmp += phoneNumber.substr(0, 3); tmp += '-'; tmp += pho..

const checkFloatNumber = (float) =>{ let result = 0; let temp = 0; if(float === parseInt(float)){ //정수일때 result = float; } else { //실수일때 temp = Math.floor(float * 100)/100; //둘째짜리 이후 소수점 버리기 result = temp.toFixed(2); //소수점 한자리일때 0을 붙여줌 } return result; }; toFixed 는 반올림을 해주기 때문에 반올림없이 절삭하려면 Math.floor 함수가 필요하다. Math.floor 함수는 주어진 숫자와 같거나 작은 정수 중 가장 큰 수를 반환한다. Math.floor(5.95) => 5 Math.floor(-5.0..

자바스크립트의 this는 함수를 호출하는 방식에 따라 동적으로 결정됨(누가 불렀냐에 따라 결정) *바인딩 : this가 호출 방식에 따라서 특정 '객체'에 연결되는 것 1. 일반 함수 내부에서는 this는 글로벌 객체와 바인딩 됨 function foo() { return this; } console.log(foo()) //window 2. 객체 메서드 내부에서는 호출한 객체와 바인딩 const animal = { name: “dog”, getName: function() { console.log(this); } } animal.getName(); //animal(dog) 객체 const animal2 = { name: “cat”, getName: animal.getName } animal2.getNam..

?? 은 null 병합 연산자라고 함 피연산자 중 확정되어 있는 변수(null도 아니고 undefined도 아닌)를 찾을 수 있다 // 이 if문은 if(a ?? b) //이 문장과 같다 (a !== null && a !== undefined) ? a : b a가 null이 아니고 undefined 가 아니면 a, 아니면 b && , || 연산자와의 차이 && 는 첫번째 false 인 값을 반환 (false 가 없으면 마지막 값) || 는 첫번째 true 인 값을 반환 (true 가 없으면 마지막 값) ?? 는 첫번째 정의된 값을 반환 console.log(0 && 10); // 0 console.log(0 || 10); // 10 console.log(0 ?? 10); // 0 대다수의 연산자보다 우선..

function convert( date ){ var element, dayElement, endTime, hours, mins, msLeft, time, day; var arr = date.split(/[- :]/); date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]); } 사파리에서 Y-m-d H:i:s 포멧을 지원하지 않아서 발생(21년 7월에 확인) Y-m-d H:i:s 포멧으로 date 정보를 받을 경우 split 으로 분해해서 새로운 date로 생성하면 해결됨 https://stackoverflow.com/questions/26657353/date-on-ios-device-returns-nan Date on iOS device ..