오늘 한일

- AJAX를 이용하여 볼링 페이지 구현

- 블랙잭 구현 시작

• Card, Deck, Player 클래스 구현

• 52장의 Card들을 만드는 인터페이스 구현완료

• Player가 초기에 두장의 카드를 가지고, 추후 한장씩 카드를 추가 하는 메소드 구현

• 추가 구현해야 하는 사항 :

  • Player를 추상 클래스로 두고 유저와 딜러를 제작

  • 게임 진행을 관리하는 클래스

  • 결과 출력 및 추가로 카드를 받을지 여부 입력받는 부분(입출력 부분)

- 포비의 Logging 라이브러리 강의

오늘 느낀점

• 한주 동안 Javascript를 공부했던걸 회고 하자면, 저번 주말에 볼링 게임을 AJAX를 이용하여 웹에 올리려고 이전에 작업했던 체스와 슬립의 댓글에 사용된 코드들을 봤다. 그걸 이용하여 조금씩 바꿔가면서 작업을 했었는데 총체적 난국이였다. 한 반나절 작업하고 나서야 jQuery 파일 없이 jQuery 문법을 사용하고 있었다는걸 알았다. 당시 jQuery와 Javascript를 구분 할 줄 몰랐으며 또한 DOM을 어떻게 조작하는지, 결정적으로

  function hello(){
    console.log("hello world!!");
  }
  
  var hello = function(){
    console.log("hello world!!");
  }
  
  hello.onclick = function(){
    console.log("hello world!!")
  }
  
  hello.onclick = hello;
  

  위와 같이 함수들을 등록했을때 어떻게 다르며 어떻게 써야할지 너무 혼란 스러웠다. 토요일을 그렇게 좌절한 끝에 일요일에 그냥 처음부터 하기로 마음 먹었다. 그렇게 일요일에 HTML, CSS에 대해 간단한 공부 이후 월,화,수 간단한 Javascript 공부를 했다.

  덕분에 고생은 했지만 어제 밤에 처음 목표했던 볼링 게임에 AJAX를 무난히 적용했다. 해당 기간의 학습을 통해 Javascript를 잘하진 못하지만 간단히 사용할 줄은 알게 되었을 뿐만 아니라 다른 사람의 코드를 제대로 읽을 수 있게 됐다. 마무리하는 기분이 나게 오늘은 Javascript를 사용한 프로젝트를 하나 더 할려고 하다가 계획을 변경하여서 jQuery는 저번주에 날 좌절하게한 가장 큰 주범이라 호감이 안가서 아직 사용을 안해봤는데 앞으로는 간단한 페이지 작업할땐 jQuery를 이용하는게 더 효율적일걸 알기에 레벨1에서 진행하고 있는 프로젝트 중 하나인 블랙잭을 자바로 구현한 뒤 이번엔 jQuery를 사용하여서 AJAX를 적용하기로 정했다. 그러면서 일주일동안 손 놓았던 자바도 간단한 프로젝트를 진행하면서 객체 지향적인 설계를 다시 연습 할 수 있을 것 같다.

• 포비도 요번주 자바가 아닌 Javascript를 공부하는 걸 지지해준 덕에 정말 자바는 잠시 뒷전으로 두고 고민 없이 공부 할수 있었던거 같아 감사하다. 거기다 월,화요일에 강의에 참석하게 해준 호눅스 및 레벨1분들과 시도때도 없이 틈틈히 해대는 내 질문에 답변을 해준 프론트 + 백엔드 분들 덕에 고생을 덜하고 학습을 할 수 있었던거 같아 고맙다.

• Logging 라이브러리는 이전 9월에 혼자 학습하면서 책에 나와서 따라하면서 사용은 해봤는데 그냥 사용하는구나 하는 느낌과 단순히 출력 범위를 지정하여줘서 필요한 정보만 선별해서 볼수 있겠다는 느낌이였다. 필요한 정보만 선별하여 볼 수 있다는 점이 메시지를 보는 사람 입장에서만 아니라 서버측에서도 불필요한 IO작업을 줄일 수 있고, 필요에 따라 범위를 조정 할 수 있다는 점에서 확실히 유용한 라이브러리라고 느꼈다. 오늘 작업하는 블랙잭에서부터 한번 적용해 볼려고 하는데 의외로 아직 출력 부분이 작업이 없어서 사용은 못해보고 있는데 Logging 라이브러리를 사용하는 습관을 들여봐야겠다.

  강의의 좋은 점 중에 하나는 오늘처럼 책에서 볼때는 느끼지 못한 필요성을 왜 그런지 이해 시켜줌으로써 알수 있다. 거기다 따라 하다 안돼는 부분들이 있으면 해결 하는데 엄청난 고생을 하는데, 다 함께 하다보니 해결도 빨리 되고 왜 그러한 문제가 생겼는지도 배울수 있다는 장점이 있는거 같다. 덕분에 조금씩 흐려지던 pom.xml에서 scope에 대해 기존의 지식 + 체험으로 어떻게 작동하는지 확실히 기억하게 된 하루가 된거 같다.

