1. BOM JavaScript Window W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com BOM : Browser Object Model : 브라우저 객체 모델 : 웹 브라우저와 관련된 모든 객체들의 집합. 객체 설명 screen 모니터의 정보 navigator 현재 실행 중인 브라우저의 정보 location URL의 정보 history 방문 기록에 대한 정보 docu..

1. destructuring operator var obj={ "a":2, "b":3 } let {a,b}=obj; console.log(a,b); //출력 2 3 What does this javascript syntax means: const { headers, method, url } = request; It's not clear what this syntax means const { headers, method, url } = request; found in this tut https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/ stackoverflow.com

0. 참고자료 1. async async function - JavaScript | MDN async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환 developer.mozilla.org async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. (출력값이 Promise 객체다.) 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는 것과 많이 비슷합니..

1. 결론 생활코딩 강의를 봅시다. (https://youtu.be/61iolhWgQt0) 생활코딩 유튜브 결론은 var보단 let을, 가능하다면 const를 사용하자. 2. 이유 var let const var let const global O X X script scope X O O function local scope O O O block scope X O O 재선언 O X X 재할당 O O X const는 값을 재할당 할 수 없다. 이를 제외하면 let과 동일하게 작동한다. 중요한 것은 var과 let의 차이다. 우선 var을 사용하면 다음과 같은 문제가 생긴다. 재할당이 가능하다. block scope를 무시한다. script scope를 무시한다. a. 재할당이 가능하다. var은 재할당이 가..

계산기 이렇게 생긴 계산기를 Html, CSS, JS를 이용해서 만들어보자. 유튜버 수코딩님의 강의 영상을 보고서 따라 했다. https://www.youtube.com/watch?v=rWFAR1mql8Q 클론 코딩을 하면서 배운 점을 정리해보자. 1. 파일 보관 중인 Github 주소 : https://github.com/ramen4598/clone_calculator index.html style.css :root{ /* color */ --red-color : #ea6d5a; --orange-color: #f4b23e; --green-color: #2f6d1c; --background-color: #1f1f1f; --calculator-color: #ccc; --black-color: #333; /..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 JS 코드 설명 main.js const moreBtn = document.querySelector('.info .metadata .moreBtn'); const title = document.querySelector('.info .metadata .title'); moreBtn.addEventListener('click', ()=>{ moreBtn.classList.toggle('clicked'); title.classList.toggle('clamp'); }); 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css ..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. .upNext .item .img { flex-grow: 1; } .upNext .item .info { flex-grow: 1; } .upNext .item .moreBtn { flex-grow: 1; } 해당 예시에..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS calc() CSS 코드에서 사칙 연산을 이용하는 방법. .actions button i { margin-bottom: calc(var(--padding) / 2); } —padding은 이전에 :root에서 정의한 변수다. +와 `` 연산자는 좌우에 공백이 있어야 한다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석한다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리한다. *와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋다. 출처 :..