전 직장을 퇴사하고 바닐라코딩 Prep에 참가해 JavaScript를 공부하던 중, SW 사관학교 정글 4기 모집 알림이 문자로 도착했다. 3기에서 과제를 다 완성시키지 못해 떨어졌었는데 이번엔 꼭 통과하고자 하는 마음이 불타올랐다! 🔥 (2기 때도 지원을 했었는데 떨어졌었다! ^.^)

 SW 사관학교 정글이란?

 코딩, 컴퓨터 공학에 대한 아무런 베이스가 없는 사람들이 CS 기초 지식을 습득할 수 있게 해주고, 지속적으로 성장할 수 있는 정예 개발자로 만들어주는 코딩 캠프이다. 크래프톤, 카이스트, 팀스파르타가 협력하여 만들어진 프로그램으로 카이스트에서 5개월간 진행된다.

 * 더 자세한 사항들은 정글 홈페이지에서 확인 가능합니다. https://swjungle.net/

 지원과정

지원서 작성

- 경력, 코딩 관련 경험, 졸업 예정인 혹은 졸업한 대학교, 1분 영상, 4가지 항목의 질문 등

 코딩 관련 경험은 없어도 무방하다고 한다. 또한 내가 합격한 것을 보니 출신 학교는 전혀 상관 없을 것 같다. 1분 영상으로는 가장 몰입했던 경험을 요구한다.

 참고로 지원서를 작성하는 과정 중에 5만원을 결제하게 되는데, 이는 입학 시험을 준비할 수 있는 자료를 얻기 위함이다. 그리고 구글 폼으로 작성하기 때문에 지원서를 제출하고 나면 재확인이 불가능하다. 면접에 대비하여 사소한 것들 모두 다른 곳에 저장해두길 추천한다.

입학 시험 자료 공부

 정말 기초부터 학습할 수 있다. vscode 설치부터 HTML, CSS, JavaScript, Python 기초를 배우게 된다. 그리고 백엔드, 데이터베이스, AWS를 이용한 배포 영역까지 간단하게나마 경험할 수 있다. 해당 자료를 공부하면 작은 사이트를 만들어 다른 사람이 써볼 수 있게 하는 배포까지 경험이 가능한 것이다. 사이트가 어떻게 만들어지고 어떻게 배포가 되는지 전체적인 과정을 경험할 수 있어서 웹 개발을 경험해보기 정말 좋은 자료였다. 5만원이 정말 아깝지 않았다. 사실 나는 2, 3, 4기 모두 지원했기 때문에 15만원을 썼다! ^.^;; 헤헷! 😆

입학 시험

 4기는 토요일 10시에 시험이 오픈되고 문제를 확인할 수 있다. 그리고 완성까지 7시간이 주어진다.

 잘 되다가도 중요한 부분에서 에러가 계속 나서 갈아엎기를 몇 번 반복했다. 그래도 열심히 구글링하고 이것저것 시도해본 덕에 과제를 완성했다.

 과제에서 요구하는 것들을 갖추는 것에는 입학 자료에 힌트가 다 있다. 완벽히 구현하는 데에는 충분할 지 모르겠는데 입학자료를 충분히 이해하면 어느 정도 과제를 완성시킬 수 있다고 생각한다. 3기 때는 충분히 이해하지 않고 그냥 한 번 해보고 넘어가다보니 떨어졌었던 것 같다.

면접

 시험이 끝나고 나서 당일인가? 다음날 바로 결과가 나왔다. 3기 때 지인한테 듣기론, 과제를 완성하고도 떨어졌다는 사람이 있다는 소리를 들어서 떨어질 수도 있다는 생각이 들었는데 정말 다행이었다...

 면접 준비는 블로그 후기들을 정말 많이 참고했다. 타 블로그에 나오는 것처럼 지원서 바탕으로 면접 질문을 대비하면 될 것 같다. 나 같은 경우는 쪼오끔 사소한 부분도 질문을 하셨었다. 무엇보다 왜 소프트웨어 분야로 뛰어들고 싶은지, 왜 개발자가 되고 싶은지, 정글이 필요한 이유를 준비하면 될 것 같다.

 개발자가 왜 되고 싶은지에 대해서는 생각을 많이 했는데, '좀 더 나은 세상을 만들고 싶어서'라는 거창한 것 보다는 그저 영화에서 본 해커가 멋있어 보였다는 둥 키보드 치는 느낌이 좋다는 둥 생각한 대로 동작할 때 만족감이 든다는 둥 그냥 코딩이 왜 재밌게 느껴졌는지로 수렴되었다. 아무리 생각해도 거창한 이유는 없었기 때문이다. ㅎㅎㅎ

