프로그래밍 (27) 썸네일형 리스트형 History mode Vue 프로젝트를 하다보면 URL에 '#' 모양이 포함된 것을 볼 수 있다. '#'에 의미는 뭘까? '#'이 붙어 있는 것과 없는 것의 차이는 무엇일까? 1. 들어가기 전 우선 URL에 해쉬(#)가 붙어 있는 것이 Hash Mode입니다. 그리고 URL에 해쉬(#)가 없는 것이 우리가 늘 보았던 깔끔한 주소인데 이것은 History Mode입니다. 왜 해쉬(#)가 붙는 URL이 있는 걸까? 호기심을 풀어보겠습니다. 먼저, SPA(Single Page Application)라는 것을 알아야 합니다. SPA란, 웹 브라우저에서 액세스할 수 있는 하나의 인덱스(보통 index.html) 파일에서 동적으로 화면을 변경해 표시하는 기술입니다. SPA 작동 방식은, 브라우저는 최초에 한 번 서버에 요청하여 하나의 .. Microsoft SQL Server Management Studio - 테이블 디자인 설명 표시 아래와 같이 SSMS에서 테이블 디자인 설명 표시를 해보자 컴퓨터\HKEY_CURRENT_USER\Software\Microsoft\SQL Server Management Studio\14.0\DataProject 에 있는 SSVPropViewColumnsSQL70 SSVPropViewColumnsSQL80 의 기본값인 1,2,6 값을 1,2,6,17 로 변경해주고 SSMS를 재구동 하면 위의 사진처럼 Description(설명) 항목이 보여진다. 위의 숫자가 의미하는 바는 아래와 같다. 1. Column Name2. Data Type3. Length4. Precision5. Scale6. Allow Nulls7. Default Value8. Identity9. Identity Seed10. Identi.. 데코레이터(Decorator) 패턴 데코레이터(Decorator) 패턴개별 클래스가 단일 책임(Single Responsibility)을 가질 수 있도록 하기에 매우 적합한 패턴이다. 클래스는 종종 다른 클래스에 책임을 위임할 명확한 방법을 찾지 못하고 혼자서 너무 많은 일들을 수행할 때가 있다. 이러면 클래스가 맡은 책임들이 서로 깊은 관련이 있어 보인다. 데코레이터 패턴의 가장 기본적인 전제는 각 데코레이터 클래스가 어떤 타입에 대한 계약을 만족함과 동시에 생성자 매개변수를 통해 자신이 데코레이트할 하나 혹은 그 이상의 데코레이터 객체들을 받아들인다는 점이다. 이 패턴은 특정 인터페이스를 구현하는 기존 클래스에 새로운 기능을 추가할 수 있는데, 이때 (클라이언트가 알지 못하도록) 데코레이터를 이용해 해당 클래스가 여전히 필요한 인터페이.. 컴포지트(Composite) 패턴 컴포지트(Composite) 패턴여러 인터페이스의 인스턴스를 마치 하나의 인스턴스인 것처럼 취급하는 것. 그래서 클라이언트는 단 하나의 인스턴스만을 받아들인 후 별도의 수정 없이도 해당 인스턴스를 여러 개의 인스턴스처럼 활용할 수 있는 방법아래 기본적인 컴포지트 패턴 사용 방법을 알아보자.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 //...namespace Composite.basic{ public interface IComponent { void Something(); }}.. MS-SQL 테이블 변수를 활용한 배열 처리 1. 타입별로 수량 및 데이터 건수를 가져오고 싶을 때 활용테이블 변수- 테이블 반환 매개 변수입니다. 테이블 이름은 (@)시작한다. - 테이블 변수가 정의된 함수 및 저장프로시저, 일괄 처리가 끝나면 자동으로 정리함 - 트랜잭션은 테이블 변수가 업데이트 되는 동안만 지속됨. - 리소스 잠금과 로깅에 대한 요구가 줄어듬 참조사이트 : http://blog.naver.com/PostView.nhn?blogId=islove8587&logNo=220608680181T-SQL이란(Transact-SQL) - SQL 표준 상에서 확장 - 선언문을 이용하여 관계형 데이터베이스를 조회하고 변경하고 정의 - 다양한 지원 함수, DELETE 및 UPDATE 문에 대한 변경, 절차적 프로그래밍, 지역 변수를 포함. - 트.. C#으로 BASE 64 인코딩 및 디코딩 처리 BASE 64(베이스 64)Base 64 (베이스 육십사)란 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념 Base 64를 글자 그대로 번역하여 보면 64진법이란 뜻64진법이 컴퓨터에서 흥미로운 것은, 64가 2의 제곱수(64 = 26)이며, 2의 제곱수들에 기반한 진법들 중에서 화면에 표시되는 ASCII 문자들을 써서 표현할 수 있는 가장 큰 진법이기 때문이다. 즉, 다음 제곱수인 128진법에는 128개의 기호가 필요한데 화면에 표시되는 ASCII 문자들은 128개가 되지 않는다.Base 64는 62개는 알파벳 A-Z, a-z와 0-9를 사용하고 있으며 마지막.. AngularJS 1.x - ngDraggable 모듈을 이용한 drag&drop 기능 활용 개발 angularJS 맛보기 개발 슬라이드 기능 UI 컴포넌트 만들기(관리기능) - 썸네일 등록 및 정렬 - 썸네일 정보 : URL, 설명 ngDraggale Angular 모듈을 이용한 드래그엔 드롭 순서 정렬 Modal 사용 해야할 일 - 정보 저장, 정보 불러오기동작 - 카테고리선택, 이미지 추가 및 드래그 엔 드롭 순서 정열, 이미지 클릭시 Modal Open - 모달 html 소스는 별 것 없음. 패스 ngDraggable 모듈 사용시 click이랑 같이 처리 하고 싶을 때1234567891011 {{info.selectFile.name}}Colored by Color Scriptercs 위 소스와 깉이 엘리먼트에 지시자로 ng-click, ng-drop-success를 사용. !!!!!. 문제가 .. jQuery slide 플러그-인(plugin) 개발 ● 요구사항 - 롤링(슬라이드) 갤러리 기능 추가 ● 직접 플러그-인(plugin) 개발 - 관리자가 일관된 패턴으로 쉽게 등록이 가능하다. - 슬라이드 type 제공 - 원하는 페이지에 쉽게 적용이 가능하다.(범용성)● 스킬 1. jQuery.extend( target [, object1] [, objectN] ) - 두개 이상의 객체를 합친다.(Merge) - object1 : 합쳐질 때, 기준이 될 객체 - objectN : 기준 객체에 합쳐질 추가 객체 !. 기준이 되는 객체에 있는 키와 합쳐질 두번째 객체에 있는 키가 동일할 경우, 첫번째 객체의 값이 덮어써져 버린다. 2. 객체 메서드 - jQuery.fn 객체를 확장한다.(jQuery.fn은 jQuery.prototype의 별칭) 3. $.g.. jQuery Selector Click And Toggle 처리 / default toggle state toggle을 이용할 때, $.fn.toggle()을 이용할 수 있습니다. 123456789$(function () { var $reactionToggleBtn = $("a[name='reaction-toggle']"); $reactionToggleBtn.toggle(function(){ // On }, function(){ // Off });}); 만약, 조건에 따라 toggle기능을 이용하려면 어떻게 해야 할까?예를 들어, toggle을 하기전의 로그인 유무를 판단하고 싶다?아래와 같이 $.fn.click() 이벤트를 줍니다.xor 연산자를 통해 해당 element의 상태가 1인지 0인지 내부에서 판단해서 function을 호출하면 되겠습니다.12345678910111213141516171819202.. visual studio + node.js + react 1. visual studio 2017 설치 (https://visualstudio.microsoft.com/ko/downloads/)※ visual Studio 설치 관리자 열기에서 Node.js개발 항목을 클릭하여 수정합니다. 2. node.js 설치(https://nodejs.org/en/download/) 3. visual studio 프로젝스 생성 및 npm 패키지 설치visual studio > 새 프로젝트 > JavaScript > 빈 Node.js 웹 응용프로그램 생성새 npm 패키지 설치 - react - react-dom - express - path - ts-loader - typescript - webpack - webpack-cli 4. 따라하기https://docs.microso.. 이전 1 2 3 다음
