DEV15 [JS30] day 9 - 14 Must know dev tools tricks HTML inline script xBREAKxDOWNx function makeGreen() { const p = document.querySelector('p'); p.style.color = '#BADA55'; p.style.fontsize = '50px'; } HTML 인라인에 스크립트 구문을 넣어 JS를 실행 시킬 수 있다 이벤트 핸들러 속성을 지정해서 자바스크립트를 실행하도록 하는 고전적인 방식 언제 JS가 실행되는지 모르겠다면? 👉 DOM breakpoint를 설정 할 수 있다 To set a DOM change breakpoint: Click the Elements tab. Go the element that you want to set the breakpoint on. Right-clic.. 2021. 12. 28. CSR과 SSR Client Side Rendering 과 Server Side Rendering Vue와 React는 대표적인 Single page application (이하 SPA) framework로 Client Side Rendering(이하 CSR) 방식으로 화면을 만든다. 이와 대조적으로 PHP는 Multi page application (이하 MPA)으로 Server Side Rendering (이하 SSR) 방식으로 화면을 만든다. 1. CSR Vue, React -> SPA / CSR Browser(Client) 에서 js에 의해 화면(HTML)을 동적으로 생성한다. 때문에 page 전환이 SSR보다 상대적으로 빠르다. 대신 최초 접속 시, 모든 js와 static 파일을 가져와야 한다. 때문에 최초 .. 2021. 12. 23. [JS30] day 8 - Fun with HTML5 Canvas Canvas를 사용하기 위해서는 html에서 를 선언해 준 후 JS에서 기본 세팅을 시작한다 JS 베이스 세팅 // 캔버스 대지를 가져오고, 앞으로 context는 2d임을 canvas에 명시 const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); // 기본 캔버스 사이즈를 window 크기 전체로 늘려 줌 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Base-setting ctx.strokeStyle = '#BADA55'; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.lineW.. 2021. 12. 12. [JS30] day 7 - Array cardio day 2 1. Array.some() const isAdult = people.some(function(person) { const currentYear = (new Date()).getFullYear(); if(currentYear - person.year >= 19) { return true; } }); // Arrow function const currentYear = (new Date()).getFullYear(); const isAdult = people.some(person => (currentYear - person.year >= 19)); Array에 있는 객체 중 찾고자 하는 조건에 맞는 객체가 하나라도 있으면 참을 반환 모든 요소가 통과하지 못하면 거짓을 반환 (빈 배열은 항상 거짓) 2. Ar.. 2021. 12. 12. 이전 1 2 3 4 다음
