앵귤러 (43) 썸네일형 리스트형 환경변수 사용하기 환경변수는 고정된 값이 아닌 변수를 사용하게 해 주어 개발환경과 프로덕션환경 사이에서 필요한 설정 값을 변경할 필요 없이 한 번의 설정으로 모두 적용되게 하며, 민감한 정보의 노출을 숨길 수 있는 장점이 있습니다 (프로젝트 빌드 파일에 포함되므로 완벽히 보호되는 것은 아님). 웹 애플리케이션을 만드는데 다양한 프레임워크와 도구가 사용되는 만큼 환경변수를 지정하는 방법도 조금씩 다르므로 다양한 예시를 통해 환경변수를 설정하는 방법을 볼까 합니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러 (Front) - 배포하기 (Netlify) 서버를 사용하지 않은 앵귤러 프로젝트 (Static)는 간단하게 배포가 가능한데요 다양한 플랫폼 중 오늘은 Netlify를 통해 배포해 보겠습니다. Develop and deploy websites and apps in record time | Netlify Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free! www.netlify.com Netlify로 이동하여 'Add n.. 노드제이에스 - 앵귤러 서버 API 배포하기 (Render) 백엔드 API기능을 가진 앵귤러 프로젝트를 배포하는 방식은 여러 가지가 있는데요. 크게는 Front와 Back을 따로 배포하고 연결할 건지 아니면 동시에 한 곳에 배포할 건지로 구분됩니다. 오늘은 Render와 Netlify를 사용하여 나누어서 배포하는 방식을 보겠습니다. 배포된 애플리케이션 Angular와 MongDB를 사용하여 만들어졌으며 Render의 무료버전은 MongDB를 지원하지 않기 때문에 MongDB을 지원하는 가장 저렴한 플랜으로 배포되었습니다 (무료 배포 아님). 개발환경과 프로덕션환경 구분 없이 분리된 Front와 Back 서버를 함께 작동시키고 작업된 코드를 깃에 커밋만 하면 자동 배포가 되도록 설정해 보겠습니다. Backend 배포 먼저 렌더에서 'Web service'를 생성합니.. 앵귤러 - Observable 하나의 웹사이트는 여러 개의 페이지로 구성되죠, 발달된 웹사이트 개발기술로 웹사이트에서 각각의 페이지로 이동할 때 너무 자연스러워 별개의 페이지라 상상하기 힘들지만 실제로는 각 페이지는 독립된 파일로 서로 간에 상태를 공유하거나 정보를 주고받는 것도 상상 이상으로 복잡한 경우가 많습니다. 전통적인 애플리케이션에서 이러한 정보의 공유는 해당 페이지를 따로 만들거나 서버에 공통으로 사용할 수 있는 데이터를 구축하고 이를 요청하고 갱신하는 형태로 이루어졌는데요. 앵귤러는 Single-Page Application으로 화면 내에 특정 컴포넌트만 교체하는 형식으로 구현되기 때문에 이러한 전통적인 방식은 효율성을 떨어뜨릴 수 있는데요. Observable은 이러한 문제를 해결하고 각 컴포넌트 간에 데이터공유와 상태.. 앵귤러 폼 - 템플릿 드리븐 폼 앵귤러 template-driven form을 설정하는 방법을 보겠습니다. 먼저, 폼을 사용하기 위해서는 앵귤러 폼 라이브러리에서 forms 모듈을 가져와야 합니다. //scr/app/app.module.ts import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ A.. 앵귤러 - 스타일 라이브러리(부트스트랩, 제이쿼리, 폰트어썸) 라이브러리는 간단한 설정만으로 작성된 코드를 사용할 수 있게 해 주기 때문에 작업속도를 배가시켜 줍니다. 앵귤러도 다양한 라이브러리와 연동이 가능한데 오늘은 앵귤러 애플리케이션과 다양한 라이브러리를 연결하는 방법을 살펴보겠습니다 HTML 삽입 미리보기할 수 없는 소스 파이어베이스 - 연결하기 (앵귤러, 리액트) 파이어베이스는 데이터 저장에 필요한 데이터베이스, 인증 및 호스팅 등 다양한 서버 측 기능을 제공하는 구글의 통합 서비스입니다. 이미 구축된 서버에 프론트 애플리케이션을 연동하고 파이어베이스에서 필요한 기능을 가져다 사용하기 때문에 백엔드 개발 없이 완전체의 애플리케이션을 개발할 수 있는 장점이 있습니다. 파이어베이스는 파이어 스토어 기준으로 1GB의 총 데이터와 하루에 20,000번의 쓰기, 20,000번의 지우기, 50,000번의 읽기를 무료로 제공하므로 테스트 목적의 애플리케이션을 충분히 가동 가능합니다. 파이어베이스 사용을 위한 첫 단계인 파이어베이스와 개발하고자 하는 애플리케이션의 연동방법을 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러 템플릿 - Pipes 파이프는 템플릿에서 사용가능한 function들을 말합니다. 사용방법 사용은 아래와 같이 변화를 주고자 하는 값의 우측에 ' | ' 기호를 두고 사용하고자 하는 파이프를 호출하여 사용합니다. {{ value | pipeName }} 앵귤러 자체 파이프들 1. date Date 파이프를 원시타입 변수의 값이 바뀌거나 참조된 객체가 바뀔 때마다 작동합니다. {{ value | date : format : timezone : locale }} {{ value | date : 'short' }} {{ value | date : 'medium' }} {{ value | date : 'long' }} {{ value | date : 'full' }} {{ value | date : 'MM-dd-yyyy' }} {{.. 이전 1 2 3 4 5 6 다음