내일 할일

• 블랙잭 완성

• 친구가 진행하는 세미나 참석

오늘 한일

- Javascript 공부

• AJAX

오늘 느낀점

• jQuery의 .ajax({…})이 아니라 JavaScript만 이용해서 XMLHttpRequest()로 Ajax를 구현할려다가 엄청난 난항을 겪었다. 다행히도 오늘 밤코가 끝나기 전에 트램의 도움으로 많은 부분이 해결 된거 같은데 마저 해봐야겠다.

• @RequestBody 어노테이션과 @ResponseBody 어노테이션은 각각 HTTP 요청 몸체를 자바 객체로 변환하고 자바 객체를 HTTP 응답 몸체로 변환한다.
  (출처: 장인개발자를 꿈꾸는 :: 기록하는 공간)

  브라우저에서 요청을 하면 controller에서 받기는 하는데 응답에서 지속적인 문제가 발생했었다. 그 덕에 하루종일 고생했는데 해당 어노테이션을 이용해서 해결했다. 이전에 @JsonProperty라는 어노테이션도 있었는데 내일 조금 찾아봐야겠다.

• 그래도 오늘 계속 해결이 안되면서 request와 response를 계속 쳐다봤는데(거의 readyState, status, response만 봤지만) 덕분에 브라우저와 서버가 무얼 어떻게 주고 받는지에 대해서 더 익숙해진거 같다.

내일 할일

• 이전에 만들었던 볼링, 체스에 AJAX 적용

오늘 한일

- Javascript 공부

• Javascript를 통한 DOM 조작

• Ajax

• Tram의 알고리즘 문제를 같이 분석

오늘 느낀점

• 원래는 오늘 Ajax 구현을 바로 해볼라 했는데 DOM 조작에 대한 부분을 좀더 공부 해 보고 싶어져서 가지고 있던 “Head First JavaScript” 책의 DOM 조작에 대한 부분을 읽다가 Ajax 내용도 있길래 해당 파트까지 책을 통해 공부 좀 했다. 다 읽고 나서 느낀점이 해당 시리즈가 좀 산만하고 난해하다고 느껴서 별로라고 생각했는데 의외로 구성이 괜찮다는 거였다. 단, 아예 모르는 내용들에 대해서는 안좋을거 같다. 거기다 Ajax는 열심히 읽고 보니 옛날 책이여서 그런지 JSON에 대한 내용이 없었다. 그 부분은 아쉽다.

• 알고리즘 문제를 같이 좀 봤는데 이번에도 codility를 통해서 시험을 보다보니 문제들이 영어다. 그래도 문제랑 예시를 보면 어느정도 이해가 되지만 간혹 애매한 조건 파악이 힘들때가 있다. 으…영어로 외국인이랑 대화 할때나, 스택오버플로의 질문/답변들이 해석될때는 보람도 있고 재미도 있는데 이런 알고리즘 문제에서의 영어는 재미도 없고 문제 이해도 덜 되니까 솔직히 좀 그렇다…

• Ajax를 못해서 아쉬운데 조금 있다가 작업을 해보고 자바를 다시 시작하는건 금요일 혹은 딱 시작하는 느낌 나게 다음주 월요일쯤 해야 할거 같다. 일단은 Ajax!!

• 오늘 저녁에 남은 사람들끼리 피자를 먹었는데, 피자 먹는 사람 모집 과정에서 처음 피자 얘기가 나왔던 백엔드 과정 분들 말고 다른 과정 분들은 반응이 시큰둥한데 내가 강요한거 같은데다가 판도 커지는 바람에(jk포함 12명) 소위 너무 “나댄거” 같아서… 찝찝했는데 다들 좋은 분위기에 잘 먹어서 다행이였다. 특히나 각 과정간 거리도 조금은 더 줄어든거 같아서 잘한거 같다. 근데 주문하기까지의 과정이 참 힘들었다….백엔드의 다른 분들이 도와줬기에 망정이지

내일 할일

• AJAX 공부

오늘 한일

- 자바스크립트를 이용하여 15퍼즐 구현

• 15퍼즐 화면

  

• 15퍼즐의 테이블에 이미지를 붙이는 코드

  var tbody = document.getElementById("puzzle-body");
  
  var pieces = [];
  for(i = 1; i < 16; i++){
      pieces[i - 1] = new Image(80,80);
      pieces[i - 1].src = "./images/num" + i + ".gif";
      pieces[i - 1].id = i - 1;
  }
  
  ~생략~   
  
  var createBoard = function(){
    for(j = 0; j < 16; j++){
        if( j % 4 == 0){
            row = tbody.insertRow(j/4);
        }
        var cell = row.insertCell(j%4);
        cell.appendChild(pieces[j]);
        tbody.onclick = function(event){
            var flag = check(event.target.id);
            if(flag){
                swap(event.target.id);
            }
        }
    }
  }
  

