🚨❓26일(2022.01.23 7시간 48분) Prep Guide STEP 4 Carousel

roadzmoon76·2022년 1월 23일
0

매일 공부

목록 보기
27/217

Programmers Algorithm : 짝수와 홀수

https://programmers.co.kr/learn/courses/30/lessons/12937#

function solution(num) {
    var answer = '';
    if (num % 2 === 0) {
        answer = 'Even';
    } else {
        answer = 'Odd'
    }
    return answer;
}
  • 짝수와 홀수에 대한 정의는 정수 k에 대해 짝수는 n=2k 로 나타나는 정수이고, 홀수는 n=2k±1 로 나타나는 정수이다. 그러니 -2, 0, 2 는 짝수로 나와야하고, -1, 1 은 홀수로 나와야 한다.
  • 다른 사람의 풀이를 보니 삼항연산자를 이용하여 매우 간결하게 풀었다. 아직 삼항연사자에 대해 불편해서 이참에 공부를 제대로 한후 벨로그에 기록해뒀다

Prep Guide STEP 4 Carousel

Day 3 🚨🚨🚨🚨🚨

  • bottombutton에 addEnentListener click을 주는데 계속 눌려있는 문제가 발생

    좌우버튼에 클릭효과를 준것과 똑같은 문법으로 썼는데, 버튼을 누르지도 않았는데 indexNum이 바뀌는 오류가 발생
    이유는 잘 모르나 예전에 if문을 배울때 n을 정의해두고 조건문안의 조건에서 n = 0 을 썼더니 조건문이 돌지 않았는데도 n=0으로 바뀌어 있던적이 있었는데 비슷한 원리로 뒤의 함수가 미리 실행돼서 생긴 오류로 추측함

    이런식으로 indexImage 함수에 들어가기 전에 on/off 스위치를 만들어주는 느낌으로 클릭매개변수를 받는 함수를 통과시킨후 indexImage함수로 들어가게 했더니 해결됨

    이런식으로 중간에 온클릭 함수를 한번더 매개하게 했어도 됐는데 구체적인 원리를 모르겠음. 그 위의 방식보다 함수를 하나 더 거치게 되므로 효율적인 방법은 아닌 것 같음. 혹시라도 한번 함수를 거쳤는데도 문제가 생길시에 시도해보면 좋을듯.

    생각해보니 매개변수는 그 함수 안에서 그 매개변수를 받을 떄나 필요한거지 클릭 자체를 받기위해서 필요한게 아닌거같아서 e를 빼고 써보니 정상 작동됨

  • Day 3 요구사항 까지 마쳤으나 해당 dot의 이미지가 나올때 해당 dot이 하얗게 되게 하는 효과도 있으면 좋을것 같아서 줌

이미지 하단 Dot를 누를 때 해당 순번의 이미지를 보여주는 로직을 구현할때, 클릭시에 해당 요소의 순서를 매개변수로 받아와서 바로 그 숫자의 사진이 뜨게하는 로직을 구현하고 싶었는데 매개변수에서 숫자만 받아오는 방법을 모르겠어서 일단 다른방법으로 함. 나중에 다시 생각해보기

https://github.com/roadzmoon76/Carousel
https://zmoon-carousel.netlify.app/
netlify 사이트에서 테스트 하니 반응이 너무 느렸다 ㅠ. 내 로직이 구린건지 사이트 문제인지 모르겠지만 어쨌든 정상작동 확인

Prep Guide STEP 5 Scope Quiz

Q3.❓❓❓❓❓

먼저 foo scope 내에서 선언된 a가 있나 따지고 없으니, bar scope에 가서 선언된 a가 있나 따지는데 a가 선언되지 않고 2라고 정해져있으니 undefined가 되어야 할거같은데 왜 2가 나오는지 잘 모르겠다.
혹시 몰라서

a = 2;
console.log(a);

