Razelo 기술노트

jsp -> spring (스프링은 퀵스타트로 공부했다. ) 까지 하다가 친구들이 깃허브에 node.js로 만든 프로젝트들이 있길래 관심이 생겨서 자바스크립트를 한번 제대로 보고 싶은 마음이 생겼다. 책추천을 몇권 골라보았다. 인사이드 자바스크립트라는 책이 처음 있었고, 이후에 자바스크립트 완벽가이드란 책이 있었는데, 우선 인사이드 자바스크립트는 평가도 좋고, 분량도 딱 적당했지만, (생각보다 얇다) 뭔가 실습할만한 좋은 예제들이 별로 없다고 생각되어서 패스했다. 자바스크립트 완벽가이드는 분량이 너무 많다고 여겨져서 부담이 되긴 했는데, 분량 때문이 아니라 다른 사람들의 평을 들어보니 "좋은 책인건 맞다. 그런데 출간된 지 꽤나 시간이 흘러서 맞지 않는 부분이 있다. 그리고 조만간 신 개정판이 나온다. ..

모던 자바스크립트 입문을 공부하는 도중 좀 복잡한 코드를 마주하게 되었다. 코드를 읽다가 도움이 될 수 있는 단서를 하나 발견했는데, 바로 가중 산술 평균이다. 가중 산술 평균은 가중 산술 평균은 자료의 평균을 구할 때 자료 값의 중요도나 영향 정도에 해당하는 가중치를 반영하여 구한 평균값이다. 라고 위키에 정의되어 있다. 그리고 아주 아주 친절한 부가설명도 존재한다. 출처: ko.wikipedia.org/wiki/%EA%B0%80%EC%A4%91_%EC%82%B0%EC%88%A0_%ED%8F%89%EA%B7%A0 딱 한번만 읽어봐도 이해가 될 정도로 간단한 예제이다. 즉 가중치를 분모로 잡아서 모두 더하고, 분자에는 해당 값들과의 곱을 더해서 평균을 구하는 것이다. 따라서 위처럼 픽셀의 정중앙의 값을 ..

브라우저의 동작에 대해서 아주 잘 설명해놓은 글이 있어 이를 읽고 간단하게 정리해보고자 한다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원의주소는 URI로 표현된다. 최근 브라우저들이 표준 명세를 따르고 있기 때문에 호환성 문제가 줄어들었다. 브라우저의 기본 구조 브라우저의 기본 구조는 아래와 같다. 각 구성을 간단하게 설명하면 아래와 같다. 1. 사용자 인터페이스: 우리가 브라우저를 쓸때 보이는 화면이다. 이전버튼, 다음 버튼, 페이지 창 등이 있는 곳이다. 2. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 3. 렌더링 엔진: 사용자가 요청한 컨텐츠를 표시한다. HTML같은 걸 파싱해서 화면에 표시한다고 보면 된다. 4. ..

모던 자바스크립트 입문의 17장에는 생명 게임 시뮬레이터 예제가 있다. 이 예제에서 화면의 view에 나타낼 픽셀을 배열로써 생성하는 파트가 있다. 코드는 다음과 같다. // 격자의 크기 state.nx = nx; state.ny = ny; // 셀의 상태를 저장하는 2차원 배열을 생성하고 초기화한다 state.cells = new Array(ny); for(var ix=0; ix

