쵸코쿠키의 연습장

jQuery를 사용하여 요소의 크기를 변경하는 경우 크기를 변경하는 데 사용할 수 있는 두 가지 방법이 있습니다. 먼저 첫 번째 매개 변수를 높이 또는 너비로 전달하고, 두 번째 매개 변수를 값이 되는 .css() 방법을 사용할 수 있습니다. $('.element').css('height', new_height_value); $('.element').css('width', new_width_value); 다른 옵션은 .height() 메서드와 .width() 메서드를 사용하는 것입니다. $('.element').height(new_height_value); $('.element').width(new_width_value); 이 기사에서는 이 두 가지 방법의 차이를 살펴보겠습니다. height() meth..

업무기능 추가 Account에 간단하게 아이디와 이름, 주소와 이메일 주소만을 갖는 간단한 객체로 설계하고 구현을 해보았습니다. 모델이 코드로 어떻게 구현되는지 또 어떻게 테스트해 볼 수 있는지 이해할 수 있었습니다. 그래서 이번에는 Account Domain Model 전체로 확장해서 구현하고 테스트를 해보았습니다. 초기 하나의 문자열 정보로 관리했던 주소는 주소와 우편번호로 구체화하여 별도 객체로 분리하였습니다. 또한 쇼핑몰 서비스를 사용하는 회원은 판매자, 구매자로 회원 유형을 분리하였고, 또한 판매나 구매 실적에 따라 등급이 부여될 수 있어야 하므로 별도 MembershipLevel을 추가합니다. 따라서 초기의 간단했던 Account는 화면과 같이 Account, Address, Membertyp..

대부분의 웹 사이트에서 보안이 가장 큰 문제이므로 웹 사이트를 최대한 안전하게 만드는 것이 중요합니다. 그러나 개발자가 코드를 사용하여 수행할 수 있는 모든 예방 조치에 비해 사용자가 강력한 암호를 가지고 있지 않다는 것입니다. 사용자가 자신의 비밀번호를 입력할 수 있는 시스템을 구축하는 경우, 비밀번호가 얼마나 안전한지 알려주는 것이 좋습니다. 이 튜토리얼에서는 사용자 암호를 확인하고 보안 수준을 알려주는 작은 JQuery 스니펫을 만들 것입니다. The HTML Form 먼저 암호를 변경할 수 있는 간단한 양식을 작성하여 이 튜토리얼을 시작하겠습니다. 여기에 암호 확인 상자가 포함된 암호 입력 상자가 포함됩니다. 사용자가 암호를 잘못 입력하지 않았는지 확인합니다. 암호를 만들 때 문자를 잘못 입력했기..

Swagger를 활용한 API 명세 & 테스트 Swagger는 간단한 설정으로 프로젝트에서 지정한 URL들을 HTML화면으로 확인할 수 있게 해주는 오픈소스 프로젝트입니다. 특히 REST API를 만드는 경우 주소나 파라미터가 변경되더라도 그 변경된 소스를 그대로 참조 문서로 만들어줍니다. 따라서 API가 수정되더라도 이 API를 이용하는 개발자는 문서를 참조하고 또 쉽게 테스트를 할 수 있습니다. 따라서 Swagger를 통해 API를 테스트하기 위해 pom.xml 파일에 화면과 같이 추가합니다. Config 패키지에 SwaggerConfig 클래스 스프링 부트 프로젝트에 추가하였습니다. 마지막으로 Application의 Swagger 어노테이션을 추가합니다. 소스코드가 변경되었으니 프로젝트를 다시 Bu..

웹 사이트 성공을 위해 페이지 로딩 속도가 매우 중요하므로 가능한 한 웹 사이트의 모든 영역을 가속화해야합니다. 현재 대부분의 웹 사이트에서 제공하는 기능 중 하나는 소셜 미디어 버튼으로, 방문자가 좋아하는 소셜 네트워크에서 기사를 쉽게 공유 할 수 있습니다. 또한 방문자가 각 소셜 네트워크에서 페이지가 몇 번 공유되었는지 확인할 수 있습니다. 이러한 소셜 네트워크 버튼의 문제점은 AJAX를 통해 버튼을 표시하는 데 필요한 모든 정보를 얻기 위해 많은 HTTP 요청을 해야 한다는 것입니다. 버튼의 이미지와 페이지가 공유 된 횟수를 가져옵니다. Facebook, Twitter 및 Google Plus에는 주요 소셜 네트워크가 3 개 이상있는 것이 일반적이지만 Pinterest, LinkedIn 및 기타 여..

