나디아 성장 일기

자료형(Data type)  1. 숫자형(Number)정수한계값: 2**53 -1소수특수 숫자값 (Infinity, NaN)let n = 123;n = 12.345;alert("문자열" / 2); // NaN (문자열을 숫자로 나누면 에러)   2. BigInt: (253-1)(9007199254740991)보다 큰 값 / -(253-1)보다 작은 정수를 표현정수 리터럴 끝에 n을 붙이면 만들 수 있다.암호 관련 작업에서 사용const bigInt = 12n;   3. 문자형(String)큰따옴표: "Hello"작은따옴표: 'Hello'역 따옴표(백틱, backtick): `Hello` * `${Template literals}` : 백틱으로 변수/식을 감싼 후 ${…}안에 넣으면 문자열 중간에 변수/식..

📌 Arlet창 UI 만들기 ✨ UI 만드는 단계 1. HTML/CSS로 미리 디자인 2. 언제, 어떻게 보여줄 지 JS로 구현 목차 1. JS로 HTML 조작하는 법 2. function 함수 3. class로 찾기 4. event 실행하기 📌 JS로 HTML 조작하는 법 document.getElementById("변경할 html의 id").변경 요소 = "변경 내용"; : 변경할 html의 id의 요소를 찾아 내부의 html 변경 요소를 "변경 내용"으로 변경 HTML 요소 ⇒ Element getElementById("변경할 html요소의 id") ⇒ 셀렉터(Selector) document.getElementById("hello").style.color = "red"; 📌 JS 조작 문법 HTM..

동기 & 비동기 이해하기 동기(Synchronous) : 여러 개의 작업을 순서대로 실행 쓰레드(Thread)로 동기 처리 작업의 흐름을 파악하기 쉬움 시간이 오래 걸림 👉 멀티 쓰레드로 해결 (각 쓰레드로 개별 작업) 자바스크립트는 멀티 쓰레드 불가능 ❌ 👉 비동기로 해결 비동기 (asynchronous) : 작업을 순서대로 처리하지 않음 X 콜백 함수로 비동기 처리 👉 콜백 지옥에 빠짐 👉 promise 사용 📌 promise : 비동기 작업을 효율적으로 처리할 수 있도록 도와주는 내장 객체 promise는 비동기 작업을 감싸는 객체 프로미스를 이용하면 콜백 함수를 이용한 비동기 처리보다 더 쉽게 비동기 작업을 수행할 수 있다. promise 진행 단계 대기(Pending): 작업을 아직 완료하지 않..

자바스크립트 정리 - 심화 단락 평가 : 논리 연산에서 첫 번째 피연산자의 값만으로 해당 식의 결과가 확실할 때, 두 번째 값은 평가하지 않는 것 && 👉 둘 다 true여야 true || 👉 둘 중 하나만 true여도 true 조건문 없이도 조건 확인 가능 function printName(person) { const name = person && person.name; console.log(name || "person의 값이 없음"); } printName(); // 함수 인자값으로 undefined 전달 // undefined(False) &&은 이미 F이기 때문에 person.name엔 접근 X => const name = person(undefined) // F || T이므로 "person의 값..

자바스크립트 정리 - 기초 명시적 형변환 내장함수를 이용하여 직접 형 변환 문자열 👉 숫자 Number(값) let str1 = "10"; let strToNum1 = Number(str1); (숫자가 아닌 문자열을 포함한) 문자열 👉 숫자 parseInt(값) let str2 = "10개"; let strToNum2 = parseInt(str2); 숫자 👉 문자열 String(값) let num1 = 20; let numToStr1 = String(num1); nullish 병합 연산자 존재하는 값을 추려내는 기능 null, undefined가 아닌 값을 찾아내는 연산자 let var1; // undefined let var2 = 10; let varr = var1 ?? var2; // varr = 1..

정규표현식 (Regular expression, RegExp) 슬래시(/)와 슬래시(/) 사이에 검색할 문자열 패턴을 넣고, 슬래시가 끝나는 순서에 필요에 따라 플래그를 추가할 수 있다. /^hello-/d{2,3}$/g; 플래그 슬래시(/)가 끝난 뒤에 붙임 선택적으로 사용 가능 순서와 상관없이 하나 이상의 플래그를 동시에 설정 가능 플래그를 사용하지 않는 경우, 문자열 내 검색 대상이 1개 이상이더라도 첫번째 조건 대상만을 검색하고 종료 i (ignore case) : 대소문자를 구별하지 않고 검색 g (global) : 문자열 내의 모든 패턴을 검색 m (multi line) : 문자열의 행이 바뀌더라도 계속 검색 패턴 매칭하여 검색하고 싶은 문자열 일반 문자와 특수 문자 사용 가능 일반 문자 - ..

숫자 천 단위 콤마(,) 찍기 toLocaleString() 날짜나 숫자를 문화권에 맞는 표기법의 문자열로 반환 number / date / array 에서 활용 number date array 3자리마다 콤마(,) 사용자의 문화권에 맞는 시간 표기법으로 년,월, 일, 시간 반환 array 내용을 문자열로 반환 const date = new Data(); date.toLocalString(); // "2024. 03. 12. 오후 15:45:45" const price = 20000; price.toLocalString(); // 20,000 const array = [1, 'a', 234, date]; array.toLocalString(); // "1,a,234,2024. 03. 12. 오후 15:4..

상품 옵션(option) / forEach문 / JS로 HTML 다루기 태그 : 드롭다운 메뉴를 만드는 태그 태그 안에서 태그와 함께 사용 상품선택 모자 셔츠 - 자유로운 형식 / 직접 입력 vs - 제한적인 형식 / 선택 이벤트 : 입력값이 바뀔 때마다 발생하는 이벤트 입력칸에서 값을 변경할 때는 (마우스로 선택하는 입력칸이어도) 클릭(click) 이벤트가 아닌 input 이벤트를 사용해야 한다. document.querySelectorAll('.form-select')[0].addEventListener('input', function() { ... }); e.currentTarget : 이벤트(addEventListener)가 붙어 있는 타켓을 가리킨다. e.currentTarget == this ..

마우스 이벤트 (mouse event) mousedown : 마우스로 누를 때 발동 mouseup : 마우스를 뗄 때 mousemove : (해당 요소에서) 마우스를 움직일 때 e.clientX : 현재 마우스 위치의 X좌표 document.getElementsByClassName('slide-box')[0].addEventListener('mousemove', function(e) { console.log(e.clientX) }); 터치 이벤트 (touch event) touchstart : 터치 시작 시 발동 touchend : 터치 종료 시 발동 e.changedTouches[0].clientX : 현재 터치 위치의 X좌표 touchmove : 터치 중 발동 e.touches[0].clientX :..

웹 개발 라이브러리 정리 npm 라이브러리 설치 / 수정 / 삭제 / 버전 관리 Node.js의 패키지를 관리할 수 있는 도구 Node.js 프로그램 설치하면 따라옴 Node.js 구글이 만든 자바스크립트 해석 엔진 자바스크립트 코드를 컴퓨터 친화적인 코드로 변환해서 돌려주는 엔진 브라우저를 키지 않아도 자바스크립트를 컴퓨터에서 수행할 수 있음 Vite, Webpack, parcel, snowpack Bundling tool 소스코드를 분석해서 꼭 필요한 js파일과 코드만 남겨주는 작업 브라우저 친화적인 .js 파일로 변환해주는 기능 최신 자바스크립트 문법들을 호환성 좋은 예전 문법으로 바꿔주는 기능 React, Vue SPA (Single Page Application, 단일 페이지 어플리케이션) : ..