결과 발표

 면접을 끝내고, 또 바닐라코딩 Prep 멘토링을 끝내고 한숨 자고 난 후, 이것저것 하면서 쉬던 도중 혹시!? 하는 생각으로 Gmail을 확인했다. 오전 9시에 면접을 보았는데 4시간 이후인 오후 1시에 이미 결과 메일이 날라와있었다. 

 퇴사하고... 뿌옇게 보이던 미래가 조금씩 선명해보이기 시작했다. 개발자에 한 발자국 가까이 가게 되었다는 생각에 정말 기뻤지만 무엇보다 제대로 시작할 수 있다는 생각이 나를 더욱 기쁘게 했다. 그저 그런 개발자가 되긴 정말 싫었기 때문이다.

 개인적인 사족

 정글에 합격했지만 나에게는 2가지 선택지가 남아있었다.

 바닐라코딩 Prep에 계속 참여해서 바닐라코딩 부트캠프에 참여할 것인가? 아니면 정글에 참여할 것인가? 이미 후자로 마음이 기울었지만 그래도 후회하지 않도록 면밀히 따져보았다.

 먼저 바닐라코딩을 참여할 경우 코딩 테스트를 통과해야 되고, 집도 서울에 구해야 했다. 바닐라코딩 Prep에는 만족스러움을 느끼고 있었으나(바닐라코딩 Prep 후기는 따로 작성하겠다) 내가 코딩 테스트를 통과할지 의문이었다. 그리고 서울 생활을 해보게 된다는 것은 좋았으나 하필 2, 3월이라 집을 구하기 쉽지 않을 것 같았다.

 비용적인 측면도 무시할 수 없다. 바닐라코딩의 경우 정말 좋은 부트캠프로 소문이 자자하고 후기도 많으며 커뮤니티 또한 활발해 취업을 하고 난 후에도 도움이 많이 된다고 들었으나 가격이 Prep과 부트캠프까지 합치면 1500만원에 달한다. 퇴사하면서 '이정도는 미래를 위해 투자할만해!'라는 마음을 굳게 먹었지만, 비교적 적은 돈을 지불하는 정글에 합격하니 이런 것 까지 고려할 수 밖에 없었다. 그리고 유명한 IT 스타트업에서 HR로 일하는 친한 친구가 정글을 적극적으로 추천해주었다. 정글 수료생들의 수준이 정말 높았다고 했었다.

 바닐라코딩이든 정글이든 무엇이 나에게 좋은 선택이 될지는 6개월 뒤에 알 수 있을 것 같다.

 마치면서

 들뜨면 안된다는 것을 알면서도 설레이는 것은 어쩔 수 없다. 내가 언제 카이스트를 가보겠는가? 또 언제 대학 생활을 다시 해볼 수 있겠는가? 스스로 노력해서 얻어낸 기회들 중 가장 값진 경험이 되지 않을까 싶다.

 지금부터가 중요하다. 처음에 잘 배워두는 것이 얼마나 중요한 것인지 잘 알고 있다. 오로지 학습에만 몰두할 수 있게 현재 자취방도 잘 정리하고 갈 생각이다.

 이미 전 글들을 읽어주신 분들이라면 어느 정도 예감이 되는 제목이다.

 뭐가 그렇게 안 맞았을까... 왜 나는 퇴사를 할까...

 사람

 익히 들어보았을테지만 회사 생활에 있어 이런 말이 있다.

 '최고의 복지는 최고의 동료이다.'

 물론 나에게 해당하는 말은 아니었다.

 설비 유지보수에 대한 자료가 어느 정도 존재하기 때문에 '형식지'를 통해 배우는 직무라고 할 수도 있겠지만, 결국엔 사람으로부터의 '암묵지'로 업무 대부분을 배우게 된다. 갑작스럽게 생겨난 문제를 짧은 시간내로 해결해야 하기 때문에, 저년차의 경우 신속히 선임자에게 물어볼 수 밖에 없다. 근데 당신의 선임자가 물어볼 때마다 간헐적으로 한숨을 쉬고 귀찮은 듯이 말하면 어떻겠는가? 하... 글쓰는 지금도 답답하다. 말로는 소통 좀 하면서 업무하라고 하면서 막상 소통하려고 물어보면 '그런 것도 물어보냐? 하...', '대졸이 이것도 몰라?'라는 태도가 물씬 느껴진다. 구질구질해서 내가 겪은 예시들은 못 적겠다.

 어쨋든... 이런 태도는 문제가 생겼을 때 결국엔 꾸역꾸역 혼자 판단하게 만들어버렸다.(물론 아주 작은 상황들에 한해서이다. 큰 문제에서 발생한 실수는 대형 사고를 유발하기에 물어볼 수 밖에 없다. 근데 물어보면 안 가르쳐 주고 그냥 본인이 해버리더라^^. 일은 정말 잘하는 사람인데... 후배 양성에는 쥐약인 사람같다. 그럴 의무는 없지만...) 혼자만의 판단은 작은 실수로 이어졌고, 멍청한 놈으로 연이어 낙인 찍히며 제대로 업무를 배우지 못하는 상황이 악순환되었다. 나도 처음엔 정말 열심히 열정있게 물어봤다. 일찍 출근하여 알아보기도 했고. 하지만 이런 분위기는 결국엔 나를 딱 기본만 하는 사람으로 만들어버렸다.

 다른 사람한테 물어보면 되지 않냐고? 이건 주저리주저리 쓰기엔 너무 구차하기 때문에 길게 쓰진 않겠지만 결국엔 교대 근무 특성 상 '그 시간대에 가장 적절한 방법을 제시할 수 있는 사람이 적다', '다른 사람도 모른다'라고 하겠다.

 사람이 퇴사의 주 원인처럼 적었지만, 그건 아니다. 큰 원인은 맞지만 어딜 가나 그런 사람은 존재한다고 생각했기 때문에 부서 이동이 아니라 퇴사를 선택했기도 하다. 근데 어쩌면 나 자신이 자존심을 세우는 중일 수도 있다. '겨우 사람 때문에 퇴사를 한다고? 어딜 가든 그래 임마!'라는 말에 수긍해 패배자가 되는 것을 피하기 위해서...

 야간 근무

 육체적으로 가장 힘들었던 것이다. 빨리 자진 않지만 규칙적인 생활을 지향하는 나로서는(규칙적으로 생활하진 않지만 그런 생활에 동경심이 있다) 새벽에 깨어 있고 아침에 잔다는 것이 나를 상당히 괴롭혔다. 몇 년 해보지도 않았지만 건강도 급격히 나빠지는 것을 실제로 느꼈다.

 나로서는 그랬다는 거다. 터놓고 말해서 나의 생각으론 이해가 되지 않으나 야간 근무는 상관없다, 오히려 좋다라고 하는 사람도 있다.(많다라고는 안하겠다. 대부분의 교대 인원들에게 야간 근무를 안할 수 있는 기회가 주어지면 어떻게 할거냐?라고 물어보면 10의 9는 안하겠다고 한다)

 솔직히 알지 않았느냐, 교대 근무하는 것을?

 그렇다. 설비 엔지니어를 지원하는 것은, 혹은 장비사 CS 엔지니어를 희망한다는 것은 교대 근무에 몸 담겠다는 암묵적인 동의이다. 요즘처럼 현직자의 삶을 잘 알 수 있는 시대에 몰랐다는 것은 그만큼 정보를 안 찾아봤다는 의미로 생각된다. 그렇기에 나도 당연히 알았다.

 실패다. 단호히 말해서 교대 근무를 해본 경험은 나에게 실패이다. 난 똥인지 된장인지 찍어 보고 입 속에 집어 넣어 혀를 돌려 음미해야 판별할 수 있는 사람이다. 교대를 희망하진 않았지만, 아니 오히려 지독히 피하고 싶었지만 '반도체', '삼성'이라는 단어에 속아 '교대 정도는 괜찮아!'라고 세뇌시켜가며 가장 쉽게 취업할 수 있는 설비 엔지니어를 골랐던 것이다.

 부수적으로 나를 힘들게 했던 것들은 특근이나 방진복, 라인 근무 정도가 있겠다. 이틀 연이서 쉴 수 있는 날이 한 달에 1번, 길면 2달에 1번 정도 였다. 그리고 방진복이 나의 감각을 다 죽여버렸다. 헤헷! 조금 개성 있게, 나에게 맞게 옷을 나름 잘 입고 다닌다고 생각했는데 여기서 감각이 다 죽어버렸다! 출근하면 6 ~ 7시간 방진복을 입고 있고, 나오면 땀에 조금 젖어 편한 옷을 결국엔 찾게 된다. 또한, 업무가 라인에서 대부분 이루어지다보니 뭐라 해야 될까? 시야가 좁아지고 협력하는 범위가 좁아졌다는 느낌이 들었다. 제한된 사람만 만나 일했다. 그리고 서로 마주 보며 상호 반응하고 이해해 협력하는 것이 아니라, 상대방의 기분을 느끼기 어려운 메신저로 대부분의 소통이 이루어졌다. 

 '그래도 좋은 점은 있어요. ㅎㅎ'라고, 마치 단점이 있으면 장점도 있다는 듯이 말하는 클리셰같아 이런 말을 하긴 싫지만(싫은 이유는 모르겠다. 그냥 몸이 거부를 한다), 그래도 사실은 사실이다. 장점도 존재한다.

 돈

 1년 밖에 근무를 안했는데도 다른 회사를 다녔을 경우 단 한푼도 안쓰고 모은 정도의 자금이 모였다. 신입사원에게 이정도로 퍼붓는 것은 이 업계가 얼마나 돈을 잘버는지 보여주는 증거라는 생각이 든다. 물론 메모리로부터 대부분의 영업 이익이 발생하겠지만!

 요즘 이천/청주에 위치한 다른 반도체 기업과 총 소득이 얼마냐는 대결이 한창인데, 그 기업보다 적게 받았을 지라도 나로서는 지금 모은 돈도 감지덕지로 생각하고 있다. 적어도 1년간 새로운 커리어를 준비하기에는 적절한 돈이지 않을까 싶다.

 사람

 사실 위에서 말한 사람 문제는 단 1... 2명? 정도로부터 피어나는 불편함이었다. 그 말은 다른 사람들은 나에게 아무런 어려움을 주지 않았다는 것이다. 따뜻한 말을 건내주는 분들도 있었고 도움을 요청하면 도와주려는 사람들로 넘쳐났다. 

 성취감

 원리를 알고 난 후 적절한 해결 방안을 통해 문제를 처리했을 때 성취감은 분명 존재한다. 생각대로 흘러가고 하드웨어적인 지식을 적용해서 문제를 풀면 재밌기도 하다. 문제가 해결되고 움직이는 설비를 보면 흥미롭기도 하다. 여기서 생겨난 자신감으로 CS분들이든 설비엔지니어든 업무에서 만족감을 느끼며 일하고 있지 않을까 싶다.

 단점은 나를 떠나게 만들었을 수 있지만 치명적이진 않았다. 반면, 장점은 나를 머물게 만들었을 수 있지만 끌리진 않았다.

 그냥 복합적인 상황에서 결국엔 더 먼 미래를 보았다. 사람이 문제라도, 근무 환경이 척박해도 이겨내고 배우고 싶은 분야가 무엇일까. 장점에만 눈이 멀어 현실에 안주하지 않을 분야는 무엇일까.

 고심 끝에 단순하지만, 결국엔 나라는 인간은 하고 싶은 걸 해야 하는 인간이라는 결론에 도달했다. 그리고 코딩을 선택했고... 어쩌면 요즘 코딩이 유행이고 유망하고 취업하기 쉽기 때문에 선택한 것 아니냐?라는 말을 할 수도 있다. 근데 현재 내가 느끼기엔 이게 가장 나한테 맞다고 생각했다. 각자 나름의 사연이 있는 것 아니겠는가.

 1년 뒤에는 어떻게 되어 있을지 상상이 전혀 안된다. 그래도 나는 똥된찍이다. 해보고 싶은 것은 그냥 해보려 한다.

