Web Club

substr() vs substring() 메소드

substr & substring - 문자열 자르기 문자열 객체의 substr 메서드 및 substring 메서드에 대해 알아봅니다. 두개의 메소드 공통점은 원 문자열은 그대로 보존한다. substr() 문자열.substr(start, length)1. length값은 가져올 길이값이며, 생략가능하다. 2. 두번째 매개변수인 length값이 음수값일 경우 빈 값을 반환한다. (length값이 음수이라면 가져올 길이값이 마이너스이므로 당연히 빈값을 반환) 문자열에서 특정한 구간의 문자열을 추출한다. 문법(Syntax) JavaScript string.substr(start,length) 인자(Parameters) 인자명 데이터형 필수/옵션 설명 start number 필수 탐색 구간의 시작점(index) ..

JavaScript/연산자ㆍ메서드ㆍ프로퍼티 9년 전

Susy Settings 기본 설정 #2

Susy Settings(gutters, Column-width, debug, etc..) 이전 포스팅 다음으로 계속 Susy Settings 에 대해 살펴보겠습니다. Column Width column-width [@type setting] column-width 는 명시적인 컬럼의 넓이를 지정할 수 있습니다. ㆍ key : column-width ㆍ Scope : global, local ㆍ Options : | false / null ㆍ Default : false 는 유효한 unit(단위)를 사용하여 컬럼의 너비를 지정하고 일반적으로 정적(고정) 레이아웃에서 모든 그리드의 너비를 계산하기 위해 사용할 수 있습니다. 또한, 유동(fluid) 레이아웃에서도 컨테이너의 outer 최대 넓이를 계산하기 ..

StyleSheet/Susy 9년 전

Git 리모트 저장소

Git remote repository 리모트 저장소를 관리할 줄 알아야 다른 사람과 함께 일할 수 있습니다. 리모트 저장소는 인터넷이나 네트워크 어딘가에 있는 저장소를 말합니다. 저장소는 여러 개가 있을 수 있는데 어떤 저장소는 읽고 쓰기 모두 할 수 있고 어떤 저장소는 읽기 권한만 있을 수도 있습니다. 간단히 말해서 다른 사람들과 함께 일한다는 것은 리모트 저장소를 관리하면서 데이터를 거기에 Push하고 Pull하는 것입니다. 리모트 저장소를 관리한다는 것은 저장소를 추가, 삭제하는 것뿐만 아니라 브랜치를 관리하고 추적할지 말지 등을 관리하는 것을 말합니다. 이번에는 리모트 저장소를 관리하는 방법에 대해 알아봅니다. 리모트 저장소 리모트 저장소 확인하기 git remote 명령으로 현재 프로젝트에 등..

Dev Environment/Git 9년 전

Git branch(브랜치)

Git 브랜치 모든 버전 관리 시스템은 브랜치를 지원합니다. 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생길 수 있습니다. 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 것이 브랜치입니다. 버전 관리 시스템에서 브랜치를 만드는 과정은 고생스럽습니다. 개발자가 수동으로 소스코드 디렉토리를 복사해서 브랜치를 만들어야 하고 소스코드의 양이 많으면 브랜치를 만드는 시간도 오래 걸립니다. 사람들은 브랜치 모델이 Git의 최고의 장점이라고, Git이 다른 것들과 구분되는 특징이라고 말합니다. 당최 어떤 점이 그렇게 특별한 것일까? Git의 브랜치는 매우 가볍습니다. 순식간에 브랜치를 새로 만들고 브랜치 사이를 이동할 수 있습니다..

Dev Environment/Git 9년 전

Git 기초- 깃(git) 명령어 배워보기

Git Command Git을 사용해서 프로젝트 관리하는 것에 대한 명령어를 배워봅니다. Git의 기본 개념인 push, pull, commit, branch 등에 대해 알아보며 windows에서의 실행을 전제로 합니다. Git Working Flow - 작업 흐름 여러분의 로컬 저장소는 git이 관리하는 세 그루의 나무로 구성되어 있습니다. 첫번째 나무인 작업 디렉토리(Working directory)는 로컬(실제) 파일들로 이루어져있고, 두번째 나무인 인덱스(Index)는 준비 영역(staging area)의 역할을 하며, 마지막 나무인 HEAD는 최종 확정본(commit)을 나타냅니다. Git 저장소 만들기 Git 저장소를 만드는 방법은 두 가지입니다. 기존 프로젝트를 Git 저장소로 만드는 방법이..

Dev Environment/Git 9년 전

브라우저 호환성 대응 방안

