본문 바로가기

Intro/Daily Study Note

[220719] Daily Study Note

 

  Today's Plan  

Git 강의 정리+실전 예제 풀며 복습+암기 /11 - 1 => 초반에 1시간 가량 집중 못해서 2시에 마침  ✅

 

Studying JavaScript knowledge / 1 - 3  ❌

문서 1.7 ~ 1.11

 

Coding JavaScript  / 3 - 7   

(1) JavascriptRGB Color Game   1시간 40분

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

 

Training Coding Test with Python / 8 - 쭉

(1) 구현 2문제


1.

Git 강의 정리+실전 예제 풀며 복습+암기

 

어제 기본 명령어, 브랜치 개념 복습하고

 

오늘 진짜 메인이었던, 제 골치였던 

 

branch개념

commit 조작

깃허브 사용  ***

 

을 정리했습니다. 

 

더불어 

 

오픈소스 프로젝트 참여(과정, PR)

stash 개념, 사용법

merge

복습까지.

 

속 시원하다. 이제 프로젝트하면서 많이 사용해가며 확실히 익혀야합니다.

 


2.

(1) JavascriptRGB Color Game 

 

어제 발생했던 오류 원인을 1-2분만에 금방 찾았습니다.

style 프로퍼티에 배경색이 바뀌기는 하는데다가 console.dir()로 해당 객체 들어가도 정상 작동을 하는데 왜

Cannot read properties of undefined (reading 'style')

라는 오류가 발생하는 지 이유를 모르겠던 와중이었습니다.

 

[javascript/jquery] jquery datatable Cannot read properties of undefined (reading 'style') 에러 해결 방법 (tistory.com)

해당 블로그 글에서 단서를 찾을 수 있었습니다.

딱히 오류원인을 찾기 힘듭니다 ㅠㅠ
만약 위와 같은 오류가 발생한다면
고민하지마시고,
테이블에 잡아놓은 td 수와 불러오는 데이터 수가 맞지 않아서 나는 에러일 경우니
바로 스크립트와 html 을 확인해보시면 되실겁니다!
출처: https://solbel.tistory.com/2305 [개발자의 끄적끄적:티스토리]

아, style 프로퍼티 하나를 못 읽는 상황이 1가지 있었겠다는 생각이 스쳤습니다.

for (let i = 0; i < randomColors.length; i++){
        colorBox[i].style.backgroundColor = randomColors[i];
    }
/* 위는 수정 전, 아래는 수정 후*/
for (let i = 0; i < randomColors.length-1; i++){
        colorBox[i].style.backgroundColor = randomColors[i];
    }

생각해보니 randomColors에는 헤더색을 포함해서 7가지의 랜덤 RGB값을 뽑았고,

coloBox는 6개니까 헤더 색을 넣을 박스 하나가 부족한 것이었습니다. 그 박스에 접근하려고 하니 없는 값(undefined)가 나온 거죠. 

정답색으로 바뀐 헤더와 랜덤컬러박스 6개

어제는 머리 싸매도 안 보이던게 잠시 다른 공부를 하고 오니 보여서 쉬는 시간의 중요성을 생각했습니다.

 

더불어, 오전에 git을 배웠기에

해당 프로젝트에서 어제 골치 아팠던 서버의 브랜치와 로컬의 헤더, 브랜치를 정리할 수 있었습니다.

배워서 적용시키니 뿌듯함이 컸습니다. 그리고 적절하게 히스토리를 남기니 커밋이 좀 익숙해질 것 같습니다. 


정답 색과 일치하지 않는 박스는 지우고( style에서 visibility 값을 hidden으로 줬습니다.)

정답인 박스를 누르면 전체 색이 정답 색으로 변하는 기능을 추가했습니다.

1. 이 과정에서 정답색인지 확인하는 함수를 따로 뺐습니다.

2. 각 박스에 클릭 이벤트 리스너를 등록하고 1의 함수로 체크하게 했습니다.

 

의문. visibility가 좋을까 display가 좋을까..? 다양한 클론프로젝트에서 사람마다 각각 다 다르게 썼던 기억입니다.

 


개인적으로 git에 대해 이해가 많이 늘어 커밋을 되살리고, 브랜치를 나누고 합치고, rebase를 해서 깃허브에 pull, push하는 게 속도가 빨라졌으며 '사용할 수 있게'된 것에 진짜 감사함과 뿌듯함이 느껴집니다. 이게 되다니.. 이 작은 프로젝트로도 경험하고 있습니다. 


게임이 정상적으로 진행하게끔 만들었습니다. 그러나 마지막에 또 오류를 못 잡는 상황입니다.

 

의도) 첫 새로고침하면 의도한대로 동작합니다. 정답이 클릭되면 다른 박스 클릭이 불가능합니다. 모든 박스들의 클릭 이벤트 리스너를 삭제해줬기 때문입니다.

문제상황) 그러나 게임이 처음 시작할 때 외에 new colors나 easy, hard 를 다시 눌러 게임이 재초기화된다면 그 이후부터는 정답을 찾아도 다른 박스 클릭이 가능한 오류가 생겼습니다.