Spring Boot Project 생성 실제 소스코드를 구현하기 위해 Spring Boot 프로젝트를 생성하고 Maven에 의존성, 즉 Dependency를 추가합니다. 이렇게 프로젝트를 만들고 개발을 위한 설정이 끝나면 구현을 위한 소스코드 패키지의 구조를 정의하고, 이후 하나씩 구현을 진행합니다. Spring Boot 프로젝트는 New - Starter Project를 선택하면 New Spring Starter Project 화면이 출력되는데, 이 화면의 Name, Location, Group, Artifact를 화면과 같이 입력합니다. 그리고 Next 버튼을 누르면 프로젝트의 Dependency를 추가하는 화면으로 전환되는데, Spring Boot Version을 선택합니다. 프로젝트에서 사용할 ..

웹 사이트의 로딩 속도를 높이고, 이미지를 압축하고, 웹 호스트를 개선하고, 웹 사이트 코드를보다 효율적으로 만들기 위해 할 수 있는 일이 많이 있습니다. 그러나 이 디자인과 관련하여 한 가지 선택은 각 페이지가 처음로드 될 때 만드는 HTTP 요청의 양을 줄이는 것입니다. 각 페이지에서 HTTP 요청의 양을 조사 할 때 Disqus에서 많은 양의 HTTP 호출이 발생하는 것을 알았습니다. 이것은 모든 웹 사이트에 배치 할 수 있는 주석 시스템이며, 페이지에 몇 줄의 Javascript를 포함시키기만 하면 어떤 사이트에도 쉽게 추가 할 수 있습니다. 사이트에서 Wordpress를 실행중인 경우 Wordpress 플러그인 만 다운로드하면 되므로 사이트에 포함하기가 훨씬 쉽습니다. Disqus는 함께 제공되..

개발환경 구축 마이크로서비스를 구현하기 위해 오픈소스를 활용한 개발환경을 구축해보도록 하겠습니다. 개발환경은 JDK, STS, Lombok, Maven의 순서로 설치를 합니다. 본 강의의 실습을 위해 JDK와 STS를 설치합니다. 그리고 자바에서 도메인 객체를 만들 때 프로퍼티에 대한 Getter, Setter 그리고 ToString, 생성자들을 객체마다 반복적으로 만들어야 합니다. 이런 반복적인 코드들을 어노테이션 선언만으로 자동 생성해 주는 라이브러리인 Lombok도 설치합니다. 그리고 Build 도구는 Maven을 사용합니다. JDK 설치 JDK는 오라클 사이트의 다운로드 메뉴에서 자신의 운영체제와 맞는 버전을 다운로드 받아서 설치합니다. 실습에 사용하는 컴퓨터는 64비트 운영체제로, 64비트용 J..

Windows 8이 새로운 디자인의 첫 번째 그림을 발표 한 이후 메트로 스타일에 열광했습니다. 사람들은 좋아하고, 현대적이며, 깨끗하고, 단순하며, 모바일 장치, 특히 태블릿 장치에서 사용하기가 정말 쉽습니다. 2013년에는이 메트로 스타일을 디자인에 적용하는 더 많은 웹 사이트를보기 시작하는 추세가 될 것입니다. 그러나 웹 사이트의 경우 이것은 좋은 생각입니다.이 스타일링은 다른 웹 사이트 디자인에서 작동합니다. 이 자습서에서는 메트로 스타일 대시 보드를 만들고이를 위해 gridster라는 매우 유용한 jQuery 플러그인을 사용합니다. Gridster Gridster를 사용하면 드래그 앤 드롭 다중 열 그리드를 만들 수 있습니다. 그리드의 모든 레이아웃은 플러그인에 의해 처리되며 각 상자가 얼마나 ..

쇼핑몰 서비스 업무 흐름 쇼핑몰 서비스의 업무 흐름은 가장 기본적인 구매자의 제품 구매 사례 관점에 대해 알아보겠습니다. 구매자는 구매하고자 하는 상품과 구매 수량을 입력해서 상품을 주문하고, 주문한 상품의 배송상태를 확인합니다. 식별한 마이크로서비스들 간의 업무 흐름으로, 먼저 구매자는 상품 구매를 하기 위해서 화면을 통해 구매하려는 상품과 구매 수량을 입력합니다. 구매 정보가 입력되면 Account 서비스로 구매자 이름으로 입력된 사람이 회원인지 아닌지 확인합니다. Account 서비스에 구매한 상품의 배송을 위한 주소를 가져와 상품을 배송 받을 주소로 설정합니다. 그리고 구매하기 위해 입력한 상품 이름으로 Product 서비스에서 해당 상품의 가격이 얼마인지 요청해서 전달 받은 후 입력한 구매수량에..

