2023.12.5 기록 (자주 쓰는 VSC 단축키, wordle 만들어보기)

• 유용하게 쓸만한 vsc의 단축키(shortcut)을 기록했다.
• Javascript로 게임을 만들 때 자주 사용되는 반복문을 접해보았다.

 

ctrl + L : 코드를 전체 선택(하이라이트) 할 수 있다.

ctrl + ← , → : 좌,우 단어 단위로 넘어간다

alt + (L click) 문장 다 중선택이 가능하다 (이후 타이밍 시 선택한 문장 전부에서 같은 내용이 작성된다.)

alt + ↑ , ↓ : 내가 지금 작성한 코드를 위 아래로 밀 수 있다(자리를 옮길 수 있다.)

alt + shift + ↓ : 작성한 코드를 복사 할 수 있다. (복사된 내용과는 별도로 늘어난다.)

 

---

* 궁금했던 점. 

`` (백틱)을 언제 사용하는지 단순한 의문이 들어서 찾아봤는데,

다행히도 나와 같은 고민을 가진 사람을 찾을 수 있었다.

https://spartacodingclub.kr/community/fastqna/all/631c3d9f6a94af1725a4be56/%EB%B0%B1%ED%8B%B1%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0%20

스파르타코딩클럽 커뮤니티 | 스파르타코딩클럽 수강생이라면 누구나

 

요약하자면 백틱을 사용하여 문자를 표현하면, 변수값을 포함 시킬 수 있다. 정도 였다. 

 

("문자열" + 변수값)  -> (`문자열${변수값}`); 이런느낌

 

변수값을 ${ } 로 묶어주면 된다.

 

사소한 궁금증이라고 생각해서 관습적으로 넘어가던 부분을 한 번 짚어 볼 수 있었다.

---

 

• javascript를 이용한 간단한 게임 제작을 통해 eventListener 와 반복문을 살짝 맛봤다.

 

오늘 공부에 도움이 된 영상

https://youtu.be/npvrAzxgTOQ?si=660OCX_lbJzU-4fT

 

오늘 부분에서 핵심은 이 부분이라고 생각한다

var 답 = 'abcde';

        
        document.querySelector('button').addEventListener('click',
            function () {

                var input = document.querySelectorAll('.input');
                for (let i = 0; i < 5; i++) {
                    if (input[i].value == 답[i]) {
                        input[i].style.background = 'green';

                    } else if (답.includes(input[i].value)) {
                        input[i].style.background = 'yellow';

                    } else {
                        input[i].style.background = 'lightgrey';
                    }
                    input[i].classList.remove('input');
                }

 

변수 답은 abcde 라는 알파뱃 5글자의 값이다.

button에 대한 이벤트로 클릭시 다음과 같은 내용을 실행한다.

 

변수 input에 대한 반복문을 작성한다

0부터 5까지 점진적으로 진행한다.

 

class의 값이 답의 값과 일치 할 경우 green

그 외에 답에 포함하는 값을 가지고 있을 경우 yellow

그 외에 일치하는 부분이 없을 경우 lightgrey

 

해결해야하는 과제는 다음과 같다.

 

• 맨 마지막 classlist에서 input class를 제거하는 이유 (아마 반복문에서 누적되는 값을 중복체크 하는 이유 때문인 것 같지만)를 정확히 알아볼 것 
• 아무것도 넣지 않았을 때 공백이 lightgrey 값이 아닌 yellow로 출력되는 것을 해결하기.