개발 🐾

리액트에서 간간이 사용되는 switch문.기능은 if문과 비슷해보이는데 자주 써본적이 없어서 둘의 차이가 궁금해졌다. 알고있던 내용 📍if문 형태 : if(조건) {로직1} else {로직2};설명 : if문의 조건이 참일 때 로직1이 실행되고 거짓일 때 로직2가 실행된다.로직에는 변수 선언, 함수, 삼항연산자 등 다양한 값이 들어갈 수 있다.  📍switch문형태 :switch (요소) { case "a" return "a-1" break; case "b" return "b-1" default : return "c-1"};설명 : 인풋으로 들어온 요소의 값이 a라면 a-1을, b라면 b-1을, 그 무엇도 아니라면 c-1을(default의 값) 반환한다.bre..

문제  이름 나이 이메일 확인  빈 곳을 채우면 된다.1, 2, 4는 완성했지만 3번에서 막혔다!  문제 풀이1. 이름, 나이, 이메일 중 하나라도 입력되지 않은 경우: alert "모든 정보를 입력해주세요."submitBtn.addEventListener("click", function () { if(nameInput.value === "" || ageInput === "" || emailInput === ""){ alert("모든 정보를 입력해주세요."); } 입력한 값은 변수명.value를 통해 을 가져올 수 있다.값이 공백인 경우는 ""로 나타낼 수 있다.하나라도 입력되지 않은 경우는 or(||)로 표현할 수 있다.(true || false || false ..

데이터 타입과 연산자에 대한 교육 후 실습 문제 8개를 풀었다. 문제 감소 1 증가 아직 완성되지 않은 부분을 추가하면 된다.  문제 풀이1. const로 button과 span 태그를 지정해준다.- class이기 때문에(".")을 이용한다.const plusBtn = document.querySelector(".plus-btn");const minusBtn = document.querySelector(".minus-btn");const number = document.querySelector(".number");  2. 증가 로직을 구현한다.- addEventListener 를 통해 버튼을 "클릭"했을 때 함수를 구현하게 한다.plusBtn.addEventListener("click", func..

논리 연산자를 사용하여 조건문을 처리할 때전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식을 말한다. 단축 평가는 주로 && (논리곱), || (논리합), ?? (null 병합 연산자)를 사용할 때 발생한다. 논리합( || ) 연산자논리합 연산자 ||는 좌변의 피연산자가 falsy 값(false, 0, "", null, undefined, NaN)일 때만 우변의 피연산자를 평가한다.좌변의 피연산자가 truthy 값일 경우, 그 값이 바로 결과값으로 반환되며, 우변은 평가되지 않는다. 쉽게 설명하자면 A || BA가 false라면 B를 반환하고,A가 true라면 B는 무시, A에 맞는 값을 반환한다. +) falsy한 값 : false, 0, "", null, undefined  📍예시/..

함수를 간단하게 나타낼 수 있는 화살표 함수, 일명 arrow function.간단하게 나타내려다보니 기존의 형태를 잊어버리는 경우가 있다. Arrow function 📍기존 함수 형식const add = function (a, b) { return a + b;}console.log(1, 3);  📍화살표 함수로 나타내기1. function을 없애고 화살표로 대신하기const add = (a, b) => { return a + b;}console.log(1, 3); 2. return문이 한 줄일때는 중괄호와 return 생략하기const add = (a, b) => a + b;console.log(1, 3);  화살표함수로 나타내었지만 console.log를 어디서 찍어야 할 지 헷갈리는 경우,원래의..

형태는 ...변수명 으로spread operator와 닮아있지만, 사용방법은 매우 다른 rest operator  Rest operator📍사용방법나머지 연산자(= rest operator)는 함수의 매개변수에서 사용되거나, 객체 리터럴이나 배열 리터럴에서 남은 부분을 하나의 변수로 그룹화할 때 사용된다. 예를 들어 함수에서 여러 인수를 배열로 그룹화하거나,객체 분해 할당(destructuring)에서 특정 속성을 제외한 나머지 속성들을 새 객체로 그룹화할 때 사용한다.더보기객체 리터럴(배열 리터럴)? 단순히 중괄호 {}를 이용하여 객체를 직접 선언하는 방식이다. 배열리터럴도 마찬가지 []를 통해 직접 선언하는 방식이다.  📍함수의 매개변수배열로 들어오지 않는 input을 한 군데에 묶을 때 사용한다..

문제 1.가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요.var user = { name: "john", age: 20,}**var getAged = function (user, passedTime) { newUser = { name: "john", age: 20, } newUser.age += passedTime; return newUser; }** => 이 부분만 추가 함var agedUser = getAged(user, 6);var agedUserMustBeDifferentFromUser = function (user1, user2) { if (!user2) { consol..

문제조건이 맞을 때 색깔 변경하기조건 : 미세먼지 값이 40을 넘을 때 빨간색 글씨로 보이게 해라.  1. li 값이 "bad"임을 먼저 지정하기2. class = "bad"에 대한 css 스타일 값 지정하기3. if 함수를 실행하기 위해let temp_html = ``; 먼저 지정하기-> temp_html은 조건에 따라 결과가 변하기 때문에공백임을 먼저 명시해야 한다!!4. if함수 작성하기-> 미세먼지 값 > 40 이면 class = "bad"아니면 기존 형식

1. .append 활용해서 웹페이지에 나타내기버튼 클릭 시 실시간 업데이트 내용이 나타난다.하지만 버튼을 누를 때마다 기존 내용에 추가로 붙는다.   2. 기존 내용 지우고 업데이트 하기 fetch 이전의 내용을 삭제하기 위해 .empty를 상단에 추가한다.   3. 기존 내용 지우기기존에 있던 내용을 없애기 위해서는 vscode에서 그냥 지우면 된다.

RealtimeCityAir 자료 사이트 1. 딕셔너리형태에서 한 가지 정보 가져오기[0]으로 지정해서 0번째 결과만 보여진다.   2. 딕셔너리에서 전체 값 가져오기지정하지 않아서 전체 값이 나온다.   3. 딕셔너리에서 각각의 값 가져오기forEach를 통해 각각의 값이 나온다.   4. 딕셔너리에서 필요한 값만 가져오기각각 가져온 값(구 이름, 미세먼지 정도)가 나온다.