알버트의 개발하는 블로그

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) 설..

크롬 익스텐션은 Manifest.json이란 제이슨파일이 정말 중요하다. Manifest.json파일에서 해당 크롬 익스텐션의 옵션들과 환경을 설정해줄 수 있다. 그래서 이번엔 크롬 익스텐션을 업로드하고 사용해볼때 정말 중요한 Manifest.json파일에 대해서 알아보았다. 일단, 크롬 개발자 지원 사이트에서 개발자들이 맨 처음 크롬 익스텐션을 시작할 때 참고하도록 만든 사이트의 주소이다. https://developer.chrome.com/docs/extensions/mv3/getstarted/ 위 사이트에 들어가면, 맨 처음 크롬 익스텐션을 등록하고 사용하는 예제가 등록되어있다. 아래는 해당 사이트에서 참고하면서 만든 Manifest.json파일 예제이다. { "name": "Getting Star..

socket.io는 웹소켓 라이브러리로, 양방향 통신이 가능하도록 만들어주는 기술이다. 웹소켓을 이용한 채팅프로그램을 연구하다가 node.js을 통해 socket.io를 사용하면 채팅프로그램 구현이 가능하다. node.js를 윈도우에 설치하고 npm install 명령어를 통하여 node.js를 설치한다. 그리고 설치된 경로에 들어가보면 클라이언트와 서버 소스코드가 있는데 그 코드를 이렇게 구성하였다. 먼저, public/javascripts/socket.js 파일이다. 이 js파일은 클라이언트 소스코드이다. const socket = io(); const chatForm = document.getElementById('chat-form'); const chatBox = document.getElemen..

웹소켓을 이용한 채팅프로그램을 어떻게 구현할까 하다가 스프링 부트 환경에서 자바와 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..