알버트의 개발하는 블로그

* c3 차트 라이브러리 : d3.js를 베이스로한 차트 생성 라이브러리 - D3.js는 데이터를 기반으로 문서를 조작하기 위한 자바스크립트 라이브러리다. - c3 차트 라이브러리 사용법 1. 설치 - c3 차트 라이브러리를 관련 사이트(https://github.com/c3js/c3/releases/latest)에서 다운로드 후, 스크립트 및 css 로딩 * c3 차트 라이브러리는 d3 라이브러리에 의존적이므로 d3 라이브러리도 같이 로딩할 수 있도록 한다. 2. 차트 생성방법 c3 차트는 generate() 라는 함수로 생성 가능 차트를 표시하기 위한 div 생성 후 generate 함수 호출 (div에 chart 바인딩) And, call generate() with arguments: var ch..

웹소켓을 사용하면 서버와 브라우저간 연결을 유지한 상태에서 데이터를 교환할 수 있다. 이때 데이터는 '패킷'으로 전달되며 전송은 커넥션 중단과 추가 http 요청없이 양방향으로 이뤄진다. 웹소켓 커넥션을 만드려면 new WebSocket을 호출하면 되는데, 이때는 ws라는 특수 프로토콜을 사용한다. //웹소켓 커넥션 생성 코드 let socket = new WebSocket("ws://javascript.info"); 소켓이 정상적으로 만들어지면 밑에 네 개의 이벤트를 사용가능하다. 1. open – 커넥션이 제대로 만들어졌을 때 발생함 2. message – 데이터를 수신하였을 때 발생함 3. error – 에러가 생겼을 때 발생함 4. close – 커넥션이 종료되었을 때 발생함 let socket ..

1. keyup : 누른 키에서 손을 뗄 때 실행시켜 준다. $("#아이디명").keyup(function(e){ if(e.which == 13){ // 호출할 함수나 기능 작성 } }); 2. keydown : 키보드에 어떠한 키가 눌릴때 실행된다. $("input[name=name명]").keydown(function(e) { if(e.which == 13){ // 호출할 함수나 기능 작성 } }); which 대신 keyCode로도 실행이 가능하다. $(document).keyup(function(e) { // focus 되고 enter눌렀을 경우 if ($(".클래스명").is(":focus") && e.key == "Enter") { // 호출할 함수나 기능 작성 } }); $(document)..

1. JSON이란? JSON은 Java Script Object Notation 의 약자이다. JSON은 단순한 데이터 포멧이다. 데이터를 표시하는 방법일 뿐이다. 2. JSON을 쓰는 이유 : json파일이 가지고 있는 데이터를 받아서 객체나 변수에 할당해서 사용하기 위해서 3. JSON의 구조 1. Object(객체) - name/value 의 순서쌍으로 set이다. - {} 로 정의된다. ex) { "이름" : "홍길동" } 2. Array(배열) - 그 배열이 맞다. ex) [ 10, "array", 32 ] 4. JSON의 예 { "이름" : "홍길동", "나이" : 22, "특기" : ["배구", "야구"] } 5. JSON은 왜 쓰는가? 위의 예제 json파일의 이름을 ' 길동info.jso..

1. IoC(Inversion of Control)이란? IoC란 Inversion of Control의 약자로 해석하자면 제어의 역전이다. 기존에는 객체들의 제어권을 개발자가 직접 가지고 있었지만, 서블릿이 등장하면서 개발자가 독점적으로 가지고 있던 제어권이 서블릿을 관리하는 외부의 컨테이너로 넘어가게 되었다. 즉, 개발자가 객체를 제어하는 것이 아닌 외부의 컨테이너가 제어하는 것을 제어의 역전이라고 한다. 그리고 이 IoC를 가능하게 해주는 것이 의존성 주입인 DI이다. 2. DI(Dependency Injection) DI란 IoC를 구현하는 방법이다. 구현하는 방법에는 DI를 번역하면 의존성 주입이라고 할수있는데 각 객체간의 의존성을 컨테이너가 자동으로 연결해주는 것으로 개발자가 빈(Bean) 설..

웹소켓을 이용한 채팅프로그램을 어떻게 구현할까 하다가 스프링 부트 환경에서 자바와 html, js을 구성하여 구현해 보았다. 1.제일 먼저 해야할 것은 스프링부트의 build.gradle에 웹소켓 dependencies를 추가하는 것이다. build.gradle의 dependencies 파트는 아래와 같다. dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-websocket' ..

1. 웹소켓이란? - 두 프로그램 간의 메시지를 교환하기 위한 통신 방법 중 하나이다. - 전이중 통신을 가능하게 해준다. - W3C와 IETF에 의해 자리잡은 표준 프로토콜 중 하나이다. - 현재 HTML5 환경에서 많이 사용된다. 2. 웹 소켓의 특징 - 양방향 통신(Full-Duplex) - 데이터 송수신을 동시에 처리할 수 있는 통신 방법 - 클라이언트와 서버가 서로에게 원할 때 데이터를 주고 받는다. - 통상적인 HTTP 통신은 클라이언트가 요청을 보내는 경우에만 서버가 응답하는 단방향 통신 3. 실시간 네트워킹(Real Time-Networking) - 웹 환경에서 연속된 데이터를 빠르게 노출한다. - 여러 단말기에 데이터를 빠르게 교환한다. - 예를 들면 채팅, 주식, 비디오 데이터와 같이 ..

1) 커스텀 어노테이션을 이용하는 방법 어노테이션을 정의한다. 어노테이션을 클래스에서 사용한다. (타겟에 적용) 어노테이션을 이용하는 코드를 수행한다. 2) 어노테이션 생성 예제 import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; @Retention(RetentionPolicy.RUNTIME) // 런타임중에도 유효한 어노테이션임을 기술 public @interface Count100 { // 어노테이션은 @interface 인터페이스명으로 정의 } // 커스텀 어노테이션을 메소드에 적용 public class MyHello { @Count100 public void hello(){ System.out.pr..