오늘 느낀점

• 일단 처음 목표 했던 Javascript를 활용한 기초적인 DOM조작은 할 수 있데 된거 같다. Javascript를 잘 쓸줄 알면 좋겠지만 현재 상태에서는 필요한게 있으면 잘은 아니여도 만들줄 알고 추가적으로 학습 할 수 있는 수준이 된거 같다. 그래서 위의 코드를 봐도 알지만 로직상으로는 딱히 좋은 코드는 아니다. 그래도 목표했던 DOM 조작은 가능하게 되었다.

• Javascript는 옛날에 생활코딩의 웹 애플리케이션 만들기강의와 7월달에 웹브라우저 자바스크립트강의 때 이고잉님을 따라 몇몇 코드를 콘솔창에서 따라 쳐본게 끝이였다.(그 상태서 화이트 과정때 아주 잠깐 만져봤다)그런 의미서 HTML은 DOCTYPE부터 아무것도 안보고 내가 직접 치고, Javascript도 어플리케이션의 로직을 생각해서 직접 쳐본게 몇일 전이였다.(심지어 작성한 코드를 어떻게 실행시켜야 할지도 몰라서 월요일엔 호눅스 수업에서 피보나치 수열을 구현하고 어떻게 실행시켜야 하는지 물어봤다…) 그런 의미에서 최근 3일간 계산기, 행맨, 15퍼즐을 만들면서 장족의 발전을 이룬거 같다.

• 이제 Javascript를 공부할려고 마음먹었던 첫 목표인 AJAX처리를 구현 해봐야겠다. 일단은 볼링 게임의 페이지를 만들고 무난하게만 완료된다면 체스도 도전 해봐야겠다. 이것까지만 큰 문제없이 완료된다면 간단한 프론트단 작업에 대해 가지고 있던 두려움이 확실히 사라질거 같다. 만약에 내일 잘 안된다면 목요일 하루 정도 더 해볼지도 모르겠다.

내일 할일

• AJAX 공부

오늘 한일

- 계산기 및 행맨 제작 완료

• 계산기 화면

  

• 행맨 화면

  

• 호눅스(feat.크롱)의 행맨 코드 일부, 버튼 생성 및 클릭 이벤트 처리

  var keys = document.getElementById("btn-keys");
  
  for (var i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++ ) {
    var str = String.fromCharCode(i);
    var button = document.createElement('button');
    button.innerHTML = str;
    keys.appendChild(button);
  }
  
  keys.onclick = function(event) {
    //outside button
    if (!!event.target.id) {
      console.log("outside");
      return;
    }
    var x = event.target.innerHTML;
    console.log(x);
    checkWords(x, game);
  }
  

오늘 느낀점

• 계산기를 구현하면서 HTML과 CSS 작업을 오래했는데 너무 힘들다.(HTML과 CSS로 저 페이지 만드는데 4시간, Javascript로 계산기 구현하는데 30분 걸린거 같다)어우 퍼블리셔 및 프론트엔드 분들 존경스럽다.

• 그래도 계산기의 HTML, CSS 작업을 하면서 HTML의 태그와 속성들에 대해서 좀더 알게 되었다. 그 소리는 Javascript로 HTML의 어떤걸 조작 해야할지 알게 된거 같아 다행히 고생한 보람이 있는것 같다.

• 레벨1의 몇분들은 행맨을 구현하는데 캔버스로 이미지까지 그리더라…보니까 프로그래밍을 경험한 기간이 달라 아무래도 로직을 짜는건 나보다 느리지만 Javascript를 사용하는 법 자체는 훨씬 잘한다. Javascript는 어느정도 간단히 학습 한다음 AJAX 처리하는 부분을 공부하고 Javascript만 활용한 작은 프로젝트를 해볼까 싶었는데 하루정도 더 걸릴지도 모르겠다. 특히나 내일 저녁에 약속이 생겨버려서 목표한 수요일까지 학습 시간이 줄어들어 아쉽다.(미루고 싶긴 했지만 나머지가 직장인들이 흠..)

• 계산기를 만들면서는 HTML, CSS에 대해 공부하고 행맨을 하면서는 Javascript로 HTML을 조작하는 법에서 어느정도씩은 학습한 것 같다. 레벨1 과정 내용들을 따라서 해보길 잘한것 같다. 내일은 배열 및 정렬 알고리즘 구현에 대해서 학습 한다는 것 같아서 아마 참석하지 않을 것 같다.

• 위에 첨부한 코드가 딱 배우고 싶었던 부분들의 기본적인 내용이였다. 차후(가능하다면 내일 오후) 볼링 페이지를 제작 할때 사용하자.

내일 할일

• Javascript 공부