Array Hash & 외부 라이브러리 사용법

안녕하세요 멋사3기 Kyunni입니다.

여섯 번재 강의는 'W2 6강-유상무 잘 생겼다' 이었습니다. Ruby에서 사용되는 Hash에 관련된 보조강좌와 nokogiri로 실습한 Ruby에서의 외부 라이브러리를 끌어와 이를 사용하는 방법에 대하여 포스팅하도록 하겠습니다. :) 

해쉬(Hash)

해쉬는 보통 배열과 연결시켜서 사용합니다. 앞서 Ruby 세 번째 포스팅에서 배열에 관해 언급한 것에 덧붙여서 이해를 하면 좋을 것 같습니다. 배열에서는 원소에 대해서 index로 숫자를 사용했습니다. 데이터가 추가되면, 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져 그 데이터에 대한 식별자가 됩니다. 만약 그 index로 숫자 대신 문자를 사용하고자 한다면(key값), 해쉬를 사용해야 합니다. 각각의 key에는 대응되는 value 값이 존재하며, 다른 언어에서는 Hash를 연관배열(associative array) 또는 사전(dictionary)라고 부릅니다.

자 그럼, 해쉬를 만드는 방법에 대하여 알아보겠습니다.

1. Hash 생성하기

위의 코드를 살펴보면, kyunni라는 key에는 "토끼"라는 value가 대응되고, "doohee"라는 key에는 "사자"라는 value 값이, 그리고 "geneious"라는 key에는 "곰"이라는 value가 대응됩니다.

위의 코드와 첫 번째 코드는 완전히 동일한 코드입니다.

2. Hash 특정 key의 value를 가져오기

아래의 kyunni라는 key를 대응시켜보았을 때에, "토끼"라는 결과값을 추출하는 문법입니다.

3. Hash의 value를 기준으로 반복작업하기

위의 2번째 줄부터 살펴보면, k에는 key 값이, v에는 value 값이 대입되어 세 가지의 대응되는 데이터의 key와 value 값이 모두 출력되게 되는 코드입니다.

외부 라이브러리 사용하기(Nokogiri)

라이브러리란(Library)?

소프트웨어를 만들 때 쓰이는 클래스나 서브루틴들의 모임을 가리키는 말입니다.

Nokogiri

Nokogiri는 Ruby에서만 지원되는 라이브러리로서, HTML과 XML 파일을 분석해서(parsing) 사용할 수 있습니다.

Nokogiri 사이트 바로가기

http://www.nokogiri.org/

Nokogiri를 이용하여 '유상무 잘생겼다' 뽑아내기

# 참고로 프로젝트명은 test, 컨트롤러명은 clion을, 액션명은 smhandsome.erb를 사용합니다.

1. gemfile 수정

 test > Gemfile

Gemfile을 열면 위와 같은 창을 확인할 수 있습니다. 여기에 제가 3번째 라인에 작성한 것과 같이 gem 'nokogiri'라는 코드를 추가하면 됩니다. 이는 nokogiri라는 라이브러리를 사용하겠다는 선언이 됩니다.

# GEM

: Ruby로 작성된 Library를 총칭합니다. 이를 위해 Gemfile이 사용되며, 그 안에 사용하고자 하는 라이브러리를 추가해줍니다.

Gemfile을 수정하고 하단의 콘솔창에 bundle install이라는 명령어를 내려주면, Gemfile에 선언한 라이브러리들이 설치가 됩니다. 아래 첨부한 초록색 글씨의 complete! 내용을 확인하면 성공적으로 외부 라이브러리를 설치했음을 알 수 있습니다.

다른 플랫폼에 비해 훨씬 편하게 외부 라이브러리를 불러올 수 있다는 것이 Ruby on Rails의 장점이기도 합니다.

2. 최종 코드 분석

Nokogiri의 문법이 낯설기도 하고, 전체적인 동작이해가 중요하다고 판단하여, 3번째 라인부터 11번째 라인까지 한줄한줄 설명하겠습니다. 