Wordpress 관리 영역에서 코딩 할 때 Javascript가 필요한 일부 기능을 코딩하는 경우가 있습니다. Wordpress에는 jQuery라는 내장 Javascript 라이브러리가 제공됩니다. Javascript 프레임 워크로 Javascript로 거의 모든 작업을 매우 쉽게 수행 할 수 있습니다. 관리 영역에서 작업 할 때 jQuery는 이미 모든 페이지에 포함되어 있으며 고유 한 Javascript 파일에서 사용할 수 있습니다. 그러나 jQuery로 작업 할 때 일부 사람들이 겪는 일반적인 문제가 있으며 이는 $ 기호를 사용하는 것입니다. 대부분의 사람들은 스크립트 태그를 사용하여 파일을 로드하고 $ (document) .ready () 함수를 사용하여 jQuery 코드를 사용하여 jQuery..

애그리게잇 도메인 객체의 관리는 객체의 생명주기 동안 무결성을 유지하고 생명주기 관리를 위해 객체의 관계가 복잡해지는 것을 최소화하는 것이 중요합니다. 따라서 업무상 관련 있는 객체들을 묶어 경계를 명확히 정의해서 객체 간 관계가 복잡해지지 않도록 생명주기 전 단계에서 도메인 객체의 무결성을 유지할 수 있게 해주는 Aggregate을 정의해야 합니다. Aggregate은 업무상 관련 있는 객체들을 모아 경계를 명확히 정의하여 객체 간 관계를 복잡하지 않게 합니다. 생명주기 상의 전 단계에서 도메인 객체의 무결성을 유지할 수 있게 해주는 패턴입니다. 한마디로 표현하면, 데이터 변경의 단위로 다루는 연관된 객체의 묶음입니다. Aggregate은 1개 이상의 Entity로 구성됩니다. 그 중 한 Entity는..

GMaps.js 사용 방법 GMaps는 Google지도를 사용하여 사용자에게지도를 표시하기가 매우 쉬운 자바 스크립트 플러그인입니다. 지도, 길 찾기, 정보 상자 등에 대한 포인터를 쉽게 추가 할 수있는 여러 옵션이 있습니다. 이 플러그인은 방대한 옵션이 많기 때문에이 튜토리얼에서는 모든 옵션을 다루지는 않습니다. 가장 많이 사용할 옵션 위주로 다루어 봅니다. 이 플러그인에 대한 모든 옵션을 보려면 Github Repository에서 설명서를 볼 수 있습니다. 문서 GMap.js를 사용하려면 Github에서 최신 버전을 다운로드해야합니다. GMap 다운로드 최신 버전이 나오면 헤드 태그 안에 페이지에 Javascript 파일과 jQuery가 포함됩니다. gmap.js를 페이지에 추가하면 GMaps라는 자..

헥사고날 아키텍처 전술적 설계는 이전 차시에서 헥사고날 아키텍처로 설명했던 마이크로서비스의 가장 안쪽의 도메인 모델을 설계합니다. 그 다음은 도메인 모듈, 그리고 마이크로서비스를 설계를 합니다. 이 헥사고날 아키텍처는 고유한 비즈니스의 개념을 표현하는 도메인 모델과 UI, 데이터베이스 등의 기술을 분리합니다. 도메인과 기술의 분리는 빠르게 변화하는 기술의 변경과 대체를 쉽고 빠르게 수행할 수 있습니다. 그럼 모델링을 하기에 앞서 모델 패키지 구조를 Model, Repository, Service로 구성하고, 그리고 실제 도메인 모델이 그려질 다이어그램이 위치합니다. Domain 안의 Model이라는 패키지 안에는 도메인 모델을 구성하는 Entity, 값 객체, 표준 타입의 도메인 모델들이 위치합니다. 이..

왜 GYM인가? 강화 학습 (RL)은 의사 결정 및 운동 제어와 관련된 기계 학습의 하위 필드입니다. 에이전트는 복잡하고 불확실한 환경에서 목표를 달성하는 방법을 배우는 방법을 연구합니다. 다음 두 가지 이유로 흥미 롭습니다. - RL은 로봇 모터를 제어하여 실행 및 점프가 가능하며 가격 및 재고 관리와 같은 비즈니스 결정을 내리거나 비디오 게임 및 보드 게임을하는 등 일련의 결정을 내리는 것과 관련된 모든 문제를 포괄하는 매우 일반적인 문제를 해결합니다. RL은 순차 또는 구조화 된 출력의지도 학습 문제에 적용될 수 있습니다. - RL 알고리즘은 많은 어려운 환경에서 좋은 결과를 얻기 시작했습니다. RL은 오랜 역사를 가지고 있지만 최근 딥 러닝이 발전 할 때까지 많은 문제에 엔지니어링이 필요했습니다...

