[220726] Daily Study Note

 

  Today's Plan  

Coding JavaScript   

(1) Pair Game

(2) 깃허브에 업로드하고 내용 정리

 

 

Studying JavaScript knowledge 

(1) Pair Game project하면서 나오는 개념들 정리

 

Training Coding Test with Python  

(1) 백트래킹

(2) 백준코딩 테스트 기출 3문제

---

1. Coding JavaScript   / Pair Game

(0) 어제 작업 분량

오늘 다시 보니 좌우정렬이 안 맞네요. 해당 부분도 수정예정사항에 포함시키겠습니다.

- 기본 요소들 HTML/CSS 셋팅

- 카드들 랜덤 디스플레이 기능

 

(1) 

- 클릭 시 카드가 플립되는 이벤트를 먼저 추가하고 싶었다.

- css적으로 구현하고자 했는데, 예전 잠시 따라하던 easyTutorials라는 유튜브 채널에 이런 css트릭들이 많이 있었던 것 기억에 참고하려고 들어가 확인했다.

 

// 참고한 영상 

https://www.youtube.com/watch?v=R6FupzzXzCM 

위의 영상을 보고 필요한 개념들을 정리해 내가 만들던 것에 녹이고자 했을 때 일단,

1. card-front, card-back으로 div 2개를 card div 안에 넣는 식으로 바꿨다. 

2. 그리고 두 요소의 위치를 동일선상에 두고, 

3. flipped 클래스가 card에 추가되면 transformY(180)을 사용해서 뒤집고자 하였다.

+ 이 때 overflow:hidden, backface-visibility:hidden, trnsfrom-style:preserve-3d 등 낯선 css개념들도 있었다.

 

그리고 이 상태..

원하는대로 움직이지를 않는다. ㅎㅎ💢

 

 

예상 작업 분량보다 기초적인 것에 시간 투자가 많이 되는 것 같고 + 최근 감이 너무 떨어져서 더 진행하기보다는, 

해당 프로젝트 소스코드를 보고 또 익힌 뒤에, 백지 노트 식으로 다시 따라서 응용하는 식으로 바꿔하려 한다.

 

 

 

🔹 예제 코드 분석 & 내 코드랑 비교

 

https://codepen.io/cathydutton/pen/avYKeM

JavaScript Pairs Game

 

  📁 Javascript code 

// 예제 코드
var images = [
  'sass', 
  'git', 
  'gulp', 
  'css', 
  'grunt'
];

var clone = images.slice(0); // duplicate array
var cards = images.concat(clone); // merge to arrays 

/* -------------------------------------------------------- */
// 내 코드
let cards = ['1','2','3','4','1','2','3','4']

예제 코드에서 구현한대로 정말 딱 저렇게 하고 싶었는데 실패했었습니다.

배열 메서드 정리하고 가겠습니다.

 

- Array.prototype.slice()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Array.prototype.slice() - JavaScript | MDN

: start, end를 옵션으로 줄 수 있고. start:end까지의 범위를 잘라 배열로 리턴해주는 메서드이다.

: 0으로 start옵션을 주면 시작점부터 끝까지를 잘라 배열로 리턴한다는 점에서, clone된것처럼 사용할 수 있다.

 

- Array.prototype.concat()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Array.prototype.concat() - JavaScript | MDN

: : 기존 배열을 변경하지 않는다.

: 배열을 추가시킨 새로운 형태의 배열을 반환한다.

ㅡ

// 예제 코드 Shufffel function
function shuffle(o){
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i],   o[i] = o[j], o[j] = x);
  return o;
}
shuffle(cards);

/* ----------------------------------------------------------*/
// 내 코드 셔플 함수
cards = shuffle(cards);
function shuffle(array) {
    let currentIndex = array.length,  randomIndex;
  
    // While there remain elements to shuffle.
    while (currentIndex != 0) {
  
      // Pick a remaining element.
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
  
      // And swap it with the current element.
      [array[currentIndex], array[randomIndex]] = [
        array[randomIndex], array[currentIndex]];
    }
  
    return array;
  }

:복잡성의 차이가 너무 나서 예제코드를 확인하기를 잘 했다 싶었습니다.

: 

ㅡ

