오늘은 CSS에 대한 기초적인 학습과 pair programming을 통해서 함께 계산기를 만들어내는 작업을 진행했다. 이번에 내 페어분께서는 비전공자시지만 공과대학 출신이셨고, 대학교에서 교양 정도의 지식을 습득하신 분이셨다. 같이 협업하면서 느끼기에 HTML의 태그 종류나 CSS 속성 종류에 대한 암기는 오늘 배운 것만 익히셨으나 컴퓨팅적 사고에 있어서는 굉장한 능력을 지닌 분 같았다. 그래도 컴공이 속하는 공과 대학 출신이셔서 그런지 자바 스크립트를 다루시는 능력과 오류가 났을 때의 해결 능력이 매우 뛰어나셨다. 그런 분과 페어 프로그래밍을 하면서 느낀 점과 내가 다른 사람과 협업할 때 부족해지는 점을 돌아보는 시간을 갖게 되었다.
[ 오늘의 TODO ]
코드 스테이츠) CSS 기초 강의 듣기코드 스테이츠) Pair Programming (querlySelector 예제)코드 스테이츠) Pair Programming (계산기 만들기)=> 오늘 분량은 다 채움
=> 내일까지 이어지는 스케쥴패스트 캠퍼스 [optional]) 인강 3개 이상 듣기생활) 물 1L 이상 마시기

