라이브러리 (10) 썸네일형 리스트형 리액트 - 스타일 라이브러리(부트스트랩) 리액트 애플리케이션에 스타일라이브러리를 추가하는 방법을 살펴보자 부트스트랩 아래 커맨드를 통해 부트스트랩 설치 npm i bootstrap index.js 파일에 경로추가 import 'bootstrap/dist/css/bootstrap.css'; 이상 참고 Adding Bootstrap | Create React App (create-react-app.dev) Adding Bootstrap | Create React App While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. R.. 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 상태관리 등의 기능을 자체적으로 탑재하고 있는 것이 아니라 다른 라이브러리를 사용하여 구현하기 때문에 사이즈가 작고 배우기 쉬운 장점이 있습니다.리액트 앱 만들기리액트 앱을 만드는 가장 간단한 방법은 아래 명령어를 사용하는 방법입니다. 커맨드라인을 열고 아래 명령어를 실행하면 필요한 구성과 함께 새로운 리액트 앱이 생성됩니다.npx create-react-app app-name생성된 앱으로 이동하여 편집기를 엽니다.cd app-namecode .구동하기커맨드라인을 열고 아래 명령어 실행npm start참고React – A J.. 앵귤러 - 스타일 라이브러리(부트스트랩, 제이쿼리, 폰트어썸) 라이브러리는 간단한 설정만으로 작성된 코드를 사용할 수 있게 해 주기 때문에 작업속도를 배가시켜 줍니다. 앵귤러도 다양한 라이브러리와 연동이 가능한데 오늘은 앵귤러 애플리케이션과 다양한 라이브러리를 연결하는 방법을 살펴보겠습니다 HTML 삽입 미리보기할 수 없는 소스 앵귤러 라이브러리 - 앵귤러 시메틱스 Schematic은 템플릿기반의 코드 생성 (편집) 기인데요. 앵귤러 CLI는 기본적으로 Schematic를 활용합니다. Schematic은 설명서와 같은 존재로 dependency 등을 설치할 때 필요한 정보나 옵션등을 제공합니다. @schematics/angular에 속한 Schematic들은 'ng generate' 또는 'ng add' 커멘드 사용 시 자동으로 작동합니다. 시메틱들 add schematic 주로 라이브러리를 추가할 때 사용되는데요. ng add와 함께 사용 시 패키지 매니저를 사용하여 필요한 dependency를 다운로드하고 설치에 필요한 스크립트를 작동시켜 자동으로 설정을 완료해 줍니다. 예를 들어, @angular/material 설치 시 npm i로 설치할 경우 사용을 위해 .. 앵귤러 라이브러리 - Angular PWA 앵귤러는 서비스 워커 등을 활용하여 Progressive Web App (PWA)을 구현할 수 있도록 해줍니다. 앵귤러 서비스 워커는 User Experience를 향상하기 위해 아래와 같은 규제를 따릅니다. 애플리케이션은 한 단위의 캐시로 저장되어 업데이트 시 애플리케이션의 모든 파일이 업데이트됨 애플리케이션은 새로고침 (reloading)이 있기 전까지 새로운 버전의 캐시가 생성되더라도 이전 버전으로 계속 구동됨 애플리케이션의 업데이트 작업은 뒤에서 이루어지며 완료되어야만 업데이트된 버전으로 구동됨 필요한 자원은 변화가 있는 경우만 다운로드됨 위와 같은 기능을 지원하기 위해 ngse.json이라는 manifest 파일을 통해 모든 내용물의 캐시 및 해시 정보가 저장, 정보의 변화 인지하고 이를 서비스.. 앵귤러 라이브러리 - Angular Animations 애니메이션을 사용하기 위해서는 BrowserModule과 BrowserAnimationsModule이 필요한데요. 이는 애플리케이션 생성 시 자동으로 추가됩니다. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [ ], bootstrap: [ ] }) export class AppModule {.. 앵귤러 라이브러리 - 앵귤러 HTTP클라이언트 앵귤러의 http모듈은 서버에 정보를 요청할 때 사용됩니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러 라이브러리 - Angular Forms 폼은 많은 애플리케이션에서 사용되는 기능 중 하나이죠. 앵귤러 폼 라이브러리 사용 시 validation 등 다양한 기능을 사용할 수 있는데요. 앵귤러 폼 라이브러리에서 제공하는 폼은 크게 'reactive'와 'template-driven' 방식으로 나누어집니다. 차이점 reactive 폼은 컴포넌트에서 폼객체 생성, 설정 (제약조건 포함) 하고 이를 템플릿에서 binding의 형식으로 사용하기 때문에 확장성이 높고 보안성이 뛰어난 장점이 있습니다. 반면, template-driven 폼은 템플릿에서 폼객체 생성, 설정 (제약조건 포함)을 하기 때문에 가시성이 좋으나 확장성은 떨어집니다. reactive template-driven Setup of form model Explicit, created i.. 이전 1 2 다음
