랜덤 명대사 추출

자바스크립트로 들을 수 있는 강의는 다 들었으니 엑스형 프로젝트 완성 작업을 다시 시작해 볼까 한다. 

 

일단 내가 이제까지 만든건 html과 css만을 사용한 단순 꾸미기 수준이었는데, 

이번에 구현할 기능들은 자바스크립트의 기능을 가져와야만 사용할 수 있는 기능들이다. 

 

1. 명대사 가져오기

2. 방명록

 

일단... 방명록은 database를 연결해야만 구현할 수 있는 기능이기 때문에 지금 당장은 pass 하고

먼저 만만해 보이는 랜덤 명대사 추출을 시도해봤다. 

 

아직 완벽하게 구현한건 아니지만 새로고침하면 랜덤으로 대사가 나오는 기능을 완성해서 기록용으로 적어본다. 

 

우선 이렇게 아이디어를 짜봤다.

1. 객체에 1부터 22까지 명대사들을 하나씩 value 값에 담는다. 

 

var lines = {
    "1" : "명찰 -2 웃기니까 +2 ㅋㅋ몰라 +10",
    "2" : "너 2개국어 하니 쟤는 해 새겨 들어.",
    "3" : "이쀼리들 헤쳐 모여.",
    "4" : "인순이형 참으세요! 또 정학당하면 어쩌려고 그래요.",
    "5" : "우리 학교에서 유일하게 영어 스펠링 명찰단 형.",
    "6" : "난 발기맛이 제일 좋아요. 형을 떠올리게 하니까요. 발기처럼 달콤한 핑크빛 제 마음이 느껴져요?",
    "7" : "우리 인준이 한테 마크가 있어서 다행이야.",
    "8" : "좀만 일찍 고백하지. <br> 왜? <br> 내 글 여주 모델을 너로 삼을걸",
    "9" : "영어 1등급 받겠다고.",
    "10" : "그러니까 철수야. 철수같이 굴지 마.",
    "11" : "난 발기맛이 제일 좋아요. 형을 떠올리게 하니까요. 발기처럼 달콤한 핑크빛 제 마음이 느껴져요?",
    "12" : "알 좀 빌려줘. 쌈마야.",
    "13" : "이동혁이 여기 없는 걸 감사해. <br> 그리고 오르지도 못할 자리 <br> 넘보지 마. 떨어질라.",
    "14" : "인준아. 형은 너희 집에서. <br> 형 집이에요.",
    "15" : "야 황.",
    "16" : "인준아. 난 너 좋아. 헛소리에 놀아나지 않아서. 없는 권력에 기생하지 않아서. 그러니까 널 구제해줄 사람은 너밖에 없어.",
    "17" : "난 콜라 대신 오렌지 주스잖아.",
    "18" : "이동혁은 미친 듯이 내 위로 계속 기어 올라왔다. 처절할 정도로 맹목적이었다. 네가 지킬 수는 있냐던 빈정을 행동으로 반박했다.",
    "19" : "요맨큼 빼고 전부 다.",
    "20" : "나는 형을 사랑해. 나는 나재민을 사랑해. 나는 이제노를 사랑해. 나는 이동혁을.",
    "21" : "그럼 또 어쩔 건데. 사랑은 다 소용없어. 내가 인터넷 소설만 봤어도 이건 알아.<br> 나중에 가면 다 헛짓이야. 쓸데없는 봉사고 적선이고 동정이라고. <br> 사랑이면 그 짓이 미화될 것 같아? 나중에 땅을 치고 후회해. <br> 아무 탈 없는 인간이나 만나서 행복하게 살아야 할 거 아냐. 캐나다 여권들고 떠나야 할 거 아냐. <br> 무슨 꼴 보겠다고 조센징. 그래 씨발 조센징 좆만한 땅에 비비고 살어. 형 미쳤어?",
    "22" : "동혁이네 가면 나도 동글이가 된 것 같아."
  };

이렇게 lines 라는 객체에 명대사들을 하나씩 담았다. 

솔직히 이게 효율적인지는 모르겠다. 일단 내가 할 수 있는 최선의 방법이었다. 

 

그리고 먼저 생각한건 객체에 있는 value 값들을 우선 모두 찍어보자는 거였다. 

그래서 for in 구문으로 value 값들을 아래와 같이 모두 찍어봤다. 

 

  for (prop in lines) {
    document.write(" \""+lines[prop]+ "\""+ '<br>');
  };

