개발 기록 남기기✍️

🔍 Babel이란 바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시켜 IE나 다른 구형 브라우저에서 동작할 수 있도록 하는 역할을 한다. 바벨 공식 사이트에서 "Babel is JavaScript compiler"라고 소개한다. 바벨은 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행하는 트랜스 파일러이다. // ES6 화살표 함수와 ES7 지수 연산자 [1,2,3].map(n => n ** n); IE와 다른 구형 브라우저에서는 이 두 가지 기능을 지원하지 않을 수 있다. Babel을 사용하면 위 코드를 아래와 같이 ES5 이하의 버전으로 변환할 수 있다. "use strict"; [1,2,3].map(functi..

input의 type을 number로 지정하지 않은 상태에서, input의 값이 number인지를 유효성 검사를 하려고 했다. 숫자가 아닌 값을 Number로 형변환해주면 NaN이 나오기 때문에, typeof Number(value) === 'NaN'을 시도해봤다. console.log(Number('123eee')); // NaN console.log(typeof Number('123eee')); // "number" 하지만 숫자이든 문자이든 간에 모든 값이 다 false로 뜬다. 실제로 형변환한 값을 console.log로 찍어보면 number가 나오는 것을 알 수 있다. 그렇다면 어떤 방법으로 데이터가 NaN인지 확인할 수 있을까? 방법 1. isNaN( ) 그거슨 바로, isNaN() isNaN은..

이번 4차 과제로 바닐라 자바스크립트로 쇼핑몰 구현하기를 하고 있다. 그 중, 장바구니 페이지에서 각 상품의 checkbox를 클릭하면 checkbox가 toggle됨과 동시에 오른쪽의 총 금액도 바뀐다. 일단, 금액을 표현해야 하기 때문에 Number.prototype.toLocaleString()을 사용하여 숫자형 데이터를 우리 나라의 숫자 표현방식으로 문자열로 변환했다. ⬇️toLocaleString 메서드 보기⬇️ 더보기 Number.prototype.toLocaleString() 지정된 지역에서 사용하는 숫자의 표현방식으로 문자열로 리턴한다. NumberObject.toLocaleString([locales [, options]]) Syntax locales - 내가 표현하고자 하는 지역의 언어..

🃏 카드 짝 맞추기 게임 제작 기간 : 2023-01-16 ~ 2023-01-26 (11일) 사용 언어 : HTML, SCSS, Javascript 데모 사이트 : JAVASCRIPT PAIRS GAME ✨ 페이지 소개 카드 짝 맞추기 게임을 할 수 있습니다. 페이지가 로드될 시 카드가 무작위로 섞입니다. 카드 섞는 함수 let shuffledCards = []; function shuffle(cards) { for (let i = cards.length - 1; i >= 0; i--) { let makeRandom = Math.floor(Math.random() * cards.length); shuffledCards.push(cards[makeRandom]); cards.splice(makeRandom..

✌️✊🖐️ 가위바위보 게임기 ✌️✊🖐️ 제작 기간 : 2023-01-11 (1일) 사용 언어 : HTML, SCSS, Javascript 데모 사이트 : 가위바위보 가위바위보 VS 리셋 야호 내가 이겼다~! 다음 게임 rock-scissors-papers-yousunzoo.netlify.app ✨ 페이지 소개 컴퓨터와 함께 가위바위보 게임을 할 수 있습니다. 🔎 특징 게임 작동 방식 사용자의 측에서 선택한 옵션과 컴퓨터 측에서 랜덤으로 출력한 옵션을 비교해서 일반적인 가위바위보 규칙에 따라 점수가 업데이트되는 방식으로 작동합니다. setInterval(function () { readyImgs[i].classList.add("show"); readyImgs[i === 0 ? 2 : i - 1].class..

Math.random() 은 0 이상 1 미만 (0 ~ 0.9999...) 의 난수(랜덤한 숫자)를 반환한다. 보통 Math.random() 값에 10을 곱한 뒤, Math.floor()를 통해 소수점 아래 부분을 내림해 0 이상 10 미만 정수를 만드는데 많이 쓰인다. 그런데, 0 ~ 10 사이 수가 아닌, 내가 원하는 범위 내에서 랜덤한 값이 반환되게 하고 싶으면 어떻게 해야할까? 일단, 랜덤함수의 범위는 0

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다. [자바스크립트 중급 강좌 : 140분 완성 - YouTube](https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s) 1. Class class는 ES6에 추가된 스펙이다. const User = function(name, age){ this.name = name; this.age = age; this.showName = function(){ console.log(this.name); }; }; const mike = new User("Mike", 30); console.log(mike); // User{name : "Mike", age: 30, showName()}; // Class 사용 class Us..

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다. [자바스크립트 중급 강좌 : 140분 완성 - YouTube](https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s) 1. setTimeout / setInterval setTimeout 일정 시간이 지난 후에 함수를 실행한다. setInterval 일정 시간 간격으로 함수를 반복한다. function fn(){ console.log(3) }; setTimeout(fn, 3000); setTimeout(function(){console.log(3)},3000); // 3초 뒤에 console 창에 3 띄 clearTimeout(함수) 예정된 setTimeout 함수를 취소한다. clearInterval(함..

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다. [자바스크립트 중급 강좌 : 140분 완성 - YouTube](https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s) 1. 구조 분해 할당 구조 분해 할당 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 let users = ["Mike","Tom"]; // let user1 = users[0]; // let user2 = users[1]; let [user1, user2] = users; console.log(user1); // "Mike" console.log(user2); // "Tom" let str = "Mike-Tom-Jane"; let [usr1, usr2, usr3..

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s 1. 문자열 Method ✔️ html 코드를 감쌀 때는 작은 따옴표로 감싸고 안에 class나 id 같은 속성값은 큰 따옴표로 감싸는게 낫다. ✔️영어 문장은 큰 따옴표로 감싸는게 낫다. ✔️백틱을 사용하면 여러 줄의 문장 표현이 가능하다. str.length 문자열의 길이를 보여준다. str[n] 문자열의 n번째 위치를 보여준다. 배열이나 객체와는 달리 글자를 바꿀 수는 없다. toUpperCase() / toLowerCase 영문자를 모두 대문자화 / 소문자화 str.indexOf(text) 해당 text가 문자열 중 몇 번째에 위치하는지를 파악한..