Browser Compatibility - 브라우저 호환성 대응 방안PC/모바일에서 사용하는 브라우저가 다양하고 각각의 레이아웃 엔진, Javascript 엔진이 다르고 지원하는 기능 범위도 차이가 있습니다. 부분적인 기능이지만 참고 http://html5test.com/compare/browser/chrome-37/firefox-32/ie-11/ie-8.html 그로 인해 개발과 검수하는 단계에서 현재 진행하고 있는 프로젝트가 고객들이 사용하는 주요 브라우저에서 잘 서비스되는지 검토해야 합니다. 아래는 검토 시 필요한 내용들을 정리하였습니다. 브라우저 호환성 대응 기준 호환성 대응 방법을 얘기하기 전에 어떤 범위까지 지원할지 정리가 필요합니다 아래는 체크가 필요한 방향과 기준에 대해서만 작성하였습니다...

Dev Environment/개발 기타 자료 9년 전

MVC requireJS - 자바스크립트 모듈 로더

개요 웹 개발자라면 흔히 파일 하나로 자바스크립트 코드를 작성하곤 합니다. 그리고 그 코드가 점점 커져서 나중에는 수정하는 것은 물론이고 유지보수시에도 정말 어려워집니다. 이런 문제의 해결하기 위해서 코드를 여러 파일로 쪼갤 수 있습니다. 하지만 그러면 script 태그가 많아지고 다른 파일에서 정의한 함수를 조회하기 위한 글로벌 변수가 많아지게 됩니다. 그래서 글로벌 네임스페이스는 지저분해지고, 추가한 js 파일들의 HTTP 요청이 네트워크 대역폭을 차지해서 정작 해당 페이지의 로딩은 느려지게 될 것입니다. 이런 일을 겪었다면 프런트 앤드 코드를 뭔가 다른 방법으로 관리해야 겠다는 필요성을 느끼게 됩니다. 특히 자바스크립트가 수천 라인이 넘는 대형 사이즈의 웹 앱을 제작해야 한다면 더욱 그렇습니다. 유..

Web Tech/RequireJS 9년 전

Tooltip UI - 툴팁 레이어

간단한 Tooltip layer 구현해보기 웹 서비스시에 많이 사용되는 툴팁에 대해 알아봅니다. Tooltip Layer 툴팁을 마크업할 시에 접근성을 고려하여 툴팁 타켓(대상)과 툴팁 콘텐츠를 맵핑(연결)시키도록 합니다. html Lorem ipsum dolor sit amet, consectetur 툴팁 레이어 보기 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quam. Lorem ipsum doloisicing elit. Iste, quam. Lorem ipsumdipisicing elit. Iste, quam. Lorem ipsum dolor sit amet, Iste, quam. Lorem ipsum dolor sit amet..

Code Lab 9년 전

RequireJS 의 모듈