// 내 코드. 
for (card of cards){
    let cardBox = document.createElement('div');
    cardBox.setAttribute('class','card');
    let cardFront = document.createElement('div');
    cardFront.setAttribute('class','card-front');
    let cardFrontSpan = document.createElement('span');
    cardFrontSpan.textContent = '?';
    cardFront.append(cardFrontSpan);

    let cardBack = document.createElement('Back');
    let cardBackSpan = document.createElement('span');
    cardBack.setAttribute('class','card-back');
    cardBackSpan.textContent = card;
    cardBack.append(cardBackSpan);

    cardBox.append(cardFront);
    cardBox.append(cardBack);
    container.append(cardBox);

    cardBox.addEventListener('click', () => {
        cardBox.classList.add('flipped');
        console.dir(cardBack);
    })
}

: flipped class에 대한 css동작을 잘 정의하지 못해 원하는대로 동작하지 않았고, 이 시점에서 예제 코드를 확인하기로 결정했습니다.

 

ㅡㅡㅡ

for (var i = 0; i < cards.length; i++) {
  card = document.createElement('div');
  card.dataset.item = cards[i];
  card.dataset.view = "card";
  myCards.appendChild(card);
     
  card.onclick = function () {
   
    if (this.className != 'flipped' && this.className != 'correct'){
        this.className = 'flipped';
        var result = this.dataset.item;
        resultsArray.push(result);
        clearInterval(Interval);
        Interval = setInterval(startTimer, 10);
    }
  
    if (resultsArray.length > 1) {

      if (resultsArray[0] === resultsArray[1]) {
        check("correct");
        counter ++;
        win();
        resultsArray = [];
      } else {
        check("reverse");
        resultsArray = [];
      }
      
    }
    
  }
   
};

: 아, 엊그제 정리한 dataset 요소를 사용한다. css에서 data-* 로 정의한 요소를 사용하려는구나. 라고 눈치챌 수 있었습니다. 얼마 전에 학습한 것을 사용할 수 있는 예제인 것 같아 재밌을 것 같다고 생각했습니다.

: 해당 요소 안의 data값을 넣어준다는 점에서 의미론적으로 확실히 산다는게 느껴졌습니다. 

 

+ (22.07.27 덧붙임) 흐미.. 충격.. 올 해 6월에 올라온 어떤 글에서 이 개념은 더이상 적절하지 않다는 의견을 확인했다.

 

 

: card에 이벤트를 등록하는데 저는 addEventListener('click', "..." )으로 등록했는데, 예제에서는 onclick으로 등록합니다. 각각의 방식이 어떤 이점이 있었는지도 학습한 내용인데, 막상 보니 차이점이 생각이 나지 않습니다. 다시 정리해보겠습니다.

 

: 두 카드의 매칭 여부를 따로 빼서 어떻게 판단할까 고민하다가 가닥이 안 잡혔는데, 해당 코드에서 배열로 두 요소를 따로 저장해준 뒤, 그 길이값에 따라 비교를 트리거하고 해당 배열 내에서 두 요소로만 비교 뒤에 다시 후보셋을 비워주는 방식으로 구현하였습니다. 직관적이고 좋은 방법이라고 판단됩니다. 

 

: startInterval의 맥락은 알겠는데, clearInterval은 왜? 모르겠다. 아마 이따가 직접 짜봐야 이해가 될 것 같다. 

 

var check = function(className) {
  
  var x = document.getElementsByClassName("flipped");
  setTimeout(function() {

    for(var i = (x.length - 1); i >= 0; i--) {
      x[i].className = className;
    }
     
  },500);
   
}

var win = function () {

  if(counter === 5) {
    clearInterval(Interval);
    text.innerHTML = "Your time was " + seconds + ":" + tens;
  } 
  
}

: check 와 win 함수 모두 선언을 표현식으로 합니다. 선언식이 아니라. 아래의 startTimer는 선언식으로 하던데, 이름을 더 명확히 해서 위에서 사용할 수 하기 위함일까요? 선언의 방식 차이 다시 생각해봅시다.

 

: 케크된 결과를 className으로 판단 가능합니다. setTimeout으로 다시 카드 클래스를 결과로 받은 클래스이름으로 업데이트해주고 있습니다.

 

: 지금 왜 setTimeout을 해줬는지, Interval을 어떨 때 지우는지 Interval사용 목적이 애초에 뭐였는지 흐름을 파악하지 못 하고 있습니다.

-> 일단 Interval을 clear하는 이유는 밑에 startTimer보고 앞선 코드의 Interval 정의를 다시 보니 알겠습니다. 여기서 Interval은 시계 작동 자체라 counter가 5라면 게임이 끝난 조건이니 해당 작동을 멈추는 것입니다. 

 

