프론트엔드 (109) 썸네일형 리스트형 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 상태관리 등의 기능을 자체적으로 탑재하고 있는 것이 아니라 다른 라이브러리를 사용하여 구현하기 때문에 사이즈가 작고 배우기 쉬운 장점이 있습니다.리액트 앱 만들기리액트 앱을 만드는 가장 간단한 방법은 아래 명령어를 사용하는 방법입니다. 커맨드라인을 열고 아래 명령어를 실행하면 필요한 구성과 함께 새로운 리액트 앱이 생성됩니다.npx create-react-app app-name생성된 앱으로 이동하여 편집기를 엽니다.cd app-namecode .구동하기커맨드라인을 열고 아래 명령어 실행npm start참고React – A J.. 데코레이터 데코레이터는 기존코드의 형태를 유지하면서 메타데이터나 비즈니스로직을 추가하는 기능입니다. 아래와 같이 타입이라는 같은 속성에 동일한 값을 가지는 여러 클래스가 존재할 때, 해당 속성을 데코레이터를 통해 설정하게 되면 코드의 중복을 줄일 수 있습니다. 사용하기 타입스크립트에서 데코레이터는 아직 테스트 중인 기능으로 옵션에서 설정을 해 주어야 사용가능합니다. 아래 명령어를 커맨드라인에 입력하고 실행합니다. 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.. 이전 1 2 3 4 5 6 7 ··· 14 다음
