본문 바로가기

프로그래밍458

반응형 웹에서의 자바스크립트를 반응형으로 사용하기 반응형 웹을 만들기 위해서 CSS3 미디어 쿼리를 이용하여 화면 크기에 따라 적용하는 스타일을 달리하는 방법은 "반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries)" 에서 알아 보았었습니다. 화면 크기에 따라 스타일 시트를 변경하여 페이지내의 요소들의 사이즈를 늘리고 줄이거나, 위치를 변경하고, 보이거나 감추거나 하는 작업을 할 수 있습니다. 원하는 디자인이 이러한 것들 뿐만 아니라 제목의 길이를 줄이거나, 이미지를 교체하거나, 특정 요소를 클릭했을 때의 동작을 변경하거나 하는것이 필요하다면 CSS만으로는 구현하기가 힘듭니다. PC에서 보여줄 것과 휴대기기에서 보여줄것을 따로 만들고, 각각에 필요한 이벤트를 자바스크립트로 구현한 후 화면 크기에 따라 숨기거나 보여주는 CSS를 이용해서.. 2018. 4. 9.
반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries) 미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있습니다. 미디어 쿼리는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 요소에 사용하여 특성이 조건에 맞을때 css 파일을 불러옵니다. media속성의 "screen and (max-width: 768px)"의 의미는 미디어 .. 2018. 4. 9.
자바스크립트 옵티마이저 - Closure Compiler 클라이언트 측 웹프로그래밍에서 자바스크립트의 비중이 점점 높아지고 있는 것 같습니다. 일반 홈페이지는 물론 업무용 웹 프로그램에서는 엄청난 양의 자바스크립트 코딩을 해야하는 경우가 많습니다. 이런 자바스크립트는 .js 파일로 만들어져 재사용 됩니다. 자바스크립트의 양이 많아지니까 페이지 로딩에 부담을 줄이기 위해서 자바스크립트를 압축하는 방법이 많이 나왔습니다. 실제 gzip으로 압축하여 전송하는 것은 클라이언트(웹 브라우저)가 지원한다면 서버에서 지원하는 기능을 사용하게 됩니다. 단순히 자바스크립트 압축이라고 하면 자바스크립트내의 주석을 삭제하고, 화이트 스페이스를 제거해서 파일 크기를 줄이는것을 말했습니다. 이번에 알아볼 Closure Compiler는 기계어로 컴파일 하는 것은 아니고, 파일 크기를.. 2018. 4. 9.
자동 포커스 이동 - jQuery Auto Tab 웹 프로그래밍에서 주민등록번호 입력등에서 처럼 앞의 여섯자리를 입력하면 포커스가 자동으로 뒷자리로 이동하는 기능을 많이 요구 합니다. 일반적인 홈페이지에는 이러한 요구사항이 거의 없지만 업무용화면에서 코드성 데이터를 많이 입력하는 경우 아직도 마우스를 사용하는 선택박스보다 키보드 입력을 선호하는 곳이 많습니다. 이런곳에서는 데이터의 길이가 일정한 경우가 많으므로 하나의 입력필드에 데이터 입력이 완료되면 다음 입력필드로 자동으로 포커스가 이동하기를 바랍니다. 이러한 기능을 쉽게 구현할 수 있도록 해주는 jquery.autotab.js 에 대해서 알아보겠습니다. 기능을 알아보기 전에 이 라이브러리를 사용하는데 있어 문제가 될 수 있는 세 가지 참고 사항에 대해 예기해 보겠습니다. 첫 번째는 웹 접근성과 관련.. 2018. 4. 9.
오라클 비밀번호 만료(Oracle password has expired) 오늘 데이터베이스에 접속을 하려고 하니 비밀번호가 만료되었다는 오류메세지가 뜹니다(ORA-28001: the password has expired). 데이터베이스는 Oracle 11g r2 express editon 입니다. 11g r2 가 나왔을 때 사용자의 기본 프로필이 180일 지나면 비밀번호가 만료 되도록 변경 되었습니다. 예전에 이것 때문에 여러곳에서 갑자기 웹서비스가 안된다고 연락이 왔었던 기억이 납니다. 그 때는 보안 때문에 문제가 지금처럼 많이 발생하던 시절이 아니라, 한번 정한 비밀번호를 주기적인 변경없이 계속 사용했었습니다. 요즘은 대부분 3개월 주기로 비밀번호를 변경하는걸로 알고 있습니다. 비밀번호가 만료되면 비밀번호를 변경해주는게 맞겠습니다. 실제로 만료 전부터 로그인하면 만료기간에.. 2018. 4. 9.
GIMP 2 사용법 - Rotate, Crop, Resize 앞에서 무료 사진 편집 프로그램인 gimp 2 를 설치해 보았습니다. 여기서는 간단한 사용법을 알아보도록 하겠습니다. 이번에 알아볼 기능을 이미지를 Rotate(회전)하는 기능과, 이미지의 일부분을 잘라내는 Crop, 이미지의 크기를 변경하는 Resize 기능 입니다. 블로그에 올린 캡쳐 이미지를 만들때도 캡쳐해서 필요한 부분만 Crop 하고, 리사이즈 하는 작업을 주로하게 되는 것 같습니다. gimp 2의 설치는 이전글 "무료 사진 편집프로그램 - gimp 설치하기" 를 참조해 주세요. 1. 파일열기먼저 수정할 파일을 열어야 하겠습니다. 메뉴에서 "파일 -> 열기" 를 선택해서 파일 선택창이 뜨면 수정할 파일을 선택하는 방법이 있습니다. 하지만 주로 사용하는 것은 탐색기에서 gimp 창으로 드래그 앤 .. 2018. 4. 9.
jsoup : 자바 HTML 파서(Java HTML Parser) CKEditor, Smart Editor 같은 HTML 에디터로 글을 작성하는 사이트의 경우 작성된 글에서 html 태그(tag)를 제거한 순수한 텍스트만을 추출하거나, img 태그만을 추출하여 썸네일(Thumbnail)을 만들거나 하는 일이 종종 있습니다. 이러한 기능을 정규식(Regular Expression)을 사용하여 직접 만들어 쓰기도 하는데, 그 기능에는 제한이 있을 수밖에 없습니다. 이번에 소개하는 jsoup은 자바(Java)로 만들어진 HTML 파서(Parser) 입니다. jsoup은 자바 언어로 HTML을 다루는 쉽고, 강력한 기능을 제공합니다. jsoup로 다음과 같은 작업을 할 수 있습니다. * URL, 파일, 문자열을 소스로 하여 HTML을 파싱할 수 있습니다. * DOM 구조를 추.. 2018. 4. 9.
C++ 문법 공부 - 데이터 타입(data type) 프로그래밍은 데이터를 조작하여 원하는 결과를 얻는 일련의 작업을 프로그래밍 언어로 기술하는 것이라고 할 수 있습니다. 기계를 조작하는 프로그램도 내부적으로는 특정 영역에 특정 데이터를 입력하고, 어떠한 이벤트(인터럽트)를 발생시키면, 기계가 움직이는 형태 입니다. 즉, 기본은 데이터를 다루는 것입니다. 이번에는 C++에서 데이터를 다루는 방법에 대해서 알아보겠습니다. 프로그램에서 데이터를 다루기 위해서는 데이터를 어디에 저장해두고, 그 데이터에 특정 연산을 할 수 있어야 합니다. 데이터를 저장하는곳이 변수(variable)가 되겠습니다. 그런데 C++에서 변수는 한 종류만 있는것이 아니라 저장할 수 있는 데이터의 크기, 형태, 정밀도 등에 따라 다양한 타입이 있습니다. 이것을 데이터 타입 이라고 합니다... 2018. 4. 9.
Java로 썸네일(Thumbnail) 이미지 만들기 갤러리와 같은 웹애플리케이션을 만들게 되면 이미지의 썸네일을 만들게 됩니다. 가끔 보면 썸네일 없이 원본이미지를 줄여서 보여주고 있는곳이 있는데, 모바일 환경이라면 시간과 데이터 사용량이 많이 소비가 될 것입니다. 이번 예제에서는 "스프링프레임웍 ajax 파일업로드 - jQuery, FormData, jQuery Form Plugin 사용" 에서 사용한 이미지 업로드 프로젝트에 썸네일 생성 기능을 추가해 봅니다. Java 환경에서 썸네일을 만들기 위해서 Scalr 라이브러리를 사용합니다. 이 라이브러리는 다음 URL에서 다운로드 할 수 있습니다. https://github.com/rkalla/imgscalr 메이븐을 사용중이라면 pom.xml 파일에 다음 의존성을 추가하면 됩니다. org.imgscalr.. 2018. 4. 9.
lombok 라이브러리 - Getter, Setter, toString 자동 생성 이클립스에서 VO(Value Object) 를 생성하고, getter, setter, toString 을 추가하기 위해서는 메뉴에서 source -> Generate Getters and Setters... 와 source -> toString()... 를 선택하여 간단히 생성을할 수 있습니다. 생성은 간단하게 할 수 있지만 코드가 상당히 길어 보기가 좋지 않고, 나중에 멤버가 추가/삭제 되면 다시 생성을 하여야 하는 불편함이 있습니다. lombok 라이브러리는 아노테이션을 통해서 자동으로 생성이 가능합니다. 실제로 Getter와 Setter 코드는 보이지 않아서 코드가 길지 않아 보기 좋고, 멤버가 추가/삭제 되더라도 생성과 제거가 자동으로 처리됩니다. lombok 라이브러리는 따로 사용할 수도 있지만.. 2018. 4. 9.
스프링프레임웍 - Ajax 통신(@RequestBody, @ResponseBody) 이번에는 스프링프레임웍을 사용해서 Ajax 통신을 하는 방법에 대해서 알아보도록 하겠습니다. jquery를 이용해서 Ajax로 데이터를 보내고, 결과를 JSON 데이터를 받는 예제입니다. 이번 예제는 "스프링 프레임웍에서 MyBatis, Oracle 사용하기" 에서 사용된 프로젝트를 기반으로 합니다. 또한 클라이언트 측은 "AX5UI - GRID 6 (페이징)" 에서 사용된 예제를 변형하여 AX5UI 그리드에 Ajax와 JSON 데이터를 이용해서 조회하는 예제를 만들어 보겠습니다. 전체 소스를 하단에 첨부 되어 있습니다. 먼저 실행 결과 화면을 보겠습니다. AX5UI 그리드에 구분, 완료 값을 조회조건으로 하여 조회합니다. 조회는 POST 방식과 GET 방식일 경우 각각 어떻게 데이터를 전송하고 서버측에.. 2018. 4. 9.
AX5UI - GRID 6 (페이징) 그리드에서 페이징을 사용하는 방법을 알아봅니다. 먼저 실행된 화면 입니다. 그리드 좌측 하단에 페이징 정보가 보입니다. 우측 하단에는 현재 페이지내의 데이터중 어느 부분이 보이고 있다는 것을 나타냅니다. 테스트용 코드는 화면에서 조회 버튼을 누르면 조회된 데이터를 그리드에 넣는다는것을 가정해서 작성해 보았습니다. 1. 필요한 스크립트들을 로드합니다. 2. 그리드 변수를 선언합니다. 그리드 객체를 나타내는 firstGrid 변수를 전역 변수로 선언합니다. 나중에 조회등의 작업에서 사용할 수 있어야 하기 때문입니다. 3. 그리드 설정에 페이징 정보를 추가합니다. page: { navigationItemCount: 9, height: 30, display: true, firstIcon: '||', onChan.. 2018. 4. 9.
반응형 웹 - 뷰포트(viewport) 사용법 반응형 웹 (responsive web)이란 하나의 웹사이트로 데스크탑 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지를 말합니다. 미디어 쿼리는 CSS3 부터 지원이 되는 CSS기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용할 수 있도록 해줍니다. 이를 이용해서 화면 크기가 변할때 스타일을 바뀌도록 해서 반응형 웹을 구현할 수 있습니다. 모바일 웹을 작성하게 되면 뷰포트(viewport)라는 것을 고려하게 됩니다. 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말합니다. 데스크탑 PC에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다보여지지 않고 스크롤 해서 봐야 되는 경우가 있습니다. 이때도 브라우저에 보여지는.. 2018. 4. 9.
오라클 계층 쿼리(Hierarchical Query)의 사용법 업무를 데이터베이스로 구현을 하다보면 한 테이블 내의 데이터가 계층적 관계를 가지는 경우가 많이 있습니다. 예를 들어보면 코드정보, 부서정보, 사이트의 메뉴 정보 등이 되겠습니다. 계층의 단계가 고정 되어 있고, 두 계층 정도라면 테이블을 분리할 수도 있지만, 임의의 단계를 표현해야 한다면 한 테이블에 상위 데이터로의 연결고리를 가지도록 구현을 하게 됩니다. 제품의 BOM(Bill of Material - 부품의 계층 정보) 정보 같은 것이 되겠습니다. 이러한 자기참조 구조는 이해하기도 편하고, 깔끔하게 구현이 됩니다. 하지만 한가지 중대한 단점이 있습니다. 관계 데이터베이스는 한 행내의 데이터들 간의 연산은 아주 간단히 처리되지만, 다른 행과 관계되는 연산은 쿼리가 상당히 복잡해 집니다. 복잡한 서브쿼.. 2018. 4. 9.
Apple WWDC2017 iOS11 발표 - 업데이트 대상 기기는? 2017년 9월 12일 애플 신사옥 내의 스티븐 잡스 극장에서 열린 행사에서 iOS 11 출시일이 발표 되었습니다. 애플은 iOS 11이 2017년 9월 19일 다운로드가 가능할 것이라고 밝혔습니다. ---------------------------------------- 지난 5월 5일 오전 10시(현지 시간) 애플 WWDC 2017 에서 iOS 11 이 발표 되었습니다. 이미지출처 : Apple 홈페이지 ※ 참고Apple WWDC : 세계 개발자 회의(Worldwide Developers Conference)는 애플사가 매년 6월 경 캘리포니아에서 개최하는 회의 입니다. 이 회의는 주로 애플이 개발자들을 위한 새로운 소프트웨어와 기술들을 공개하는데 사용되며, 체험 활동과 피드백 세션도 함께 합니다. .. 2018. 4. 9.

티스토리툴바