[220725] Daily Study Note

 

  Today's Plan  

Studying JavaScript knowledge   

3. 추가주제

[3] 네트워크 요청

3.1 fetch

3.2 FormData 객체

3.3 Fetch: Download Progress

3.4 Fetch: Abort

3.5 CORS

 

Coding JavaScript   

(1) Pong Game

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

 

Training Coding Test with Python  

(1) 재귀

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

(3) +3문제

 

---

1.

https://ko.javascript.info/

문서 수정하기

 

---

2.

Pong Game

이런 게임을 만들고자 합니다.

예제 코드 대충 훑어보려는데,

html과 css를 굉장히 단순하게 하고, Javascript로만 거의 했기에 저도 그런 식으로 동적생성하려고 합니다.

Javascript코드는 아예 안 봤고 html파일과 css파일만 동일하게 설정했습니다.

 

📁 index.html

<canvas></canvas>

📁 style.css

body {
	text-align: center;
}

 

 

(1)

집중 과정 없이 자리 앉자마자 바로 프로젝트 시작해서 바로 실수했습니다.

html파일에서 기본 백그라운드를 canvas로 했는데, Javascript에서는 canvas의 존재를 잊고 body를 전체 게임판으로 쓴다고 착각했습니다. 그래서 canvas에 맵을 그리는게 아니라 div태그를 이용해 선을 만들려고 했습니다. 왜 아무것도 안 그려지지 했는데 실수를 깨닫고 다시 시작했습니다.

let line = document.createElement('div');
line.style.width = '2px';
line.style.height = '50vh';
line.style.backgroundColor = 'white';
body.append(line);

 

이번 프로젝트는 좌표 조작과 <canvas>를 다루는 능력이 올라갈 것 같습니다. 지난 주에 배운 개념을 잊기 전에 응용할 수 있는 스케줄에 만족스럽습니다. 

 

(2)

우선 canvas안에 text, line 등을 배치해야 하기에 canvas의 크기 정보를 알아내고자 했습니다.e

canvas.width, canvas.height로 구해서 가운데 중심 선을 그어줬습니다.

if (canvas.getContext){
    const ctx = canvas.getContext('2d');
    ctx.setLineDash([2, 2]);
    ctx.beginPath();
    ctx.moveTo(canvas.width/2, 0);
    ctx.lineTo(canvas.width/2, canvas.height);
    ctx.strokeStyle = 'white';
    ctx.stroke();

    ctx.font = '10px serif';
    ctx.fillStyle = 'white';
    ctx.fillText('round 5', canvas.width/2, 10);
}

선, 글자 깨짐

: text를 넣어줬고, 위치 조정하려고 하는데 화질이 왜 이런가해서 좀 알아봤습니다.

:https://ui.toast.com/weekly-pick/ko_20210526

삽질하기 싫으면 꼭 읽어봐야 할 Canvas 트러블 슈팅

- 앨리어싱: 해상도의 한계로 선이나 글자가 계단식으로 나타나 깨져보이는 현상. 안티앨리어싱으로 보정해줘야 한다.

 

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

캔버스 최적화 - Web API | MDN

 

여러 가지 조금 보다보니 해당 프로젝트를 하려면 canvas 와 관련해서 봐야할 것이 조금 많은데, 오늘 계획과는 벗어나는 분량이므로 다음 프로젝트를 진행하기로 결정했습니다.

---

 Pair Game

 

1. [632c42a] | Init: Pair Game App: set content structure ans style it

프로젝트 초기 셋팅. 

 

사실 git 초기 상태를 기록하는 것을 잊어버려 해당 커밋에 카드를 랜덤 배치하는 기능까지 포함되어 있다.

다시 로딩하면 랜덤으로 카드 배치가 된다.

 

let cards = ['1','2','3','4','1','2','3','4']

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 cardDiv = document.createElement('div');
    let cardSpan = document.createElement('span');
    cardDiv.setAttribute('class','card');
    cardSpan.textContent = card;
    cardDiv.append(cardSpan);
    container.append(cardDiv);
    cardDiv.addEventListener('click', () => {
        //cardDiv.classList.append('flipped');
        console.log(cardDiv);
    })
}

 

 

 

