<국비지원 개발자 과정> 중간 프로젝트 - 소회 2, 그리고 마무리

벌써 수업의 60% 이상을 수강하였다.

끝까지 하리라는 것에 대한 의심은 거의 없었지만, 아무래도 난이도가 난이도다보니(?) 정말로 몇 번 포기해야되나 생각하기도 했지만 이렇게 중간 프로젝트까지 훌륭히 마쳤으며, 드디어 개발 공부방법과 방향을 찾게 되어 방황도 멈출 수 있었다.


- 중간 프로젝트에서 만난 어려움들
1. 크롬 왜그러냐. 라인이 계속 안맞았다.
이것 때문에 또 한 번 포기할 뻔했다. STS 내부 웹에서는 라인이 한 줄에 3개씩 나란히 간격 맞춰서 잘 떨어지는데, 내 컴퓨터의 크롬 웹 화면에서만 중간에 라인이 하나 틀어져서 그 밑의 앨범 커버들이 다 붙어버렸다. 찾아보니 크롬 버그라고도 하던데, 정확하지는 않았던 것이 이게 무슨 오류인지도 몰랐기 때문. 그래서 더 막막하고 어려워서 한참을 머리를 싸메고 고민하다가, 결국 코드를 하나씩 다 살펴봤다. CSS 코드를 들여다보니, 크롬 웹페이지에서만 그 틀어지기 시작한 라인에 해당하는 구역의 크기들만 다른 크기로 설정이 되어있더라. 그래서 내가 지금의 수준에서 생각해낼 수 있는 가장 단순한 방법으로 해당 코드들에만 CSS에 추가로 크기를 다시 설정해줬다.

이런 식으로, 어긋난 박스의 리스트에만 "excep"으로 클래스 네이밍을 별도로 설정하고,

 <li class="excep"> <div class="thum"> <a href="javascript:;" onclick="fnPlayerCall('94276579', '', '1');return false;" class="play">재생</a> <a href="#"> <span class="mask" onclick="fnViewAlbum('82256266');return false;"></span> <img src="https://image.genie.co.kr/Y/IMAGE/IMG_MUZICAT/VoteEvent/188/ARTIST_94276579_20210924100831.jpg" alt="" /> </a> </div> <span class="rank"> <strong>17</strong>0% </span> <strong><a href="javascript:;" onclick="fnViewSong('94276579'); return false;">낮은 소리</a></strong> <span class="artist"> <a href="javascript:;" onclick="fnViewArtist('14945000');return false;">김장훈(Kim Jang Hoon)</a> </span> <a href="javascript:;" class="go_vote end">투표마감</a> </li>

CSS에는 크기를 따로 작성했다.

.excep { height:499.6px; }

그랬더니 정말로 놀랍게도(?!) 수정이 되었는데, 같이 프로젝트를 진행하는 분들의 페이지에서는 또 저 코드 때문에 라인이 어긋난다고 해서(...) 그냥 발표할 때에만 잠깐 적용해서 마무리했다. 휴. 그래도 이렇게 또 하나, 개발자로서의 경험이 또 하나 추가되었달까. 아래 책의 인용글이 바로 이 상황을 정확하게 묘사해주고 있어 남겨본다!

버그를 찾는 일은 대부분 끈기와 집중력을 테스트하는 과정이다. 기발한 상상력에나 톡톡 튀는 아이디어보다는 복잡하게 꼬인 논리의 실타래를 한 올 한 올 끈질기게 풀어가는 끈질김이 가장 중요한 덕목이기 때문이다.
- 누워서 읽는 알고리즘

2. 모달과 처음 만난 나
아무래도 클론코딩인지라 클론하는 해당 웹페이지의 코드를 살펴보면서 진행했는데, 거기에도 클래스명에 팝업으로 되어있길래 팝업인 줄로만 알았는데 모달이었다. 그래서 모달이 무엇인지 처음 알게 되었다. 하핳. 그리고 이 모달을 적용하는 데 또 애를 먹었던 것이, 일단 모달은 기본적으로 뒷배경을 어두운 색으로 처리하게 되어 이것과 항상 함께 가는 것 같았는데. 그 뒷배경을 적용하면 모달이 나타나지 않거나, 또 이 부분만큼은 코드를 그대로 가져오기보다 처음부터 끝까지 직접 적용해보고 싶어 JS의 classList로 hidden을 사용하여 코드를 작성했는데 이게 또 적용이 안됐다. 그렇게 헤메다가... 코드를 여러번 순서도 바꿔보고 다른 방법으로 작성해 본 결과, 드디어 성공! 하였고 그리하여 이 부분이 이번 프로젝트에서 스스로에게도 가장 뿌듯한 부분이 되었더랬다.

