Ruby on Rails에 템플릿 넣기

멋사 하프톤을 하면서 전반적으로 템플릿 삽입에 어려움을 느껴 포스팅 해야겠다 생각함
코드 github 주소
파일 minify하기

가독성이 떨어질 수 있으니 각오하고 볼것!

목표

레일즈는 MVC패턴의 고유한 프로젝트 구조를 가지고 있어 템플릿을 넣을 때 까다로운 부분이 많아 가이드라인을 제시하려 함.

레일즈 빈 프로젝트에 부트스트랩 기반 SPA 템플릿인 GraySclae을 넣어보는 것을 해볼 것!

준비

큰 상관은 없겠지만, Ruby는 2.4.0, Rails는 5.0.3 버전, 루비마인으로 진행

보통 템플릿은 라이브러리 사용시 cdn 대신 vendor 폴더에 다운받아서 경로를 참조하는 식으로 하기 때문에 그대로 적용할 예정

과정

1. 레일즈 프로젝트 생성 및 세팅
   
   
   routes에 index.html을 root로 설정
   
   
   protect 해제
   

   
   

2. 컨트롤러, 뷰 생성
   rails g controller home index로 home컨트롤러에 index페이지를 만들었고, 여기에 템플릿을 적용할 예정
   
   

3. 템플릿의 head부분 옮기기
   템플릿의 head부분을 그대로 복사해 layout > application.html에 붙인다.
   레일즈는 에셋 파이프라인을 이용하기 때문에 우선은 각종 라이브러리(여기서는 bootstrap, font-awesome) 링크를 지우고, stylesheet,javascript link_tag의 data-turbolinks-track을 지우고 자바스크립트를 불러오는 <%= javascript_include_tag 'application' %>는 body태그의 끝으로 보내준다. 끝으로 필요없는 코드를 지우고 정리하면 다음과 같다.
   
   템플릿의 head
   
   
   rails application.html
   

4. 템플릿의 body부분 옮기기
   템플릿의 body부분을 그대로 복사해 index.html에 붙이는데 이때 보면 가장 하단에 script부분이 있는데 이는 모두 지워 application.html의 <%= yield %>의 밑으로 보내준다. 여기서도 마찬가지로 각종 라이브러리 스크립트 태그는 지워준다.
   body태그를 보면 id가 부여되어있는데 이는 페이지 스크롤링에 사용되는 것이다. 지금 만드는 페이지는 싱글페이지이기 때문에 application.html의 body에 id를 적어주면 정상 작동한다.
   
   4번 이후의 application.html
   

5. CSS, JavaScript, img 옮기기
   CSS는 less,sass로도 주어지는데 본인이 쓸줄 안다면 가져와도 되지만, 가장 일반적으로 퓨어 CSS를 쓰기 때문에 grayscale.css을 assets/stylesheets로 가져온다. 이때 이 파일을 수정해야 하기 때문에 min파일과 같이 가져오게 된다면, 수정 후에 둘의 내용이 달라 제대로 효과가 적용되지 않을 수 있다.(중요함!!)
   마찬가지로 grayscale.js도 assets/javascripts에, 이미지파일 3개도 assets/images에 넣어준다.

6. vendor 옮기기
   vendor란? 누군가 만들어 놓은, 예를들면 부트스트랩, 제이쿼리같은 라이브러리파일을 담는곳이고, 위에서 CSS,JS,img를 넣은 assets폴더는 커스텀파일을 담는곳이다.
   vendor폴더에 우리가 필요한(head에서 삭제한) 파일들을 가져온다. 이는 우리가 수정할 필요가 없기 때문에 min파일을 가져오든 둘다가져오든 상관없다.(min이란 minify의 약자로 파일의 공백을 제거해 압축하는것)
   vendor > assets > javascripts에 bootstrap.min.js, jquery.min.js를 넣고, vendor > assets > stylesheets에 bootstrap.min.css를 넣는다. font-awesome은 폰트까지 가져와야해서 그냥 cdn을 썼음(ㅎ) / 4번 이후의 사진 참조

7. asset pipeline 설정
   커스텀파일을 넣은 assets폴더는 application.js와 application.css의 require_tree,require_self라고 입력되어 있는 코드를 통해 알아서 에셋폴더의 파일들을 불러올 수 있지만, vendor폴더는 따로 적어줘야 한다.
   vendor에 들어간 라이브러리 파일명을 각각 js와 css에 맞게 적어준다.
   이때 제이쿼리가 먼저 호출되어야 부트스트랩이 작동하기 때문에 순서에 유의해야 한다.
   
   assets > application.js
   
   
   assets > application.css

   

   
   