---

3.

Training Coding Test with Python  

 

https://blog.encrypted.gg/943?category=773649 

[실전 알고리즘] 0x0B강 - 재귀

 

해당 링크의 개념을 읽고 문제 풀이를 했다.

처음에 머리 안 돌아가서 울 뻔 했다. 스스로한테 너무 실망이어서.

항상 이해 못 했던 파트인데, 그래서 학부 시절엔 대충 뭉개고 넘어갔는데, 이제는 그럴 수 없다는 생각에, 힘들어야 진짜공부다 라는 생각에 꾹 참고 문제 풀이를 했습니다.

 

(1)

 

https://proprotrainee.tistory.com/94

 

몇 일 전 위의 문제가 이해가 도통 안되어서 고생하다가 다시 보니 조금 머리가 풀리는 느낌이 들었다.

개념을 읽고 읽고, 해당 문제를 푼 사람들의 기록을 읽고 읽어서 그럴 수 있었다..

 

 

(2)

 

https://proprotrainee.tistory.com/100

[ BOJ / 파이썬 ] 11729 하노이 탑 이동 순서

재귀의 클래식. 하노이탑 이동 순서. 코드는 간단명료한데 뭐 하나 착각한게 있어서 이해하는데 시간을 많이 잡아먹었다.

정말 다양한 설명을 접해서 진짜 이제 이해한 느낌.

 

(3)

 

https://proprotrainee.tistory.com/101

[ BOJ / 파이썬 ] 1074 Z

재귀 함수 정의하는 연습을 제대로 한 문제. 어떻게 탈출문을 작성할 아이디어를 얻을 지, 함수 내용을 어떻게 짤 지에 대해서 깊게 고민해볼 수 있었던 의미있는 문제.

 

 

(4)

 

https://proprotrainee.tistory.com/102

[ BOJ / 파이썬 ] 1991 트리 순회

기초 of 기초. 학부2학년 알고리즘 수업에서 이 문제 설명하시던 교수님 표정도, 칠판 디스플레이도 생각나는데 내용은 그 때도 이해가 안 되었고, 지금도 처음에는 이해를 못 했다. 그러나 4문제쯤 되다보니 슬슬 감이 잡힌다.

 

 

(5)

 

https://proprotrainee.tistory.com/103

[ BOJ / 파이썬 ] 1992 쿼드트리

이 문제 풀면서 재귀문제에 대한 이해도가 확 정리되고 있다는 느낌을 받았습니다. 전체 로직 구성이 가능해졌습니다. 그러나 물론 구현 부분에서 예민하고 정확하지는 못해서 첫 제출에서 정답을 못 냈지만, 이해도에 대한 자신은 생겼습니다.

 

 

(6)

 

https://proprotrainee.tistory.com/104

[ BOJ / 파이썬 ] 10870 피보나치 수 5

머리 식힐 겸 잠시 풀어간 쉬운 문제. 이것조차도 전에 와닿던 느낌보다 훨씬 전체 맵이 머릿 속에 구조화되게 그려지는 느낌을 경험했습니다.

 

 

(7)

 

https://proprotrainee.tistory.com/105

[ BOJ / 파이썬 ] 1780 종이의 개수

아 이제 조금 늘긴 늘었구나를 느끼고 아 유형풀이의 중요성!을 느낀 문제입니다. 전에 풀이한 'Z'문제나 'quadtree'에서 풀었던 알고리즘과 비슷한 구성이라는 느낌이 바로 들고, 탈출 조건과 로직도 스스로 잘 구현할 수 있었기 때문입니다. 다만, 인덱스 부분에서(사실은 로직의 정확성 문제죠.) 헷갈려 오류를 냈습니다. 다만, 오류도 스스로 찾을 수 있었기에 반복해서 다양한 문제를 접한다면 더 늘 수 있을 것 같다고 생각했습니다.

 

다른 재귀 관련 응용 문제들 가령 DFS, 백트래킹 문제 등등을 풀다보면 개념이 더 잡힐 것이라고 생각하고 그 때 돌아와 해당 파트를 더 집중 공략하려 합니다.