20231024 TIL 자바스크립트 이해도 평가 및 모달 만들기

오늘의 목표

• 팀프로젝트 이해하기
• 자바스크립트 가이드 풀어보기
• 2강 정리

오늘의 개발, 새롭게 알게된 것

<해결된 문제>

2개 인자의 곱

// [요구사항]
// 아래 함수 multiply는 두 인자를 받아 곱한 값을 반환합니다. 해당 함수를 완성하십시오.

// [코드]
function multiply(a, b) { 
    return a*b;
 }console.log(multiply(2, 3))

배열의 합

// [요구사항]
// 주어진 숫자 배열의 모든 요소를 더하는 함수 sumArray를 작성하세요.

// // [코드]
function sumArray(arr) {
     let output = 0;
     for(let i= 0; i<arr.length ; i++){
        output+= arr[i]
     }

    return output;
    
} console.log(sumArray([1, 2, 3, 4, 6 ]))

for if 중첩

// [요구사항]
// 다음 배열에서 5보다 큰 숫자만 출력하세요. 그러나 8을 만났을 때 반복문을 종료하세요.

// // // [코드]
let numbers = [2, 4, 6, 8, 10, 12];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 5) {
        if (numbers[i] === 8) {
            break;
        } console.log(numbers[i])
    }
}

for if break

// [요구사항]
// 다음 배열에서 5보다 큰 숫자만 출력하세요. 그러나 8을 만났을 때 반복문을 종료하세요.

// // // [코드]
let numbers = [2, 4, 6, 8, 10, 12];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 5) {
        if (numbers[i] === 8) {
            break;
        } console.log(numbers[i])
    }
}

for 논리곱

// [요구사항]
// 1부터 100까지의 숫자 중에서 홀수만 출력하세요. 그러나 3의 배수인 홀수는 출력하지 마세요.

for(let i = 1 ; i <=100; i++){
    if(i%2!==0 && i%3!==0){
        console.log(i)
    }
}

for if continue break

// [요구사항]
// 다음 문자열 배열에서 'stop' 문자를 만났을 때 반복을 중지하고, 
//'skip' 문자를 만났을 때 해당 반복을 건너뛰고 나머지 문자열들을 출력하세요.

let words = ['apple', 'banana', 'skip', 'cherry', 'stop', 'date', 'elephant'];
for(let i = 0; i<= words.length; i++){
    if(words[i]==='skip'){
        continue;
    } if(words[i]==='stop'){
        break;
    } console.log(words[i]);
}

화살표함수

// [요구사항]
// 아래의 함수를 화살표 함수로 변환하세요.

// [코드]
function add(a, b) {
    return a + b;
}console.log(add(3,2))

let add = (a, b) => a+b ;
console.log(add(3,2))

삼항연산자

// [요구사항]
// 아래 변수 value의 값이 10보다 크면 "big"을, 그렇지 않으면 "small"을 
//변수 result에 저장하는 삼항연산자를 작성하세요.

// // [코드]
let value = 8;
let result = value > 10 ? "big" : "small"

console.log(result)

구조분해할당 객체

// [요구사항]
// 아래의 객체에서 name과 age 속성을 구조분해할당을 사용하여 각각의 변수에 저장하세요.

// [코드]
let person = { name: "Alice", age: 25, job: "Engineer" };
// 여기에 코드를 작성하세요.
let {name, age}= person;

console.log(name, age);

단축 속성명

// [요구사항]
// 아래의 변수들을 사용하여 단축 속성명을 이용한 객체를 생성하세요.

// [코드]
let a = "hello";
let b = "world";
// 여기에 코드를 작성하세요.
const obj = {a , b}
//const obj ={
//     a : a ,
//     b : b
// } 이렇게 되야하지만 key와 value가 같아서 생략
    

console.log(obj)

전개구문

// [요구사항]
// 아래의 배열을 전개구문을 사용하여 새로운 배열에 복사하세요.

// // [코드]
let fruits = ["apple", "banana", "cherry"];
let newFruits = [...fruits]

console.log(fruits)
console.log(newFruits)
console.log(fruits===newFruits)//false

DOM textContent

// [요구사항]
// 아래의 HTML 요소에서 id가 "myText"인 요소의 텍스트를 "Hello, DOM!"로 변경하세요.

// [HTML]

<div id="container">
    <p id="myText">Replace this text.</p>
</div>

let myText = document.getElementById("myText").textContent= "hello DOM!";

addEventListner click

// [요구사항]
// 버튼을 클릭하면 "Clicked!"라는 텍스트를 alert으로 띄우는 이벤트 리스너를 추가하세요.

// [HTML]

<button id="clickButton">Click me!</button>