function startTimer () {
  tens++; 
    
  if(tens < 9){
    appendTens.innerHTML = "0" + tens;
  }
    
  if (tens > 9){
    appendTens.innerHTML = tens;
      
  } 
    
  if (tens > 99) {
    seconds++;
    appendSeconds.innerHTML = "0" + seconds;
    tens = 0;
    appendTens.innerHTML = "0" + 0;
  }
    
  if (seconds > 9){
    appendSeconds.innerHTML = seconds;
  }
  
}

: 완전 처음에 구현한 타이머입니다. 기본적인 구현이므로 설명은 생략합니다.

 

ㅡㅡㅡ

  📁 css code

css 스타일 변화가 주요한 이벤트이므로 css에서 가져갈 것들이 많았습니다.

다른 분야도 그렇지만 css는 특히 경험치에서 오는 힘이 중요한 것 같습니다. 다양한 실습을 많이 빨리 접해야겠다는 생각과 함께 해당 프로젝트에서 짚고 넘어갈 것들을 확실히 정리하겠습니다.

 

- & , :active

 & : hover, & : after

: 우선, :active는 보통 <a>와 <button>에 많이 사용된다. 사용되는 act는 link, visited, active, hover, focus 등

:  :link // 방문하지 않은 상태 , :visited // 방문한 상태,  :active // 활성화된 상태 ,  :hover //마우스가 올라간 상태

: '  :  ' 셀렉터와 행동이 결합되어 사용된 형태

 

https://poiemaweb.com/css3-selector

CSS3 Selector | PoiemaWeb

 

: 그리고 선택자. 

https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

반드시 기억해야 하는 CSS 선택자 30개

 

 

- @each 그리고 background이미지

@each $card in $cards{

    .correct[data-item = "#{$cards}"]

    .flipped[data-item = "#{$cards}"]{

        background: url(" /// ") left center no-repeat white;

       brakcground-size: contain;

    }

}

: @each가 뭐지.. 했는데 SASS, SCSS 문법이었다.

: SASS, SCSS 는 CSS를 보완해서 더 많은 기능을 넣어주도록 한다. 중첩, 함수, 믹스인 등등

: @each는 단어 의미에서 알다시피 javascript의 map()과 같은 역할을 한다. 각 요소에 css요소를 더하는 것.

 여기서 $가 붙은 건 변수. 

: 만약 이것을 css로 구현하려 했다면, 모든 card들을 반복해야했을 것이다. 내가 처음에 이 프로젝트를 시도할 때, 이거 맞나 싶었던게 바로 이 부분. 근데 SASS 사용할 줄 모르면 하드코딩 같이 진짜 그렇게 했어도 된다. 아니면 Javascript로 style넣어줬을 수도.

: 해당 css코드는 SCSS를 사용했다. 그래서 전체 css코드 보면 @mixin 이나 @import를 사용하는 것을 확인할 수 있다.

 

 

- SASS사용 예시

https://www.biew.co.kr/entry/Sass%E3%86%8DSCSS-SASS-%EB%AC%B8%EB%B2%95-5%ED%8E%B8-mixin-extend-import?category=314988 

[SassㆍSCSS] SASS 문법 6편 - @mixin, @extend, @import

 

- background - 

 

: 이미지를 사용해 배경 div를 꾸밀 때가 많았는데 거의 사용하는 것만 사용했다. 목적이 거의 비슷해서.

제시된 것과 유사하게 거의 background-color 나 background: url("...") center cover no-repeat  등등

 

중요한 요소인만큼 세부 정의 가능한 값도 많다.

: 본 김에 정리하고 가는 background 

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

-attachment: 배경이미지의 고정 여부

-clip: 배경을 얼마만큼의 범위로 채울 지 여부,  border-box, padding-box, content-box 등등을 기준으로 잡을 수 있다. text가 개인적으로 재밌었다.

-color: 배경색 지정

-image: 배경이미지 지정, url로 주소 주고, 그라디언트 등 작은 조작 가능

-origin: 배경이미지 시작 지점 지정, border-box, padding-box, content-box등을 기준 잡을 수 있다.

-position: 요소 기준 이미지 시작점 지정, origin에 의해 지정된 지점에 의해 상대적인 위치를 더 자세하게 줄 수 있는 것. center, top, 25%, bottom 25px 등

