<국비지원 개발자 과정> 중간 프로젝트 - 소회 1

모 음악 사이트의 클론 코딩으로 주제를 정하고, 팀원끼리 맡은 파트를 진행했다.

그 중 나는 우선 프론트 쪽을 진행.

 

 

알게된 점

1. 음악 차트를 불러오기 위해 크롤링을 시도하게 되었다. 그러나 크롤링의 경우 제대로 된 강의도 없고, 대부분 파이썬으로 하는 듯해 자료가 엄청 많지도 않았던. 그래서 구글링으로 나오는 자바 크롤링 문서는 빠짐없이 다 살펴봤던 것 같다. 그리고 그 중 공통되는 코드를 뽑아내어 어찌저찌 써내려감.

Main 클래스를 별도로 만들어 분리하거나, 불러온 데이터를 DB에 저장하고 다시 가져오는 식의 방법들이 있었지만 우선 첫 시도고, 시도해본 뒤 어떻게 돌아가는지 알아야 위 방법들도 적용할 수 있겠다고 판단해서 Class는 하나로만 진행해봤다. 

String URL = "크롤링하려는 사이트 URL";

Document doc = null;

doc = Jsoup.connect(URL).get();

Elements element = doc.select("가져오려는 정보의 태그명");

Iterable<Element> ie1 = element.select("가져오려는 정보의 태그-내부의 더 자세한 태그명1");
Iterable<Element> ie2 = element.select("가져오려는 정보의 태그-내부의 더 자세한 태그명2");
Iterable<Element> ie3 = element.select("가져오려는 정보의 태그-내부의 더 자세한 태그명3");



System.out.println(ie1);
System.out.println(ie2);
System.out.println(ie3);

위처럼 출력을 위한 반복문도 없이 정말 간단했고, 여러 시도를 거쳐 드디어 크롤링에 성공하였다. 그런데 가만보니... 개발자모드에서 살펴본 HTML 코드와 다름없잖아?!

 

크롤링에 대해 더 공부해보니, 그래서 크롤링이라 함은 여러 곳에 분산되어 있는 정보를 한 번에 내게 알맞은 형태로 가져오기 위해 사용하는 기술이라는 거였다. 그리고 내가 직접 크롤링으로 내게 알맞는 형태로 정보를 출력할 수 있도록 코드를 작성해놓으면, 해당 웹사이트의 정보를 실시간으로 가져올 수 있다는 것도.

 

하지만 나의 경우, 그런 크롤링 목적이라면 해당되지 않았고 당장은 크롤링보다는 HTML과 CSS를 익히며 페이지를 직접 구성해보는 것도 배우기에 좋을 것 같았고, 시간도 많지 않았기에 우선은 크롤링은 그렇게 접어두기로 했다.

 

그래도 덕분에 크롤링이라는 기술에 대해 배우고, 필요한 정보들을 조합하여 알맞게 출력하는 것이 필요할 때 사용할 수 있는 유용한 기술이구나- 하는 그 기술의 의의(?)까지도 배울 수 있어 유익했던 삽질(?)이었다.

 

 

2. 하지만 그럼에도 UI 구현이 정말 어려웠는데, 말그대로 대부분의 코드를 페이지 소스에서 그대로 가져와다가 쓰는데도 이미지나 텍스트가 마음대로 움직여지지 않았기 때문. 결국 지금 하는 프로젝트의 목적과 방향성과 의미까지 잃은 채 방황할뻔(...). 잘 되지도 않을 뿐더러 시간이 많지 않다는 생각에 얼른 해야한다는 조급함만 더해지다보니 재미가 정말 하나도 없더라. 

 

그러던 와중에, 왜 안되는가, 하고 결국 시간은 오래 걸리겠지만- 가져온 코드를 하나씩 찬찬히 뜯어보는 과정을 진행하였고, 웹 페이지의 코드와 내 코드가 달라져있는 부분의 코드는 하나씩 찾아보며 이해를 더해가다보니 마침내 아-주 조금씩 코드가 보이기 시작!

 

그러면서 깨달았던 점은 이런 것들이었다. 

1) 해당 페이지에 속한 코드만 긁어온다고 구현되는게 아니구나. 일명 '자손 코드'라는게 있어, 관련없는 코드 같아도 메인 페이지나 맨 위에 작성된 코드라면 같이 긁어와야 위치부터 해서 웹페이지와 똑같이 구현이 되더라. 그렇게 코드에 대한 감을 익힐 수 있었고,

 

2) 그러면서 코드가 어떤 방식으로 작성되는지 배울 수 있었다. 우선 가장 간단하게는, 중복되는 코드는 맨 위에 묶어 전체 적용으로 작성할 수 있다는 점. 그리고 코드는 꼭 순서대로 작성되지 않는다(...)는 점. 그러니까 내가 생각한, 정말 한 페이지에 속한 코드는 해당 클래스 파일에 차곡차곡 하나부터 열까지 차례대로 작성되는 그런게 아니라, 그냥 정말 퉁쳐서 CSS 파일 1개만 만들고 해당 파일 안에 전체 페이지에 대한 CSS 코드를 다 작성할 수도 있다는 거다. 그리고 그게 정말 더 효율적으로 보였다... 어차피 말했듯 전체 적용 코드는 맨 위로 빼면 되고, 그 다음부터 차례로 페이지에 대한 코드를 쓰되 주석을 달아 설명해놓으면 되니까. 그러면서 한 페이지가 해결되고 나니, 순차적으로 다른 페이지도 모두 물흐르듯 쉽게 구현할 수 있었고, 엄청난 뿌듯함과 자신감과 기쁨을 느낄 수 있었다. ㅜㅜ

 

3) 그래서 배운 것. 개발이란 끊임없는 문제-해결의 연속이구나.. 좋게 생각하면 늘 이런 기쁨을 누릴 수 있는 거구나 ㅋㅋㅋ.

 

 

3. 그래서 정리하자면, 배운 적도, 들어본 적도 없는 크롤링을 쓰게 되고, 마찬가지로 수업 시간에 배운 적 없는 범위의 CSS도 다뤄보고 또 실제 코드를 관찰하고 직접 구현해보기도 하는 과정들을 거쳐 느낀 건 정말 실전 프로젝트, 실전 연습을 많이 많이 해봐야 겠구나, 라는 거였다. 정말이지 처음엔 망망대해도 이런 망망대해가 있나, 싶고 어려우니 당연히 힘들었는데, 해결하고 나니 그만큼 실전에서 사용할 수 있는 기술과 코드에 대한 감 등을 덕분에 배웠다는 걸 알게되었다. 그리고 뿌듯함도 또 이런 뿌듯함이 없고, 아주 아주 조금씩이지만 이렇게 실력이 향상되는 것을 보고 느끼니 더 하고 싶은 의지와, 방향성이 생겼다. 아직 중간 프로젝트는 완성하려면 더 남았지만, 프로젝트를 통해 많은 것을 배워 정말 감사하고 또 다행이었던 경험이었다. (그간 얼마나 방황했던지....).

 

 

이렇게 한 스텝 고!