최근에 모던 자바스크립트 입문이라는 책을 통해 자바스크립트를 공부 중인데, 17장에 보면 MVC 모델을 기반으로 하여 생명 게임 시뮬레이터를 실습하는 부분이 있다. 상당히 퀄리티 좋은 예제이고, 챕터 전체가 한 예제를 다루는 (입문으로 치면) 꽤 난이도 괜찮은 예제이다. 예제 중에서 특정 객체의 메소드가 이해가 되지 않아서 직접 어떻게 동작하는 지 그려보면서 알아봤는데, 이런 방법도 있구나 하고 놀라게 되었다. 해당 코드는 다음과 같다. state.getSumAround = function(ix,iy) { var dx = [ 0, 1, 1, 1, 0,-1,-1,-1]; var dy = [ 1, 1, 0,-1,-1,-1, 0, 1]; // 주기적 경계 조건 for(var k=0,sum=0; k

예제를 진행하면서 자주 등장하는 이 세가지의 기능이 무엇이 다른지 궁금해서 알아보았다. // HTML 이 다음과 같다고 가정할 때, Keep Calm and Drink Coffee Sometimes, Tea // JavaScript const statement = document.querySelector('#statement'); statement.innerHTML; // Keep Calm and Drink CoffeeSometimes, Tea statement.innerText; // Keep Calm and Drink Coffee statement.textContent; // Keep Calm and Drink CofeeSometimes, Tea 위의 하나의 코드만으로도 세가지의 차이점을 명확하게 알..

로컬에 있는 텍스트파일의 내용을 읽어서 웹페이지에 표시하는 스크립트를 짰는데, 안타깝게도 firefox의 정책이 바뀐 듯하다. 분명 설명에는 firefox에서는 로컬의 파일을 읽어서 사용할 수 있다고 했는데, 해당 책이 좀 시간이 지나서인지는 모르겠는데, 동일출처정책에 위반된다는 에러때문에 아예 읽어올 수 조차 없었다. 처음 설명을 보면서 브라우저에서 로컬파일을 읽는다고? 해서 갸우뚱하지만 편하게 진행될거라 여겼는데, 역시나 다른 루트의 파일을 읽어오는 건 불가능했다. 뭐 firefox가 업데이트되면서 최신정책으로 바뀌면서 그렇게 된 걸 수도 있다. 이렇게 되면 예제를 실행시킬 수가 없게 되는데, 그래서 찾게 된 방법이 완전 초간단한 임시서버를 운용해서 거기서 나의 html예제를 실행시켜보려고 했다. 우..

모던 자바스크립트 입문 이라는 책에서 15장 마지막 예제가 있는데, (그림판을 만드는 예제이다.) 예제 파일에 있는 코드가 난독화되어있다. 아마 설명을 보고 직접 작성하라는 뜻이겠지만... 답답해서 먼저 복호화 시켰다. 아래는 코드 난독화를 다시 복호화시킬 수 있는 사이트이다. www.strictly-software.com/unpack-javascript Javascript Unpacker Tool - Strictly Software This Javascript unpacker tool has now been upgraded to allow it to unpack multiple eval statements. So if your packed code has itself been packed a few t..

자바스크립트 canvas 관련 검색을 하다가 재밌는 사이트를 하나 발견했다.  www.soen.kr/ SoEn:소프트웨어 공학 연구소 www.soen.kr 소프트웨어 공학 연구소라는 사이트인데, 정말 정리가 잘 되어있는 사이트다.  특히 c/c++ 관련한 내용이 문법부터 시작해서 고급내용까지 너무 잘 정리되어 있어서 놀랐다.  이외에도 javascript의 canvas에 대해서도 아주 잘 정리되어 있다.  가끔 이렇게 너무 잘 정리해놓은 사이트를 보면 굳이 책을 사야하나 싶을 때도 있다.

버튼 cancelable 값을 alert 로 찍어보는 예제이다. 그런데 해당 예제를 실행하는 와중에 이해가 안되는 동작이 존재했다. 우선 처음 실행했을 때 동작은 다음과 같다. 보다시피 alert 창으로 cancelable 프로퍼티의 값이 찍히게 된다. 내가 설정한 false 값으로 잘 출력되는 것을 볼 수 있다. 그리고 여기서 확인을 누르면 다음과 같이 표시된다. button 태그를 body에 정의해놓았다. 그런데 여기서 버튼을 다시 클릭하게 되면 다음과 같은 결과를 확인할 수가 있다. 맨 처음의 cancelable 의 값이 찍힌 건 false 였다. 스크립트에서 event.initEvent("click",true,false); 에서 세번째의 인수인 cancelable에 false를 잘 전달했는데, 갑..

노드를 생성하는 메서드들을 살펴보던 중 createDocumentFragment()라는 메서드를 발견했다. 다른 메서드들은 무난하게 설명이 이해가 됬는데, 이 메서드는 설명란에 도큐먼트 프래크먼트 라고만 적혀 있었다. 그래서 찾아보게 되었다. 해당 블로그에서 많은 도움을 얻었다. 출처: programmer-seva.tistory.com/60 DocumentFragment 노드를 생성해서 사용하면 라이브DOM 트리 외부에 경량화된 문서 DOM을 만들 수 있다. 마치 라이브 DOM 트리처럼 작동하되, 메모리상에서만 존재하는 빈 문서 템플릿으로 생각하면 된다. 자식 노드를 메모리상에서 손쉽게 조작한 후 라이브 DOM에 추가하는 것도 가능하다. 라고 설명 되어있는데, 해당 블로그의 코드들을 살펴보고 설명을 계속..

Navigator 객체를 살펴보던 중 재밌는 메서드를 발견했다. vibrate() 메서드인데, 단말기를 진동시키는 메서드이다. 웹 브라우저에서 직접 디바이스를 컨트롤할줄은 몰랐는데, 진동을 시킬 수 있다는 게 신기했다. 그리고 검색해보니 이 메서드가 hoax 계열의 광고에서 자주 사용한다는 것을 알게 되었다. 가끔 웹서핑을 하다가 이상한 사이트에 접속하거나 하게 되면, 갑자기 배터리가 부족? 하다거나 바이러스에 감염되었다거나 디바이스에 치명적인 손상이 있다는 둥 갑자기 번쩍거리는 이펙트와 함께 진동이 울리면서 창들이 막 뜨게 되는 경우가 있다. 그런데 이 허위 광고에 속는 사람들도 꽤 많아서 아직까지 많이 쓰이고 있다고 한다. 그리고 여기서 바로 진동 이펙트를 주기 위해서 vibrate() 메서드를 사용..

servlet&jsp 을 배우고나서 spring 까지 어떤 식으로 다루는지 살펴보는 시간을 가졌다. 대략 한달 반 정도 걸린것 같다. 라는 책이 그렇게 좋다고 소문이 자자해서 괜찮겠다 싶어서 공부했는데, 정말 소문이 85%정도는 맞는 것같다. 조금 호불호가 갈리는 부분이 있었는데, 그건 지극히 주관적인 관점이었다. 아무튼 그렇다 치고 spring을 더 깊게 파보려고 생각하다가 지금은 그럴 때가 아니라는 생각이 들어서 자바스크립트를 한번 훑어보려고 했다. 이라는 책을 사서 공부중인데, 솔직히 말해서 살짝 어색한 감이 있다. 자꾸 C 혹은 JAVA에서는 허용안되는 개념들이 등장하면서 이것도 따로 외워야하겠다는 생각이 들면서 헷갈릴 수도 있겠다는 생각이 들었다. 여타 다른 언어들과는 살짝 다른 면이 보였다. ..

JPA 프로젝트에서 하이버네이트를 JPA 구현체로 사용하여 실행결과를 로그로 출력하는 프로젝트를 만들고 있었는데, 에러가 발생했다. 에러를 거슬러 올라가면서 고쳤기 때문에 그 순서대로 원인과 해결방법을 설명하겠다. 우선 가장 처음의 에러는 XML 버전 2.2를 인식할 수 없다는 에러였다. 위에 동그라미 친 곳을 보면 버전이 2.1로 되어있는 것을 알 수 있다. 내가 다시 수정했기 때문에 2.1로 적용이 가능한 것이다. 수정하기 전에는 2.2버전으로 써놓았었는데, 이때 2.2버전을 인식할 수 없다는 에러가 발생한 것이다. 그래서 다음과 같이 porm.xml을 써놓았다. 4.0.0 com.springbook.biz.board JPAProject 0.0.1-SNAPSHOT jar JPAProject http:..

메이븐 프로젝트를 만들려고 File-> New -> Maven Project를 누르고 Next를 눌러서 아래와 같은 창에 진입했다. 메인 창에 수많은 groupid가 표시되는데, 처음에는 이게 바로 표시되지 않아서 내 maven에 무언가 문제가 있다고 생각했다. 그러다가 좀 시간이 지나니 갑자기 메인창에 나타났다. 아마 적용이 느려서 그런 것 같다. 다음부터는 창에 뭐가 안뜨면 좀 기다려보자. 저번에도 이런 비슷한 일이 있어서 일부러 빙빙 돌아서 더 어려운 방법으로 적용했던 기억이 있다.

mybatis를 통해 원하는 결과를 콘솔창에 출력해서 보려고 하는 중인데 java.lang.IllegalArgumentException 에러가 발생했다. 세부 사항을 보니 Mapped Statements collection does not contain value 라고 뜨는 것을 확인할 수 있었다. 이번 오류는 모두 오타로 인함이었다. 이전 포스팅과 연계된 포스트인데, 이전 포스팅에서는 xml문서에서 첫라인에 띄어쓰기가 들어가서 발생한 문제였다. 이번경우는 mapper에 있는 namespace에 #이 들어간 것이었다. 저 # 때문에 인식을 하지 못한 것이다. 아 그리고 sql 구문을 써줄 때 예를 들어서 insert into board(seq,title,writer,content) values((sele..

스프링에서 mybatis를 사용하던 도중에 위와 같은 에러를 만났다. 너무 간단한 이유에서 발생했다. 위에 xml문을 보면 알겠지만, 맨 처음 1번째 라인에서 한칸이 띄어쓰기 되어 있어서 발생한 오류였다. 왜 한칸이 띄어져 있었는지는 잘 모르겠지만, 아마 내가 코딩하다가 스페이스바를 잘못 눌렀다거나 해서 저기 첫줄에 띄어쓰기가 한칸 적용된 것 같았다. 아무튼 주의하자. developer-ek.tistory.com/49

이클립스에서 Mybatis를 사용하려고 설정을 진행하는 와중에 좀 고생을 했다. 우선 이클립스에서 orm 플러그인을 받아서 사용할 수 있다고 해서 마켓 플레이스에 들어가서 Java orm 플러그인을 찾으려고 했다. 그런데 여기서 문제가 발생했다. 마켓에서 orm 플러그인을 찾을 수가 없었다. 참조한 블로그의 설명을 따르면 마켓에서 해당 파일이 사라진 것 같다고 했다. (그런데 더보기 메뉴에서 찾아보니까 orm 플러그인이 있었는데, drag 로 끌어다가 install 하라는 설명이 있었다. 그래서 계속 드래그 했는데, 의미없는 로딩? 같은 작동만 하더니만 아무 도움도 안됬다. ) skyfox83.tistory.com/532 [에러/Spring] Java ORM Plugin 설치 0. 참고도서 - 스프링 퀵..

자바 객체를 xml 형태의 테이터로 바꾸려고 어노테이션을 써주었는데, 아무리 ctrl shift o 를 눌러도 import가 안됬다. 그래서 이상하다 싶어서 직접 import 경로를 써줬는데도 안되더라... 그래서 보니까 아예 어노테이션 자체를 인식을 하지도 못했다. 그래서 검색을 해보니 JAXB2 API는 자바6 부터 자바 8까지는 지원이 되는데, 자바 10부터는 자동으로 지원이 안된다고 한다. 그래서 따로 설치해줘야 한다고 한다. 그래서 porm.xml에 다음과 같이 적어주면 메이블 라이브러리에 추가가 되는 것을 확인할 수 있다. 이렇게 써주고 난 뒤에 import 해주면 잘 작동하는 것을 확인할 수 있다. 자바 6이후 버전에 기본으로 포함되어 있다고만 알고있었는데... 10이후부터는 지원이 끊긴 것..

스프링 프레임워크를 사용해서 게시판에 글을 등록하는 예제를 진행중이었다. 파일업로드를 구현하기 위해 이제 마지막으로 테스트를 해보려고 파일을 업로드 하려고 했더니 에러가 발생했다. 에러의 내용은 즉슨 엑세스가 거부되었다는 내용이었다. 이런 종류의 에러는 처음 보았는데, 검색해보니 여러 블로그에서 액세스 권한? 과 관련된 설정을 해주는 걸 볼 수 있었다. 업로드한 파일이 저장되는 위치를 C:/ 로 지정했는데, 여기에 파일을 업로드하는 것이 엑세스 거부된 것이었다. 즉 위 사진의 코드에서 보면 new File() 부분에서 경로를 C:/ 로 설정했는데, 이 경로에서 엑세스가 거부되었다. 그래서 해당 경로를 (일단 테스트해보는 것이 목적이기 때문에) 바탕화면으로 해두기로 했다. 그래서 위의 경로를 다음과 같이 ..

user 서비스 컴포넌트를 만드는 중이었는데, 마지막에 Client 클래스를 만들어서 최종으로 실행시키려고 했다. 원래대로라면 스프링 컨테이너가 정상적으로 구동되면서 관리자님 환영합니다.! 라는 메시지가 출력되어야 했다. 그런데 정말 무슨 짓을 해도 저 에러가 사라지지 않았다. 저 에러가 뜨기 직전에 한 행동은 한개의 일반 자바소스파일을 하나 더 만든것 뿐이다. 환경변수도 절대 건드리지도 않았고, build path 라던지 문제가 될만한 건 아무것도 건드리지 않았다. 그냥 코딩만 하고 있었다.... 그런데 갑자기 저 에러가 떠버려서 이리저리 찾아봤는데, 정말 도움이 될만한 정보를 얻지 못했다. 1. 환경변수 바꾸기 -> 확인해봤는데, 잘 설정되어 있었다. 혹시 몰라서 정석대로 다시 설정해봤고, 조금 다른..

Java 에서 properties 파일을 사용하는 경우가 있다. 설정값들은 properties 파일로 빼서 관리하는 경우가있다. 그때 쓸 수 있는 컬렉션이 Properties 컬렌션이다. HashTable을 상속받아서 구현한 컬렉션의 한 종류라고 한다. HashMap 같은 경우는 키 값 형태로 Object, Object 형태로 저장하는데 Properties 는 오브젝트가 아니라 String 형태로 저장하는 간단한 컬렉션 클래스라고 한다. 일단은 *.properties 형식의 파일이 있다고 가정하자. 그러면 Java 코드 상에서 실제로 그 파일을 불러와서 그 파일에 있는 속성값을 불러다가 사용할 수 있다는 의미이다. pro.load 를 통해서 FileInputStream으로 읽어들인 파일을 열어주고 이후에..

Map 컬렉션을 사용하는 예제를 작성하던 중 Map 객체에 이터레이터를 쓰는 둥 다양한 방법이 나와있어서 올려둔다. package com.springbook.ioc.injection; import java.util.Iterator; import java.util.Map; import org.springframework.context.support.AbstractApplicationContext; import org.springframework.context.support.GenericXmlApplicationContext; public class CollectionBeanClient { public static void main(String[] args) { AbstractApplicationContex..

코로나라서 남는시간동안 뭘 할까 하다가 웹프로그래밍을 해보기로 했다. 그래서 이책을 골랐는데, 일단 처음 책을 골랐을때 후기남기신 분들이 정말 좋은 평들을 많이 써주셔서 기대를 많이 했다. 예상대로 정말 괜찮은 책이었다. 상당히 친절하게 설명해주는게 이책의 매력인 것 같다. 물론 이 책이 관련된 모든 내용을 담고 있지는 않다. 읽으면서 느낀건 광범위한 부분들을 친절하게 훑어주면서도 코드와 함께 살펴보기 때문에 이론만 배우는 게 아니고 실제로 써먹을 수 있게 해주는 책이라는 걸 느꼈다. (굳이 매겨보자면 이론 20에 실제 활용도가 80 정도로 구성된 것 같다. ) 책이 출판된지 어느정도 시간이 지났다. 2018년에 나온 책이라 혹시나 안맞는게 있을까 걱정했는데, 다행히도 안맞는건 없었다. 책에 나온대로 잘..

package com.dev.controller; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.dev.service.MemberService; import com.dev.vo.MemberVO; public class MemberInsertController implements Controller{ public void execute(HttpServletRequest request, HttpServletResponse response) throws ..