아래의 코드가 순수하게 직접 다 짠 코드다! 물론 구글 검색을 참고하긴 했다. 노마드코더에서 배웠던 eventListener 기능이 매력적이라 꼭 한 번 적용해보고 싶었는데, 드디어 성공했다. 아래 click의 eventListener는 모달이 나타났을 경우 X를 누르면 모달이 종료되는 코드다. 그리고 모달이 아무래도 적용되는 해당 페이지에서 바로 나타나는게 아니라, 어떤 동작을 했을 때에 나타나게 해야 하므로 그 부분은 classList의 remove에서 "hidden" 클래스명을 제거하는 방식으로 적용하였다. 이 부분 제일 뿌듯.

const bg = document.getElementById("bg"); const popup = document.getElementById("photo-pop"); const closeBtn = document.querySelector(".layer-close"); function onmodal() { bg.style.display="flex"; popup.style.display="block"; popup.classList.remove("hidden"); } function onclose() { bg.style.display="none"; popup.style.display="none"; } closeBtn.addEventListener("click", onclose);

- 개인적으로 아쉬웠던 점
1. 크롤링은 성공했으나...
처음부터 시간이 많이 부족할거라 생각하고 코드 대부분을 가져오고 틀에 맞춰 조금씩 변형하는 형태로 코드를 짰더랬다. 그랬더니 시간이 오히려 남기는 남았었는데(그래서 그 시간에 그냥 부족한 자바 공부를 더 하면서 기능을 추가하려고 했으나....), 발표 때 강사님이 평해주셨듯 크롤링을 적용을 다 못했던게 그래서 좀 아쉽게 남았다. 크롤링은 주로 파이썬에서 사용하는 기술로 자바는 자료가 많지 않아 구글링에 있는 자료는 다 살펴봤었다(이전 글에서도 언급). 그런데 막상 여러번 시도해서 성공했더니 개발자모드에서 본 코드랑 같은 코드를 가져왔을 뿐이고, 이제 이걸 내가 파싱해서 다 적용할 수 있게 만들어야 하는구나-를 알고나니 엄두가 나질 않아 더 진행을 못했던 것인데, 조금 더 머리를 써서(?) 해냈더라면 실시간으로 데이터를 받아와서 적용할 수 있었을텐데, 하는 아쉬움이 남았다.

2. HTML, CSS에의 부족함과 더 공부하고자 하는 의욕!
프론트엔드를 맡아서 진행하다보니 HTML과 CSS, 그리고 JS를 주로 다루었는데 JS는 그래도 착실하게 배운 경험으로 큰 어려움(?)은 없었지만 HTML과 CSS가 정말 어려웠다. 특히 푸터를 만들 때에도 CSS가 정말 말을 안듣더라(...). 그래서 어림짐작으로 수치값을 넣어 위치를 설정한 코드들도 있었다. 너무 무식한 방법으로 하게 되어 찜찜하고 스스로도 마음에 들지 않았지만, HTML과 CSS에 대한 기본 개념이 스스로 잘 잡혀있지 않다고 느껴 어쩔 수 없다고 생각했었다. 제대로 하려면 CSS 레이아웃 개념부터 다시 잡아야겠는데, 이 때도 시간이 많지 않다고 느껴 빠르게 진행하는 것만 생각했던거다. 그리고 그렇게라도 해서 그 때 개념을 잡아둘걸, 하고 오히려 아쉬움이 남았다. 하지만 실패는 늘 성공의 어머니이므로....... 오히려 이렇게 경험한 기억이 강하게 남아 HTML과 CSS를 다시 제대로! 공부해보겠다는 의욕이 생겨 계획을 세워두었고 지금 진행하는 공부를 마치면 그 다음으로 바로 할 생각이다. 그래서 결론적으로는 오히려 잘 되었다고 생각했던 경험.


- 결론
위에서 말한 것처럼, 그래서 중간 프로젝트는 정말 강사님 말씀대로 실력이 비약적으로(?) 성장.. 나는 비약적인 것까진 모르겠지만, 내 위치를 다시 가늠해보는 시간이자 기회가 되었고 더불어 앞으로 어떤 걸 공부해나가야 할지 방향도 잡을 수 있게 된 좋은 경험이었다. 앞서 CSS 때문에 애를 먹었다고는 했지만, 억지로라도 코드를 하나씩 뜯어보면서 수정해나가는 과정에서 개발에 대한 즐거움도 함께 경험할 수 있었고, 더불어 재미와 호기심이 생겨 정말로 좋은 계기가 되었다고도 할 수 있겠다. 또, 협업이라는 과정을 통해 의논하고 수정하는 경험을 해 본것도 큰 경험이라고 생각한다. 이번 경험을 계기로, 마지막 프로젝트에서는 최선을 다 할 수 있도록 열심히 기반을 쌓아둘 예정이다!