let clickEvent = document.getElementById("clickButton")
const click= ()=>{
    alert ('clicked!')
} 

clickEvent.addEventListener('click', click)

해결 못한것

// [요구사항]
// 문자열 배열을 받아 모든 문자열을 대문자로 변환하고, 새로운 배열로 반환하는 함수 toUpperCaseArray를 작성하세요.

// [코드]
function toUpperCaseArray(strings) { // 여기에 코드를 작성하세요. }

// [테스트]
toUpperCaseArray(['apple', 'banana'])는 ['APPLE', 'BANANA']를 반환해야 합니다.

 

// [요구사항]
// 아래의 함수를 async/await를 사용하여 비동기로 작동하게 만드세요.

// [코드]
function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

// 여기에 코드를 작성하세요.

// [테스트]
// fetchData 함수를 호출하여 "Data fetched!" 문자열이 정상적으로 반환되는지 확인하세요.

// [요구사항]
// 아래의 함수에서 then, catch, finally를 사용하여 비동기 처리를 하고,
// 성공적으로 데이터를 가져오면 "Data: [데이터]", 에러가 발생하면 "Error: [에러 메시지]",
// 그리고 작업이 끝났을 때 "Process completed"를 출력하세요.

// [코드]
function fetchDataWithError() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Network Error");
        }, 1000);
    });
}

// 여기에 코드를 작성하세요.

// [테스트]
// fetchDataWithError 함수를 호출하여 적절한 메시지들이 출력되는지 확인하세요.

// [요구사항]
// 아래의 async/await 함수를 then ~ catch로 변환하세요.

// [코드]
async function getData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
}

// 여기에 코드를 작성하세요.

// [테스트]
// 변환된 함수를 호출하여 동일하게 데이터를 반환하는지 확인하세요.

// [요구사항]
// setTimeout을 사용하여 2초 후에 "Hello after 2 seconds"를 출력하는 함수를 작성하세요.

// [코드]
// 여기에 코드를 작성하세요.

// [테스트]
// 해당 함수를 호출하여 2초 뒤에 정해진 메시지가 출력되는지 확인하세요.

<4번 fail>

4개 중 3개 이상 풀지 못하였다면 당신은? 🤔

✓ 진단명 : 비동기 처리 혼란증

✓ 진단내용: JavaScript의 비동기 처리 방식, 특히 async/await, Promise와 관련된 메서드(then, catch, finally) 및 setTimeout의 사용법과 원리에 대한 이해가 부족함.

✓ 솔루션 : 자바스크립트 4주차 4-8(콜백함수_promise) ~ 4-10(콜백함수_제너레이터 및 async await) 복습 ⇒ generator 제외

// [요구사항]
// 아래의 HTML 요소에서 class가 "highlight"인 모든 요소의 텍스트색을 빨간색으로 변경하세요.

// [HTML]
/*
<div class="content">
    <p class="highlight">Change my color!</p>
    <p>Don't change my color.</p>
    <p class="highlight">Change my color too!</p>
</div>
*/

// [코드]
// 여기에 코드를 작성하세요.

// [테스트]
// 웹 페이지에서 class "highlight"를 가진 모든 요소의 텍스트색이 빨간색인지 확인하세요.

// [요구사항]
// 아래의 HTML 요소 중 "myList"에 새로운 항목 "Mango"를 추가하세요.

// [HTML]
/*
<ul id="myList">
    <li>Apple</li>
    <li>Banana</li>
</ul>
*/

// [코드]
// 여기에 코드를 작성하세요.

// [테스트]
// 웹 페이지에서 "myList"에 "Mango" 항목이 추가되었는지 확인하세요.

<5번 fail>

4개 중 3개 이상 풀지 못하였다면 당신은? 🤔

✓ 진단명 : DOM API 무감각증

✓ 진단내용: 웹 페이지의 구조와 내용을 동적으로 변경하기 위한 JavaScript의 DOM (Document Object Model) API에 대한 기본적인 이해와 활용 능력이 부족함.

✓ 솔루션 : 자바스크립트 5주차 5-2(선택자) ~ 5-5(이벤트 리스너) 복습.

 

 

modal 만들기 

우선 버튼에 모달 달아서 했는데 왜 하나만 나오지

 

 

오늘의 목표 도달

• 자바스크립트 가이드 풀어보기 => 풀 수 있는 문제 풀기 완. 근데 조금씩 참고해야했다.
• 팀프로젝트 이해해보기 => 상세페이지 모달을 만드는 역할을 맡게되어서 모달 만드는 방법을 조금 연구했다.

 

오늘의 코드 평가 및 느낀점

문제를 풀어보니까 뭐가 약한지 잘 보인다! 

 

내일 목표

• 내 개인 과제에 대입해보기
• 3강 정리하기