마이크로 서비스 내부 설계를 위한 전술적 설계 및 주요 개념 마이크로서비스는 도메인의 개념을 명확하고 자세히 표현하는 도메인 모델링을 통해 코드로 구현합니다. 즉, 전술적 설계란 전략적 설계를 통해 도출된 마이크로서비스의 내부를 상세히 설계하는 활동입니다. 전술적 설계는 도메인 주도 설계 개념에 나오는 용어로 비즈니스의 고유한 활동을 정확하게 모델링하는 설계 패턴과 방법입니다. 설계자는 이 절차와 다양한 기법들을 활용해서 개발하려는 서비스의 개념과 동작을 모델로 표현합니다. 이 전술적 설계의 진행 절차와 방법은 이전의 전략적 설계를 통해 식별했던 6개의 마이크로서비스로 구성된 쇼핑몰 시스템을 예제로 설명을 드리도록 하겠습니다. 마이크로 서비스의 내부 구조 마이크로서비스를 표현하는 6각형의 도형이 있습니다..

Mousetrap.js는 웹 응용 프로그램의 키보드 단축키를 쉽게 설정할 수있는 자바 스크립트 플러그인입니다. 특정 키 푸시에서 실행할 기능을 정의 할 수 있습니다. 단일 키 또는 키 조합 또는 일련의 키로 기능을 설정할 수 있습니다. Mousetrap.js는 github에서 구할 수 있으며 다운로드 할 수 있습니다. 브라우저 지원 Mousetrap.js는 모든 브라우저에서 사용할 수 있으며 다음에서 사용할 수 있도록 지원됩니다. Internet Explorer 6+ Chrome Safari Firefox Opera 사용법 다른 Javascript 파일과 마찬가지로 페이지에 파일을 포함시키기 만하면 새로운 Mousetrap 개체가 만들어집니다. 페이지에 mousetrap.js 파일을 포함 시키면 키보드 ..

Service Integration 웹정보나 서비스를 접근해서 실생활에 활용할 때는 그냥 각각을 독자적으로 사용하진 않습니다. 일반적으로, 여행을 가기 위해서 그 준비에 필요로 하는 정보를 확인할 때 먼저 LonelyPlanet 같은 웹사이트에 가서 여행지의 정보를 확인할 수가 있습니다. 그 이후에는 여행을 실제로 가기 위한 비행기표를 예매하고 호텔을 예약하는 작업을 실제 여행사 사이트를 통해서 수행합니다. 여러 가지 준비가 된 이후에는 실제 여행을 떠나서 목적지에 갔을 때 예기치 못한 날씨를 접할 수도 있습니다. 그래서 날씨도 체크하고 그 지역에 대한 뉴스도 확인할 수 있습니다. 이러한 일련의 웹정보 혹은 서비스를 접근함을 통해서 여행에 관련된 정보를 확인합니다. 그에 대한 실제적인 준비를 할 수가 있..

전체 화면 API는 전체 웹 컨텐츠를 페이지에 표시 할 수 있는 쉬운 방법입니다. 키보드에서 F11 키를 누르는 것과 매우 유사하지만 개발자가 선택하여 수행 할 수 있습니다. 이미지를 클릭하면 브라우저를 전체 화면으로 볼 수 있습니다. 이 기능의 가장 좋은 점은 전체 페이지일 필요는 없으며 HTML 요소를 전체 화면으로 만들 수 있다는 것입니다. 즉, 전체 페이지를 항상 전체 화면으로 표시하는 대신 전체 화면 API를 이미지에 할당하고 이미지를 클릭하면 이미지를 전체 화면으로 집중할 수 있습니다. 전체 화면 API 지원 불행히도 모든 브라우저가 이 기능을 지원하는 것은 아니므로, 사용하기 전에 방문자 브라우저가 이 기능을 지원하는지 확인해야합니다. 사용하는 브라우저가 지원한다면 사용할 수 있고, 브라우저..

WSDL Web Service Description Language, 즉 WSDL은 XML 기반의 웹서비스 명세 언어입니다. 2001년에 IBM 등의 회사에서 W3C에 제안을 한 것입니다. 2007년에 W3C에 표준으로 지정이 되었습니다. WSDL은 웹서비스 간에 교환되는 메시지 포맷과 데이터 타입, 그리고 전송 방식에 대한 정보를 기술할 수 있는 언어입니다. WSDL을 사용하는 웹서비스 명세는 abstract한 부분과 concrete한 부분, 두 레벨로 구성이 됩니다. abstract-level 명세는 웹서비스가 받고 전달을 해야 되는 메시지를 중심으로 interface를 기술하는 것입니다. concrete한 level의 명세는 웹서비스 호출을 위한 네트워크상의 주소, 프로토콜, 이러한 기술적인 것들을..