프론트엔드 (108) 썸네일형 리스트형 데코레이터 데코레이터는 기존코드의 형태를 유지하면서 메타데이터나 비즈니스로직을 추가하는 기능입니다. 아래와 같이 타입이라는 같은 속성에 동일한 값을 가지는 여러 클래스가 존재할 때, 해당 속성을 데코레이터를 통해 설정하게 되면 코드의 중복을 줄일 수 있습니다. 사용하기 타입스크립트에서 데코레이터는 아직 테스트 중인 기능으로 옵션에서 설정을 해 주어야 사용가능합니다. 아래 명령어를 커맨드라인에 입력하고 실행합니다. npx tsc --init 실행이 완료되면 아래와 같이 'tsconfig.json'파일이 생성됩니다. 설정된 옵션이 많은데 데코레이션 사용과 무관하므로 모두 삭제하고 아래 옵션을 추가하고 저장합니다. { "compilerOptions": { "experimentalDecorators": true } } 이.. 지네릭 타입제한은 오류를 사전에 발견할 수 있게 하여 안정성을 높이지만 반대로 정해진 타입만 사용가능하므로 코드의 재사용성을 감소시킵니다. 지네릭은 타입제한을 통한 안정성과 코드의 재사용성을 함께 제공하는데요. 코드를 통해 어떻게 지네릭이 사용되는지 보겠습니다. 타입제한 없음 먼저, 아무런 타입제한이 없는 경우의 코드입니다. 타입의 제한이 없기 때문에 배열에 아무런 값이나 들어갈 수 있습니다. // generic.ts class storage { private data:any[] = []; addData(newData) { this.data.push(newData) } } const data = new storage(); data.addData('new') data.addData(1) 타입제한 하지만, 해당 배.. 라이브러리 - RxJS RxJS (Reactive Extensions for JavaScript)는 Observable을 활용하여 리액티브 프로그래밍을 구현하게 해 주는 라이브러리로 이벤트 리스너, 비 동기 데이터 요청에서 사용되는 promise와 비슷한 기능을 하지만 오퍼레이터라는 함수들을 통해 데이터를 수정할 수 있으며, 또 하나의 값만 반환할 수 있는 promise와 달리 스트림이 닫히기 전까지 무한의 값을 반환할 수 있는 장점을 가지고 있습니다. 주요 개념 ▶ Observable 데이터 스트림으로 구독할 값들을 담고 있습니다. ▶ Subject Observable과 다수의 Observer가 동시에 구독할 수 있습니다. ▶ Observer Observable 내의 데이터 스트림을 구독하는 객체로 next, error, c.. 자바스크립트 컴포넌트 - 확장 검색 창 구현 먼저 HTML에 검색창과 버튼을 생성합니다. CSS를 활용하여 기본 스타일을 적용합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: lightcoral; } .input-box { position: relative; } input { height: 50px; width: 50px; border-radius: 15px; transition: 0.4s ease; font-size: 1.7rem; border: none; } input:focus {.. 자바스크립트 컴포넌트 - 사이드 메뉴 구현 먼저 HTML에 메뉴버튼과 메뉴를 생성합니다. Menu 1 Menu 2 Menu 3 CSS를 활용하여 기본 스타일을 적용하고 메뉴버튼과 메뉴의 위치를 조정합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: black; font-family: 'Poppins'; overflow-x: hidden; } .menu-box { height: 200px; width: 200px; position: fixed; top: -100px; left: -100px; background-color: aquamarine; border-radius: 50%; transition: .4s ease; z.. 인터페이스 인터페이스는 지정할 타입만 분리하여 지정할 수 있게 해 주는 기능으로 클래스와 비슷하게 생겼지만 다른 점은 타입지정만 가능하고 값을 지정할 수 없다는 점입니다(다른 언어와 동일). 사용하기 아래와 같이 객체에 지정된 타입을 인터페이스를 활용하여 분리해 보겠습니다. let object: { name: string; age: number; married?: boolean } = { name: 'tom', age: 20, } 먼저 인터페이스를 생성하고 값과 타입을 지정합니다. 인터페이스도 메서드를 가질 수 있는 데 예시를 위해 메서드도 추가하였습니다. interface Person { name: string age: number married?: boolean walk?: () => void // method.. CSS 컴포넌트 - 로딩 CSS 애니메이션을 사용해서 로딩 효과를 만들어보겠습니다. 구현 로딩효과를 추가할 요소를 아래와 같이 추가합니다. 해당 컴포넌트는 애니메이션의 딜레이 효과와 before 및 after Selector를 사용하고 시간차로 효과를 주어 하나의 요소만 사용하여 로딩효과를 완성하였습니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; height: 100vh; } .loading { border: 30px solid transparent; border-radius: 50%; position: relative; bord.. 엔피엠 npm은 자바스크립트에서 활용 가능한 기능을 구현한 코드 라이브러리(패키지)입니다. 자바스크립트를 위한 라이브러리인 만큼 세계에서 가장 큰 규모를 자랑합니다. 오픈소스로 누구나 패키지를 사용할 수 있으며 자신의 패키지를 만들어서 제공하는 것도 가능합니다 (private 패키지의 경우 유료). npm을 사용하려면 node.js를 설치하여야 합니다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 패키지 사용하기 npm사이트에서 사용하고자 하는 패키지를 검색하고 안내에 따라 사용합니다. https://www.npmjs.com/ npm Bring the .. 이전 1 2 3 4 5 6 7 ··· 14 다음
