짝수와 홀수 (Level 1)

문제

evenOrOdd 메소드는 int형 num을 매개변수로 받습니다.

num이 짝수일 경우 “Even”을 반환하고 홀수인 경우 “Odd”를 반환하도록 evenOrOdd에 코드를 작성해 보세요.

num은 0이상의 정수이며, num이 음수인 경우는 없습니다.

풀이

function evenOrOdd(num) {
  if ( num % 2 == 0 ) {
      return "Even"
  } else {
      return "Odd"
  }
}

조건문으로 나머지가 0이면 짝수, 1이면 홀수인 경우로 리턴

다른 사람의 풀이

function evenOrOdd(num) {
  return (num % 2)? "Odd":"Even";
}

어메이징 고수의 풀이. 0 == false를 이용한 삼항 연산자 사용

알고는 있었지만 풀이에 적용하도록 익숙해져야겠다.


평균 구하기 (Level 1)

문제

def average(list):

함수를 완성해서 매개변수 list의 평균값을 return하도록 만들어 보세요.

어떠한 크기의 list가 와도 평균값을 구할 수 있어야 합니다.

풀이

function average(array){
  return array.reduce((a,b) => { return a+b })/array.length
}

reduce 메서드로 배열 각원소의 합을 구하고 배열의 길이로 나눠줌

나한테도 한줄짜리 코드가 나오다니 ㅎㅎ..

다른 사람의 풀이

for문으로 작성한 분들도 있지만 reduce가 더 좋다 판단된다. (성능은 같겠지만..)

핸드폰 번호 가리기 (Level 1)

문제

별이는 헬로월드텔레콤에서 고지서를 보내는 일을 하고 있습니다. 개인정보 보호를 위해 고객들의 전화번호는 맨 뒷자리 4자리를 제외한 나머지를 “*”으로 바꿔야 합니다.

전화번호를 문자열 s로 입력받는 hide_numbers함수를 완성해 별이를 도와주세요

예를들어 s가 “01033334444”면 “*4444”를 리턴하고, “027778888”인 경우는 “*8888”을 리턴하면 됩니다.

풀이

function hide_numbers(s) {
  let hide = null;
  hide = s.substr(0,s.length-4).replace(/\d/g,"*")
  s = s.substr(s.length-4,4)
  return hide.concat(s)
}

hide라는 빈 문자열을 생성 후에 s에서 뒤에 네자리를 제외한 나머지를 *로 치환해주고

나머지 네자리는 s에 다시 할당해 둘을 concat으로 이어줌

다른 사람의 풀이

function hide_numbers(s) {
  return s.replace(/\d(?=\d{4})/g, "*");
}

정규식은 하루빨리 익혀야겠다.

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_tagdata-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.cssassets/stylesheets로 가져온다. 이때 이 파일을 수정해야 하기 때문에 min파일과 같이 가져오게 된다면, 수정 후에 둘의 내용이 달라 제대로 효과가 적용되지 않을 수 있다.(중요함!!)
    마찬가지로 grayscale.jsassets/javascripts에, 이미지파일 3개도 assets/images에 넣어준다.

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

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

    assets > application.js


    assets > application.css


  8. img url 설정
    grayscale.css에서 cmd + f로 url이라는 단어를 검색해보면 백그라운드 이미지 url이 절대경로로 되어있다. 이때 파일명만 남겨두고 나머지를 지워주면, 레일즈는 알아서 assets/images에서 파일명을 검색해 불러오게 된다.


    끝! 포스팅이 지저분하긴 하지만 끝까지 참고 만든다면 거뜬하게 완료 / 안된다면 댓글 달아주세요


'개발 > RoR' 카테고리의 다른 글

루비온레일즈(Ruby on Rails) 루비 기초 문법  (0) 2017.03.29

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 버튼이 생기고, 절차에 따라 누르면 풀리퀘스트가 진행된다.

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

마치며

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

'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (5) 2017.10.14
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (0) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

자바스크립트 알고리즘

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

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

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

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

tryhelloworld 사이트


+ Recent posts