본문 바로가기
728x90
320x100

💻 하나씩 차곡차곡/Front-end25

[javascript] ES6 - `` 사용법 ``을 사용하는 문법이 뭔가 하다가 ES6에서 사용하는 것으로 확인되어....기록해두기.... { const weather = 'cloud'; const temparature = '16°C'; console.log('Today weather is ' + weather + ' and temparature is ' + temparature + '.'); console.log(`Today weather is ${weather} and temparature is ${temparature}.`); } ``를 이용하면 + 하지 않고 쉽게 작성할 수 있음. 출처 - https://codingtalk.tistory.com/193 2023. 2. 7.
[Javascript] ES11 - 옵셔널체이닝 연산자 (?.) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있음. ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환함. 사용 방법 : 좌항?.우항 et user = {}; // 주소 정보가 없는 사용자 alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다. 위 예시를 통해 우리는 ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있음. 참고로 위 예시에서 사용된 user?.는 user가 null이나 undefined인 경우만 처리할 수 있음. 좌항 피연산자가 false로 평가되는 Falsy값이라도 null 또는 undefined가 아니면 우항의 프로퍼티.. 2023. 2. 7.
[javascript] $(document).ready vs $(window).onload (실행) $(document).ready(function(){ }); $(window).onload(function(){ }); [오늘의 궁금증] ready 와 onload 의 차이점은 무엇일까? 뭐가 더 먼저 실행될까? 호출시점 $(document).ready 호출시점 : DOM Tree 생성 완료 후 $(window).onload 호출시점 : 모든 페이지 구성요소 페인팅 완료 후 실행 우선순위 ready() -> .onload() $(document).ready() 중복 사용 가능. $(function(){});과 같음 $(window).onload() 한페이지에 하나만 사용가능. 중복사용 되었다면 가장 마지막 것만 호출됨. 출처 - https://hahahoho5915.tistory.com/28 jQuery.. 2022. 7. 6.
[꿀팁] 캐시삭제 및 새로고침 쉽게 하기 힘들게 캐시 삭제 하지말고 편하게 하는 법 1. 개발자 도구(윈도우 : f12 / 맥 : option + command + i)를 킨다. 2. 개발자 도구를 킨 상태에서 새로고침 아이콘을 오른쪽 클릭 해준다. 3. 그럼 위와 같은 창이 뜨고 [캐시비우기 및 강력새로고침] 눌러주면 바로 캐시 삭제 및 새로고침이 된다. 2022. 7. 5.
[javascript/css] js, css가 바로바로 반영되지 않을 때 (feat.ver=) 오늘의 문제점 인클루드한 js와 css를 변경하면 캐시 삭제하지 않는 이상 반영이 즉각즉각 잘되지 않는다. 캐시삭제하면 되는 일이지만 개발자들이야 바로 캐시삭제하고 사용하지만, 사용자에게 매번 캐시삭제하라고 할순 없지 않는가. -> js나 css파일을 변경하게되면 로컬의 PC에 쿠키가 남아있어 수정사항이 바로 반영이 안되는 것. 해결방법 1) 스크립트 위와 같이 ver=220610 넣어주면 새로운 캐시가 생성되어 반영되기 때문에, 바로 반영이 가능하다. ver=이후로는 아무런 숫자를 넣어도 됨. 2) css css도 js와 마찬가지로 href 밑에 ver= 을 삽입하면된다. 출처 js css 버전 관리, js나 css 를 변경해도 브라우저에 반영안될 때, Js 파일을 변경하게 되면 로컬 pc에 쿠키가 남.. 2022. 6. 11.
[javascript] tab키 누를 때 input 이동 순서를 내가 원하는 대로 제어하기 (feat. tabindex) 오늘의 문제점 tab(탭)키를 누를 때 마다 input이 이동되는데 그 이동되는 순서를 내가 원하는 대로 제어하는 방법이 궁금하다. 방법 tabindex 속성을 이용하기 사용예시 1번 input 창 2번 input 창 3번 input 창 4번 input 창 5번 input 창 6번 input 창 7번 input 창 tabindex 속성 값을 원하는 순서대로 입력해주면, tab키를 눌렀을 때 속성 값 순서대로 이동하게 된다. 단, tabindex 속성 값을 -1로 설정하게 되면 이 input에는 tab키를 눌렀을 때 포커스가 가지 않는다. tabindex 속성 값은 1부터 오름차순으로 순서가 정해지며, 0이 가장 마지막 순서에 위치한다. 위의 작성대로라면 tab키를 눌렀을 때 포커스는 3번 input창 -.. 2022. 6. 9.
728x90
320x100