8. img url 설정
   grayscale.css에서 cmd + f로 url이라는 단어를 검색해보면 백그라운드 이미지 url이 절대경로로 되어있다. 이때 파일명만 남겨두고 나머지를 지워주면, 레일즈는 알아서 assets/images에서 파일명을 검색해 불러오게 된다.
   
   
   끝! 포스팅이 지저분하긴 하지만 끝까지 참고 만든다면 거뜬하게 완료 / 안된다면 댓글 달아주세요

Github 간편 사용 설명서

목차

1. 새로운 repository 생성
2. 1번 이후 변경 사항이 있을 때
3. branch, merge 사용법
4. 충돌 시 해결 방법
5. 풀리퀘스트 보내기

1. 새로운 repository 생성

Github 페이지에서 새로운 repository 생성 후에 로컬에서 작업한 내용을 올리기 위한 명령어 순서

명령어 입력 순서

1. git init
2. git add .
3. git commit -m “commit message”
4. git remote add origin repostory주소
5. git push -u origin master

1번으로 현재 작업중인 폴더에서 git을 사용할 수 있도록 해주고

2번으로 폴더 내의 모든 파일(.이 모든 파일을 의미)을 git의 staging area에 추가

3번으로 커밋과 동시에 -m으로 커밋 메세지 작성

4번으로 원격 저장소, 즉 github repository 주소를 origin 이라는 이름으로 등록

5번으로 origin이라는 원격 저장소에 master 브랜치에 푸시, 이때 -u를 쓴다면 다음번 부터 git push만 입력해도 origin의 master로 푸시가 된다.

2. 1번 이후에 새로운 변경 사항이 있을 때

1번 과정 이후에 변경 사항이 있어 push를 하고 싶을 때 순서

명령어 입력 순서

1. git add .
2. git commit -m “commit message”
3. git push

과정은 1번과 같으나 init과 원격 저장소 등록을 할 필요가 없다

3. branch, merge 사용법

협업을 할 때 많이 쓰는 기능 branch, merge 이름 그대로 가지를 치고, 합치는 방법이다

명령어 입력 순서

1. git branch 브랜치이름설정
2. git checkout 브랜치이름
3. git add .
4. git commit -m “commit message”
5. git push origin 브랜치이름

1번으로 새로운 브랜치를 생성(기존 브랜치는 master)

2번으로 생성한 브랜치로 이동

3번으로 모든 파일 추가

4번으로 커밋, 메세지 작성

5번으로 origin 저장소의 새로운 브랜치에 푸시

브랜치에 푸시까지 완료 한 뒤

1. git checkout master
2. git merge 브랜치이름

위의 과정으로 master에 새로운 브랜치를 merge할 수 있다

4. 충돌 시 해결 방법

pull이나 push를 했을 때 원격저장소의 내용과 로컬폴더내의 내용중 같은 라인에 다른 내용이 있다면 충돌 발생

터미널 로그에 충돌이 난 파일이 표시되니 직접 수정 후 다시 pull이나 push를 실행

가장 좋은 방법은 협업자들끼리 역할을 완전히 분담해 애초에 같은 코드를 건드리지 않는 것이지만, 어쩔 수 없이 그렇게 된다면 항상 작업 전에 pull을 습관화하면 충돌을 최소한으로 줄일 수 있을 것!

5. 풀 리퀘스트 보내기

오픈소스를 만들 때 가장 많이 쓰는 방법

내가 push한 내용을 repository의 마스터 권한을 가진 사람에게 pull 해달라고 요청하는것

우선 참여하고 싶은 repository에 들어가 오른쪽 상단의 fork로 나의 repository에 복사해옴

명령어 입력 순서

1. git clone 원본repository주소
2. git remote add 나의repo이름설정 나의repo주소
3. git remote -v
4. git pull origin
5. git checkout -b 브랜치이름(이슈)설정 origin/master
6. git push 나의repo이름 브랜치이름

1번으로 원본 repo의 코드들을 나의 로컬환경에 클론해온다.

2번으로 포크해온 나의 repo주소를 새로운 이름으로 추가해준다.

3번으로 현재 등록되어있는 원격저장소가 어떤게 있나 확인해본다. 아마 origin이라는 이름의 원본 repo주소와 새로 설정한 이름의 나의repo주소가 있을 것이다

4번으로 혹시 모를 코드변화가 있을 수 있으니 한번 pull해서 확인해준다

5번으로 원본repo에 이슈명이나 키워드로 브랜치를 생성하고 이동한다

모든 작업 후에 6번으로 나의 repo에 푸시한다

위의 과정 이후에 github에서 fork한 나의 repo에서 방금 푸시한 브랜치명을 선택 하면 옆에 Pull request 버튼이 생기고, 절차에 따라 누르면 풀리퀘스트가 진행된다.