• Number Baseball, 숫자 야구

 숫자 야구란, 랜덤한 세 자리 숫자가 주어지면 그 숫자가 무엇인지 맞혀보는 게임이다. 숫자와 숫자가 위치한 자리까지 일치하면 Strike, 자리는 일치하지 않으나 포함되어 있으면 Ball로 처리된다. 예를 들면, 랜덤한 숫자가 375이고 내가 745라고 예상했다면 7은 자리는 일치하지 않으나 포함되어 있으나 1 Ball로 처리되고, 4는 아예 포함되어 있지 않으니 Strike나 Ball 둘다 아니다. 5는 숫자와 자리까지 일치하니 1 Strike가 된다.

 숫자 야구에 대한 자세한 설명 : https://namu.wiki/w/%EC%88%AB%EC%9E%90%EC%95%BC%EA%B5%AC

 크게 막히는 부분은 없었다. 비효율적일 순 있으나 내가 설계한 대로 동작이 잘되니 뿌듯하다. 중간 중간에 구글링으로 필요한 것을 찾아내는 방법도 어느 정도 익혀가는 것 같다. 특히 MDN을 되도록이면 참고하려고 했다. 1차적인 자료를 읽어서 제대로 이해하고 써먹는 것이 나중에 응용하는 데에 있어 좋을 것이라 생각했기 때문이다. 뭐든 뿌리를 알아야 되지 않을까!

• HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link
      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Baseball Project</title>
  </head>

  <body>
    <section>
      <div class="image-box">
        <img src="images/vanilla_coding_logo.png" />
      </div>
      <h1>Baseball</h1>

      <!-- 야구게임 Start -->

      <div class="contents">
        <div class="clickButton">
          <button id="startButton">Start</button>
          <button id="restartButton">Restart</button>
        </div>
        <br />
        <div class="notificationBox">
          <p id="notice">[Notice!]</p>
          <ul>
            <li><p>Press the start button at first</p></li>
            <li><p>Please enter only number</p></li>
            <li><p>Don't enter duplicate number</p></li>
          </ul>
        </div>
        <div id="numberBox"></div>
        <div class="strikeBall">
          <div id="strike">Strike</div>
          <div id="ball">Ball</div>
          <div id="chance"></div>
        </div>
        <input
          type="number"
          id="inputNumber"
          oninput="handleOnInput(this, 3)"
          placeholder="What is your number?"
        />
      </div>

      <!-- 야구게임 End -->
    </section>

    <script src="index.js"></script>
  </body>
</html>

• CSS

body {
  background-image: url("./images/bg.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: "Varela Round", sans-serif;
}

.image-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 700px;
  height: 200px;
}

h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  font-size: 36px;
}

.contents {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.notificationBox {
  padding: 15px;
  border: 3px solid black;
  border-radius: 5px;
  background-color: white;
  font-size: 20px;
  font-weight: 300;
  color: black;
}

#notice {
  padding-top: 0px;
  text-align: center;
  font-size: 25px;
  font-weight: 900;
}

