SaaS 핸드북 – 첫 번째 Software-as-a-Service 제품을 단계별로 구축하는 방법

SaaS 핸드북 – 첫 번째 Software-as-a-Service 제품을 단계별로 구축하는 방법

이 광범위한 글에서는 내가 출시 한 첫 번째 SaaS를 위해 모든 주요 부분이 어떻게 결합되었는지 다룰 것입니다.파비콘 구현부터 클라우드 플랫폼 배포까지 제가 배운 모든 것을 공유하겠습니다. 또한 광범위한 코드 스 니펫, 모범 사례, 강의, 가이드 및 주요 리소스를 공유 할 것입니다.여기에 도움이되는 것이 있기를 바랍니다. 읽어 주셔서 감사합니다. ❤️목차소개아이디어 찾기스택Repo 로컬에서 전체 스택 개발 시작고객 Npm 스크립트환경 변수Webpack 및 Babel웹 성능차등 서빙글꼴아이콘파비콘API 호출로컬에서 프로덕션 빌드 테스트보안디자인 모듈 형 스케일그림 물감CSS 재설정스타일링 연습형세섬기는 사람 파일 구조Npm 스크립트데이터 베이스테이블 스키마 생성데이터

자세히보기

   그때는 내 Reddit 비밀번호를 해독해야했습니다.

그때는 내 Reddit 비밀번호를 해독해야했습니다.

(좀요) 나는 자제력이 없습니다. 다행히도 나는 나 자신에 대해 알고 있습니다. 이를 통해 헤로인에 중독 된 실험용 쥐의 정서적 성숙함에도 불구하고 때때로 일을 완수 할 수 있도록 의식적으로 제 삶을 설계 할 수 있습니다. Reddit에서 많은 시간을 낭비합니다. 내가 무언가를 미루고 싶다면 종종 새 탭을 열고 Reddit-hole 아래로 뛰어들 것입니다. 그러나 때로는 블라인더를 켜고 산만 함을 줄여야합니다. 2015 년은 이러한시기 중 하나였습니다. 저는 프로그래머로서 개선에 집중하고 있었고 Redditing은 책임이되었습니다. 금욕 계획이 필요했습니다. 그래서 나에게 일어났습니다. 내 계정에서 자신

자세히보기
Node.js의 '모듈'과 '필수'에 대해 알아야 할 모든 것

Node.js의 '모듈'과 '필수'에 대해 알아야 할 모든 것

모듈Node.js는 각 JavaScript 파일을 별도의 모듈로 취급합니다.예를 들어, 일부 코드가 포함 된 파일이 있고이 파일의 이름 xyz.js이이면이 파일은 Node에서 모듈 로 취급되며라는 모듈 을 만들었다 고 말할 수 있습니다 xyz.이것을 더 잘 이해하기 위해 예를 들어 봅시다.circle.js아래에 주어진 것처럼 주어진 반경의 원의 면적과 원주를 계산하는 논리로 구성된 파일이 있습니다.circle.js당신은 호출 할 수 있습니다 circle.js라는 이름의 모듈을 파일 circle.여러 모듈이 필요한 이유가 궁금 할 수 있습니다. 단일 모듈에 모든 코드를 작성했을 수도 있습니다. 글쎄, 모듈 코드를

자세히보기
꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 거리는 소리로 CSS를 축소하는 방법

꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 꿀꺽 거리는 소리로 CSS를 축소하는 방법

이 기사에서는 gulp를 사용하여 CSS 파일을 자동으로 축소하는 간단한 방법을 보여줄 것입니다. ?시작하려면 — 꿀꺽 꿀꺽이란 무엇입니까?Gulp는 다음과 같은 작업을 자동화 할 수있는 JavaScript 작업 실행기입니다.라이브러리 및 스타일 시트 번들링 및 축소.파일을 저장할 때 브라우저를 새로 고칩니다.단위 테스트를 빠르게 실행합니다.코드 분석 실행.Less / Sass to CSS 컴파일.그리고 훨씬 더!gulp 워크 플로는 다음과 같이 작동합니다.수행하고 싶은 작업을 만들 수 있습니다. 이 작업에서 우리는 꿀꺽 꿀꺽 작업 할 파일을로드 한 다음 (수정 여부) 반환 폴더로 반환합니다.간

자세히보기

   Angular 명령 줄 인터페이스 설명

Angular 명령 줄 인터페이스 설명

