분류 전체보기 검색 결과

178개 발견
  1. 미리보기
    2020.02.16 - mr.november11

    토이 프로젝트를 위한 퍼블릭 클라우드별 무료 서비스 정리

  2. 미리보기
    2020.01.27 - mr.november11

    [React] (번역) 2020년 리액트 개발자 로드맵 - 모던 프런트엔드 웹 개발자가 되기 위한 가이드

  3. 미리보기
    2019.12.05 - mr.november11

    타입스크립트(Typescript) 내용 정리

  4. 미리보기
    2019.10.11 - mr.november11

    [k8s] node.js 애플리케이션 쿠버네티스(kubernetes) 클러스터에 디플로이먼트(deployment)로 배포하기

  5. 미리보기
    2019.09.16 - mr.november11

    [Linux] 사용자 계정 패스워드 변경 시 'passwd: 인증 토근 수정 오류' 에러 발생 원인 및 해결 방법

  6. 미리보기
    2019.09.06 - mr.november11

    [k8s] kubespray로 쿠버네티스 설치 후 calico-node 에서 CrashLoopBackOff 에러가 날 경우

  7. 미리보기
    2019.09.06 - mr.november11

    [k8s] kubespray 를 사용한 bare-metal 서버에 쿠버네티스 설치하기

  8. 미리보기
    2019.08.26 - mr.november11

    [K8S] Azure AKS 클러스터에서 helm 차트 사용하기


토이 프로젝트를 위한 퍼블릭 클라우드 별 무료 서비스 정리

토이 프로젝트를 위한 퍼블릭 클라우드별 프리 티어(Free Tier) 서비스를 정리해봤습니다. 여기서 프리 티어란 기간 제한 없이 항상 무료로 사용 가능한 서비스를 의미합니다(12개월 후 만료되는 체험 서비스와는 다릅니다).

 

대상 업체는 현재 국내에서 서비스중인 AWS, Azure, Oracle, IBM입니다.
GCP의 경우 국내 리전 대상 프리 티어 서비스가 없어 조사 대상에서 제외했습니다.

 

개별 업체에서 제공하는 프리 티어의 사용량은 매우 적습니다.
하지만 여러 업체의 프리 티어 서비스 자원을 조합하여 사용한다면 토이 프로젝트 서비스에 충분한 인프라를 갖출 수 있습니다.

 

또한 업체별 제공하는 프리 티어 서비스의 특성이 조금씩 다르기 때문에 특성에 맞추어 체리 픽 한다면 유용하게 활용할 수 있습니다.

 

예를 들어 
 - 서버리스는 AWS/Azure를 사용하고 
 - VM은 Oracle
 - Object Storage는 IBM을 사용한다면,
프리 티어 환경에서도 서비스 제공을 위한 기본적인 인프라 환경을 구성할 수 있습니다.


         
업체 AWS Azure Oracle IBM
VM 없음 없음 VM 2개(각각 OCPU 1/8, 1GB) 없음
서버리스 Lambda 월별 1백만 Functions 월별 1백만 없음 없음
데이터베이스 DynamoDB 25GB 없음 데이터베이스 2개, OCPU 1개, 20GB DB2 100MB
스토리지 없음 없음 Block Volume 100GB / Object Storage 10GB Object Storage 25GB
네트워크(Outbound) 확인 불가 5GB 10TB 확인 불가
기타   App Service 10개    

* 혹시나 틀린 부분이 있다면 의견 주시면 반영하여 수정하겠습니다.

참고 URL

다른 카테고리의 글 목록

리뷰/기타 카테고리의 포스트를 톺아봅니다

[React] (번역) 2020년 리액트 개발자 로드맵 - 모던 프런트엔드 웹 개발자가 되기 위한 가이드

원문 : https://javarevisited.blogspot.com/2018/10/the-2018-react-developer-roadmap.html

리액트를 처음 접하는 개발자를 위한 가이드로 필요없는 부분은 적절하게 생략하거나 의미에 맞게 의역했습니다.

리액트(React JS 또는 React)는 웹 애플리케이션의 프런트엔드를 개발하기 위한 유명한 라이브러리중 하나다. 페이스북에서 개발한 리액트(리액트 JS)는 최근 급속도로 성장했으며 컴포넌트 기반 GUI 개발을 위한 사실상의 표준 라이브러리가 되었다.