#numberBox {
  margin-top: 30px;
  width: 400px;
  height: 200px;
  border: 3px solid black;
  border-radius: 3px;
  background-color: yellow;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  font-size: 50px;
}

.strikeBall {
  margin-top: 20px;
  display: flex;
  width: 200px;
  height: 25px;
  border: 3px solid black;
  border-radius: 3px;
  background-color: rgb(20, 207, 231);
  justify-content: center;
}

#strike {
  margin-top: 2px;
  margin-right: 30px;
}

#ball {
  margin-top: 2px;
  margin-right: 30px;
}

#chance {
  margin-top: 2px;
}

#inputNumber {
  margin-top: 20px;
  margin-bottom: 20px;
}

• JavaScript

var numberArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
var startButton = document.querySelector("#startButton");
var restartButton = document.querySelector("#restartButton");
var inputNumber = document.querySelector("#inputNumber");
var numberBox = document.querySelector("#numberBox");
var strikeNumber = document.querySelector("#strike");
var ballNumber = document.querySelector("#ball");
var chance = document.querySelector("#chance");
let randomArray = [];
let chanceNumber = 10;
chance.textContent = chanceNumber;

inputNumber.style.display = "none";

restartButton.addEventListener("click", function reload() {
  location.reload();
});

startButton.addEventListener("click", function createNumber() {
  inputNumber.style.display = "";
  startButton.remove();
  numberBox.textContent = "? ? ?";

  for (var i = 0; i < 3; i++) {
    var randomIndex = Math.floor(Math.random() * numberArray.length);
    var randomValue = numberArray[randomIndex];
    numberArray.splice(randomIndex, 1);
    randomArray.push(randomValue);
  }

  alert("Here is a new number. Guess what it is!");
  console.log(randomArray);
});

function handleOnInput(el, maxlength) {
  if (el.value.length > maxlength) {
    el.value = el.value.substr(0, maxlength);
  }
}

inputNumber.addEventListener("keypress", function (key) {
  if (key.key === "Enter") {
    var inputValue = inputNumber.value;
    var inputValueArray = Array.from(inputValue);
    console.log(inputValueArray);

    if (inputValueArray.length < 3) {
      alert("Please enter 3 digit number");
      return;
    }

    var strike = 0;
    var ballcount = 0;

    for (var i = 0; i < 3; i++) {
      if (inputValueArray[i] === randomArray[i]) {
        strike += 1;
      }
      if (randomArray.indexOf(inputValueArray[i]) >= 0) {
        ballcount++;
      }
    }

    var ball = ballcount - strike;

    if (ball < 0) {
      ball = 0;
    }

    strikeNumber.textContent = strike + "S";
    ballNumber.textContent = ball + "B";

    console.log("strike : " + strike);
    console.log("ball : " + ball);

    if (strike === 3) {
      numberBox.textContent = randomArray.join("");
      alert(`YES! That's right!`);
    }

    chanceNumber = chanceNumber - 1;
    chance.textContent = chanceNumber;

    if (chanceNumber === 0) {
      alert("Over! Please click restart button");
      inputNumber.remove();
    }
  }
});

 HTML과 CSS에서는 그저 배웠던 것들을 적용하면 되었기 때문에 크게 문제가 되는 건 없었다. JavaScript를 짤 때 몇 가지 문제에 직면해 애를 먹었다. 그 문제와 해결은 다음과 같이 했다.

 0. 숫자 비교 등은 어떻게 할 것인가!

 -> 일단 배열 형태로 랜덤한 숫자가 생성되게 하고, 유저가 입력하는 숫자도 Array.from으로 배열로 바뀌게 했다. 그 후 for문을 사용해 랜덤 숫자와 유저의 숫자를 비교했고 일치하면 strike의 숫자가 올라가게 했다. ball은 indexOf를 사용해서 count했다. 해당 숫자가 랜덤 숫자(randomArray)중에 존재하기만 해도 1이 올라간다.(ballcount++)

 0-1. 이 때 문제가 생기는 것은 ball이다.

 -> 랜덤한 숫자가 375이고 유저의 예상 숫자가 357이라면 strike는 정상적으로 1이 뜨나 ball은 3이 떠버린다. 1strike 2ball이 떠야되기 때문에 이는 잘못된 것이다. 하지만 간단하다. ball - strike해주면 된다 ^.^ ball - strike이 진짜 ball이기 때문에 앞의 ball은 ballcount로 만들었다.

 1. 세 자리가 중복되지 않으면서 랜덤한 숫자 생성

 -> 랜덤한 세 자리 숫자 생성을 위해 Math.floor와 Math.random을 사용했고, 중복되지 않도록 한 번 뽑힌 숫자는 splice로 제거 했다.

 2. 3자리 숫자만 입력하게 하기

 -> input의 type이 number일 때는 maxlength와 minlength가 안먹힌다. 그래서 handleOnInput을 사용해주었고 입력받은 숫자가 3자리 미만일 때는 곧바로 return이 되어 inputNumber에 추가된 함수가 종료되도록 하고 alert창을 띄우게 했다.

 3. 여러번 start를 누를 경우, input에 여러번 입력할 경우 의도하지 않은 바가 나타난다.

 -> 위 설계는 여러번 start를 누른다고 계속해서 랜덤한 3자리 숫자가 나타나지 않는다... 그리고 start를 누르지 않았는데 input에 입력하면 10번의 chance가 입력할 때마다 감소한다. 이것들은 단순하게 때에 따라 display를 none하는 것을 이용했다. 

 다른 사람이 어떻게 작업했는지는 모르겠다. 당연히 나보다 잘했겠지... 일부러 안 찾아보고 되는 대로 raw하게 해보자 생각하며 시도했는데 좀 퀄리티가 처참한 것 같다 ㅎㅎㅎ