이제 해당 프로젝트에 2일 정도 투자했기에 예제를 클론 코딩하면서 제 프로젝트와 비교하는 식으로 수정하도록 하겠습니다.

(5:20pm)


클론코딩 마쳤습니다. 제가 풀이한 부분이랑 겹치는 것도 많고, 함수 짜임도 거의 비슷한 느낌이었습니다.

물론 제게 안 익숙한 프로퍼티나 방식을 사용한 부분도 많았습니다.

해당 프로젝트 제공자는 이 프로젝트가 초보자를 위한 것인지는 몰라도 이벤트 버블링 등의 개념은 사용하지 않고 거의 각 아이템에 이벤트 리스너를 등록하는 식으로 구성을 짜는 것도 3-4번째 프로젝트를 하니 확신할 수 있는 것 같습니다.

(6:40pm)

 

+ 프로젝트 제공자의 프로젝트에서 배워서 기억할 것들

1) CSS 관련

- float: left 로 가로 방향으로 띄워주기

- 빈 div로 width: 30%, padding-bottom:30% 설정해 상자 만들기

- text-transform: uppercase로 대문자 만들어주기

- transitoin:  https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition

* 추가공부할 것: transition, mediaQuery 등

 

2) JavaScript 관련

- classList로 on / off 관리하기

- 객체에 이벤트 등록할 때 함수 적용 시 this로 접근 가능하게 한 것.

: Javascript 객체 관련해서 공부 많이 했는데 막상 쓰려니까 이거 적용해도 되는거 맞나 아닌가. 이게 효율적인가 아닌가 고민하게 됩다. 깊이 있는 학습이 더 필요할 것 같습니다. 연습은 특히 더.

 


3.

https://www.acmicpc.net/workbook/view/1152

 

문제집: 삼성 SW 역량 테스트 기출 문제 (baekjoon)

 

www.acmicpc.net

 

삼성 SW 역량 테스트가 대체로 구현적인 문제가 많이 나온다고 하여 당분간 해당 문제집을 풀이하는게 좋겠다고 판단했습니다. 모든 알고리즘 적용의 뼈대가 되어줄 것이라고 기대합니다.

 

 

(1) 구슬 탈출 2

https://proprotrainee.tistory.com/79

 

[ BOJ ] 구슬 탈출 2

/ 구현 1 / n, m = map(int, input().split()) board = [list(input()) for _ in range(n)] for i in range(n): for j in range(m): if board[i][j] == 'R': red = [i, j] elif board[i][j] == 'B': blue = [i, j]..

proprotrainee.tistory.com

: 첫 문제가 Gold 1문제로 꽤 난이도가 있는 문제였습니다. 최근 자신감을 위해 난이도가 낮은 문제로 풀어왔는데 확실히 어려운 걸 부딪히고 이해해야 머리가 깊게 돌아가는 것 같은 느낌이 있었습니다. 조금 마음은 상해도 실력을 위해 계속 부딪혀야겠습니다.

: 격자판에서의 구현 문제였습니다. 시뮬레이션처럼 구현하려고 했으나 실패했습니다. 검색을 해서 여러 풀이를 공부했는데 BFS풀이가 가장 유형화되어 있는 듯 했습니다. 

: 구슬 탈출 문제는 4개의 시리즈가 있다고 하니 이번 주 안에 반복학습하는 느낌으로 모두 풀어보겠습니다.

 

(2) 스타트와 링크

https://proprotrainee.tistory.com/80

 

[ BOJ ] 스타트와 링크

/ 제출 1 / from itertools import combinations n = int(input()) s = [list(map(int,input().split())) for _ in range(n)] teamA = list(combinations(range(n), n//2)) teamB = [] for a in teamA: b = [] for..

proprotrainee.tistory.com

: 조합을 이용한 문제였습니다.

: 문제 내용이 재밌어서 풀면서 재밌었습니다.

: 아이디어 접근을 잘 못해서 시간 소요를 너무 많이 해 아쉽습니다.

: 실버 레벨인데 50분이 소요됐으니 한참 잘 못 된 것 같습니다. 30분 컷으로 마치도록 실력 향상 시킵시다.

 


 

계속 계획한 분량을 못 지키는데, 아무래도 이런 식으로 계획 짜서 공부하는게 얼마 안 되어서 스스로를 판단하지 못했기 때문입니다. 점차 하면서 소화 가능한 역량을 체크해야할 것 같습니다. 일단 당분간은 오버페이스로 계획 세우고 달성하기 위해 노력하겠습니다. 하반기 안에 실력 끌어올리고 스스로 만족할만큼 발전하길 원해서 솔직히 마음이 꽤 급합니다. 

'Intro > Daily Study Note' 카테고리의 다른 글

[220721] Daily Study Note  (0) 2022.07.21
[220720] Daily Study Note  (0) 2022.07.20
[220718] Daily Study Note  (0) 2022.07.18
[220717] Daily Study Note  (0) 2022.07.17
[220715] Daily Study Note  (0) 2022.07.15