Starters Starters

한국 영어 출처: https://zzdd1558.tistory.com/245 [YunJin_Choi] // 다국어 언어 예시. let multiLanguage = { "ko" : { msg : "안녕하세요.", title: "한국어", }, "en" : { msg : "Hello World.", title: "English", } }; window.onload = () => { let koBtn = document.getElementById("koBtn"); let enBtn = document.getElementById("enBtn"); let setLanguage = (lang) => { let changeNodeList = Array.prototype.slice.call( document.query..

모달이란? - 기존의 브라우저 내용 가리면서 팝업처럼 뜨는 것 HTML 안녕하세요! 내용내용내용 모달 열기 안녕하세요 모달 내용입니다~~~~ 닫기 CSS .modal-wrapper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .modal{ background: white; padding: 24px 16px; border-radius: 4px; width: 320px; } .modal p{ font-size: 16px; } .modal-title{ font-size: 24p..

HTML 0 +1 -1 JS const number = document.getElementById('number'); const increase = document.getElementById('increase'); const decrease = document.getElementById('decrease'); console.log(number.innerText); console.log(increase.offsetTop); // top 위치 알수 있음 console.log(decrease.id); increase.onclick = () => { // parseInt 정수형으로 변환, 뒤에 파라미터는 몇 진수로 할 것인지 const current = parseInt(number.innerText, 10); ..

Promise.all function sleep(ms){ return new Promise(resolve => setTimeout(resolve, ms)); } const getDog = async () => { await sleep(1000); return '멍멍이'; } const getRabbit = async () => { await sleep(500); return '토끼'; } const getTurtle = async () => { await sleep(3000); return '거북이'; } async function process(){ const dog = await getDog(); console.log(dog); const rabbit = await getRabbit(); consol..

JS 에서 비동기적 작업을 할 때 Promise를 더욱 쉽게 사용할 수 있게 해주는 함수들 // 몇 ms 이후에 끝나는 함수 function sleep(ms) { // 특정 ms 이후 resolve가 호출되고 함수 끝남 return new Promise(resolve => setTimeout(resolve, ms)); } // 함수 앞에 async 라고 써주면 됨 async function process(){ console.log('안녕하세요!'); await sleep(1000); // promise의 앞부분에 await 써줌 console.log('반갑습니다!'); } process(); .then() ~~ 이런식으로 사용하지 않아도 된다. async 를 사용하면 해당 함수는 promise를 반환하게..

callback 함수 사용해서 어떤 작업 이후에 다른 작업 실행하게 했음 하지만 작업이 많아지게 되면 코드가 복잡해졌음 ==> Promise 사용 1초마다 1씩 더해지는 알고리즘 function increaseAndPring(n, callback){ setTimeout(() => { const increased = n + 1; console.log(increased); if(callback){ callback(increased); } }, 1000); } increaseAndPrint(0, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { consol..

동기적 / 비동기적 처리 동기적 처리 function work(){ const start = Date.now(); // 현재 날짜를 숫자형태로 표시 for (let i = 0; i { const start = Date.now(); // 현재 날짜를 숫자형태로 표시 for (let i = 0; i < 1000000000; i++){ } const end = Date.now..

Hoisting - js에서 아직 선언되지 않는 함수 또는 변수를 끌어 올려서 사용하는 js의 작동 방식 myFunction(); function myFunction(){ console.log('hello'); } JS는 위처럼 함수 선언과 호출의 순서가 달라져도 똑같이 값을 가진다. 하지만 const나 let에서는 hoisting발생하지 않음 hoisiting은 최대한 발생하지 않게 하는 것이 좋다. 코드가 복잡하고 이해하기 어려워질 수 있기 때문