requireJS 모듈 정의와 호출 Javascript는 사용하기 편한만큼 편함에 너무 의존하다보면 돌이킬 수 없는 스파게티 코드나 중복 코드 발생이 많아질 수 있어, 모듈 프로그래밍이 필요합니다. RequireJS는 이러한 경우의 한 대안이 될 수 있습니다. RequireJS를 사용하면 모듈 생성/호출 등 관리를 통해 좀 더 체계적인 프로그래밍을 가능하게 해 주며, 브라우저 지원 또한 IE 6 이상 지원합니다. RequireJS에서 모듈 정의/호출에 사용되는 함수 - 모듈 정의 Module Define - 모듈 호출 Module Require 모듈 정의 / 호출 방식은 다음과 같습니다. javascript /** * -------------------------------------- * 모듈 정의 *..

Web Tech/RequireJS 9년 전

RequireJS - module loader(모듈 로더)

JS 모듈 관리(Javascript Modules Management) RequireJS 는 자바스크립트 파일/모듈 로더입니다. 브라우저 환경에서 최적화되어 있으나 Node 와 같은 다른 자바스크립트 환경에서도 사용될 수 있습니다. 그렇다면 모듈 로더는 무엇인가?! JAVA 나 그 밖의 다른 서버사이드 언어는 파일을 include 하여 사용할 수 있으나 자바스크립트 자체로는 file01.js 파일로부터 다른 file02.js 파일을 include 할 수 있는 방법이 없습니다. 하지만 이를 해결할 수 있는 여러가지 방법이 존재하고 있으며 이러한 방법을 통해 자바스크립트 파일들 서로 간에 의존성/종속성 관리를 할 수 있습니다. 여러가지 방법 중의 하나인 RequireJS 와 같은 모듈 방식의 스크립트 로더를..

Web Tech/RequireJS 9년 전

jQuery 유틸리티 사용자 메소드 정의 - jQuery utility method

jQuery 유틸리티 사용자 메소드 정의하기 $.each(), $.data() 와 같은 유틸리티 메소드처럼 사용자 정의 유틸리티 메소드를 알아봅니다. 나만의 $.$() 유틸리티 메소드 정의 지금 작성하려고 하는 유틸리티 메소드는 요소를 탐색할 때 탐색했던 요소를 다시 탐색하지 않기 위한 메소드를 정의하려고 합니다. 이는 성능 최적화에 도움이 될 수 있을 것입니다. 다음의 코드는 $.$() 유틸리티 메소드를 만들고 현재 제이쿼리에서 제공되는 $.data() 유틸리티 메소드를 사용할 것입니다. javascript /** * --------------------------------------------------------------------------- * 요소를 탐색할 때 탐색했던 요소를 다시 탐색하지..

Web Tech/jQuery 9년 전

jQuery.expr[':'] 확장 및 활용 방법 - jQuery 가상 선택자 사용자 정의

jQuery.expr.pseudos 확장(사용자 정의 방법)과 활용 :hidden, :visible 과 같은 제이쿼리의 가상 선택자를 사용자가 직접 정의, 확장하는 방법에 대해 알아봅니다. jQuery.expr.pseudos 확장 사용자 정의 가상 선택자를 확장하는 Sizzle 엔진의 새로운 방법은 jQuery.expr.createPseudo() 메소드를 사용하는 것입니다. 이 메소드는 사용자가 직접 정의한 가상 클래스 선택자에 메타 값을 입력하는 경우에만 사용할 수 있습니다. 아래 코드를 간단히 살펴봅니다. javascript // jQuery.expr[':'] === jQuery.expr.pseudos $.expr[':'].btn = $.expr.createPseudo( function(meta){ ..

Web Tech/jQuery 9년 전

스크롤 메뉴(Scroll Menu) 구현해보기

Scroll Menu 주로 프로모션용 웹페이지나 사이트의 메인페이지에 많은 내용의 콘텐츠를 보여줄 때 사용합니다. 대개 메뉴를 클릭하면 해당 메뉴 섹션으로 스크롤이 이동하여 섹션의 내용이 화면에 보이도록 UI를 구성합니다. Temp Mark-up html header 메뉴 1 메뉴 2 메뉴 3 상단으로 섹션 1 섹션 2 섹션 3 푸터단 Temp CSS css .header { position: relative; height: 200px; background-color: #ffccec;} /* contents */ .section-01,.section-02,.section-03 { position: relative; height: 600px; } .section-01 { background-color: #..

Code Lab 9년 전

Accordion Pattern Collection(아코디언 메뉴)

아코디언 메뉴 타입 모음 아코디언 메뉴에 대한 다양한 자바스크립트 코드 패턴을 알아봅니다. 아코디언 메뉴 JS 패턴 #1 See the Pen 아코디언 메뉴 패턴 #1 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #2 클릭했던 메뉴를 다시 클릭하면 닫히지 않고 다른 메뉴를 클릭해야만 닫히도록 구현한 경우입니다. See the Pen 아코디언 패턴 #2 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #3 삼항 연산자를 이용한 패턴입니다. See the Pen 아코디언 패턴 #3 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #4 객체 리터럴 방식으로 싱글톤 패턴입니다. See the..

Code Lab 9년 전

jQuery skip navigation 플러그인

웹 접근성 강화를 위한 Skip Navigation Plugin Pattern 웹 사이트 제작시 많이 사용되는 스킵 네비게이션에 대해 알아봅니다. 접근성 강화를 위한 스킵 네비게이션을 플러그인화 시켜보고 뒤로가기(shift+tab)을 눌렀을 때에도 올바른 접근을 하도록 구현해 봅니다. Navi 마크업 일반적인 마크업 구성은 아래와 같습니다. 사용자 콘텐츠에 적합하게 구성하시되 네비 항목의 맵핑만 주의하시면 됩니다. html art-5 art-6 art-7 art-8 art-9 art-10 jQuery.fn.skipNav() 플러그인 한글 로렘입숨. 가슴을, 소리. 한글 로렘입숨. 찬란한, 청춘의, 설레는. 햇볕처럼 설레게 빛나는 설레는 피어나는 해도, 숨소리가, 꽃보다 땀 젊음의. 꽃처럼, 찬란한. 어디..

Code Lab 9년 전