전체적인 동작은 프로그램 상에서 자동으로 무한히 '유상무잘생겼다'를 검색하여, 뒤에 두 숫자가 35번째라고 나왔을 때, 멈추는 코드를 작성해보도록 하겠습니다.

3번째 라인, 11번째 라인.  while true ~ end : 무한 루프 

4번째 라인.  uri = URI("https://m.search.naver.com/search.naver?query=유상무잘생겼다")  : 네이버에 검색하는 부분, URI의 형태로 uri라는 변수에 담아지게 됩니다.

5번째 라인.  html_doc = Nokogiri::HTML(Net::HTTP.get(uri)) : 검색을 통해 읽어온 html의 정보를 nokogiri가 분석해서 html_doc에 저장합니다. 다시 말해, uri에 저장된 주소를 get방식으로 HTTP를 통해 인터넷에 던지게 되고, 이를 HTML로 파싱해 분석하여 html_doc이라는 변수에 저장하게 됩니다. 참고로 Nokogiri:: 라고 되어있으면 이제부터 Nokogiri 문법으로 적용시키겠다! 라는 의미가 됩니다.

6번째 라인.  @result = html_doc.css("span.dsc_rank//strong").inner_text : "유상무잘생겼다"의 검색결과 페이지에서 크롬 개발자도구를 이용해 등수의 위치를 확인해보면, <span class="dsc_rank"> 임을 확인할 수 있습니다. 즉, CSS 문법에서 span의 dsc_rank 클래스로 접근하여, strong 태그 안에 있는 숫자를 뽑아와서 @result에 저장하겠다는 의미입니다. inner_text는 태그를 벗기기 위한 문법입니다.

8, 9, 10번째 라인.  break if (@result.to_i.modulo(100) == 35) : 100으로 나누었을 때 나머지가 35면 무한루프를 중단하는 코드입니다. to_i는 String 형태의 숫자를 Integer 형태로 변환시켜줍니다.

+ 우리가 궁금했던 HTML/CSS 팁들

1. CSS Parallax Scrolling

최근 다양한 사이트에서 트랜드처럼 적용되고 있는 CSS Parallax Scrolling을 사용하는 방법입니다. 참고로 이 CSS Parallax Scrolling은 '멋쟁이 사자처럼' 사이트에도 적용이 되고 있습니다. 스크롤 시, 위의 이미지가 서서히 사라지는 듯한 모습이 원근법처럼 적용됩니다.(직접 http://likelion.net을 참고하시는 것이 좋을 것 같습니다.)

CSS Parallax라고 구글링하시면 Parallax에 관련된 다양한 코드들이 존재하니, 가져다 쓰시면 되며, codepen이라는 사이트를 참고하시면 좋을 것 같습니다. (http://codepen.io/keithclark/pen/JycFw)

2. themeforest

다양한 CSS 디자인을 보고 참고할 만한 사이트도 존재합니다. 디자인을 직접 사서 써도 무방합니다. 세련된 다양한 디자인들이 언어 별로, 툴 별로 존재하므로 원하시는 디자인을 참고하시면 됩니다. 아래에 URL을 첨부하도록 하겠습니다.

themeforest 사이트 바로가기

http://themeforest.net/

3. free bootstrap theme

themeforest가 유료라는 점에서 부담스러우신 분들은 free bootstrap을 구글링하시면 무료로 제공되는 다양한 템플릿들을 즐기실 수 있습니다. (ex.. startbootstrap(http://startbootstrap.com/))

4. fullsize image background

위의 설명들과 마찬가지로 image를 배경에 꽉 채워서 쓸 수 있는 CSS 스킬입니다. 이 또한 구글링 하시어 사용하시면 됩니다. 다양한 CSS 예시들을 보면서 적용해보다 보면, 스스로 성장하는 계기가 될 수 있을 것 같습니다.