switch 조건문복수의 if 조건문은 switch문으로 바꿀 수 있으며 switch문은 다양한 상황에서 비교할 수 있게 해준다.switch조건문은 switch문과 case문으로 구성되며 switch의 변수와 case의 상수를 비교하여 일치하면 실행, 일치하지 않으면 다음 case문으로 넘어간다.switch() 괄호 안에는 변수, 상수, 비교 연산자 등 자유롭게 설정 할 수 있지만, case 문 뒤에는 상수 값만 올 수 있다.문법switch (expression) { case caseExpression1: statements case caseExpression2: statements // … case caseExpressionN: statements default: stat..

자바스크립트 반복문종류for 문for...in 문for…of 문forEach()while 문do…while 문 for 문문법: for ( [초기문]; [조건문]; [증감문] ) {반복 코드}변수 선언 시, const 를 쓰면 값 변경이 불가 하여 let 사용해야 한다.for (let i = 0; i  for…in 문문법 : for( const key in 객체 ) {반복 코드}const obj = { id: '1', user: 'Mia'}for (const key in obj){ console.log(`${key} : ${obj[key]}`);}// 결과// "id : 1"// "user : Mia" for…of 문문법 : for( const item of 이터러블 ) {반복 코드}con..

자바스크립트에서 HTTP Requests를 위한 방법으로는 Fetch 와 axios가 있다.Fetch 와 axios는 모두 promise 기반의 HTTP 클라이언트로 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부(reject) 할 수 있는 promise가 반환 된다.PromisePromise는 비동기 처리에 사용되는 객체로 ES6에서 도입되었다.비동기 처리란 ‘ 특정코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성 ‘ 이다.Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스 객체를 생성하게 된다.비동기 처리 결과로 resole, reject 과 진행 상태로 pending, fulfilled,rejected를 갖는다.대기(p..

javascript에서 배열에 원하는 특정 값이 포함되어 있는 지 확인하는 방법이 여러가지 있다.indexOf()string 객체에서 주어진 값과 일치하는 첫 번째 인덱스 반환한다. 일치하는 값이 없으면 -1을 반환한다. ( 대소문자를 구분한다 )문법 : str.indexOf(searchValue[, fromIndex]) ( fromIndex는 optional한 값 )fromIndex 찾기 시작하는 위치를 나타내는 인덱스 값으로 아래 예시 중 마지막 str.indexOf("I", 5) 에서 “ I ” 위치 뒤인 5번 부터 시작하여 -1을 반환한다.See the Pen indexOf() by pminsun (@pminsun) on CodePen. lastIndexOf()주어진 값과 일치하는 부분을 fro..

타이머와 관련된 함수로는 setTimeout(), setInterval() 가 있다.setTimeout()설정한 시간이 지난 후 코드를 실행시킨다.문법 : setTimeout(functionRef, delay, param) ( delay, param은 optional한 값 )// functionRef (delay생략)setTimeout(() => console.log("바로 실행"));// functionRef & delaysetTimeout(() => console.log("5초 후에 실행됨"), 5000);// param 사용function weather(today, phrase) { console.log( today + ' 은 ' + phrase );}setTimeout(weather, 1000,..

const foods = ['pizza', 'apple', 'melon', 'pasta', 'coke'];console.log(foods.slice(2));// 결과 : ["melon", "pasta", "coke"]console.log(foods.slice(2, 4));// 결과 : ["melon", "pasta"]console.log(foods.slice(-2));// 결과 : ["pasta", "coke"]console.log(foods.slice(2, -1));// 결과 : ["melon", "pasta"]Javascript에서 문자열을 자르는 방법은 split(), slice(), substring() 를 활용한다. split 함수로 문자열 자르는 방법seperator로 문자열 분리하여 배열로 ..

모바일에서는 url 주소 창, 네비게이션 바의 높이를 뷰 포트(스크린)높이에 포함 시켜 pc에서처럼 화면에 꽉 차지 않고 실제 화면보다 크게 잡혀서 스크롤이 생긴다.  window.innerHeight 로 현재 뷰 포트 크기 가져와서 재정의 하기 next.js 에서는 최상위에 위치한 _app.js에서 적용하기//_app.jsfunction setScreenSize() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`);}useEffect(() => { setScreenSize();}); css 적용하기/* 필요한 곳에 적용 */height: calc(var(--v..