평균 구하기

https://programmers.co.kr/learn/courses/30/lessons/12944

function solution(arr) {
    var answer = 0;
    for (let i = 0; i < arr.length; i++) {
        answer += arr[i];
    } answer /= arr.length;
    return answer;
}

핸드폰 번호 가리기

https://programmers.co.kr/learn/courses/30/lessons/12948

function solution(phone_number) {
    var answer = '';
    let star = '';
    let num = '';
    for (let i = 1; i<phone_number.length-3; i++) {
        star += '*';
    }
    for (let i = phone_number.length-4; i<phone_number.length; i++) {
        num += phone_number[i];
    }
    answer = star + num;
    return answer;
}

Prep Guide STEP 4 Backgorund Changer

Day 2

1. 랜덤한 Hex color code를 생성하는 함수 작성하기 위해 일단 16자리 헥스코드 string을 짬
2. 랜덤한 헥스코드 string HexNum에서 16가지 요소를 랜덤으로 뽑아와서 빈 스트링에 더하는 식으로 구상
3. 0~15의 정수중 랜덤으로 수를 뽑기위해 정수로 작거나 같은 정수로 만들어주는 메소드 Math.floor와 0이상 1미만의 랜덤한 수를 뽑는 메소드 Math.random에 16을 곱해서 같이 사용을 해 0이상 16미만의 정수를 뽑도록 만듬

let HexNum = "0123456789ABCDEF"

function randomHex () {
    let randomHexNum = ""
    for (let i = 1; i<=6; i++) {
        randomHexNum += HexNum[Math.floor(Math.random() * 16)];
    }
    return randomHexNum
}

console.log(randomHex ());

콘솔로 찍어보니 새로고침할때마다 6자리 랜덤한 헥스코드가 잘 나옴

• 프렙에 짜여진 함수를 보니 Math.random에 16을 곱한게 아니라 배열의 길이를 곱해줬다. 나는 배열의 길이를 직접세서 16을 넣었지만 배열의 길이가 길어져 직접세기 힘든경우가 생길수도 있으니 배열의 길이를 곱해준다는 아이디어가 더 유연하게 사용될것 같다.
• 나는 랜덤한 HexNum을 뽑아오는걸 string에서 했는데 프렙에선 array에 했다. 최근 읽고있는 코어 자바스크립트에서 string은 기본형데이터이고 array는 참조형데이터라했고 참조형데이터는 불변객체가 필요한 상황에 사용될 수 있다했다. 아직 책을 많이 읽지않아 어떤게 데이터를 더 효율적으로 사용하는 방법인지 잘 모르지만 알게되면 string이 유리한지 array가 유리한지 따져봐야겠다

Day 3

randomHex()가 필요한 곳에 각각 넣었더니 모두 동일한 HEX CODE가 나온게 아니라 개별적으로 실행되서 모두 랜덤한 값이 나옴. 모두 같은 값이 적용될수 randomHex()에서 나온 값을 받는 변수를 설정해줌.
그 변수를 change 함수 밖에 놓으니 한번 클릭된후 바뀌는 변수가 적용이 안되어서 change 안에 넣어줌.

• 버튼 클릭시 너무 아무 이펙트가 없어서 웹사이트가 생생한 느낌이 안들어 버튼을 눌렀을때 이펙트주는법에 대해 검색해서 css로 hover와 active효과를 주었다.

https://github.com/roadzmoon76/background-changer
https://zmoon-background-changer.netlify.app/

Prep Guide STEP 4 Carousel

Day 1 완료

Day 2 완료

• 그냥 이미지는 addEventListener로 click 이벤트를 주어도 반응이 없었다. 실험을 해보니 button에 click이벤트를 줘야 반응이 있었다.
• 버튼을 이미지로 만드려니 너무나 고생했다 버튼 자체를 이미지로 만들수가 없어서 input도 써보고 button도 써보고 별걸 다 해봤는데 input은 스타일을 주는게 힘들었다. 결국 button안에 이미지를 넣고 opacity 말고 background color를 투명으로 줘서 해결했다.
• 위의 방법대로 했더니 이미지에 class가 안먹혀서 이미지 위에 버튼을 줘보기로 함
• 하다보니 그냥 이미지만 했는데도 click이 잘 먹혔다. 오타났었나보다...
• 알고보니 font awesome 에서 쓴 아이콘에 click이 안먹히는 거였다 ㅠ
• 각 순번 이미지에 맞는 클릭이벤트를 주기위해 기존의 이미지 src를 읽는 if 문을 작성하는데 상대경로로 하면 작동을 안하고 콘솔을 찍어서 나온 링크로 입력을 해줘야 반응을 했다.
• 최종적으로 인터넷에서 찾은 img 아이콘은 색상 변경이 안먹혀서 hover 이벤트를 줄수가 없었고, font awesome은 addEventListener의 click 이벤트가 먹히지 않아서, 투명한 버튼을 만들고 그위에 font awesome 아이콘을 올려두는 방법을 썼다. 그래서 실제 버튼이 눌리는 영역이 아이콘 영역보다 살짝 큰 문제가 발생했다. > 이것도 버튼자체에 border-radius를 좀 줘서 실제 아이콘과 비슷한 영역을 갖도록 해결해줬다.

Day 3

Day 2의 알고리즘을 짤때 아예 순환되는것 까지 고려해서 짰다