를 해보니 동일하게 2가 나왔다. 근데 선언이 안됐는데 왜 undefined가 안나오고 2가 나오는지 모르겠다.

그나마 2가 나오는 이유가
1. 1번줄에서 변수 a 인식과 그 값이 1인거 인식
2. 3번줄 함수인식하나 실행은x
3. 14번줄에서 bar실행 인식
4. bar실행을 위해 3번줄로감
5. 5번줄 함수인식하나 실행은 x
6. 9번줄 a = 2; a가 bar scope 안에 선언 안되어있어서 인식 못함. grobal scope에서 var a = 1;인식후 var a = 2;로 인식해 둠
7. 11번줄에서 foo실행 인식
8. foo실행위해 5번줄 감
9. 6번줄 실행하기 위해 a찾아야하는데 foo 스코프에 없음
10. bar스코프에서 찾아보니 6번에서 인식해둔 var a = 2;가 있음

이런 과정을 거쳐서인것같은데 확실한지 모르겠다 ㅠㅠ

Q5.❓❓❓❓❓

얘도 확실히 잘 모르겠다

일단 혼자 생각한건
1. 1번줄에서 변수 x인식과 값이 1인거 인식
2. 3번줄에서 함수 foo 인식만 하고 실행 x
3. 11번줄에서 foo실행 인식
4. foo실행을 위해 3번줄 감
5. 4번줄 if 조건문의 x > 1을 따지기 위해 x를 찾음
6. 호이스팅 개념으로 컴퓨터는 아래와 같은 순서로 인식하기에 foo 스코프 내에서 4번줄의 단계에서는 x는 undefined 임

var x = 1; 
  
function foo () { 
    var x;
    if (x > 1) { 
        x = 2;
    } 
  
    console.log(x); 
} 
  
foo(); 

Prep Guide STEP 5 Primitive and Reference Quiz

Q5.❓❓❓❓❓

왜 기존 오브젝트가 나오나 궁금해서 혹시 이미 참조값으로 선언한 변수는 원시값으로 재설정이 안되나 해봤더니 그건 아니였다.
반대로 secret에 null을 설정하고 stuff에 오브젝트를 줬더니 또 같은 원리로 값이 나왔다.
이번엔 둘다 같은 유형의 값을 줬는데도 원시값일때나 참조값일때나 결과가 같았다.
이유를 도저히 모르겠다 ㅠㅠ
찾아보니 함수의 인자 전달 방식엔 3가지(call by value, call by address, call by reference)가 있는데 call by value 즉 값에 의한 호출방식을 사용할때 원시값을 복사해서 넘겨받으므로 callee내에서 어떤 행동을 하든 caller에 있던 값은 영향을 안받아서 그런거 같다. 제대로 이해가 안되서 더 공부해봐야겠다.

혹시 함수를 표현식, 선언식을 쓰냐에 따라 달라질까 싶어 실험해봤는데도 그대로였다

좀더 공부해 보니 자바스크립트에선 함수에 인자 전달 방식이 call by value만 존재한다고한다.
그래서 참조 타입을 인자로 넘기면 그 참조값이 가르키는 주소가 복사된 value(stuff)가 넘어가는데 다시 =연산자로 null로 재할당하므로 value(stuff)는 null의 데이터 주소를 바라보게 된것이고 기존의 secret이 바라보던 주소에 있는 데이터는 전혀 영향이 없는것이다.

위의 이해를 바탕으로 그럼 복사된인자와 시크릿이 바라보는 데이터주소가 같으므로 그 데이터주소가 가르키는 데이터 자체를 바꾸면 시크릿에도 영향이 갈거라 가정하고 진행해보니 변경된 값이 출력되었다


또한 아예 다른 오브젝트를 새로 정의해준다면 바라보는 데이터 주소자체가 달라져서 시크릿엔 영향이 없을거라고 가정하고 진행해보니 가정대로 결과가 나왔다

profile
크론병걸린 자퇴생, 개발자되기

0개의 댓글