\(@^0^@)/

- JS 기본 문법 즉시 실행 함수 표현 (IIFE, Immediately Invoked Function Expression) var는 전역, 함수 스코프여서 코딩할 때 문제가 많았음. ES6 및 블록 스코프 let, const가 도입되기 전, 자주 사용했던 표현식. 쉽게 말하자면, 블록 스코프를 흉내 내는 새로운 스코프를 만들어내는 표현식. IIFE 표현식을 활용할 때는 맨 앞 또는 맨 끝에 무조건 세미콜론을 붙여줘야 한다. // IIFE (function () { /* ... */ })(); // 화살표 함수 IIFE (() => { /* ... */ })(); // 비동기 IIFE (async () => { /* ... */ })(); // 매개변수 받는 법 (function (nums) { con..

- JavaScript youtube-video Fullscreen() 메서드 사용 https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API Document.exitFullscreen() : 전체 화면 모드에서 창 모드로 다시 전환하도록 요청 Element.requestFullscreen() : 사용자 브라우저에 지정된 요소를 전체 화면 모드로 전환하여 브라우저의 모든 UI 요소와 다른 모든 응용 프로그램을 화면에서 제거하도록 요청 사용자마다 사용하는 브라우저가 다르기에 (예: mozFullScreenElement, msFullscreenElement, webkitFullscreenElement)을 확인해야 하고, 지원하지 않는 모델일 경우를 대비..

- JS 기본 문법 객체를 배열로 리턴하는 메서드들 Object.keys() : keys의 배열을 제공하는 것과 동일한 순서로 반환. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // expected output: Array ["a", "b", "c"] Object.values() : values의 배열을 제공하는 것과 동일한 순서로 반환. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object1)); // expected output: Array ["somestring", 42, false]..

- JS 기본 문법 https://www.youtube.com/watch?v=Um-CJHNc5Pw https://www.youtube.com/watch?v=tpl2oXQkGZs&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=11 - JavaScript carousel className을 추가해서 각 위치들 초기화 items요소의 1번째 index 0을 current로, 이전(prev)은 current의 이전인 items 요소의 맨 끝 5번째 index, 4에 추가, 다음(next)은 current의 다음인 2번째 index, 1에 추가한다. class Carousel { constructor(carouselElement) { this.carouselElement = c..

캐러셀을 구현하면서 급 궁금해진 document.addEventListener()와 window.addEventListener()의 차이. 일단 document와 window의 차이점을 알아보도록 하자. (지난번 학습한 것 같은 느낌적 느낌) Window vs Document Window : 브라우저 객체 모델의 최상위 객체 (BOM : Browser Object Model)로 현재 웹브라우저의 탭 혹은 창의 모델을 나타낸다. https://developer.mozilla.org/en-US/docs/Web/API/Window Window - Web APIs | MDN The Window interface represents a window containing a DOM document; the docum..

- JS 기본 문법 instance : 특정 공간의 메모리를 차지하고 있는 실제 고유한 객체 https://en.wikipedia.org/wiki/Instance_(computer_science) prepend() : 첫 번째 자식 앞에 Node개체 또는 개체 집합을 삽입 https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend // 요소 추가 let div = document.createElement("div"); let p = document.createElement("p"); let span = document.createElement("span"); div.append(p); div.prepend(span); console.log(div...

- css font 관련 속성 word-break break-all 오버플로를 방지하려면 두 문자 사이에 단어를 분리해야 함 (중국어/일본어/한국어 텍스트 제외). keep-all 중국어/일본어/한국어(CJK) 텍스트에 단어를 분리하면 안 됨. break-word https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap - JS 기본 문법 - JavaScript progress_bar Progress bar : 아래처럼 스크롤을 내리면 처음엔 회색이었던 상단바가 스크롤한 길이만큼 늘어나 주황색으로 채워지고, 맨 마지막까지 스크롤을 내릴 경우, 프로그래스 바가 모두 주황색으로 변한다. 프로그래스 바를 구현하기 위해 알아야 할 개념들 요소 사이즈와 스크..

- css font 관련 속성 font-family 보통 글씨체는 브라우저에 따라 다른데, 크롬일 경우 설정 -> 모양 -> 글꼴 맞춤 설정에 들어가면 적용되어 있는 폰트들을 볼 수 있다. family-name : family-font의 이름, 예를 들어 "Times"는 글꼴 모음이다. generic-name : 일반 family-font에서 사용 가능한 지정된 글꼴이 없을 경우 대체되는 폰트. serif : 폰트의 스타일이 대체적으로 끝이 뾰족하거나 끝이 가늘어지거나 끝이 갈라져 있음. sans-serif : 일반적으로 평범함. font-family: Lucida, Grande, "Times New Roman", sans-serif; .sansserif { font-family: Times, "Time..

드디어 JS스터디 신청 완료! 저번에 적었던 글들이 다 사라져서 다시 작성하였다.. 헥헥 됐으면 좋겠다~.~ 되면은 조금 더 열심히 살지 않을까..? 나태한 나에게 열정과 의지를! - JS 기본 문법 arguments() 화살표 함수가 아닌 모든 함수 내에서 사용할 수 있는 지역 변수 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments function func1(a, b, c) { console.log(arguments[0]); // expected output: 1 console.log(arguments[1]); // expected output: 2 console.log(arguments[2]); /..

대학 졸업 증명서 발급을 신청해서 오늘 주민센터에 수령하러 갔는데, 너무 오랜만에 그런 곳에 방문을 해서... 신분증이 필요한 것을 깜박했다ㅠㅠ 낼 다시 가야지.....^^ - JS 기본 문법 배열의 length을 다룰 때 조심해야 할 점 index 0부터 2까지 값을 넣고 + 9번째 배열까지 해서 해당 arr의 length가 4라고 생각할 수 있지만, 배열의 3번째부터 8번째까지 6개의 배열도 empty로 간주되어서, 결국 length는 10으로 뜬다. 따라서 JS배열을 다룰 때는 각 배열의 요소를 잘 살펴봐야 함. 배열의 empty를 확인하기 좋은 메서드로는 foreach가 있음) - JavaScript baseball 오늘은 야구게임에 대해 구현해보자! 야구게임은 10번의 시도로 4자리의 숫자를 맞..