• Koans

 JavaScript-Koans : https://github.com/mrdavidlaing/javascript-koans

 Koans는 선문답이라는 뜻이다. 그냥 먼저 묻고 답한다는 건가? ㅎㅎㅎ

 Github에서 남이 작성한 코드를 다운 받는 것도 처음이고, Readme를 읽는 것도 처음이었다. expect, it, describe를 본 적이 없으며 영어로 된 것들을 해석한다고 1문제부터 막혔었다. 진짜 쉬운 문제였는데...

 JavaScript의 문법에 대해 기초적인 것들을 다루는 문제였다. 사실 완전히 다 이해하진 못했지만 어느 정도 감을 익혔고 자신감이 붙었다. MDN도 진짜 많이 뒤져봤다.

 후에 JavaScript를 더 사용해보고 다시 풀어봐야 겠다.

 위에 enlightenment라는 단어가 있는데 깨우침, 이해, ... 혹은 계몽?이라는 뜻이라고 한다. 다 맞췄다고 해서 깨우쳤다고 할 수 없을 것 같고, 응용할 수 있을 때 비로소 깨우쳤다고 말할 수 있을 것 같다. 헤헷

 대참사다. 2시간 정도만에 만들긴 했지만 중복이 엄청나다. 동작이 잘되고 나름 응용을 섞었기 때문에 보람차긴 하지만 for문을 이용했으면 상당히 압축되었을건데 아쉽다. 코딩 실력이 아직 거기까진 부족한 것 같다. 아무래도 JavaScript 기본서 책 1권이 필요하다는 생각이 들었다.

• Carousel, 캐러셀

 Carousel은 회전목마 혹은 수하물 컨베이어 벨트를 뜻하는 단어이다. 둘의 공통점은 반복해서 돌아간다는 점이다. 웹에서 Carousel은 이미지 등의 컨텐츠를 노출시키기 위한 UI로 활용된다.

 1. 요구 사항

 위 UI를 봤을 때 우리는 직감하는 것이 몇 가지 있다. 왼쪽, 오른쪽 버튼을 누르면 흰색 네모 칸의 컨텐츠가 바뀔 것이고, 아래의 점들을 누르면 해당 점에 일치하는 컨텐츠로 흰색 네모 칸이 바뀔 거라는 것이다.

 2. 나의 풀이

 이번 퀴즈는 Boilerplate Code가 제공되어 해당 코드를 재활용했다.

 * Boilerplate Code란 여러 곳에서 재활용 될 수 있는, 반복적으로 비슷한 형태를 띄는 코드를 뜻한다. 1890년대 광고나 컬럼에 반복적으로 사용되는 텍스트를 찍어내기 위해 강철판에 텍스트를 새겨 인쇄를 했었는데, 이것이 어원이 되었다.

 - HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Carousel Project</title>
  </head>

  <body>
    <section>
      <div class="image-box">
        <img id="logo" src="images/vanilla_coding_logo.png" />
      </div>
      <h1>Carousel</h1>
      <h1 class="nowNumber">Number : 1</h1>

      <!-- Carousel Start -->
      <div class="contents">
        <button id="left"></button>
        <img class="image1" id="vanilla" src="images/image-1.png" />
        <button id="right"></button>
      </div>

      <div class="dots">
        <button id="dot1"></button>
        <button id="dot2"></button>
        <button id="dot3"></button>
        <button id="dot4"></button>
        <button id="dot5"></button>
      </div>
      <!-- Carousel End -->
    </section>

    <script src="index.js"></script>
  </body>
</html>

 CSS, JavaScript는 모두 파일 형태로 불러오는 방식이 사용되었다. 그리고 nowNumber를 추가하여 현재 컨텐츠가 몇 번째 컨텐츠인지 알 수 있게 하였고 left와 rigth 버튼, 점 버튼들을 추가했다.

 - CSS

body {
  background-image: url("./images/bg.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: "Varela Round", sans-serif;
}

h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  font-size: 36px;
  margin: 0;
}

.image-box {
  text-align: center;
}

#logo {
  width: 800px;
}

.contents {
  display: flex;
  justify-content: center;
}