-repeat: 배경이미지가 요소보다 작을 때 반복해서 채우는 방법 지정, no-repeat, repeat-x, space, round 등

-size: 말 그대로 배경이미지 크기 지정, contain:요소 안으로 넣는 것[+repeat:no-repeat], cover, 30%, 300px 100px 등

 

a.org/en-US/docs/Web/CSS/background

background - CSS: Cascading Style Sheets | MDN

 

- dataset 사용

 [data-view = "card"]

https://proprotrainee.tistory.com/91

HTML data-* 속성 / dataset Javascipt

몇 일 전 해당 블로그에 정리한 글

 

- position

 position: absolute;

: 매번 나오는데도 능숙하게 사용하려면 멀었나.. 항상 원하는대로 안 움직인다. 아휴 언제쯤..

: 우선 요소는 static, relative, absolute, sticky

: 그래도 이번에 다시 보니 더 심화속성이나 개념도 눈에 띄고 이해가 된다. 

: z-index, overflow, hidden, perspective와 관련성, 쌓임맥락 등. 은 이번 프로젝트와도 연관성이 크기에 더 자세히 봤다.

 

 

이런 기본 요소에 대한 설명은 확실히 MDN이 좋다.

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

 

- transform-style

transform-style: preserve-3d;

: 이건 처음 본 느낌이다 사실. 

: 속성은 flat, preserve-3d 2가지다. 외우기 쉽다.

: 단순하게 flat은 자식 요소들이 평면으로써 사용되는 것이고, preserve-3d는 각각의 3dspace를 보존하여 디스플레이되는 것이다.

 

- transform

 transform: rotateY(0deg);

:  matrix, translate, rotate, scale, skew 등등 + 여러 개 묶어서도 사용 가능하다.

: rotate로 요소 플립하는게 이번 목표였다.

 

딱 아래 링크의 예제가 transform-style과 transform을 이해하는데 좋았다.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

transform-style - CSS: Cascading Style Sheets | MDN

 

---

 

이제 개념 살펴봤으니 다시 혼자 만들어보기.

SCSS도 살짝 더 들여다보고 처음이지만 시도해봐도 좋을 듯.

 

SASS도 나오고 SCSS도 나와서 뭔가 해서 정리해봤다.

https://proprotrainee.tistory.com/107

SASS 그리고 SCSS

 

 

 

---

그렇게 1번 째 커밋 이후에 오랜 시간 걸려서 2번째 커밋.

 

(2)  [cce9bd4] | Feat: Pair Game App: add flip EventListener to each cards

뒤집기 전

' ? ' 인 카드를 누르면 뒤집히고, 랜덤 넘버가 적힌 카드가 나온다.

모두 뒤집은 후

.container {
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  transition: transfrom 1s;
  width: 100px;
  height: 150px;
  perspective: 1000px;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}
.card-front {
  width: 100%;
  height: 100%;
  //backface-visibility: hidden;
  position: absolute;
  background-color: white;
  border-radius: 3px;
  border: 2px solid lightblue;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  //transform: rotateY(180deg);
}
.card-front span {
  color: #f06292;
  font-weight: 800;
  font-size: 3rem;
}
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  background-color: lightblue;
  border-radius: 3px;
  border: 2px solid white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);
}
.card-back span {
  color: "#00796b";
  font-size: 3rem;
}
.flipped {
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}

감동의 코드.. 별거 아니지만 오전에 안 됐던 거 생각나면 너무 기분 좋다. 막 따라친게 아니라 이해해서 구현한 것 같아서 더 좋다. 이번 주 안에 손에 딱 붙게 비슷한 예제 만들어서 더 연습해야겠다 이건.

 

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2s;
  transform-style: preserve-3d;
}

그리고 transition으로 뒤집히는 시간을 조절하고, transform-style로 그 모습이 보이게끔 했다.

진짜 의도한대로 뒤집히는데 소름 끼쳤다. 너무 좋아서. 

 

 

(3)  [4f80568] | Feat: Pair Game App: add timer feature with startTimer() and updateTimer() function

카드를 처음 누르는 순간 타이머가 작동하게 했습니다.

 

(4) [354119d] | Fix: Pair Game App: fix timer to stop when user find all cards and alert the finish time

와. 예제 코드 보면서 아리까리했던게 실제로 코드 작성하면서 같은 문제로 나왔습니다.