Angular는 명령 줄 인터페이스 (CLI)와 밀접한 관련이 있습니다. CLI는 Angular 파일 시스템의 생성을 간소화합니다. 개발자가 코딩을 시작할 수 있도록이면에서 대부분의 구성을 처리합니다. CLI는 또한 바로 시작하려는 신규 사용자에게 권장 할 수있는 낮은 학습 곡선을 가지고 있습니다. 도대체 숙련 된 Angular 개발자도 CLI에 의존합니다! 설치 Angular CLI에는 Node.js 및 NPM (노드 패킷 관리자)이 필요합니다. 터미널 명령으로 이러한 프로그램을 확인할 수 있습니다 node -v; npm -v.. 설치가 완료되면 터미널을 열고 다음 명령으로 Angular CLI를 설치하십시오 npm install -g @angular/c

자세히보기

   JavaScript Switch Cases 소개

JavaScript Switch Cases 소개

이 짧은 기사에서는 JavaScript 스위치 케이스와이를 실제 예제와 함께 사용하는 방법을 소개합니다. 이 기사에서는 스위치 사례를 심도있게 이해하는 데 도움이되는보다 실용적인 예를 통해 더 잘 설명합니다. 전제 조건. 기본 JavaScript 지식 코드 편집기 웹 브라우저 너의 뇌 :) switch문은 기본적으로 여러 대체 할 수있는 if자바 스크립트로 검사를. 값을 여러 변형과 비교하는보다 설명적인 방법을 제공합니다. 스위치 구문 은 switch하나 또는 그 이상의 가지고 case블록과 옵션 기본 케이스. switch(x) { case 'value1': // if (x === 'value1') //code here [break] case 'value2': // if (x === 'value2') //code here [break] default: //code here [break] }

자세히보기

   Vue.js에서 라우팅을 사용하여 더 나은 사용자 경험을 만드는 방법

Vue.js에서 라우팅을 사용하여 더 나은 사용자 경험을 만드는 방법

Vue.js는 Evan You가 만든 훌륭한 JavaScript 프레임 워크입니다. 단일 웹 페이지 앱과 유연한 구성 요소를 빌드하는 데 사용되며 프런트 엔드 웹 개발에서 가장 필요한 기술 중 하나입니다. 여기에서 Vue.js에 대해 자세히 알아볼 수 있습니다. Vue.js는 재사용 가능한 웹 구성 요소를 빌드 할 수있는 다양한 기능을 제공합니다. 라우팅은 이러한 방법 중 하나입니다. 사용자가 페이지를 새로 고치지 않고도 페이지를 전환 할 수 있습니다. 이것이 웹 애플리케이션에서 탐색을 쉽고 정말 멋지게 만드는 것입니다. 따라서이 기사에서

자세히보기
Angular Reactive Forms의 유효성을 검사하는 방법

Angular Reactive Forms의 유효성을 검사하는 방법

소개이 기사에서는 Angular의 반응 형 유효성 검사에 대해 알아 봅니다. 간단한 사용자 등록 양식을 만들고 여기에 내장 된 유효성 검사를 구현합니다. 내장 된 유효성 검사와 함께 반응 형식에 대한 사용자 지정 유효성 검사도 구현합니다.이 데모에 대해 다음과 같은 사용자 지정 유효성 검사를 고려합니다.사용자 이름 가용성 확인비밀번호 패턴 유효성 검사두 개의 다른 필드에 입력 한 비밀번호와 일치실제 응용 프로그램을 살펴보십시오.전제 조건여기에서 Visual Studio 코드 설치여기에서 최신 버전의 Angular CLI를 설치합니다.소스 코드GitHub에

자세히보기

   첫 번째는 JavaScript 배열에서 마지막이됩니다.

첫 번째는 JavaScript 배열에서 마지막이됩니다.

따라서 마지막 [0]은이고 첫 번째는 [길이 — 1]입니다. – 마태 복음 20:16에서 개작 됨 나는 Malthusian Catastrophe를 건너 뛰고 그것에 도달 할 것입니다. 배열은 가장 간단하고 가장 중요한 데이터 구조 중 하나입니다. 터미널 요소 (첫 번째 및 마지막)에 자주 액세스하는 동안 Javascript는이를 수행하는 데 편리한 속성이나 방법을 제공하지 않으며 인덱스 사용이 중복 될 수 있으며 부작용과 일회성 오류가 발생하기 쉽습니다. 잘 알려지지 않은 최근 JavaScript TC39 제안은 두 개의 "새로운"속성 인 Array.lastItem& Array.lastIndex. 자바 스크립트 배열 Javascript를 포함한 많은 프로그래밍 언어에서 배열은 인덱스가 0입니다. 터미널 요소 (first 및 last)는 각각 [0]및 [length — 1]인덱스 를 통해 액세스됩니다 . 우리는 인덱스가 배열의 헤드로부터의 오프셋을 나타내는 C에 의해 설정된 선례에 이러한 즐거움을 빚지고 있습니다. 그 때문 차종 첫번째 인덱스를 제로 이다 어레이

자세히보기

   CSS 이미지 스프라이트 소개 : 배우기 쉽고 알아두면 좋습니다.

CSS 이미지 스프라이트 소개 : 배우기 쉽고 알아두면 좋습니다.

이미지 스프라이트는 1970 년대부터 여기에있었습니다. Atari 및 기타 콘솔의 첫 번째 컴퓨터 애니메이션에 사용되었습니다. 시간이 지남에 따라 3D 및 가상 현실을위한 고급 (읽기 : 사실적) 그래픽을 원하는 프런트 엔드 개발자가 점점 더 적게 사용했습니다. 그러나 최근 몇 년 동안 그들은 복귀했습니다. 스프라이트는 더 큰 장면에 통합되는 2 차원 비트 맵에 대한 컴퓨터 그래픽 용어입니다. 지난 몇 년 동안 Facebook, Twitter, Instagram 및 기타 많은 소셜 미디어 플랫폼은 미친 듯이 성장했습니다. 성장에 따라 가능한 한 최적화하고 서버 요청 크기를 줄여야 할 필요성이

자세히보기

   코드 종속성은 악마입니다.

코드 종속성은 악마입니다.

“변화는 유일하게 변하지 않는 것입니다…”– Heraclitus (철학자) 오늘날 우리가 웹 애플리케이션을 구축하는 데 사용하는 도구, 라이브러리 및 프레임 워크는 불과 몇 년 전에 사용한 것과 크게 다릅니다. 지금으로부터 몇 년 후, 이러한 기술의 대부분은 다시 극적으로 변할 것입니다. 그러나 우리 중 많은 사람들이 이러한 기능을 앱의 핵심적이고 분리 할 수없는 부분으로 만듭니다. 우리는 마치 모든 것이 영원히 변하지 않을 것처럼 이달의 풍미 프레임 워크에서 가져오고, 사용하고, 상속합니다. 글쎄 ... 그렇지 않습니다. 그리고 그것은 문제입니다. 20 년 이상 웹 애플리케이션을 개발, 설계 및 설계 한 끝에 다음 두 가지 중요한 사실에 감사하게되었습니다.

자세히보기
Node.js는 훌륭한 런타임 환경이며이를 사용해야하는 이유가 여기에 있습니다.

Node.js는 훌륭한 런타임 환경이며이를 사용해야하는 이유가 여기에 있습니다.

확장 가능하고 확장 가능하며 쉽게 사용할 수 있으며 자급 자족하며 매우 효과적인 런타임 환경에 대한 소개Node.js는 무료이며 오픈 소스 인 JavaScript 용 크로스 플랫폼 런타임 환경입니다. 풀 스택이므로 응용 프로그램의 클라이언트 측과 서버 측을 모두 개발하는 데 사용할 수 있습니다.누가 Node.js를 사용합니까? Node.js는 온라인 게임, 인스턴트 메신저, 소셜 미디어 플랫폼 또는 화상 회의 도구를 개발하는 회사에게 인기있는 기술 스택입니다. 앱 데이터를 지속적으로 업데이트해야하는 실시간 애플리케이션에 완벽하게 적합합니다.Node.js의 장점을 나열하기 전에 설명이 필요합니다. 우리 모두가 같은 페이지에 있어야한다는 몇 가지 용어가 있습니다. 이러한 개

자세히보기

   성능 테스트의 흥미로운 사례 setTimeout (0)

성능 테스트의 흥미로운 사례 setTimeout (0)

(효과를 극대화하려면 연기에 둘러싸여 허스키 한 목소리로 읽으십시오) 그것은 모두 회색 가을 날에 시작되었습니다. 하늘이 흐리고 바람이 불고 누군가가 setTimeout(0)평균적으로 4ms 지연을 만든다고 말했습니다 . 그들은 콜백을 스택에서 콜백 대기열로, 다시 스택으로 되 돌리는 데 걸리는 시간이라고 주장했습니다. 나는 그것이 비린내처럼 들린다 고 생각했다 (이것은 내 입에 시가를 넣고 흑백으로 나를 상상하는 비트이다). 부드러운 애니메이션을 위해 렌더링 파이프 라인이 16ms마다 실행되어야한다는 점을 감안할 때 4ms는 긴 시간처럼 보였습니다. 아주 오랜 시간. console.time()확인 된 devtools의 몇 가지 순진한 테스트 . 20 회 실행의 평균 지연은 약 1.5ms였습니다. 물론 20 번의 실행으로 충분한 표본 크기

자세히보기

   지연없이 Arduino 및 Unity3D 상호 작용 환경을 만드십시오! ⏱

지연없이 Arduino 및 Unity3D 상호 작용 환경을 만드십시오! ⏱

안녕하세요, 저는 16 살이고 휴일에는 작은 프로젝트를하는 것을 좋아합니다. 저는 매우 예술적인 환경에서 자랐습니다. 아버지는 형제 자매들이 그림을 그리고, 음악을 연주하고, 작곡을하는 화가입니다. 저와 가장 친한 친구와 함께 새로운 Arduino 및 Unity3D를 재미있게 즐기고 싶었 기 때문에 대화 형 작업을 시작했습니다. 예술적 경험. 하지만 우리는 한 가지 큰 일에 집착했습니다. Arduino에서 Unity3D로 데이터를 전송하고 싶다면 주요 문제는 INSANE LATENCY 입니다. 지연 시간에 대해 걱정하지 마세요. wrmhl이 여기 있습니다 ⚡️ 이 문제를 해결할 수있는 최적화되고 사용자 지정 가능한 무료 솔루션을 찾지 못했습니다. 그래서 나는 wmrhl을 만들었 습니다 . 이제 Arduino 인터페이스를 Unity3D에 연결할 수

자세히보기

   당황스럽게 병렬 알고리즘 설명

당황스럽게 병렬 알고리즘 설명

병렬 프로그래밍에서 당황스러운 병렬 알고리즘은 프로세스간에 통신이나 종속성이 필요하지 않은 알고리즘입니다. 특히 중간 결과에서 작업 간 통신이 필요한 분산 컴퓨팅 문제와 달리, 당황스럽게도 병렬 알고리즘은 진정한 슈퍼 컴퓨터 클러스터에 사용되는 특수 인프라가없는 서버 팜에서 쉽게 수행 할 수 있습니다. 당황 할 정도로 병렬 알고리즘의 특성으로 인해 대규모 인터넷 기반 분산 플랫폼에 적합하며 병렬 속도 저하가 발생하지 않습니다. 당황스러운 병렬 문제의 반대는 본질적으로 병렬화 할 수없는 직렬 문제입니다. 난처하게 병렬 알고리즘의 이상적인 경우는 다음과 같이 요약 할 수 있습니다. 계산이 시작되기 전에 모든 하위 문제 또는 작업이 정의됩니다. 모든 하위 솔루션은 독립 메모리 위치 (변수, 배열 요소)에 저장됩니다. 따라서 하위 솔루션의 계산은

자세히보기
'중간'의 의미는 메시지입니다.

'중간'의 의미는 메시지입니다.

독자가 '매체'라는 단어의 사용을 기꺼이 먼저 고려한다면“매체가 메시지이다”라는 문구에 대한 많은 혼동을 피할 수 있습니다.Marshall McLuhan이 처음으로이 진술을했을 때…(1958 년 밴쿠버 컨퍼런스에서 그는 나중에 1964 년 미디어 이해 : 인간의 확장의 첫 번째 장으로 썼습니다)… 그는 '중간' "서비스 및 장애 환경"을 의미했습니다. 그는 기술 자체 (전화, 라디오 또는 컴퓨터)가 아니라 기술이 사람과 사회에 어떤 영향을 미치는 영향에 대해 이야기했습니다.McLuhan은이를 기술 ( '그림')과 그 효과 ( '그라운드) 측면에서 논의했습니다.Marshall McLuhan이 사용한 것과 동일한 정의가 아닌 단순한 기술로서 '중간'의 현재 정의에 의존하기 때문에이 모든 것이 오늘날 우리에게 혼란스러워집니다. 그는 '환경'또는 '환경'을 선호했습니다.Marshall

자세히보기
프로덕션 빌드를 위해 Flask-RESTPlus 웹 서비스를 구성하는 방법

프로덕션 빌드를 위해 Flask-RESTPlus 웹 서비스를 구성하는 방법

이 가이드에서는 테스트, 개발 및 프로덕션 환경을위한 Flask RESTPlus 웹 애플리케이션을 구성하기위한 단계별 접근 방식을 보여줍니다. Linux 기반 OS (Ubuntu)를 사용할 예정이지만 대부분의 단계는 Windows 및 Mac에서 복제 할 수 있습니다.이 가이드를 계속하기 전에 Python 프로그래밍 언어 및 Flask 마이크로 프레임 워크에 대한 기본적인 이해가 있어야합니다. 이것에 익숙하지 않다면 소개 기사 인 Python 및 Flask를 사용하여 웹 앱을 빌드하는 방법을 살펴 보는 것이 좋습니다.이 가이드의 구성 방식이

자세히보기

   HLS 비디오 스트리밍 : 정의 및 사용시기

HLS 비디오 스트리밍 : 정의 및 사용시기

이 짧은 기사에서는 비디오 전송을위한 가장 확장 된 적응 형 비트 레이트 프로토콜 인 HLS에 초점을 맞출 것입니다. HLS를 처음 고려하는 모든 사람이 질문 할 수있는 몇 가지 주요 질문에 답하겠습니다. HLS가 무엇인지, 언제 사용하고 어떻게 사용하는지에 대한 것입니다. 그 과정을 돕기 위해 HLS의 성능을 직접 테스트하는 데 자유롭게 사용할 수있는 온라인 비디오 게시 도구를 사용하는 몇 가지 예를 보여 드리겠습니다. HLS 란 무엇이며 어떻게 작동합니까? HLS는 Apple에서 장치 및 소프트웨어에서 지원할 수있는 적응 형 비트 전송률 스트리밍 형식을 구현하기 위해 정의한 프로토콜입니다. 시간이 지남에 따라 광범위한 지원

자세히보기

   최고의 부트 스트랩 예

최고의 부트 스트랩 예

Bootstrap은 웹 개발을위한 인기있는 프런트 엔드 프레임 워크입니다. HTML 콘텐츠의 스타일을 지정하기 위해 미리 빌드 된 구성 요소와 디자인 요소가 포함되어 있습니다. Chrome, Firefox, Opera, Safari 및 Internet Explorer와 같은 최신 브라우저는 Bootstrap을 지원합니다. 부트 스트랩에는 다양한 레이아웃을위한 반응 형 그리드 시스템이 포함되어 있습니다. 모바일 친화적 인 웹 사이트를 구축하기위한 훌륭한 출발점입니다. 또한 접을 수있는 콘텐츠, 캐 러셀 및 모달과 같은 선택적 JavaScript 기능도 포함됩니다. 왜 부트 스트랩을 사용합니까?

자세히보기

   내 친구들은 SoundCloud iOS를 싫어해서 그들을 위해 다시 디자인했습니다.

내 친구들은 SoundCloud iOS를 싫어해서 그들을 위해 다시 디자인했습니다.

친구들과의 일상적인 대화로 시작한 것이 진지한 탐구로 바뀌 었습니다. 부분적으로는 SoundCloud를 사랑하기 때문이고 부분적으로는 경력을 발전시키기 위해 도전해야했기 때문입니다. 저는 2013 년에 SoundCloud를 강박 적으로 사용하기 시작했으며 이후 다른 스트리밍 애플리케이션도 사용하기 시작했습니다. SoundCloud는 놀랍습니다. 커뮤니티를 방문 할 때마다 새로운 인재를 많이 발견 할 수 있기를 기대할 수 있습니다. 그래서 저는 SoundCloud의 iOS 앱을 처음부터 저와 제 친구들이 원하는 방식으로 다시 디자인하기 시작했습니다. 파트 I — 처음부터 시작 반복 I 지난 6 개월 동안 저는 SoundCloud가 모바일 플랫폼을 출시 한 이후로 변해 왔다는 느낌을 견딜 수 없었습니다. 그리고

자세히보기
코딩을 위해 Hackintosh를 빌드하는 방법

코딩을 위해 Hackintosh를 빌드하는 방법

PC 하드웨어에 Mac OS X를 설치하는 Hackintosh-ing에 대해 이야기 해 봅시다.Mac 호환 컴퓨터를 원하지만 수천 달러를 지출하고 싶지 않은 경우 Hackintosh를 사용하면 Mac을 구입하지 않고도 iOS 용으로 코딩 할 수 있습니다.따라서 더 이상 고민하지 않고 Hackintosh를 빌드하는 방법, 이점 및주의해야 할 위험에 대한 간략한 개요가 있습니다.이제 HP Elitebook 8470p #hackintosh가 구축되었습니다. @FreeCodeCamp -ing으로 계속 진행할 시간입니다. 이제 모바일입니다 pic.twitter.com/w1psj9Gkud — Simon Waters (@developersimon) 2016 년 6 월 12 일"Hackintosh"는 무엇입니까?수년 동안 Apple Mac에는 PC에서 볼 수있는 것과 동일한 In

자세히보기