아무래도 대사이기 때문에 저 쌍따옴표가 대사 앞과 뒤에 붙었으면 하는 마음에서 코드를 이렇게 적었는데, 

문제는 2줄 이상의 코드이다. 각자 다른 인물이 하는 대사이기 때문에 한줄 한줄에 쌍따옴표를 붙여야 하는데 어떻게 해야할지 잘 모르겠다. 객체에다가 직접 넣어봤는데 코드가 돌아가지 않았다. 그런걸 보면 분명 에러가 있다는건데 

일단은 기능 구현이 우선이기 때문에 그냥 넘겼다. 

 

-> 나중에 디테일한 수정이 필요할때 꼭 고쳐놓고 싶다 

 

어쨌든 이렇게 쓰면 저 객체안에 담긴 모든 대사들이 화면에 뜬다. 

하지만 그건 별 상관이 없는 기능이고

내가 쓴 대사들이 잘 나오나 확인만 하고 주석처리한 기능이다. 

 

가장 포인트는 랜덤 혹은 사용자가 어떤 값을 입력했을때 대사가 랜덤으로 나오게 하는 기능을 구현하고 싶었으니까. 

 

일단 객체에서 랜덤으로 key가 아닌 value 값을 가져올 수 있는 함수를 만들어야 했다. 

당연한 소리지만 내 머리에서 단독으로 나오긴 힘들었다. 그래서 구글링을 해서 아주 간단한 코드를 모셔왔다. 

 

var randomProperty = function (lines) {
    var keys = Object.keys(lines);
    return lines[keys[keys.length * Math.random() << 0]];
};

내가 사용할 객체의 이름이 lines 이기 때문에 저렇게 들어가는거고

일단 keys에 Onjects.keys 메소드를 사용해서 lines에 있는 키값을 keys 라는 변수에 담는다. 

 

그리고 나서 key.length를 하면 객체에 있는 key들이 몇개인지 가져온다. 

이게 맞는건가 싶어서 console에 하나씩 다 찍어봤다. 

keys.length 를 하면 22가 나온다. 

 

그럼 이제 Math.random()을 활용하는건데 여기가 좀 이해가 잘 안됐다. 

하지만 하나씩 짚어가보면,

 

Math.random은 0부터 1까지의 random한 숫자들을 꺼내오는 메소드이다. 

즉, 저기에 출력되는 값은 0부터 0.1, 0.001, 02. ... 0.9, 0.99999999 등 이라는거다. 

 

그니까 22에다가 0부터 0.99999까지의 랜덤한 숫자를 곱하면 늘 22 미만의 매번 다른 값들이 만들어 질 것이다. 

그 다음에 <<0의 뜻을 알아낼려고 구글링 한 결과...

 

비트를 바꿔주는 문법이라는걸 알아냈다. 개어렵다 미친

일단 << 의 뜻만 보자면

 

4 << 2 (2칸 왼쪽으로 이동하라)
// 4 0000 0100 4
//   0000 1000 8
//   0001 0000 16
결과값 : 16

 

비트 관련 연산자는 모두 2진법을 기본으로 한다. 

그래서 먼저 2진법으로 변환 -> 비교 혹은 문법 실행 -> 다시 10진수로 변환 의 과정이다. 

4 << 2 는 비트를 왼쪽으로 두 칸 이동하라는 뜻인거다. 

4를 먼저 2진수로 변환하면 0000 0100 이고, 여기서 왼쪽으로 한 칸 이동하면 0000 1000 (8),

다시 한 칸 이동하면 0001 0000 (16)이 되서 

 

결론적으로 결과값이 16이 되는 문법이다. 

 

 

그러면 내가 긁어온 코드를 보면.......

22에다가 0부터 0.99999까지의 랜덤한 숫자를 곱하면 늘 22 미만의 매번 다른 값이 나올꺼고 이거를 2진수로 변환했다가 왼쪽으로 0칸 이동하고 다시 십진수로 변환하면 

 

????

 

뭐지

 

소수점이 있는 숫자들을 정수로 변환해주는 기능인건가? 

머리속이 혼란스럽다

대신 무조건 0부터 21까지의 정수만을 가져와야 할텐데...

 

쩝....

 

 

 

gg 치고 싶다. 코딩 잘하는 누군가가 있다면 물어보고 싶다...

 

 

하여튼 그냥 외우겠다. 저렇게 쓰면 0부터 21까지의 랜덤한 정수를 뽑아 낼 수 있는거라고 그냥 믿고 계속 쓰겠다. 

 

 

아니 근데 쓰다보니까 드는 의문.