리액트 이외에도 Angular나 Vue.js와 같은 다른 프런트엔드 프레임워크가 있지만 리액트는 다른 프레임워크와 다르게 컴포넌트 기반 GUI 개발에만 초점을 맞추고 있다.

 

예를 들어 Angular는 완전한 프레임워크로서 의존성 주입(Dependency Injection), 라우팅 시스템, 폼(Forms) 처리, HTTP 요청, 애니메이션, i18n 지원, 레이지 로딩(lazy-loading)을 사용한 모듈 시스템과 같은 다양한 기능을 제공한다.

 

이미 이러한 작업을 처리할 수 있는 라이브러리를 갖고 있거나 모든 기능이 필요하지 않다면 리액트는 좋은 선택이 될 것이다. 하지만 웹 개발을 이제 막 시작하는 초심자에게 리액트는 익히기 어려운 라이브러리다.

 

필자는 리액트 JS를 배우기 위한 방법들을 조사하면서 리액트 개발자 로드맵을 접하게 되었다. 리액트 개발자 로드맵에는 리액트 개발자로서 필수적으로 알아야 할 사항과 알아두면 좋은 내용이 포함되어 있다.

2020 리액트 개발자 로드맵

이제 로드맵을 단계별로 살펴보고 리액트 개발자가 되기 위해 필요한 기술들을 살펴보자.

1. 기본기

웹 개발을 위해 어떤 프레임워크나 라이브러리를 배우던 기본기를 알아야 한다. 여기서 말하는 기본기란 웹 개발의 3요소인 HTML, CSS, 자바스크립트를 의미한다.

  • HTML

    HTML은 웹 개발자에게 가장 중요한 기술로 웹 페이지의 구조를 제공한다.

  • CSS

    CSS는 웹 페이지를 멋지게 보이도록 스타일을 지정하는 데 사용한다.

  • JavaScript

    자바스크립트(JavaScript)는 웹페이지를 대화식으로 만들기 위해 사용한다. 자바스크립트는 또한 리액트 프레임워크의 내부 언어이기 때문에 리액트 JS를 배우기 전에 자바스크립트를 잘 알아야한다.

2. 일반적인 개발 기술