#left {
  border-radius: 100px;
  border: none;
  background-image: url("./images/left.png");
  background-position: center;
  background-size: cover;
  background-color: yellow;
  width: 50px;
  height: 50px;
  margin: auto;
}

#right {
  border-radius: 100px;
  border: none;
  background-image: url("./images/right.png");
  background-position: center;
  background-size: cover;
  background-color: yellow;
  width: 50px;
  height: 50px;
  margin: auto;
}

#vanilla {
  border-radius: 3px;
  border: 2px solid gray;
  background-position: center;
  background-size: cover;
  width: 400px;
  height: 400px;
}

.dots {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

#dot1,
#dot2,
#dot3,
#dot4,
#dot5 {
  margin-right: 20px;
  border: 1px solid black;
  border-radius: 100px;
  width: 10px;
  height: 15px;
  background-color: yellow;
}

 - JavaScript

var dot1 = document.querySelector("#dot1");
var dot2 = document.querySelector("#dot2");
var dot3 = document.querySelector("#dot3");
var dot4 = document.querySelector("#dot4");
var dot5 = document.querySelector("#dot5");

var img = document.querySelector("#vanilla");
var nowNumber = document.querySelector(".nowNumber");

dot1.addEventListener("click", function changeImage1() {
  img.setAttribute("src", "images/image-1.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image1");
  nowNumber.textContent = "Number : 1";
});

dot2.addEventListener("click", function changeImage2() {
  img.setAttribute("src", "images/image-2.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image2");
  nowNumber.textContent = "Number : 2";
});

dot3.addEventListener("click", function changeImage3() {
  img.setAttribute("src", "images/image-3.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image3");
  nowNumber.textContent = "Number : 3";
});

dot4.addEventListener("click", function changeImage4() {
  img.setAttribute("src", "images/image-4.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image4");
  nowNumber.textContent = "Number : 4";
});

dot5.addEventListener("click", function changeImage5() {
  img.setAttribute("src", "images/image-5.png");
  img.classList.remove("image1", "image2", "image3", "image4", "image5");
  img.classList.add("image5");
  nowNumber.textContent = "Number : 5";
});

var left = document.querySelector("#left");
var right = document.querySelector("#right");

left.addEventListener("click", function changeImageLeft() {
  if (img.className === "image1") {
    img.setAttribute("src", "images/image-5.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image5");
    nowNumber.textContent = "Number : 5";
  } else if (img.className === "image2") {
    img.setAttribute("src", "images/image-1.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image1");
    nowNumber.textContent = "Number : 1";
  } else if (img.className === "image3") {
    img.setAttribute("src", "images/image-2.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image2");
    nowNumber.textContent = "Number : 2";
  } else if (img.className === "image4") {
    img.setAttribute("src", "images/image-3.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image3");
    nowNumber.textContent = "Number : 3";
  } else if (img.className === "image5") {
    img.setAttribute("src", "images/image-4.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image4");
    nowNumber.textContent = "Number : 4";
  }
});

right.addEventListener("click", function changeImageRight() {
  if (img.className === "image1") {
    img.setAttribute("src", "images/image-2.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image2");
    nowNumber.textContent = "Number : 2";
  } else if (img.className === "image2") {
    img.setAttribute("src", "images/image-3.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image3");
    nowNumber.textContent = "Number : 3";
  } else if (img.className === "image3") {
    img.setAttribute("src", "images/image-4.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image4");
    nowNumber.textContent = "Number : 4";
  } else if (img.className === "image4") {
    img.setAttribute("src", "images/image-5.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image5");
    nowNumber.textContent = "Number : 5";
  } else if (img.className === "image5") {
    img.setAttribute("src", "images/image-1.png");
    img.classList.remove("image1", "image2", "image3", "image4", "image5");
    img.classList.add("image1");
    nowNumber.textContent = "Number : 1";
  }
});

 먼저 점들을 클릭할 때 해당 class의 name들을 모두 지워버리고(remove) 점 순서에 따라 일치하는 이미지를 추가하고 class를 부여했다.(add)

 화살표를 누를 때는 현 화면이 1번째 였다면 왼쪽 클릭 시 5번째로, 2번째 였다면 1번째로 이동하게 하는 매커니즘을 구상했다. 이 때에도 점을 클릭했을 때와 마찬가지로 기존 class의 name들을 모두 지워버리고(remove) 이동했을 때 일치해야 하는 이미지를 추가하고 class를 부여했다.(add) 오른쪽과 똑같이 동작되도록 했다.

 추가로 현 이미지가 몇 번째 이미지인지 boiler plate에는 없어서 nowNumber.textContent를 추가해 몇 번째 이미지인지 인지할 수 있게 했다.

 그렇다. 이보다 비효율적일 수는 없다. for문을 활용하지 못하는 적절한 예시이다. 코드가 짧아서 다행이지만 길어지고 부하가 많아질수록 비효율성을 두드러지게 나타날 것이다.

 정상적으로 동작된다는 것에 만족하지만, 중복은 프로그래밍에서 상당한 비효율성을 불러온다. 책을 사든 구글링을 하든 문법을 좀 배워서 타개해봐야겠다.

