목록WEB STUDY (244)
whatisthis?
readline과 fs모듈 1. fs모듈 사용시 const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().split(' '); // const input = require('fs').readFileSync('/dev/stdin').toString().split(' '); fs모듈은 예제 입력 파일에 접근해야 하기 때문에 일부 문제에서는 "런타임 에러 (EACCES)" 형태의 접근권한 오류가 나타나고, 이럴때는 readline을 써야함. 2. readline 사용시 // 예제 입력이 한줄로 되어 있을 때 const readline = require('readline'); const rl = readline.createI..
✔ Description 더보기 Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programm..
❕ Math.floor vs Math.trunc 💡 Math 객체의 반올림 관련 함수들. Math.round() // 반올림 Math.ceil() // 올림 Math.floor() // 내림 자바스크립트의 Math 객체에는 반올림 관련 함수들이 있다. 위 세가지 함수는 양수/음수에 따라 계산을 달리 한다. 그러나, Math.trunc() 함수를 살펴보자. Math.trunc() // 정수부분 반환 (소수점 제거) - 음수든 양수든 단순히 정수부분만 반환 양수이건 음수이건 상관없이 소수점 이하 우측부분을 제거하는 매우 단순한 동작을 하는 함수임. +) 함수인자는 암묵적으로 숫자로 변환되어 메서드에 전달됨. Math.trunc(13.37); // 13 Math.trunc(-0.123); // -0 Strin..
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 var 호이스팅 시 undefined로 변수를 초기화 let과 const 호이스팅 시 변수를 초기화하지 않음 호이스팅을 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 함. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있음. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 메모리에 저장한다. 코드 실행 전 이미 변수선언/함수선언이 메모리에 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. https..
CSS = Cascading Style Sheet 스타일을 분리해서 관리하기 위한 것. - Document + Style 스타일 없이 html로만 웹페이지를 만든다면? - 정보를 주기 위한 HTML의 본질을 잃게 됨 웹사이트의 스타일을 일관적으로 적용 유지보수도 용이함 CSS SYNTAX 1) 선택자 selector 스타일을 적용할 대상 지목. 전체/클래스/아이디/요소 선택자 등 다양한 선택자가 있다. 2) 선언부 property : value; 의 형태로 이루어짐. (속성과 속성값) 세미콜론(;)은 한 문장이 끝날때마다 꼭 써줘야함. 문장의 종결을 알리는 콤마와 같은 역할. How to use CSS? 1. link:css 이용 - emmet 기능으로 link:css라고 입력하면 다음과 같이 코드가 나..
1. todo-list index.html에 위와 같이 form과 list 만듬. ul은 안에 비워둠. (js로 li 만들것임) const toDoForm = document.getElementById('todo-form'); const toDoInput = document.querySelector('#todo-form input'); const toDoList = document.getElementById('todo-list'); function handleToDoSubmit(event) { event.preventDefault(); console.log(toDoInput.value); } toDoForm.addEventListener('submit', handleToDoSubmit); 엔터를 누를 떄..
Video Player Video Player video 태그로 마크업 하는 방법. 방법1. 이 방법으로는 만약 해당 파일이 재생이 안된다면, 영상이 재생되지 않는다. 만약 사용자의 브라우저가 mov 형식을 지원하지 않는다면 ? - 재생 안됨! 따라서, 사용자 친화적인 마크업을 위해서는 아래 방법대로 source 태그를 사용한다. 방법2. ** source 태그의 필수 속성 = src / type 오디오든 비디오는 source를 사용할 때는, type을 꼭 명시해야함. 예> 위와 같이 마크업 해주고, 나머지 헤딩과 내용부분을 마크업하자. 주짓수 4주차 롤링 영상 30초 만에 압살 실화인가 그리고, css 적용을 위해서 div로 분할해줌. video 또한 플레이어를 나타나게 하기 위해 controls라는 ..
Music Player audio 태그를 이용한 마크업 연습. 마크업을 하기 위해 섹션을 나눠보자. 음악 플레이 '리스트'이므로 리스트로 마크업해야한다. 또한, 이때는 재생되는 순서가 결정되므로 ordered list, 즉 ol을 사용해야한다. html lang="en"으로 하되, 한국어가 들어가는 태그의 속성에 lang="ko"를 적어준다. 위에처럼 alt,즉 대체텍스트에는 한국어로 작성했으므로 lang="ko"를 해주었다. 노래 제목은 제목에 해당하므로, heading 태그로 마크업해준다. 대신, 한글이 들어가므로 span으로 감싸준 후 lang="ko"를 적어준다. 러브 엑스 마키나 Love Ex Machina 더보기 Q. 왜 굳이 h1에 바로 lang="ko"를 하지 않고 span으로 감싸주었을까..
Gmail Inbox 우선, 마크업을 하기 전에 어떤 방식으로 마크업할지 생각해보자. 방법 1. 리스트 이용 (두 줄이 비슷한 구조이므로) 방법 2. 테이블 이용 (각 내용들이 분류가 똑같이 나누어지므로) 이때는, 리스트보다는 테이블을 이용하여 마크업해주는것이 바람직하다. 강의 내용은 생략. index.html Actions Sender Titles Timestamp Select this Email Add to Favorites Goorm Edu Unread: Rate your course: FRONTEND 101 WITH KIMBUG - Woohyeon. How’s everything going? We want to hear your opnion on.. 3:34 PM Select this Email ..