[ 오늘의 오류해결 ]
1. querlySelector
오늘 페어 프로그래밍 첫 번째 시간에는 querlySelector를 이용해서 자바 스크립트로 HTML을 직접 수정해보는 시간을 가졌다. 코드 스테이츠에서 제공하는 것으로도 충분히 문제 해결은 가능했지만 아직 개념이 익숙하지 않은 탓에 querlySelector의 응용 방법에 익숙하지 않아 페어분과 함께 구글링을 해서 어떻게 활용하면 좋을지 찾았다. 코드 스테이츠에서는 이후 DOM에 대한 강의가 진행될 때 더 자세하게 설명을 해준다고 했으므로 깊게 파헤치지는 않고 내가 당장에 써먹을 수 있는 것들만을 익혔다.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Document.querySelector() - Web APIs | MDN
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
developer.mozilla.org
document.querlySelector( ) 는 자바 스크립트에서 HTML에 있는 id나 class를 찾아낼 때 사용한다. 나는 예전에 패캠 인터넷 강의에서 getElementById를 사용한 적이 있다. 그것과 쓰임새가 비슷했으나 getElementById의 경우 id만을 불러 올 수 있으며 querlySelector는 #(id)과 .(class)를 통해서 class도 불러올 수 있었다. 둘의 차이점에 대한 자세한 비교나 querlySelector에 대한 자세한 공부는 말했듯이 다음 코드 스테이츠 강의를 듣고도 불충분하다면 찾아보도록 하겠다.
2. textContent
querlySelector와 함께 찾아본 것이 바로 이 textContent다. 우리가 자바 스크립트로 HTML을 수정하기 위해 querlySelector를 사용한다 했으면, querlySelector는 단순히 우리가 수정해줘야할 HTML 요소를 찾은 것뿐이며 실제 수정을 가하기 위해서 textContent를 사용했다. 페어분과 내가 헷갈렸던 부분은 textContent로 수정한 것까지 값을 할당해줘야 하는가였다.
const changedId = document.querlySelector('#changed').textContent("changed")
이렇게 해야하나 였는데
const changedId = document.querlySelector('.changed')
changedId.textContent("changed")
코드 스테이츠에서 제공한 힌트 가이드 라인을 보면 저런 식으로 하도록 인도해주었다.
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
Node.textContent - Web APIs | MDN
The textContent property of the Node interface represents the text content of the node and its descendants.
developer.mozilla.org
[ 오늘의 교훈 ]
1. 페어를 짰을 때도 혼자 할 때처럼 차분해지자
이게 오늘 내가 가장 많이 크게 느낀 것이다. 둘이서 하다 보니까 어느 순간 함께 하는 사람의 눈치를 보고 있었다 . 내가 진행하는 코드 방식이 오류가 걸렸을 때 오류 해결을 빠르게 하려고 하다보니까 머리가 오히려 굳어지는 순간들이 있었고, 또 코드 스테이츠가 단순히 가이드 라인만을 위한 코드 힌트를 줬는데 내가 그것을 응용해서 답으로 이끌어내려고 하기 보다는 그 가이드라인 코드에만 꽂혀서 더 내가 변형을 시킬 생각을 하지 못하고 거기에만 매몰되어 결국에는 오류로 이어지는 상황으로 만들어버렸다.
나와 함께 페어하셨던 분은 그 분이 네비게이터셨을 때 오류가 발생해도 침착하게 어디에서 오류가 났는지를 발견하셨는데 나는 오류가 발생하니 우왕좌왕하다가 시간을 더 뺐겼다. 그런데 오늘 코드 스테이츠에서 일정을 다 끝내고 혼자서 내일 계산기를 만들기 위해 미리 선수 작업을 좀 했는데 그 때는 오류가 나더라도 침착하고 빠른 시간내에 오류를 잡아내서 수정했다. 이렇게 누군가와 함께하게 되면 더 긴장해서 혼자할 때보다 더 성과가 나오지 않는 것은 내 성격과도 관련이 있는 것 같다. 특히나, 페어분은 컴퓨팅적 사고력이 뛰어난 분이셨기에 더더욱 그랬던 것 같다.
그럴 때, 처음 코드 스테이츠를 시작할 때 크루분들이 해주신 말씀을 다시 생각했다. 동일한 능력치를 가진 사람과 페어를 맺는 일은 거의 없다. 나보다 더 잘하는 사람과 페어를 짤 때가 있고, 또 나보다 덜 잘하는 사람과 페어를 짤 때가 있다. 만일 내가 페어 분보다 잘한다고 하면 그분을 잘 이끌고 설명해줌으로써 오히려 스스로에게 알고 있는 것에 대해 더 확실하게 알 수 있는 공부가 되도록 하면 된다. 그리고 만일 페어분이 나보다 더 잘한다고 하면 그 분께 더 배운다고 생각하고 절대 자신이 못하는 것을 민폐라고 생각하지 말고 이 과정을 통해서 더욱 성장하면 된다.
나는 공부하려고 코드 스테이츠에 왔다. 코드 스테이츠에서 내준 과제를 전부 오류 없이 해결한다고 하면 내가 코드 스테이츠에 올 필요가 없다. 그리고 앞으로 나는 나보다 개발을 더 잘하는 분들을 많이 만날 거고 그 분들과 함께 협업을 하게 될 것이다. 같이 일하는 사람의 눈치를 보다가 혼자 있을 때보다 퍼포먼스가 덜 나오는 버릇을 쉽게 고칠 수는 없다. 하지만 앞으로 남은 6개월동안 그런 부분들을 해결할 수 있도록, 둘이서 함께 하다가 오류가 나더라도 나 혼자 있을 때처럼 침착하게 해결할 수 있도록 노력해야겠다.
'코드스테이츠 > 코드스테이츠 @ 개발 일지' 카테고리의 다른 글
[코드 스테이츠] 10일차, CLI 막연한 두려움 (0) | 2021.07.28 |
---|---|
[코드 스테이츠] 9일차, 첫 미니 프로젝트 (0) | 2021.07.27 |
[코드 스테이츠] 7일차, "자기관리"하며 건강 챙기자 (0) | 2021.07.25 |
[코드 스테이츠] 6일차, 복습의 힘 (0) | 2021.07.24 |
[코드 스테이츠] 5일차, "나는 왜 개발자가 되려고 할까?" (0) | 2021.07.23 |