• Background Changer

 HEX Color Code란 RGB 방식의 '색상 코드' 표기법이다. #뒤에 여섯 자리의 글자가 오는데, 이는 0~9까지의 숫자 4개와 A~F까지의 알파벳 2개로 이루어져 있다. 예를 들면, #75E9A3, #F0C433 이런 것이다. 한 자리에  16가지가 들어갈 수 있으므로 16진수라고 보면 되겠다. 그렇다면 이런 헥스 코드로 만들 수 있는 색상의 수는 총 16^6으로 16,777,216개이다.

 1. 요구 사항

 - 위와 같은 UI를 만든다.

 - CLICK ME 버튼을 클릭 시 #3474FF(헥스 코드)가 랜덤하게 바뀐다.

 - CLICK ME 버튼을 클릭 시 헥스 코드가 바뀜과 동시에, 바뀐 헥스 코드에 일치하는 배경색으로 바뀐다.

 2. 나의 풀이

 - HTML + CSS

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Background Changer</title>
    <style>
      .wrap {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      p {
        font-size: xx-large;
      }

      button {
        font-size: xx-large;
        padding: 20px;
        border-radius: 5px;
        background-color: gray;
        color: white;
        border: black;
      }
    </style>
    <script defer src="js_vanilla_BackgroundChanger.js"></script>
  </head>
  <body>
    <div class="wrap">
      <p>
        HEX COLOR :
        <span>#0021FQ</span>
      </p>
      <button>CLICK ME</button>
    </div>
  </body>
</html>

 display: flex과 flex-direction: Column을 통해 HEX COLOR 문단과 CLICK ME 버튼을 열로 나열했다.

 align-items: center와 justify-content: center를 통해 HEX COLOR 문단과 CLICK ME 버튼을 정중앙에 배치시켰다.

 defer src를 통해 JavaScript 파일을 불러왔다.

 - JavaScript

var arr = [
  "0",
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
];

var button = document.querySelector("button");
var body = document.querySelector("body");
var span = document.querySelector("span");

button.addEventListener("click", function hexCode() {
  let result = "#";

  for (var i = 0; i < 6; i++) {
    var randomNumber = Math.floor(Math.random() * arr.length);
    var randomIndex = arr[randomNumber];
    result += randomIndex;
  }

  body.setAttribute("style", "background-color: " + result);
  span.textContent = result;
});

 일단 헥스 코드를 구성하는 16가지의 글자로 이루어진 배열부터 만들었다. 이부분은 힌트를 참조했다...

 CLICK ME라는 버튼을 "click"하면 function hexCode()가 실행되도록 이벤트를 추가했다.

 - function hexCode() 

1. 일단 헥스 코드가 #부터 시작할 수 있게, 또한 계속해서 변수가 재할당 될 수 있도록 let result = "#"을 선언했다.

2. 헥스 코드는 #을 제외한 6개의 글자로 이루어지므로 6번 반복되는 for문을 만들었다.

3. 0부터 1미만의 난수를 추출하는 Math.random과 뒤의 소수를 없애는, 내림시키는 Math.floor를 사용하면 무작위의 정수를 출력시킬 수 있다.

 Math.random() 실행 시 0.336288..., 0.749572..., 0.182934과 같은 0과 1사이의 난수가 추출된다. 여기에 10을 곱하면, 즉 Math.random() * 10을 실행하면 3.36288..., 7.49572..., 1.82934...와 같은 숫자가 출력된다. 여기에 Math.floor까지 실행하면, 즉 Math.floor(Math.random() * 10) 실행 시 숫자가 내림되므로 3, 7, 1과 같은 0부터 10미만의 정수가 랜덤하게 출력되는 것이다.

 중간에 10이 아니라 16을 곱했다면 0부터 16미만의 정수가 랜덤하게 출력된다. 이를 통해서 배열의 Index가 랜덤하게 추출되는 코드를 짤 수 있는데, 그대로 짠 것이 var randomNumber이다. 이러한 0부터 16미만의 랜덤한 정수를 arr 배열의 Index로 넣으면, arr 배열의 value들을 랜덤하게 추출할 수 있다.

 그리고 result += randomIndex를 통해, for문 안에서 6번 실행될 때마다 문자열이 계속해서 더해질 수 있도록 했다.

ex)

i = 0, result = "#" + "A" = "#A"

i = 1, result = "#A" + "6" = "#A6"

i = 2, result = "#A6" + "B" = "#A6B"

...

4. 마지막으로 setAttribute를 통하여 body에 style 속성을 추가하고 background-color가 result 값(for문을 마치면 최종적으로는 헥스 코드가 되어있다)에 맞게 설정되도록 했다. 또한 textContent를 통해 UI에 나타나는 헥스 코드 또한 result 값이 나타나도록 했다.