정수제곱근 판별하기 (Level 1)

문제

nextSqaure함수는 정수 n을 매개변수로 입력받습니다.

n이 임의의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 임의의 정수 x의 제곱이 아니라면 ‘no’을 리턴하는 함수를 완성하세요.

예를들어 n이 121이라면 이는 정수 11의 제곱이므로 (11+1)의 제곱인 144를 리턴하고, 3이라면 ‘no’을 리턴하면 됩니다.

풀이

function nextSqaure(n){
  if ( Number.isInteger(Math.sqrt(n)) ) {
    return Math.pow((Math.sqrt(n)+1), 2)
  } else {
      return "no"
  }
}

루트n이 정수인지 판별 후에 참이면 루트n에 1을 더해 제곱한 값을 리턴하고 거짓이라면 no를 출력

메서드를 많이써서 깔끔해보이지 않으니 찝찝하다

다른 사람의 풀이

function nextSqaure(n){
  var result = 0;
  var x = 0;
  while (x*x < n){
    x++;
  }
  if (x*x == n){
    x++;
    result = x*x; 
  }else{
    result = 'no';
  }

  return result;
}

반복문, 조건문으로 풀이한 식 따봉이 8개인데 코드를 보며 이해하기는 쉽지만 복잡도는 O(N)이다.

내 코드가 더 낫다! 빼액!! (비하발언아님)

짝수와 홀수 (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_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에서 파일명을 검색해 불러오게 된다.
   
   
   끝! 포스팅이 지저분하긴 하지만 끝까지 참고 만든다면 거뜬하게 완료 / 안된다면 댓글 달아주세요

자바스크립트 알고리즘

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

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

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

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

tryhelloworld 사이트