JS
1.JS - 변수의 개념과 사용법, 자료형 정리
변수 변수 : 변수를 뜻하는 let 옆에 변수명, 특정 자료형의 데이터를 선언해주어야 저장이 됨 예전에는 var를 사용. 최근 문법에서는 let과 const를 사용 const는 값이 변하지 않게 잠금 장치가 있는 타입 자료형 데이터의 종류 : 문자형, 숫자형, 논리형, 빈데이터(Null) 문자형 큰 따옴표("")나 작은 따옴표('')로 감싸진 문자나 숫...
2.JS - 자바스크립트 출력
window.alert() 메소드 window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달 HTML DOM 요소를 이용한 innerHTML 프로퍼티 실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법 우선 document 객체의 getElementByID()나 getElementsByTagName()...
3.JS - 연산자 7종류 핵심 정리
산술 연산자 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지 값(%)으로 구분 문자 결합 연산자 문자 결합 연산자 : 문자 + 문자, 문자 + 숫자를 해서 하나의 문자열로 만드는 연산자 특정 글자를 이어서 문장을 만들 때 요긴하게 사용됨 주의 "20"+22가 42가 아니라 2022가 됨 문자 결합이기 때문에 문자형 숫...
4.JS - 제어문(조건문, 선택문, 반복문) 7가지 핵심 정리
1. 조건문(if, else, else if) if, else 주의할 점 조건식에 0, null(데이터가 없음), ""(빈 문자), undefuned(데이터가 부여되지 않은 기본값),빈 값이면 false가 나와 실행이 안됩니다. else if 중첩 if문 2. 선택문(switch) 케이스마다 검사하며 만족하는 경우에 break해서 검사를 종료하고...
5.JS - 자바스크립트 내장 객체
기본적인 객체 생성과 호출 예제 내장 객체의 종류 내장 객체 = 자바스크립트 엔진에 내장된 객체 문자 / 날짜 / 배열 / 수학 등이 있음 날짜 객체 new Date로 생성 날짜의 정보를 가져오거나 수정하는 메서드를 필요에 따라 이용 더 많은 날짜 객체 공부하기 수학 객체 산술 연산자로 계산이 가능한 더하기, 빼기, 곱하기, 나누기, 나머지 값 구하기...
6.JS - 브라우저 객체 모델
1. 브라우저 객체의 구조 브라우저 객체는 브라우저에 내장된 객체이며, WEB API에 속함 WEB API 자체는 자바스크립트의 기능은 아니지만, 자바스크립트를 통해 제어 가능 브라우저 객체 종류 window : 브라우저 객체의 최상위 객체입니다. screen : 우리가 브라우저를 보는 모니터 화면에 대한 기능을 담은 객체입니다. locat...
7.JS - 문서 객체 모델(DOM), 노드 구조와 개념 정리
문서 객체 모델(DOM) 브라우저 객체 모델(BOM)의 document 객체는 웹페이지 그 자체이며, 그와 관련된 기능을 제공하는 객체 문서 객체 모델(DOM)은 웹페이지를 스크립트 언어와 연결해주는 계층 구조의 인터페이스 DOM은 자바스크립트 언어 X 문서 객체 모델의 구조와 개념 문서 객체 모델은, 웹 문서 안의 모든 요소를 정의하고 요소에 접근...
8.JS - 자바스크립트로 HTML을 조작하는 방법
메소드 앞에 Node나 Node의 하위 개념인 Element, CharacterData 등으로 풀네임(?)을 적었지만, 실제 사용할때는 생략! 아래에 있는 것들 외에도 더 많은 것들이 있음! 현재 여기 있는 것들은 각 종류별로 대표적인 것만! 접근 일반적인 선택 일반적으로 다음과 같이 태그, 아이디, 클래스, 네임, CSS 선택자로 요소를 선택할 수 있음...
9.JS - React / React Native / Electron
React 유형: JavaScript 라이브러리 설명: React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, React.js 또는 ReactJS로도 알려져 있습니다. Facebook과 개발자 커뮤니티에 의해 유지되며, 재사용 가능한 UI 컴포넌트를 만드는 데 사용됩니다. React는 이러한 컴포넌트를 조합하여 복잡한 사용자 인터페...
10.JS - Welcome To JavaScript (with Nomad Coders)
약 2일간 Nomad Coders의 바닐라 JS 강의에서 JS 기초를 배웠다. 전공생 시절부터, C / Python / Java 등 다양한 언어 속에서 심화 단계까지는 아니더라도 기초까지는 다 닦아놨었기에 JS 기초도 그렇게 어렵지 않았던 것 같다. 다만, C / Python / Java는 결과를 확인하려면 구동한 Tool의 Console 창을 사용해야 ...
11.JS - alert, prompt, confirm을 이용한 상호작용
alert alert가 실행되면 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있는다. 메시지가 있는 작은 창은 모달 창(modal window) 이라고 부른다. '모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포 따라서 사용자는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동 불가...
12.JS - Vanilla JS란 무엇일까?
Vanilla JS의 정의 Vanilla JS란 "순수 JavaScript"를 가리키는 용어 JavaScript를 어떠한 라이브러리나 프레임워크 없이 순수하게 사용하는 것을 의미 Vanilla JS의 중요성 과거에 JS는 브라우저에 종속된 언어였습니다. 이러한 배경으로 인해 JS보다 JS를 기반으로 한 jQuery를 더 많이 사용하는 현상이 발...
13.JS - ‘=’과 ‘==’과 ‘===’의 차이
‘=’과 ‘==’과 ‘===’의 정의 및 역할 ⇒ JavaScript에서 =은 대입 연산자이며, ==는 동등 연산자이고, ===는 일치 연산자입니다. =는 값을 할당하는 데 사용됩니다. 예: var x = 5; (x에 5를 할당) ==는 동등성을 검사하는 연산자입니다. 값이 서로 다른 형식일 경우에 자동으로 형변환을 하여 비교합니다. 예: if (x =...
14.JS - console.log()와 console.dir()
console.log() 정의 console.log()는 JavaScript에서 콘솔에 출력하는 데 사용되는 함수 사용 목적 console.log()를 사용하여 디버깅 및 로깅에 도움이 되는 정보를 콘솔에 출력할 수 있습니다. 주로 다음과 같은 목적으로 사용됩니다. 디버깅: 변수의 값을 확인하거나 코드가 실행되는 부분을 추적하기 위해 사용됩니다. ...
15.JS - querySelector()와 querySelectorAll()
querySelector()와 querySelectorAll() 메서드는 JavaScript에서 DOM(Document Object Model)에서 요소를 선택하는 데 사용됩니다. querySelector() 정의 정의: 이 메서드는 특정 CSS 선택자와 일치하는 첫 번째 요소를 선택하는 데 사용됩니다. 제공된 CSS 선택기와 일치하는 문서에서 첫 번...
16.JS - MouseEvent 실습
JS - MouseEvent 실습
17.JS - getElementById 실습
JS - getElementById 실습[2023.11.20]
18.JS - Document 실습
JS - Document 실습[20231123]
19.JS - querySelector() & querySelectorAll() 실습
JS - querySelector() & querySelectorAll() [실습일 : 20231129]
20.JS - [231202] LogIn / Clock / Quote실습
JS - [231202] LogIn / Clock / Quote실습
21.[231206] - IRISH APP 설계 및 제작(1)
[231206] - IRISH APP 설계 및 제작(1)
22.[231207] - IRISH APP 설계 및 제작(2)
[231207] - IRISH APP 설계 및 제작(2)
23.[231208] - IRISH APP 설계 및 제작(3)
[231208] - IRISH APP 설계 및 제작(3)
24.[231211] - IRISH APP 설계 및 제작(4)
[231211] - IRISH APP 설계 및 제작(4)
25.[231213] - IRISH APP 설계 및 제작(6)
[231213] - IRISH APP 설계 및 제작(6)
26.[231214] - IRISH APP 설계 및 제작(7)
[231214] - IRISH APP 설계 및 제작(7)
27.[231216] - IRISH APP 설계 및 제작(8)
[231216] - IRISH APP 설계 및 제작(8)
28.[231219] - IRISH APP 설계 및 제작(9)
[231219] - IRISH APP 설계 및 제작(9)
29.[231220] - IRISH APP 설계 및 제작(10)
[231220] - IRISH APP 설계 및 제작(10)
30.[231221] - IRISH APP 설계 및 제작(11)
[231221] - IRISH APP 설계 및 제작(11)
31.[231222] - IRISH APP 설계 및 제작(12)
[231222] - IRISH APP 설계 및 제작(12)
32.[231223] - IRISH APP 설계 및 제작(13)
[231223] - IRISH APP 설계 및 제작(13)
33.[231226] - IRISH APP 설계 및 제작(14)
[231226] - IRISH APP 설계 및 제작(14)
34.[231227] - IRISH APP 설계 및 제작(15)
[231227] - IRISH APP 설계 및 제작(15)
35.[231228] - IRISH APP 설계 및 제작(16)
[231228] - IRISH APP 설계 및 제작(16)
36.[240101] - IRISH APP 설계 및 제작 FeedBack
[240101] - IRISH APP 설계 및 제작 FeedBack
37.[240111] [모던 JavaScript 튜토리얼] 공부1
[240111] [모던 JavaScript 튜토리얼] 공부
38.[모던 JavaScript 튜토리얼] - [3.4] 닌자코드
[240120] [모던 JavaScript 튜토리얼] 공부
39.[모던 JavaScript 튜토리얼] - [3.5] 테스트 자동화와 Mocha
[240122] [모던 JavaScript 튜토리얼] 공부
40.[모던 JavaScript 튜토리얼] - [3.6] 폴리필
[240123] [모던 JavaScript 튜토리얼] 공부
41.[모던 JavaScript 튜토리얼] - [4.1] 객체
[240123] [모던 JavaScript 튜토리얼] 공부
42.[모던 JavaScript 튜토리얼] - [4.2] 참조에 의한 객체 복사
[240124] [모던 JavaScript 튜토리얼] 공부
43.[모던 JavaScript 튜토리얼] - [4.3] 가비지 컬렉션
[240124] [모던 JavaScript 튜토리얼] 공부
44.[모던 JavaScript 튜토리얼] - [4.4] 메서드와 this
[240125] [모던 JavaScript 튜토리얼] 공부
45.[모던 JavaScript 튜토리얼] - [4.5] new 연산자와 생성자 함수
[240126] [모던 JavaScript 튜토리얼] 공부
46.[모던 JavaScript 튜토리얼] - [4.6] 옵셔널 체이닝(optional-chaning)
[240129] [모던 JavaScript 튜토리얼] 공부
47.[모던 JavaScript 튜토리얼] - [4.7] 심볼형(symbol)
[240129] [모던 JavaScript 튜토리얼] 공부
48.[모던 JavaScript 튜토리얼] - [4.8] 객체를 원시형으로 변환하기(object-toprimitive)
[240129] [모던 JavaScript 튜토리얼] 공부
49.[모던 JavaScript 튜토리얼] - [5.1 원시값의 메서드]
[240130] [모던 JavaScript 튜토리얼] 공부
50.[모던 JavaScript 튜토리얼] - [5.2] 숫자형 (number)
[240130] [모던 JavaScript 튜토리얼] 공부
51.[모던 JavaScript 튜토리얼] - [5.3] 문자형(string)
[240130] [모던 JavaScript 튜토리얼] 공부
52.[모던 JavaScript 튜토리얼] - [5.4] 배열(array)
[240130] [모던 JavaScript 튜토리얼] 공부
53.[모던 JavaScript 튜토리얼] - [5.5] 배열 메소드
[240131] [모던 JavaScript 튜토리얼] 공부
54.[모던 JavaScript 튜토리얼] - [5.6] iterable
[240131] [모던 JavaScript 튜토리얼] 공부
55.[모던 JavaScript 튜토리얼] - [5.7] 맵 & 셋 (Map & Set)
[240131] [모던 JavaScript 튜토리얼] 공부
56.[모던 JavaScript 튜토리얼] - [5.8] 위크맵과 위크셋 (WeakMap & WeakSet)
[240131] [모던 JavaScript 튜토리얼] 공부
57.[모던 JavaScript 튜토리얼] - [5.9] Object.keys, values, entries
[240131] [모던 JavaScript 튜토리얼] 공부
58.[모던 JavaScript 튜토리얼] - [5.10] 구조 분해 할당(Destructuring Assignment)
[240201] [모던 JavaScript 튜토리얼] 공부
59.[모던 JavaScript 튜토리얼] - [5.11] 날짜(Date)
[240201] [모던 JavaScript 튜토리얼] 공부
60.[모던 JavaScript 튜토리얼] - [5.12] JSON
[240202] [모던 JavaScript 튜토리얼] 공부
61.[모던 JavaScript 튜토리얼] - [6.4] 오래된 var(var)
[240203] [모던 JavaScript 튜토리얼] 공부
62.[모던 JavaScript 튜토리얼] - [6.5] 전역 객체(globalObject)
[240203] [모던 JavaScript 튜토리얼] 공부
63.[모던 JavaScript 튜토리얼] - [6.8] setTimeout과 setInterval을 이용한 호출 스케줄링
[240203] [모던 JavaScript 튜토리얼] 공부
64.[모던 JavaScript 튜토리얼] - [13.1] 모듈 소개(modules intro)
[240205] [모던 JavaScript 튜토리얼] 공부
65.[모던 JavaScript 튜토리얼] - [11.1] 콜백(callback)
[240207] [모던 JavaScript 튜토리얼] 공부
66.[모던 JavaScript 튜토리얼] - [11.2] 프라미스(promise-basics)
[240205] [모던 JavaScript 튜토리얼] 공부
67.[모던 JavaScript 튜토리얼] - [11.8] async와 await
[240209] [모던 JavaScript 튜토리얼] 공부
68.[모던 JavaScript 튜토리얼] - [13.2] 모듈 내보내고 가져오기 (Import & Export)
[240209] [모던 JavaScript 튜토리얼] 공부
69.[모던 JavaScript 튜토리얼] - [13.3] 동적으로 모듈 가져오기(modules-dynamic-imports)
[240209] [모던 JavaScript 튜토리얼] 공부
70.[모던 JavaScript 튜토리얼] - [14.1] Proxy
[240210] [모던 JavaScript 튜토리얼] 공부
71.[모던 JavaScript 튜토리얼] - [14.2] eval
[240210] [모던 JavaScript 튜토리얼] 공부
72.[모던 JavaScript 튜토리얼] - (추가 주제)[1.1] Popups and window methods
[240210] [모던 JavaScript 튜토리얼] 공부
73.[모던 JavaScript 튜토리얼] - (추가 주제)[4.1] Document Cookies
[240210] [모던 JavaScript 튜토리얼] 공부
74.[모던 JavaScript 튜토리얼] - (추가 주제)[4.2] 웹 스토리지(localStorage & sessionStorage)
[240210] [모던 JavaScript 튜토리얼] 공부
75.JS - ES6
2024.03.16
76.JS - 비동기 처리 - async() + await() with try…catch
2024.04.29
77.JS - Promise - 비동기 작업의 최종 완료 또는 실패를 나타내는 객체
2024.04.29
78.JS - try-catch-finally
try-catch-finally 실습
79.JS - method - slice()
slice 메서드
80.JS - forEach()
forEach 메서드