Ruby 프로젝트의 전반적인 이해

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

세 번째 강의 중 Part2에 해당하는 포스팅을 진행하겠습니다. 첫 번째 포스팅에 이어서 프로젝트의 전반적인 구조와 HTML의 부가적인 기능에 대해서 설명해드리겠습니다 :)

미리 프로젝트와 컨트롤러, 액션 파일은 생성을 해두었다는 가정 하에 포스팅을 이어가도록 하겠습니다.
(프로젝트명: test, 컨트롤러명: nambi , 액션명: sonjob2.erb, ttoo.erb)

Ruby의 기본 레이아웃

프로젝트를 생성하고, 웹페이지를  실행시켜보면 원하는 결과가 화면에 띄워짐을 확인해볼 수 있습니다. 그러나 개발자도구에서 소스파일을 확인해보면, 우리는 작성한 적도 없는 쌩뚱맞은 코드들이 눈 앞에 펼쳐져 있는 것을 확인할 수 있습니다.

17번 째 줄을 제외한 코드들은 우리가 작성한 적도 없는 알수 없는 코드들입니다. 비밀은 어디에 있을까요? 

 test > app > views > layouts > applicaton.html.erb

정답은 위의 경로에 나타나 있는 application.html.erb 파일입니다. 이 파일은 rails에서 기본적으로 통용되는 코드로, 모든 웹페이지 레이아웃의 디폴트의 역할을 해줍니다. 즉, 모든 화면에 적용되는 화면이라는 뜻입니다. (public 폴더에 있는 파일들은 제외힙니다.)

위의 코드가 application.html.erb 소스코드 입니다. body의 내용을 제외하면, 개발자도구에서 확인한 소스코드와 일치함을 확인해볼 수 있습니다. 이제 body의 내용을 살펴보겠습니다.

<%= yield %> 태그는 해석하면 '양보하다'라는 뜻입니다. 즉, 코드 상에서 해석하자면, yield 태그를 만나면 다른 erb 파일에게 그 자리를 양보하라는 의미가 됩니다. 그래서 그 자리에 각 페이지에 해당하는, 우리가 미리 작성해둔 sonjob2.erb 파일이나 ttoo.erb 파일의 HTML 소스코드가 삽입된다는 개념입니다.

액션에 CSS 적용시키기

액션의 스타일시트는 공통의 컨트롤러 스타일시트에서 작성합니다.

 test > app > assets > stylesheets > nambi.scss

sonjob2.erb 파일의 h1 태그에 class를 부여해주었기 때문에 색깔이 빨간색으로 변화했음을 확인해볼 수 있습니다. 

# 추가적으로, stylesheets 폴더 내의 application.css 파일에도 css 내용 추가가 가능합니다. 이 파일은 많은 컨트롤러의 .scss 파일 내용을 이 파일로 통합하여 웹페이지에 적용시키는 역할을 합니다.

# SCSS 파일은 사실상 CSS와 다른 문법으로 실행됩니다. CSS를 더 쉽게 사용하기 위해서 Sass에서 개발된 CSS의 확장판으로 생각하시면 됩니다. CSS의 문법도 적용되기 때문에 저는 그냥 CSS 문법으로 진행하겠습니다.

+ 우리가 몰랐던 HTML 기능들

1. 페이지 간의 이동

URL은 공요하고 있기 때문에 "/Controller/Action"의 위치로 링크를 걸어주면 페이지간의 이동이 가능합니다.

 <a href="/[컨트롤러 이름]/[액션 이름]"></a>

ex) <a href="/nambi/sonjob2">move!</a>

2. target="_blank"

<a> 태그의 속성으로, 클릭 시 해당 URL이 새 창으로 뜨게 됩니다. 

<a href="[해당 URL]" target="_blank"></a>

ex) <a href="http://likelion.net" target="_blank"></a>

3. 클릭시, 스크롤 업다운

<a> 태그 활용의 연속으로, URL 대신에 해당 name을 링크시켜주면 스크롤이 이동됩니다. 

위의 코드에서 move!! 를 클릭하면 move!!move!! 에 해당하는 a 태그로 이동하게 됩니다.

3. id / name / class

id	페이지 상에서 유일한 값입니다. 중복일 경우 스크립트에서 에러가 발생하게 됩니다.
name	같은 이름이 여러 개 존재할 수 있습니다. 예를 들어, checkbox, radio 등이 있습니다.
class	class는 대개 style에서 정의된 형식을 가져다 쓰기 위하여 사용됩니다.