//  ...
	cardBox.addEventListener('click', () => {
        cardInner.classList.add('flipped');
        counter++;
        win();
        console.dir(cardBack);
        startTimer();
    })
}
let win = function(){
  console.log('checked');
  console.log(counter);
  if (counter == 10){
    clearInterval(timer);
  }
}

이 코드가 성공적인 코드입니다.

그런데 처음에, checkWin을 함수선언식으로 선언했을 때 addEventListener에서 checkWin으로 부르려고 해도 호출이 안 됐었습니다. 위에서 예제코드 분석할 때 왜 표현식으로 선언하지?하고 궁금해했는데, 그게 아니면 호출이 안 되기 때문입니다.

이유에 대해서 생각해봅시다.

 

그 부분은 성공적으로 되는데, 함수 안의 clearInterval(timer)가 의도대로 동작하지 않습니다. 왜.. ㅠ

 

아 1분만에 다시 알았습니다. 하하....

 

보면 win 을 호출한 뒤, startTimer()가 작동됩니다. 그리고 그 startTimer는 setInterval을 부릅니다. 그래서 win에서 아무리 clearInterval을 해줘도 다시 생겨난 거였습니다. 해서 win을 startTimer뒤로 옮겨주니 해결됐습니다.

 

그럼에도 해당 부분을 더 수정해야할 것 같습니다. startTimer를 처음 한 번만 호출하는게 좋을 것 같습니다. 모든 카드가 클릭될 때마다 굳이 잘 돌아가는 걸 재가동 시킬 필요는 없기 때문입니다.

 

카드를 다 찾으면 종료시점의 시간을 안내하게 했습니다.

 

(5)  [c902ee2] | Fix: Pair Game App: fix flip event: according to the matching result, cards get reversed or not

 

아.. 또 알았다. 예제코드를 볼 때의 의문점. 

왜 각 카드에 나는 addEventListener를 등록하는데 예제에서는 onclick으로 이벤트를 등록하는지 궁금했었습니다.

assEventClick으로 이벤트 등록을 해주면 해당 객체에 접근할 때 this를 사용할 수 없었습니다. 해당 객체에는 접근이 불가능했기 때문에 최상위 객체로 거슬러 올라가서 window가 this로써 쓰입니다.

 

반면, onclick으로 이벤트를 등록한 뒤 click이벤트가 발생했을 때 click이 발생한 바로 그 객체에 접근해서 내용을 알아낼 수 있었습니다. 우리는 클릭이 발생했을 때 해당 카드의 내용을 알아와야 비교가 가능하기 때문에 onclick을 사용해야 했습니다.

 

on<event>와 addEventListener의 차이점 명확히 구분해서 다시 정리하기.

 

 

 

모든 기능 구현이 완료되었습니다. 다 정상적으로 작동은 합니다.

다만, 시간 딜레이에 따른 원치 않는 결과가 나옵니다.

상황은 이렇습니다.

제가 카드가 플립되는 시간을 위해 카드가 디스플레이되어 있는 시간을 setTimeout, 1500m을 줘서 해결했었습니다.

그런데 이렇게 하니 사용자가 그 시간보다 먼저 클릭하게 된다면 그 동작은 정상적으로 카운팅이 되지 않아 바로 결과계산이 나오지 않습니다.

만약 사용자가 매 클릭마다 고심해서 1.5초 후에 누른다면 게임은 정상적이긴 합니다만 의도한 게임의 모습은 아닙니다. 따라서 개선해보도록 하겠습니다.

 

 

(6) 

/ .. 추가 공부가 너무 길었다. 오늘 시간이 좀 딜레이되어서 고치는 건 내일 ! .. /

 

---

3. Training Coding Test with Python  

(1) 백트래킹

 

 

(2) 백준코딩 테스트 기출 8문제

 

1. n과 m 

https://proprotrainee.tistory.com/87

[ BOJ ] 15649 N과 M

: 해당 문제 풀고 난 뒤 백트래킹 문제에 대한 어느정도 감이 잡히는 것 같다.

 

 

2. N-Queen

https://www.acmicpc.net/problem/9663

9663번: N-Queen

: 백트래킹에서 한 발짝 멀어졌다.

: 도저히 구현할 자신이 안 난다. 심지어 이해도 제대로 못 한 것 같다. 다른 풀이를 더 많이 읽어보고 돌아와야겠다.

 

 

3. 부분수열의 합

https://www.acmicpc.net/problem/1182

1182번: 부분수열의 합