프런트엔드 개발자, 백엔드 개발자, 풀스택 소프트웨어 엔지니어 관계없이 프로그래밍 세계에서 살아남기 위해서는 다음과 같은 몇가지 일반적인 개발 기술을 알아야만 한다.

  • GIT
    GIT은 반드시 알아야 하는 기술이다. GitHub에서 몇 개의 리포지터리를 만들고 다른 사람과 공유해보자. 그리고 GitHub의 코드를 IDE로 다운로드하는 방법을 배워보자. GIT과 관련된 강의는 Git Complete: The definitive, step-by-step guide to Git(http://bit.ly/2C0O0cH)를 추천한다.

  • HTTP 프로토콜
    웹 개발자가 되기 위해서는 HTTP를 잘 알아야만 한다. HTTP의 스펙 문서를 정독할 필요는 없지만 적어도 표준 HTTP 요청 방법(GET, POST, PUT, PATCH, DELETE, OPTIONS)과 HTTP/HTTPS의 일반적인 작동 방식은 숙지해야 한다.

  • 터미널(Terminal)
    프런트엔드 개발자가 반드시 리눅스나 터미널을 배울 필요는 없지만, 터미널에 익숙해지고 쉘(bash, zsh, csh) 등을 구성해보기를 권한다.

  • 알고리즘과 데이터 구조
    알고리즘과 데이터 구조는 리액트 개발자가 되기 위해 반드시 알아야 하는 것은 아니지만 일반적으로 프로그래머가 되기 위해 알아야 하는 프로그래밍 기술 중 하나다.

    알고리즘 및 데이터 구조를 배우려면 몇 권을 책을 읽어보거나 다음 강의(Algorithm and Data Structure parts 1 and 2)를 참고하기를 권한다.

  • 디자인 패턴
    알고리즘과 데이터 구조와 같이 디자인 패턴은 리액트 개발자가 되기 위해 반드시 알아야 하는 것은 아니지만 좋은 개발자가 되길 원한다면 알아두는 것이 좋다. 디자인 패턴은 소프트웨어 개발에서 발생하는 일상적인 문제에 대한 여러 가지 솔루션을 시도하고 테스트한다.

3. 리액트 배우기

리액트 개발자가 되려면 리액트를 제대로 배워야 한다. 리액트를 배울 수 있는 가장 좋은 장소는 공식 웹사이트(https://reactjs.org/)지만, 초보자라면 공식 웹사이트는 조금 버거울 수 있다.

따라서 다음 두 개 교육을 추천한다. 이 두 과정은 필자가 가장 좋아하는 리액트 코스이며 많은 웹 개발자들로부터 검증된 과정- 이다.

4. 빌드 도구 배우기

전문적인 리액트 개발자가 되려면 빌드 도구, 유닛 테스팅 도구, 디버깅 도구 등과 같은 웹 개발자 도구에 익숙해지기 위해 시간을 투자해야 한다.

우선 리액트 개발자 로드맵에 소개된 도구를 알아보자.

패키지 매니저

  • npm
  • yarnp
  • npm
  • Task Runners
  • npm scripts
  • gulp
  • Webpack
  • Rollup
  • Parcel

하지만 이러한 모든 도구를 배우는 것은 필수는 아니다. 초보자라면 npm과 webpack을 익히는 것만으로도 충분하다. 웹 개발과 리액트 생태계를 더 많이 이해하게 되면 다른 도구들을 더 접하게 될 것이다.

5. 스타일링

리액트 개발자와 같은 프런트엔드 개발자가 되려면 스타일링에 대한 약간의 지식이 필요하다. 리액트 개발자 로드맵에서는 CSS 전처리기, CSS 프레임워크, CSS 구조, CSS in JS와 같은 것들을 언급하고 있다.

최소한 부트스트랩을 배우기를 권한다. 부트스트랩은 가장 중요한 CSS 프레임워크로 나중에 많이 활용할 것이다.

부트스트랩을 배운 이후에는 한 단계 더 나아가 Material UI(https://material-ui.com/)나 Materialize(https://materializecss.com/)를 배우기를 권한다.

6. 상태 관리

상태 관리는 리액트 개발자가 집중해야 할 또 다른 중요한 영역이다. 리액트 개발자 로드맵에서는 다음 개념과 프레임워크를 언급한다.

  • Component State/Context API
  • Redux
  • Async actions (Side Effects)
  • Redux Thunk
  • Redux Better Promise
  • Redux Saga
  • Redux Observable
  • Helpers
  • Rematch
  • Reselect
  • Data persistence
  • Redux Persist
  • Redux Phoenix
  • Redux Form
  • MobX
  • React Hooks

상태 관리와 관련된 기술이 너무 많다고 생각한다면 Redux(https://redux.js.org/)에 집중하기를 권한다.

7. 타입 검사

자바스크립트는 강력한 타입 언어가 아니기 때문에 부적절한 타입 관련 버그를 잡아낼 수 있는 컴파일러가 없다.

앱이 커짐에 따라 타입과 관련된 버그가 발생할 수 있는데, Flow나 타입스크립트(TypeScript)과 같은 자바스크립트 확장을 사용하면 전체 애플리케이션의 타입 검사로 많은 버그를 잡을 수 있다.

 

그러나 리액트에는 몇몇 자체 타입 검사 기능이 있다. 이러한 기능을 학습하면 타입 버그를 잡는 데 도움이 될 것이다.

또한 Angular는 타입스크립트를 사용하기 때문에, 자바스크립트와 함께 타입스크립트도 배워보기를 추천한다.

8. 폼(Form) 헬퍼

타입 검사 외에도 Redux Form과 같이 Redux에서 폼의 상태를 관리하는 가장 좋은 방법을 제공하는 폼(Form) 헬퍼를 배우기를 권한다. Redux Form 외에도 Formik, Formsy, Final Form과 같은 다양한 폼 헬퍼가 있다.

9. 라우팅

컴포넌트는 선언형 프로그래밍 모델로서 리액트의 강력한 특징이며, 라우팅 컴포넌트는 모든 애플리케이션에서 필수적인 항목이다.

리액트 라우터는 애플리케이션과 함께 선언적으로 구성되는 내비게이션 컴포넌트의 모음을 제공한다.

 

웹 애플리케이션에 북마크 할 수 있는 URL을 갖거나 리액트 네이티브(React Native)에서 탐색할 수 있는 컴포지션 방식에 관계없이 리액트 라우터는 리액트가 렌더링 되는 모든 위치에서 작동한다.

 

React-Router 외에도 Router 5, Redux-First Router, React Router와 같은 다양한 리액트 라우터가 있다.

10. API 클라이언트

오늘날에는 격리된 GUI 대신에 REST 및 GraphQL과 같은 API를 사용하여 다른 애플리케이션과 통신하는 무언가를 개발할 가능성이 더 높다. 고맙게도 리액트 개발자가 사용할 수 있는 많은 API 클라이언트가 다음과 같이 있다.

REST

  • Fetch
  • SuperAgent
  • Axios

GraphQL

  • Apollo
  • Relay
  • urql

아폴로(Apollo) 클라이언트는 필자가 가장 좋아하는 클라이언트로, GraphQL을 쉽게 사용하여 클라이언트 애플리케이션을 개발할 수 있다. 클라이언트는 GraphQL을 사용하여 데이터를 가져오는 UI를 빠르게 빌드하고 자바 스크립트 프런트엔드와 함께 사용할 수 있도록 설계되었다.

GraphQL과 REST가 익숙하지 않다면 다음 두 과정을 추천한다.

11. 유틸리티 라이브러리

유틸리티 라이브러리는 개발 작업을 쉽게 만들어주는 라이브러리다. 리액트 개발자를 위한 유틸리티 라이브러리는 다음과 같다.

  • Lodash
  • Moment
  • classnames
  • Numeral
  • RxJS
  • Ramda

앞서 소개한 라이브러리를 모두 배우기를 권한다. 또는 로드맵에 노란색으로 표시된 Lodash, Moment, Classname 만이라도 먼저 익혀두기를 권한다.

12. 테스팅

테스팅은 종종 그냥 지나치게 되는 핵심 기술 중 하나다. 하지만 경쟁력 있는 애플리케이션을 만들려면 테스트에 도움이 되는 라이브러리 학습에 중점을 두어야 한다. 테스팅에는 유닛 테스팅, 통합 테스팅, 엔드-투-엔드(end-toend) 테스팅을 위한 라이브러리가 있다.

유닛 테스팅

  • Jest
  • Enzyme
  • Sinon
  • Mocha
  • Chai
  • AVA
  • Tape

통합 테스팅

  • Karma

엔드 투 엔드 테스팅

  • Selenium, Webdriver
  • Cypress
  • Puppeteer
  • Cucumber.js
  • Nightwatch.js

다양한 라이브러리 중 Jest와 Enzyme를 배우기를 권한다. 다음 강의에서는 Jest와 Enzyme를 사용한 리액트 애플리케이션 테스팅을 다루고 있다.

13. 국제화

국제화는 전 세계에서 사용되는 프런트엔드를 개발하기 위한 중요한 주제다. 리액트 개발자는 일본, 중국, 스페인 및 기타 유럽 국가의 로컬 GUI 버전을 지원해야 할 수도 있다.

리액트 개발자 로드맵은 다음 기술을 배울 것을 권한다.

  • React Intl
  • React i18next

두 라이브러리는 모두 날짜, 숫자, 문자열을 포맷할 수 있는 API와 리액트 컴포넌트를 제공한다.

14. 서버 사이드 렌더링

리액트에서 서버 사이드 렌더링을 지원하는 라이브러리를 설명하기 전에 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점이 무엇인지 먼저 알아보자.

클라이언트 사이드 렌더링은 브라우저가 최소한의 HTML 페이지를 다운로드한다. 그런 다음 자바스크립트를 렌더링하고 내용을 채운다.

 

반면에 서버 사이드 렌더링의 경우 리액트 컴포넌트가 서버에서 렌더링 되고 결과물인 HTML 콘텐츠가 클라이언트나 브라우저로 전달된다.

 

리액트 개발자 로드맵은 서버 사이드 렌더링으로 다음과 같은 라이브러리를 추천한다.

  • Next.js
  • After.js
  • Rogue

하지만 필자는 Next.js를 배우는 것만으로도 충분하다고 생각한다. 다음 강의에서 Next.js 기본 사항을 다루고 있으니 참고하면 좋을 것 같다.

15. 정적 사이트 생성기

최신 정적 사이트 생성기로 Gatsby.js가 있다. Gatsby를 사용하여 개인화된 로그인 환경의 웹 사이트를 생성할 수 있다. Gatsby는 데이터를 자바스크립트와 결합하여 보기 좋은 HTML 콘텐츠를 생성한다.

16. 백엔드 프레임워크 통합

리액트 온 레일즈(React on Rails)는 레일즈(Rails)를 페이스북의 리액트 프런트엔드 프레임워크와 통합한다. 레일즈/웹패커에서는 제공하지 않는 서버 렌더링을 지원하며 SEO 크롤러 인덱싱과 UX 성능에 자주 사용된다.

17. 모바일

리액트 네이티브를 활용하여 자바스크립트로 모바일 애플리케이션을 네이티브 모양으로 개발하는 것이 표준 방법이 되어감에 따라 리액트 학습이 정말로 도움이 되고 있다.

리액트 개발자 로드맵에서는 다음과 같은 라이브러리를 배울 것을 권한다.

  • React Native
  • Cordova/PhoneGap

하지만 리액트 네이티브를 배우는 것만으로도 충분하다.

다음 강의를 참고하면 리액트 네이티브 모바일 앱을 빠르게 개발하는 방법을 배울 수 있다.

18. 데스크탑

리액트를 활용하여 UWP와 WPF 애플리케이션을 생성할 수 있다. 리액트 기반 프레임워크를 사용하여 리액트 네이티브 윈도우와 같은 데스크탑 GUI를 만들 수 있다.

다음은 데스크탑과 관련된 리액트 기반 프레임워크다.

  • Proton Native
  • Electron
  • React Native Windows

그러나 모두 고급 영역의 것들이다. 관심 있다면 리액트를 마스터한 후 살펴보자.

19. 가상 현실(Virtual Reality)

가상 현실 기반 애플리케이션을 제작하는 데에 관심이 있다면 React 360과 같은 프레임워크를 사용하면 된다. React 360은 리액트를 사용하여 360도 및 VR환경을 경험하게 만들 수 있다. 해당 영역에 관심이 있다면 React 360을 살펴보자.

다른 카테고리의 글 목록

React 카테고리의 포스트를 톺아봅니다

타입스크립트(Typescript) 내용 정리

2019. 12. 5. 23:55 - mr.november11

 

Typescript

 

초기 구축

npm 초기화

npm init --yes 

typescript 설치

npm install -g typescript

typescript 컴파일

tsc <NAME>.ts     // Default인 ES3로 컴파일 
tsc <NAME>.ts -t ES5 // ES5로 컴파일 

typescript 초기화 (tsconfig.json 생성)

  • tsconfig.json 파일 생성 후 tsc 명령어로 컴파일 실행
tsc --init

 

tsconfig.json 파일 noImplicitAny 설정 : 타입 선언이 없는 변수를 자동으로 any로 지정하는 설정

// hello.ts 

function add(a,b) {
    console.log(a+b)
}
  • noImplicitAny : false 일 경우 → 자동으로 any로 형태 변환함
~/study/typescript/hello2  tsc                                                                                                                                                                                    2 ↵  docker-desktop ⎈  19:15:49 
~/study/typescript/hello2 
  • noImplicitAny : true 일 경우 → 타입 선언이 없을 경우 에러 발생
~/study/typescript/hello2  tsc                                                                                                                                                                                    2 ↵  docker-desktop ⎈  19:14:57 
hello.ts:1:14 - error TS7006: Parameter 'a' implicitly has an 'any' type.

1 function add(a,b) {
               ~

hello.ts:1:16 - error TS7006: Parameter 'b' implicitly has an 'any' type.

1 function add(a,b) {
                 ~
Found 2 errors.

typescript 변수 정리

null vs undefined 비교

  • null은 값으로 인식되어 object 타입이 되기 때문에 사용하지 않는 것이 좋다. (undefined를 권장)
// null 자체는 비어있는 object type이 된다
// undefinded는 미할당되었기 때문에 undefinded 타입임
console.log(null === undefined)         // false : === 은 값 뿐만 아니라 type 까지 검사 하기 때문에 
console.log(null == undefined)          // true : 두 개의 값이 동일하게 없기 때문에 
console.log(undefined == undefined)     // true : 할당되지 않아 동일하기 때문에

typescript 함수 정리

기명 함수(이름을 지정한 함수)는 호이스팅 된다

  • 함수를 선언하기 전에도, 함수를 선언한 후에도 호출할 수 있다(like var 변수).

익명 함수를 지정하면 호이스팅 되지 않는다

  • 선언한 후에만 사용할 수 있다.
    resultMultiplication(1,2)  <- 익명함수이기 때문에 선언하기 전에 호출 불가 (컴파일 실패함) 
    let resultMultiplication = function (a,b) { return a * b }
    resultMultiplication(1,2)

Class 정리

생성자(constructor) 함수의 매개변수에 접근 제한자(public, private, protected)가 생략되면 생성자 내부에서만 접근 할 수 있다. 그러나 접근 제한자나 readonly가 붙으면 멤버 변수가 된다.

//typescript
constructor(defaultBalance: number = 0, protected bankName : string = "happy bank", 
                readonly interestRate : number = 0.1 ){

        this.balance = defaultBalance
    }
//javascript
class Account {
    constructor(defaultBalance = 0, bankName = "happy bank", interestRate = 0.1) {
        this.defaultBalance = defaultBalance;
        this.bankName = bankName;
        this.interestRate = interestRate;
        this.balance = defaultBalance;
    }

Module 정리

default 모듈과 일반 모듈을 import할 때 default 모듈은 이름만 선언하고 일반 모듈은 {} 내부에 모듈 이름을 선언해야 한다.

//default 모듈 import
import profile from './default'

// default, 일반 모듈 import 
import p, {hello} from './default2' 

Type casting 정리

1. + 연산자

// ts 코드
let myNum : any = "2017"
let num1 = +myNum

console.log(typeof myNum, myNum)
console.log(typeof num1, num1)

// 실행 결과 
string 2017
number 2017

2. parseInt 함수

// ts 코드
let myNum : any = "2017"
let num1 = parseInt(myNum)

console.log(typeof myNum, myNum)
console.log(typeof num1, num1)

let myNum2 : any = "2017년"
let num2 = parseInt(myNum2)

console.log(typeof myNum2, myNum2)
console.log(typeof num2, num2)

// 실행 결과
string 2017
number 2017
string 2017년
number 2017    <- parseInt 함수는 숫자에 여러 문자가 섞여 있어도 숫자만을 선택하여 반환한다 

3. Number 함수

// ts 코드
let myNum : any = "2017"
let num1 = parseInt(myNum)

console.log(typeof myNum, myNum)
console.log(typeof num1, num1)

let myNum2 : any = "2017년"
let num2 = Number(myNum2)

console.log(typeof myNum2, myNum2)
console.log(typeof num2, num2)

// 실행 결과
string 2017
number 2017
string 2017년
number NaN     <- Number 함수는 숫자와 문자가 섞여있을 경우 NaN을 반환한다 

RxJS를 활용한 데이터 스트림 처리

RxJS는 데이터 스트림에 대한 연산을 연산자(operator) 메서드를 이용해 연쇄적으로 처리한다.

  • 설치 방법
npm install @reactivex/rxjs@5.5.6 --save
  • 예제
// ts 코드
import * as rx from '@reactivex/rxjs'

rx.Observable.of("a", "b", "c").subscribe((v) => console.log(v))

// js 코드(ES5) 
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var rx = require("@reactivex/rxjs");
rx.Observable.of("a", "b", "c").subscribe(function (v) { return console.log(v); });

// 실행 결과
a
b
c

Async/Await (비동기 함수를 동기화하기)

async/await는 ES6(ES2015) 로 컴파일 해야한다.

호출하는 함수는 Promise 구문을 포함해 비동기 처리를 수행할 수 있어야 한다.

//ts
function delay2(msg : string) {
    let ms : number = Math.floor(Math.random() * 1000 + 1)
   
    return new Promise(function(resolve){
        setTimeout(resolve, ms, msg)
    }).then(function(v){
        console.log(v, ms+"ms")
    })
}

async function sync2(){
    await delay2("A")
    await delay2("B")
    await delay2("C")
}

sync2()

// 실행 결과
A 787ms
B 396ms
C 631ms

Javascript 라이브러리를 타입스크립트에서 사용하려면 *.d.ts 파일로 된 타입 정의 파일(type definition file)이 있어야 한다.

typescript 용 javascript 라이브러리 검색

webpack 번들링

webpack 설치

npm install -g webpack@3.11.0

// 실행 예제
webpack entry1.js build1.js

for문 대체 함수

map 함수

var names = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames = [];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
    upperCaseNames[i] = names[i].toUpperCase();
}

console.log(names)
console.log(upperCaseNames)


var names2 = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames2 = names.map(name => name.toUpperCase());

console.log(names2)
console.log(upperCaseNames2)

forEach 함수

function print(name) {
    console.log(name);
 }
 var names = ["Jack", "Jecci", "Ram", "Tom"];

 for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
     print(names[i])
 }

 names.forEach((name) => print(name) )

filter 함수

function isOdd(n) {
    return n %2;
 }
 var numbers = [1,2,3,4,5];
 var odd = [];
 for(let i=0, total = numbers.length; i< total ; i= i +1) {
    let number = numbers[i];
    if( isOdd(number) ) {
       odd.push(number);
    }
 }

 console.log(odd)

 var odd2 = numbers.filter(n => n % 2 )

reduce 함수

var numbers = [1,2,3,4,5]
var result = 0;
for(let i=0, total = numbers.length; i< total ; i= i +1) {
   result = result + numbers[i];
}

console.log(result)

var result2 = numbers.reduce((acc, val) => acc + val, 0)

console.log(result2)

다른 카테고리의 글 목록

Javascript 카테고리의 포스트를 톺아봅니다
[k8s] node.js 애플리케이션 쿠버네티스(kubernetes) 클러스터에 디플로이먼트(deployment)로 배포하기

[k8s] node.js 애플리케이션 쿠버네티스(kubernetes) 클러스터에 디플로이먼트(deployment)로 배포하기

1. node.js 의 express 모듈을 활용하여 웹서버 app. 만들기

  • express 모듈 설치

  • "Hello World"를 응답하는 index.js 파일 만들기

  • web 서버 테스트

2. node.js 애플리케이션용 도커(Docker) 이미지 생성

참고 URL : https://nodejs.org/ko/docs/guides/nodejs-docker-webapp/

  • node.js 애플리케이션용 Dockerfile 생성

  • 도커 이미지 빌드

  • 도커 이미지 조회

  • 도커로 이미지 실행한 후 node.js 애플리케이션 테스트

3. node.js 애플리케이션용 디플로이먼트 및 서비스 오브젝트 생성 후 쿠버네티스 클러스터에 배포하기

  • 디플로이먼트 YAML deployments.yaml

  • 서비스 YAML 생성 services.yaml

  • 디플로이먼트 및 서비스 적용으로 클러스터에 배포

  • 파드 및 서비스 상태 확인

     

다른 카테고리의 글 목록

k8s 카테고리의 포스트를 톺아봅니다
[Linux] 사용자 계정 패스워드 변경 시 passwd 인증 토근 수정 오류 에러 발생

[Linux] 사용자 계정 패스워드 변경 시 'passwd: 인증 토근 수정 오류' 에러 발생 원인 및 해결 방법

 

1. 현상

  • passed 명령어로 사용자 계정 패스워드 변경 시 'passwd: 인증 토근 수정 오류' 에러 발생

 

2. 원인

  • 사용자 계정 패스워드 정책 중 '암호를 바꿀 수 있는 최소 날 수'를 위반하여 패스워드 변경 실패

  • chage -l test 명령어로 해당 정책을 확인할 수 있다.

     

3. 해결 방안

  • chage -m 99999 test 명령어로 해당 계정의 최소 패스워드 변경 기간을 무제한(99999)으로 설정한다.

  • 또는 최고 관리자 권한인 root 계정으로 test 계정의 패스워드를 강제로 변경하면 된다.

    최고 관리자는 패스워드 변경 정책에 영향을 받지 않는다.

다른 카테고리의 글 목록

Linux 카테고리의 포스트를 톺아봅니다

<!doctype html>

[k8s] kubespray로 쿠버네티스 설치 후 calico-node 에서 CrashLoopBackOff 에러가 날 경우

  • kubernetes 설치 후 helm list 명령어 실행 시 네트워크 통신 문제가 발생

  • kubectl get pods -A 명령어로 kube 시스템 파드를 점검한 결과 네트워크와 관련된 calico-node 파드가 CrashLoopBackOff 상태였다.

     
     
     
     
  • 파드 노드 로깅 분석 결과 Kernel 의 ip_filter 에서 충돌이 발생했다.

  • 쿠버네티스는 calico 를 사용하기 위해 net.ipv4.conf.all.rp_filter 값을 0이나 1로 설정해야 한다.

     
     
     
     
  • /etc/sysctl.conf 파일에 net.ipv4.conf.all.rp_filter = 1을 추가한 후 sysctl -p 로 커널 파라미터 수정을 반영한다.

  • kubectl get pods -A 명령어로 파드 상태를 재조회하면 정상화됨을 확인할 수 있다.

     
     
     
     

     

     

다른 카테고리의 글 목록

k8s 카테고리의 포스트를 톺아봅니다
[k8s] kubespray 를 사용한 bare-metal 서버에 쿠버네티스 설치하기

[k8s] kubespray 를 사용한 bare-metal 서버에 쿠버네티스 설치하기

1. 설치용 서버 사전 설정

  • kubespray를 실행할 mater 에 관련 hosts 정보 추가

  • ssh key 생성

  • ssh key 배포

  • kubespray에서 사용하는 관련 package 설치

    • kubespray는 ansible 기반으로 설치되기 때문에 ansible 과 관련된 package 설치가 필요하다.
  • kubespray 다운로드

     

2. OS 사전 설정

  • Master, Worker 를 포함한 모든 노드에서 실행한다.

    • Swap OFF : 스와핑에 의한 성능 저하를 예방하기 위해 swap 영역을 제거한다.

    • SeLinux 해제 : 대부분의 패키지 설치에서 사전 작업 1순위인 .. Selinux 를 disable 한다.

3. Ansible playbook 실행하여 설치

  • Ansible Inventory 설정

    • Sample 을 복사하여 설치 환경에 맞게 수정한다.
  • ansible playbook 실행으로 kubernetes 설치

     

4. kubectl 로 설치 확인

  • kubectl 설치

    • CentOS 기준으로 아래 명령어를 실행한다.

  • kubectl get ndoes 명령어로 Cluster 노드 확인

     

다른 카테고리의 글 목록

k8s 카테고리의 포스트를 톺아봅니다
[K8S] AKS 클러스터에서 helm 차트 사용하기

 

 

[K8S] AKS 클러스터에서 helm 차트 사용하기

Helm(헬름)은 쿠버네티스에서 사용하는 애플리케이션 패키징 시스템이다. (개념상으로 Linux의 yum과 같다.)

1. MAC에 helm 설치

참고 : https://helm.sh/docs/using_helm/#installing-helm

  • brew 명령어로 helm 설치

2. AKS클러스터에 Helm 설정

참고 : https://docs.microsoft.com/ko-kr/azure/aks/kubernetes-helm

  1. AKS 클러스터 내 Helm용 RBAC(역할 기반 접근 제어) 생성

    • helm-rbac.yaml 파일을 생성하고 아래 매니페스트를 입력한다.

    • tiller는 Helm에서 사용하는 서비스 계정을 생성하고 cluster-admin 권한을 부여한다.

    • kubectl apply -f helm-rbac.yaml 명령어를 실행하여 RBAC생성

       

  2. helm 초기화로 클러스터 설정

    • helm init 명령어로 helm에서 사용할 서비스 계정을 초기화한다.

  3. helm 정상 구성 확인

    • helm 이 정상 구성되었는지 확인하기 위해 helm search 명령어로 공개 helm 차트를 검색한다.

    • 현재 클러스터에서 실행중인 helm 차트는 helm list 명령어로 확인한다.

       

다른 카테고리의 글 목록

k8s 카테고리의 포스트를 톺아봅니다