그럴꺼면 그냥 Math.floor을 써서 소숫점을 다 없애서 정수화 시키면 되는거 아닌가?

 

한 번 해보겠다.

 

var randomProperty = function (lines) {
    var keys = Object.keys(lines);
    return lines[keys[Math.floor(keys.length * Math.random())]];
 
};

 

어우... 너무 잘된다 ㅋㅋㅋㅋㅋㅋ

걍 이렇게 쓸래 

이해하는 코드를 써야지 원

 

 

여튼 그래서 최종적으로 쓴 코드는 아래와 같다. 

 

var lines = {
    "1" : "명찰 -2 웃기니까 +2 ㅋㅋ몰라 +10",
    "2" : "너 2개국어 하니 쟤는 해 새겨 들어.",
    "3" : "이쀼리들 헤쳐 모여.",
    "4" : "인순이형 참으세요! 또 정학당하면 어쩌려고 그래요.",
    "5" : "우리 학교에서 유일하게 영어 스펠링 명찰단 형.",
    "6" : "난 발기맛이 제일 좋아요. 형을 떠올리게 하니까요. 발기처럼 달콤한 핑크빛 제 마음이 느껴져요?",
    "7" : "우리 인준이 한테 마크가 있어서 다행이야.",
    "8" : "좀만 일찍 고백하지. <br> 왜? <br> 내 글 여주 모델을 너로 삼을걸",
    "9" : "영어 1등급 받겠다고.",
    "10" : "그러니까 철수야. 철수같이 굴지 마.",
    "11" : "난 발기맛이 제일 좋아요. 형을 떠올리게 하니까요. 발기처럼 달콤한 핑크빛 제 마음이 느껴져요?",
    "12" : "알 좀 빌려줘. 쌈마야.",
    "13" : "이동혁이 여기 없는 걸 감사해. <br> 그리고 오르지도 못할 자리 <br> 넘보지 마. 떨어질라.",
    "14" : "인준아. 형은 너희 집에서. <br> 형 집이에요.",
    "15" : "야 황.",
    "16" : "인준아. 난 너 좋아. 헛소리에 놀아나지 않아서. 없는 권력에 기생하지 않아서. 그러니까 널 구제해줄 사람은 너밖에 없어.",
    "17" : "난 콜라 대신 오렌지 주스잖아.",
    "18" : "이동혁은 미친 듯이 내 위로 계속 기어 올라왔다. 처절할 정도로 맹목적이었다. 네가 지킬 수는 있냐던 빈정을 행동으로 반박했다.",
    "19" : "요맨큼 빼고 전부 다.",
    "20" : "나는 형을 사랑해. 나는 나재민을 사랑해. 나는 이제노를 사랑해. 나는 이동혁을.",
    "21" : "그럼 또 어쩔 건데. 사랑은 다 소용없어. 내가 인터넷 소설만 봤어도 이건 알아.<br> 나중에 가면 다 헛짓이야. 쓸데없는 봉사고 적선이고 동정이라고. <br> 사랑이면 그 짓이 미화될 것 같아? 나중에 땅을 치고 후회해. <br> 아무 탈 없는 인간이나 만나서 행복하게 살아야 할 거 아냐. 캐나다 여권들고 떠나야 할 거 아냐. <br> 무슨 꼴 보겠다고 조센징. 그래 씨발 조센징 좆만한 땅에 비비고 살어. 형 미쳤어?",
    "22" : "동혁이네 가면 나도 동글이가 된 것 같아."
  };
  </script>

  <script>
  // for (prop in lines) {
  //   document.write(" \""+lines[prop]+ "\""+ '<br>');
  // };

  var randomProperty = function (lines) {
    var keys = Object.keys(lines);
    return lines[keys[Math.floor(keys.length * Math.random())]];
    // return lines[keys[keys.length * Math.random() << 0]];
};
document.write(randomProperty(lines)+"<br>");

 

 

이렇게 써주니까 페이지를 새로고침 할 때 마다 랜덤한 명대사들이 로딩된다. 

휴.. 이 간단한것도 이리 오래걸리다니..

 

이제 다음 단계는

사용자가 값을 입력할 수 있는 input 창을 만들고, 거기에 어떤 값을 입력하면 그에 맞는 or 그냥 랜덤인 명대사가 alert 창 형태로 뜰 수 있도록 하는 것까지 만들면 된다. 

 

이제 그 alert 창 css 까지 완성을 해야지 완벽한 기능이겠지.

 

일단 쉬겠다.