티스토리

쉬고 싶은 개발자
검색하기

블로그 홈

쉬고 싶은 개발자

라이프 분야 크리에이터
offbyone.tistory.com/m

웹 프로그래밍에 사용되는 유용한 팁을 공유합니다.

구독자
142
방명록 방문하기
공지 블로그 이전을 완료했습니다. 모두보기

주요 글 목록

  • [React] 테스트 프레임웍 jest (4/4) - React Apps 테스트하기 이 글은 공부를 위해서 "Testing React Apps"를 번역 정리한것 입니다. 예제는 TypeScript를 사용하도록 수정되었고, 내용도 현재 버전에 맞도록 수정된 곳이 있습니다. 전체 내용은 원문을 참고 하시기 바랍니다. React App을 jest로 테스트하기 위한 가장 간단한 설정 방법은 Create React App을 사용해서 프로젝트를 만드는 것입니다. Create React App을 사용해서 프로젝트를 생성했다면 이미 jest를 사용할 수 있도록 구성이 되어 있을 것입니다. 여기에 화면 렌더링 스냅샷을 테스트할 수 있는 하나의 패키지만 추가로 설치하면 됩니다. # yarn 사용시 $ yarn add --dev react-test-renderer # typescript를 사용하면 type.. 공감수 1 댓글수 2 2023. 6. 21.
  • React 프로젝트 copy해서 옮기기 React 프로젝트를 복사해서 다른 PC로 옮기려고 합니다. 가장 간단한 방법은 전체 파일을 복사해서 옮기면 됩니다. 하지만 node_modules 폴더의 크기가 프로젝트 생성 초기에도 800MB 를 넘는군요. node_modules 폴더내의 내용은 프로젝트에 모듈 의존성 정보가 있어서 나중에 다시 받을 수가 있으므로 프로젝트를 복사해서 옮길때 빼도 되겠습니다. Linux에서 node_modules 폴더를 빼고 프로젝트 폴더를 복사하는 가장 간단한 방법이 rsync 명령을 사용하는 것 같습니다. 현재 폴더 아래에 my-app 이라는 프로젝트 폴더가 있을때 이것을 홈디렉토리 아래의 share 폴더에 같은 이름의 폴더로 복사하는 방법은 다음과 같습니다. $ rsync -av my-app ~/share/my-.. 공감수 2 댓글수 0 2023. 6. 20.
  • [TypeScript] 타입 선언 ( : type )과 타입 단언( as type ) JavaScript만 사용하다가 TypeScript를 공부하고 있습니다. 타입만 지정해주면 되지 하고 쉽게 생각했는데, 그게 아니더군요. 특히 내가 처음부터 타입까지 정의해서 사용면 문제가 되지 않지만, JavaSript의 특성상 다양한 타입의 값을 반환하는 함수를 사용할때던가 하는 경우가 좀 까다롭더군요. TypeScript에서 타입 선언과 타입 단언은 컴파일되면 제거되고 실행되는 코드에 영향을 주지 않습니다. 타입 체크에만 사용되는 것입니다. 이 글의 내용은 everyday types 를 번역 정리한 내용 입니다. 1. 타입 선언 (Type Definition) const, var, let을 사용하여 변수 선언할 때 Type Annotation을 사용하여 타입을 지정합니다. // 기본타입 : stri.. 공감수 1 댓글수 0 2023. 6. 19.
  • [React] 테스트 프레임웍 jest (3/4) - jest Matchers jest에서 값을 테스트하는데 사용하는 함수가 Matcher입니다. 많은 Matcher들이 있지만 자주 사용하는것 몇가지만 알아봅니다. 전체 내용은 jest 공식 홈페이지의 Expect DOC에서 찾을 수 있습니다 1. Expect - expect(value) : 테스트할때 매쳐와 함께 사용됩니다. 테스트 하고자 하는 값을 받고, matcher를 이용해 기대값과 비교합니다. test('1 + 2는 3', () => { // 더하기 함수 add(1, 2)의 결과가 3이면 성공입니다. expect(add(1, 2)).toBe(3); } 2. Matchers - toBe( value) : 완전히 일치하는지 테스트 합니다. 기본타입의 값과 객체 인스턴스의 참조 ID가 같은지 확인합니다. - toEqual( va.. 공감수 0 댓글수 0 2023. 6. 17.
  • [React] 테스트 프레임웍 jest (2/4) - jest API jest 테스트 프레임웍에서 사용되는 함수에 대해서 알아봅니다. 테스트 파일은 파일명과 확장자 사이에 test를 넣으면 됩니다. 예로 index.js 파일의 테스트 파일을 만든다면 index.test.js 파일로 만들면 됩니다. 1. 테스트 함수 - test(name, fn, timeout) : 테스트를 수행하는 가장 기본적인 함수 입니다. name은 테스트 이름이고, fn은 테스트를 수행하는 함수입니다. timeout은 밀리초 단위의 값으로 테스트가 수행되기를 얼마나 오랫동안 기다리는지 지정합니다. 기본값은 5초 입니다. ※ name은 동일한 describe 블럭 내에서 같은 값을 사용하면 Visual Studio Code에서 오류 표시가 납니다. 실행에는 문제가 없지만 구분을 위해서도 중복되지 않게 .. 공감수 1 댓글수 0 2023. 6. 13.
  • [React] 테스트 프레임웍 jest (1/4) - 샘플 프로젝트 만들기 자바스크립트 테스트 프레임웍인 jest를 사용해 봅니다. React와 함께 많이 쓰입니다. 사용된 운영체체는 fedora linux 입니다. 테스트 프로젝트 만들기 jest를 연습해볼 테스용 프로젝트를 만듭니다. 1. 프로젝트 폴더를 만듭니다. $ mkdir jest-app 2. 프로젝트 폴더로 들어가서 프로젝트를 초기화합니다. 모든 질문에는 엔터키를 입력하여 기본값을 선택합니다. typescript를 사용할 거라면 index.js 대신에 index.ts 를 입력합니다. 완료되면 package.json 파일이 만들어 집니다. $ cd jest-app # npm 사용시 $ npm init # yarn 사용시 $ yarn init 3. git repository를 만듭니다. git이 없으면 "jest --w.. 공감수 0 댓글수 0 2023. 6. 5.
  • [React] 생명주기(Lifecycle)과 Error Boundary React의 컴포넌트가 화면에 보여지고, 수정되고, 제거되는 생명주기(Lifecycle)될 때 내부적으로 다양한 함수들이 순차적으로 실행되어 처리됩니다. 이런 생명주기와 관계된 함수들을 알아봅니다. 참고로 테스트시에 각 함수에서 콘솔로 출력을 내는데 생명주기 함수가 두 번씩 호출됩니다. 이는 개발 환경에서 "index.tsx" 파일에서 를 호출하는데 를 사용하고 있기 때문이라고 합니다. build해서 나오는 배포판에는 이 부분이 빠지므로 문제가 없겠습니다. root.render( ); 생명주기 테스트용 소스 생명주기 테스트용 소스입니다. Hello.tsx파일로 App.tsx에서 부릅니다. import { Component } from "react"; interface HelloProps { name: s.. 공감수 0 댓글수 0 2023. 6. 5.
  • [React] 컴포넌트(Component)와 컴포넌트의 상태(State) React에서 페이지를 구성하는 것은 컴포넌트(Component)들 입니다. 컴포넌트를 만들기 위해서 함수(function)을 사용할 수도 있고 클래스(class)를 사용할 수도 있습니다. 두 가지를 섞어서 사용할 수도 있다고 합니다. 여기서는 기본적인 컴포넌트 사용법을 알아 봅니다. 함수형 컴포넌트 함수를 사용하여 컴포넌트를 만듭니다. 또한 컴포넌트에서 사용되는 데이터를 다루는 방법을 알아봅니다. 1. 컨포넌트 선언하기 function App() { const name = "React"; return Hello {nameame}!; } export default App; 컴포넌트가 되는 함수 App() 를 정의했습니다. 컴포넌트는 화면에 보여질 요소인 JSX를 반환합니다. 보통은 컴포넌트 하나를 하나의.. 공감수 0 댓글수 0 2023. 6. 5.
  • [자바스크립트] React 모듈 (Module) React 모듈은(module)은 주로 컴포넌트들을 다른 파일에 분리하는데 사용됩니다. 모듈은 자체 변수범위(Scope)을 가지기 때문에 외부에서 사용할 것은 export로 내보내야 하고, 모듈을 사용하는 쪽에서는 export된 것 중에서 사용하고자 하는 것은 import로 지정해야 합니다. React 모듈은 HTTP와 HTTPS를 통해서만 불러들일 수 있습니다. 로컬 파일시스템에서 file://로는 실행시킬 수 없습니다. 내보내기(export) 내보내기(export)는 변수, 상수, 심볼, 객체, 클래스를 모듈 밖에서 사용할 수 있도록 해줍니다. 모듈은 자체 scope을 가지므로 export 하지 않은 것은 외부에서 사용할 수 없습니다. 내보내기(export)는 명명된 내보내기(named export).. 공감수 1 댓글수 0 2023. 6. 5.
  • [React] JSX (JavaScript Xml) 사용하기 JSX(JavaScript Xml)는 자바스크립트의 확장으로 템플릿처럼 보입니다. React는 웹페이지 전체를 갱신하는 것이 아니라 필요한 부분만을 갱신해서 빠른 속도로 동작합니다. 이처럼 React에서는 전체 페이지 내용이나 교체될 html 조각들을 만들게 됩니다. 이런 html 조각을 편리하게 만들 수 있도록 해주는 것이 JSX입니다. JSX의 형태 JSX의 형태를 보겠습니다. 자바스크립트 문자열은 큰따옴표나 작은 따옴표로 둘러싸야 하지만 JSX는 그것이 없습니다. const element = Hello React!; JSX 는 하나의 엘리먼트만을 반환해야 합니다. 그래서 보통 엘리먼트로 감싸서 만들게 됩니다. 이렇게 하므로써 태그가 중첩되게됩니다. 리액트 v16부터는 Fragment 태그를 사용해서.. 공감수 1 댓글수 0 2023. 6. 5.
  • [React] Error: Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. TypeScript를 사용하는 React에서 JSX 표현식 오류가 발생했습니다. * 에러가 발생한 코드 const color = "blue"; const greeting = "Hello, React!"; return ( {greeting} ); * 발생한 에러 ERROR in src/App.tsx:10:10 TS2559: Type 'string' has no properties in common with type 'Properties'. 8 | return ( 9 | > 10 | {name} | ^^^^^ TypeScript는 익숙하지 않아서 에러 메세지를 보고서도 원인을 찾는데 좀 버벅였네요. TypeScript에서 style 속성은 객체를 받는데, 문자열(string)을 넣었기 때문에 발생한 에러였습.. 공감수 0 댓글수 0 2023. 6. 5.
  • [React] React 프로젝트 만들기(yarn, npx) fedora 리눅스에서 React 프로젝트를 만듭니다. 프로젝트를 만들기 위해서 npx 또는 yarn을 사용할 수 있습니다. TypeScript를 사용하도록 지정하는 방법도 알아봅니다. yarn을 사용하여 생성 yarn을 사용해서 프로젝트를 생성합니다. typescript를 사용하도록 지정합니다. $ yarn create react-app first-app --template typescript 프로젝트들을 한 곳에 모으기 위해 홈 디렉토리 아래에 workspace 폴더를 만들고 그 폴더에서 명령을 실행했습니다. 프로젝트의 이름은 first-app 입니다. workspace폴더 아래에 first-app 폴더가 만들어지고, TypeScript를 사용하는 템플릿이 생성됩니다. 프로젝트 생성 명령 실행시 다음.. 공감수 0 댓글수 0 2023. 6. 5.
  • [자바스크립트] 구조 분해/비구조화 할당(Destructuring assignment) 구조 분해/비구조화 할당(Destructuring assignment)은 객체나 배열의 내용을 개별 변수로 간편하게 할당하는 방법입니다. 배열의 구조 분해 할당 // 배열 생성 let arr = [ 1, 2, 3 ]; // a, b, c 변수에 각각 할당합니다. let [ a, b, c ] = arr; // 결과 - 1:2:3 console.log(a + ":" + b ":" + c); // 기본 값 지정하기(기본 값이 없으면 undefined이다) let arr = [1]; let [ a=3, b=4 ] = arr; // 결과 - 1:4 console.log(a + ":" + b); // 변수값 교환하기 let a = 1; let b = 2; [a, b] = [b, a]; // 결과 - 2:1 cons.. 공감수 0 댓글수 0 2023. 6. 5.
  • [자바스크립트] 컬렉션(Collections) 자바스크립트에서 사용할 수 있는 데이터 자료구조는 인덱스(index) 기반의 컬렉션과 키(key) 기반의 컬렉션이 있습니다. 인덱스 기반의 컬렉션 인덱스 기반의 컬렉션은 Array 객체와 TypedArray 객체가 있습니다. 1. Array 객체 // new 연산자를 이용해서 생성한다. let arr = new Array(); // 위 코드는 아래와 동일하다. let arr = []; 2. TypedArray는 지정된 타입의 데이터만 저장할 수 있습니다. TypedArray는 실제 생성할 수 있는 타입이 아닙니다. 각 타입별로 객체가 있습니다. Int8Array, Unit8Array, Unit8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array.. 공감수 0 댓글수 0 2023. 6. 5.
  • [자바스크립트] 전개 구문(spread syntax) 전개 구문(spread syntax)는 점 세 개(...)가 이어진 연산자를 통해 사용됩니다. 이 전개 연산자(spread operator)를 배열, 문자열과 같은 반복 가능한(iterable) 요소 앞에 사용해서 배열의 개별 요소를 다른 배열이나 함수의 인자로 펼쳐서 넘기는게 가능합니다. 객체에 대해 전개 연산자를 사용하면 객체의 속성을 넘기는 것이 가능합니다. 말로 설명하려니 좀 이상하네요. 예를 보겠습니다. 함수 인자에 사용 여러 개의 인자를 받는 함수에 배열을 사용해서 한번에 인자를 넘길 수 있습니다. function sum(a, b, c) { return a + b + c; } let nums = [1, 2, 3]; // 전개 연산자를 사용해서 한번에 넘깁니다. let result = sum( .. 공감수 0 댓글수 0 2023. 6. 5.
  • [자바스크립트] 화살표 함수(arrow function) 화살표 함수는 함수를 간편한 문법으로 사용할 수 있도록 한 표현방법입니다. 화살표 함수 정의하기 간단한 익명 함수(anonymous function)의 정의를 보겠습니다. let sum = function(a, b) { return a + b; } 이 익명함수와 동일한 기능의 화살표 함수는 아래와 같습니다. 소괄호 안에 인자 리스트가 있고, 다음에 화살표 모양의 기호(이름이 화살표 함수인 이유), 다음에 반환값을 나타내는 표현식이 옵니다. let sum = (a, b) => a + b; 화살표 함수의 다양한 형태 화살표 함수는 인자의 갯수 본문내의 문장의 갯수등에 따라 조금씩 다른 형태를 사용할 수 있습니다. // 인자가 없을 경우 소괄호만 사용합니다. 소괄호를 생략할 수 없습니다. let val = (.. 공감수 0 댓글수 0 2023. 6. 5.
  • [자바스크립트] 상수 (const)와 심볼(Symbol)의 비교 자바스크립트에서 바꿀 수 없는 값을 지정하기 위해서 const 와 Symbol 을 사용할 수 있습니다. 두 가지의 사용법과 차이점을 알아봅니다. 상수(const) 상수는 선언과 동시에 값을 지정하고, 이후로 변경이 불가능합니다. 중복 선언 또한 불가능합니다. // 선언과 동시에 초기화 합니다. const num = 5; // 이후에 값을 바꾸려고 하면 에러가 발생합니다. num = 10; // 중복 선언을 하려고 하면 에러가 발생합니다. const num = 7; 심볼(Symbol) 심볼은 값을 바꿀 수 없으면서 유일한 값을 만듭니다. 한번 만들어진 값은 자신외에 어떤 값과도 같지 않습니다. // 심볼을 하나 생성합니다. const SUN = Symbol(); // 심볼 생성시 인자값을 줄 수 있습니다... 공감수 0 댓글수 0 2023. 6. 5.
  • JavaScript - 문장(Statement)과 표현식(Expression)의 차이점 JavaScript에서 문장(Statement)과 표현식(Expression)이 어떤 의미를 가지는지 알아봅니다. 아마도 다른 언어에서도 비슷한 의미로 사용될 것이라고 생각됩니다. 문장(Statement)은 프로그래밍에서 실행 가능한 최소의 코드라고 할 수 있습니다. 한 줄이 될 수도 있고, 블록({})으로 묶여 여러줄이 될 수도 있습니다. 문장의 예) let a, b; // 변수를 선언하는 문장. let c = 1; // 선언과 초기화를 한 번에 하는 문장. // 조건을 판별하는 if문장 if(a > b) { console.log("a가 b 보다 큽니다."); } a = b; // 대입 문장 c = a + b; // 계산 문장 표현식(Expression)은 주로 식별자, 연산자, 리터럴 등으로 구성되고.. 공감수 3 댓글수 2 2022. 4. 19.
  • JavaScript - 반복문 반복문은 어떤 명령을 반복적으로 실행해야할때 사용됩니다. 자바스크립트에서는 다음과 같은 반복문을 사용할 수 있습니다. 1. for 문 2. while 문 3. do...while 문 4. 레이블, break, continue 문 5. for...in 문 6. for...of 문 1. for 문 for문은 "초기문, 조건문, 증감문"을 사용해서 반복 횟수를 지정하는 방식입니다. for([초기문]; [조건문]; [증감문]) { 문장; } // 0부터 4까지 5회 반복 for(let i = 0; i < 5; i++) { console.log("i = " + i); } // 배열 인덱스로 사용하는 방법 let arr = [ "foo", "bar", "baz" ]; for(let i = 0; i < arr.len.. 공감수 3 댓글수 1 2022. 4. 12.
  • JavaScript - 흐름 제어와 오류처리 순차적으로 실행되는 명령을 조건에 따라 다른 명령을 실행할 수 있도록 해주는 흐름 제어(Flow Control)를 하는 방법을 알아봅니다. 1. 블록문 가장 기본적인 명령문은 세미콜론(;)으로 구분됩니다. 이러한 명령을 그룹으로 묶는 방법이 대괄호({}) 블록을 사용하는 것입니다. 블록은 함수, 조건문, 반복문, 에러처리 등에서 명령어 그룹을 묶는데 사용되어지며 변수의 유효범위를 결정하는 단위이기도 합니다. { 문장1; 문장2; . . . 문장n; } ※참고 var를 사용하면 함수 레벨 유효범위가 되고, ES6에서 추가된 let, const를 사용하면 블록 레벨 유효범위가 적용됩니다. 2. 조건문 조건에 따라 프로그램 실행 흐름를 변경할 수 있는 기능을 제공하는 명령으로 if, switch가 있습니다. .. 공감수 3 댓글수 0 2022. 4. 4.
  • JavaScript - 문장, 식별자, 변수선언 1. 문장(Statement) 자바스크립트 문장의 끝에는 세미콜론(;)이 있어도 되고 없어도 됩니다. 하지만 한줄에 여러 문장을 적으려면 세미콜론(;)으로 구분을 해줘야 합니다. 자바스크립트는 대소문자를 구별하며 유니코드를 사용합니다. 그러므로 변수명등 식별자에 "한글"을 사용할 수 있습니다. var 좋아하는과일 = "배"; // 변수에 공백은 사용할 수 없습니다. 2. 주석 프로그램에 설명을 달 수 있습니다. // 한줄 주석 입니다. 슬래쉬 2개 이후 부터 줄 끌까지 입니다. /* 이건 여러줄 주석입니다. slash-star부터 다음 start-slash가 나올때까지가 주석입니다. */ 3. 식별자(Identifier) 변수명, 함수명, 클래스명등 식별자는 시작하는 글자가 영문자, 유니코드가 가능하며,.. 공감수 2 댓글수 0 2022. 4. 1.
  • Node.js + TypeScript 프로젝트 만들기 자바스크립트를 공부하려다 타입스크립트를 알게 되었고, 타입스크립트를 공부하려니 간단한 테스트환경이 필요해졌습니다. Node.js는 웹브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해줍니다. 특히 서버 프로그램을 작성하는데 강점이 있다고 하더군요. 타입스크립트를 연습해보기 위한 간단한 환경이 될 수 있겠다 싶어서 Windows에서 Node.js와 TypeScript를 사용하는 프로그램을 위한 개발환경을 만들어 봅니다. 에디터는 Visual Studio Code(이하 vscode)를 사용하려고 합니다. ※ 작업환경은 다음과 같습니다. - Windows 10 Pro 64bit - Node.js v16.14.1 LTS : 설치 참조 - https://offbyone.tistory.com/441 - ya.. 공감수 4 댓글수 0 2022. 3. 23.
  • TypeScript를 사용하는 React App 만들기(feat. yarn berry) React와 TypeScript를 공부하는 첫 단계로 패키지 관리자 yarn을 사용해 프로젝트를 생성해 보았습니다(yarn 이외에 npm, npx를 이용한 프로젝트 생성 방법도 있습니다). 처음의 목표는 yarn berry(yarn v2)를 global로 설치를 해서 yarn classic(yarn v1)없이 바로 yarn berry + react + typescript 프로젝트를 생성하는 것이었습니다. 하지만 생성된 프로젝트는 실행시 오류가 너무 많이 떠서 포기 하였습니다. 다음으로 선택한 방법이 yarn classic으로 프로젝트를 생성한 다음에 yarn berry로 마이그레이션하고, PnP(플러그앤플레이)설정과 Zeor-Install 설정까지 하는 것이었습니다. 결론부터 말하자면 yarn berry.. 공감수 2 댓글수 0 2022. 3. 20.
  • Node.js 패키지 관리자 yarn 설치하기 Node.js의 패키지 관리자 yarn을 설치해 봅니다. Node.js를 설치하면 기본적으로 npm 이라는 패키지 관리자가 포함되어 있습니다. yarn은 npm보다 성능과 보안성을 높였다고 합니다. 하지만 이것저것 찾아보니 npm 또한 개선이 많이 되어서 성능은 거의 비슷해지고, 보안쪽도 개선이 되었다고 합니다. 처음 접해보는 입장에서 어느것이 더 나은지 판단이 되지 않습니다. yarn을 사용하는 예제가 종종 보이고, yarn을 사용하길 권장하는 모듈도 보이는지라 필요할때 필요한 것을 사용하면 될것 같습니다. 먼저 Node.js가 설치되어 있어야 합니다. 필요하면 https://offbyone.tistory.com/441 를 참고 해서 설치하면 되겠습니다. yarn의 공식 홈페이지는 https://yar.. 공감수 8 댓글수 0 2022. 3. 18.
  • Node.js 설치하기 Node.js는 Javascript로 작성된 프로그램을 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임입니다. 특히, 서버 프로그램을 작성하는데 많이 사용되고 있는것 같습니다. React를 사용해보기 위해서 설치해 봅니다. Node.js 한글 사이트는 https://nodejs.org/ko/ 입니다. 설치 파일을 다운로드 받습니다. 현재 최신 버전은 17.7.1이네요. 저는 16.14.1 LTS 버전은 다운받아 설치합니다(LTS는 Long Term Support의 약자로 오랫동안 지원하는 버전을 말합니다). 다운로드 받은 파일은 node-v16.14.1-x64.msi 이고, 크기는 27.1MB 정도 입니다. 다운받은 파일을 더블클릭하여 설치합니다. 라이센스에 동의합니다. 설치 위치를 지정.. 공감수 39 댓글수 10 2022. 3. 17.
  • CKEditor 이미지 업로드시 JSON 응답, jQuery UI Dialog와 같이 사용시 콤보박스 안열리는 현상 해결 이전글 "CKEditor 4 설치와 PHP 연동 하기"에서 CKEditor의 사용법을 알아 보았습니다. CKEditor에서 이미지 업로드 후에 에디터에 이미지를 표시하기 위해서 반환되는 값은 다음과 같은 자바스크립트 입니다. 최근 새 버전을 설치하고 테스트해본 결과 이 반환값이 JSON 값으로 변경된것 같습니다. 1. 이미지 업로드 성공시 반환값 { "uploaded": 1, "fileName": "foo.jpg", "url": "/files/foo.jpg"} - uploaded : 1 로 설정합니다.- fileName : 업로드 된 파일의 이름입니다.- url : 업로드 된 파일의 URL (URL 인코딩 됨)입니다. 이 값을 이용해서 에디터 내부에 업로드된 이미지를 표시합니다. 2. 업로드 성공하였지만.. 공감수 5 댓글수 4 2019. 1. 23.
  • jQuery UI Button 사용법 jQuery UI의 버튼 기능을 사용해 봅니다. 1. 필요한 라이브러리를 추가합니다. 2. 기본적인 사용법버튼1버튼2 $(document).ready(function() { $("#btn1").button(); $("#btn2").button();}); 2. 버튼 클릭 이벤트 처리$(document).ready(function() { // 버튼을 생성함과 동시에 이벤트 핸들러를 추가합니다. $("#btn1").button().on("click", function(event) { alert("버튼1이 눌러졌습니다."); }); // 버튼 생성과 이벤트 핸들러 추가를 분리합니다. $("#btn2").button(); $("#btn2").click(function(event) { alert("버튼2가 눌러졌습.. 공감수 4 댓글수 0 2018. 12. 13.
  • jQuery UI 대화창 동적으로 생성하기 jQuery UI 대화창의 기본 사용법은 대화창이 될 HTML을 페이지 내에 미리 만들어서 숨겨었다가보여주는 방식입니다. 여기서는 동적으로 대화창을 만들고, 대화창내에 보여질 내용도 다른 URL을 호출 하여 채워 넣는방법을 알아봅니다. 1. 필요한 파일들을 가져옵니다. 2. 대화창 컨텐츠를 가진 페이지 입니다.(dialog_content.html)동적으로 불려진 컨텐츠 입니다. 3. 클릭하면 다이얼로그를 열 버튼 입니다.동적으로 다이얼로그 열기 4. 동적 대화창 생성 스크립트 입니다. 설명은 코드에 있는 주석을 참고 하세요. 동적 대화창 생성 방법을 알아보았습니다. 공감수 9 댓글수 0 2018. 11. 23.
  • jQuery resize()를 사용하여 컨텐츠 영역 height를 100%로 유지하기 jQuery의 resize() 함수를 사용하여 헤더, 메뉴, 컨텐츠 영역으로 구성되는 화면에서 컨텐츠 영역의 높이는 브라우저의 크기를 조절 하더라도 항상 100% 가 유지 되고, 컨텐츠 영역 내부의 실제 컨텐츠의 높이가 컨텐츠 영역의 높이보다 크다면 스크롤이 생기도록 만들어 봅니다. 먼저 html 부분 입니다. head와 main이 상하로 나뉘고, main 내부에는 menu와 contents 가 좌,우로 나뉘어져 있습니다. HEADER MENU CONTENTS Lorem ipsum ... 스타일 시트 부분 입니다. html, body, div 부분은 엘리먼트들의 크기를 초기화 하는 부분 입니다. #main 은 flexbox 레이아웃을 사용해서 구성 했습니다. #contents 가 컨텐츠 영역으로 over.. 공감수 7 댓글수 2 2018. 11. 16.
  • 동시에 여러 메뉴가 열리는 아코디언(Accordian) 메뉴 만들기 이전 글 "jQuery UI Accordian을 사용한 메뉴 만들기" 에서 메뉴를 만들어 보았는데, 한번에 하나의 메뉴만 열렸었습니다. 하나를 열면 열려 있던 다른 메뉴는 닫혀 버리는 것이죠. 여기서는 여러 메뉴를 열 수 있는 방법을 알아 봅니다. jQuery UI의 Accordian으로는 구현이 안되므로 jQuery 플러그인으로 새로 만들어 봅니다. 1. jQuery 를 포함합니다. 2. 메뉴가 될 HTML 입니다. Menu 1 Sub menu 1-1 Sub menu 1-2 Menu 2 Sub menu 2-1 Sub menu 2-2 Menu 3 Sub menu 3-1 Sub menu 3-2 3. 플러그인을 생성합니다. 코드를 간단히 하기 위해서 메뉴가 되는 헤더는 태그를 사용합니다. 간단히 메뉴가 열리.. 공감수 4 댓글수 3 2018. 10. 31.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.