여기서도 충돌이 발생할 수 있으니, 코드를 보며 적절히 수정해주면 된다.

마치며

멋사 강의 준비하면서 공부했는데 기초적인 방법은 익힌 것 같아 도움이 많이 되었다!

자바스크립트 알고리즘

구직하는데 필수인 알고리즘 테스트

자료구조와 알고리즘의 필요성을 느끼지 못해 (허접이라) 공부를 안하다가 기본기를 다짐과 동시에 일을 구하기 위해

유일하게 아는 스크립트 언어 자바스크립트로 알고리즘 문제를 풀고 기록해보려함

기본도 안돼있는 매우 허접이지만 열심히 풀어봄

tryhelloworld 사이트

Nuxt Toy Project

문서를 한번씩 훑었다고 생각되어 혼자서 웹페이지를 만들어보려 함(많이 부족한건 팩트 ㅜㅜ)

디자인을 따로 하긴 힘들어 https://startbootstrap.com/template-overviews/grayscale/ 템플릿의 레이아웃을 그대로 하드코딩해서 만들어 볼 예정

틀린 내용이 있을 수 있으니 피드백 부탁드립니다

참고 사이트

Nuxt 공식 한글 문서

Vue 공식 한글 문서

github 주소

진행과정

찾아본 내용과 찾아봐야 할 내용을 정리

2017.05.04

시작 / Nuxt starter로 프로젝트 생성 및 nav바 생성

2017.05.05

프로젝트 구조에 대해 이해할 필요를 느껴 샘플 사이트 코드 분석하려 함
백엔드는 알고있는게 루비온레일즈 밖에 없기 때문에 루비온레일즈의 프로젝트 구조와 비교해 예제 사이트 와 공식문서를 참고해 알게된 내용을 정리

1. layouts폴더의 dafult.vue
   application.html 파일 처럼 페이지 전역에서 보여줄 기본 레이아웃을 설정하는데 사용 / 예를들어 전역에서 상단에 띄워놓을 navbar를 dafault.vue에다가 삽입
   default.vue의 <nuxt/> 태그가 <%= yield %> 같은 기능을 하는 태그 같음

2. nuxt-link
   다른 vue파일로 이동할 때 a태그와 같은 용도로 사용되는것 같음 >> 알아보니 렌더링 되면 a태그가 된다 함

3. middleware
   레이아웃이 렌더링되기 전에 사용할 함수를 정의할 수 있음(js파일), 사용예를 보니 vue파일에 methods나 computed에 필요한 함수를 middleware에 정의하고 import하는 식으로 사용

2017.05.06

결국 자료를 읽어보고 프로젝트 엎고 다시 시작함.
nav바 및 intro 구현

1. assets 디렉토리
   컴파일되지 않은 LESS, SASS, JavaScript 등을 포함하는 디렉토리, 레일즈에서의 assets과 같은 역할인 듯 함. 예를들어 이미지 파일을 assets에 넣으면 nuxt는 file-loader와 url-loader를 통해 자동으로 url주소를 변경해 파일을 불러옴. webpack을 거치지 않고 static파일을 사용할 수도 있는데 둘의 정확한 차이를 모르겠음. 어떨때 assets을쓰고 어떨때 static을 쓰는지..궁금하다

2. cover
   단순한 CSS문제 / 뷰포트에 이미지 cover 방법 찾기

2017.05.07

1. Component화의 문제
   큰일났다. 컴포넌트를 그냥 편한대로 semantic tag에 따라서 쪼갰는데 막상 만들고나서 생각해보니까 컴포넌트는 기능별로 나눠야 한다는 부분에서 현자타임이 왔다..
   일단 쪼개놓고 완성은 해놓고 나중에 실력이 늘었을 때 보면서 반성하는 용으로 완성은 해놓고 생각해야겠다.

2. fontawesome icon
   살짝 픽셀이 밀려서 원하는 모양이 안나오는데 해결 방법을 모색해봐야 할 듯

3. 전역 CSS
   nuxt 가이드대로 CSS를 설정했는데 적용이 안돼서 결국 scoped로 적용하고 있는데 방법을 찾아야 함.

4. 레이아웃 완성 / 자바스크립트 효과 넣으면 끝!

2017.05.08

1. store
   React의 Flux처럼 Vue에서 상태관리를 위해 사용.
   대충 흐름은 파악해 놓았지만 어떻게 사용하는지는 잘 모르겠다.

2. 자바스크립트 구현
   어떻게 어떤 디렉토리에 JS파일을 만들고 불러와야하는지 잘 모르겠다 ㅜㅜ 유튜브 강의 뒤져볼 예정