본문 바로가기

전체 글

React 란 무엇 일까? 요즘 프론트앤드 자바스크립트 프레임워크 중에 React, Vue.js, Angular가 각광을 받고 있습니다. 그 중에서도 리액트 사용자들이 급증하고 있는 것을 여러 매체를 통해 알 수 있습니다. 여전히 앵귤러의 사용자들도 여전히 많지만 리액트의 성장률은 단연 돋보입니다. 리액트가 어떤 매력이 있는지 몸소 느껴보기 위해 공부 해보기로 했습니다. 일단 리액트가 무엇 인지부터 알아 보겠습니다. React 란? 리액트는 2013년 Facebook 에서 오픈소스로 내놓은 자바스크립트의 라이브러리입니다. 리액트는 뷰 라이브러리이다. 즉, 기존의 다른 프레임워크들과 다르게 뷰에만 집중 합니다. 다시 한 번 설명 하면 Angular나 Vue.js 같은 경우는 MVC, MVVM의 패턴을 사용 하지만 React 같은 경.. 더보기
Parcel - 웹 애플리케이션 번들러 최근에 다른 개발자분의 블로그글을 보다가 parcel 라는 웹앱 애플리케이션 번들러를 알게 되었습니다.저는 '기존에 많이 사용하던 Webpack이나 Gulp와 다르게 별도 설정 없어도 빠르게 빌드가 가능합니다.' 이 말때문에 Parcel이라는 번들러에 관심이 생겨 저도 한 번 Parcel이라는 번들러에 대해서 알아보기로 했습니다. PACEL의 Document page에 들어가면 Parcel[파설, /parsəl/]은 개발 경험에서 차이를 느낄수 있는 웹 애플리케이션 번들러 입니다. 멀티코어 프로세싱으로 불꽃 튀게 빠른 성능을 제공하고 그 어떤 설정도 요구하지 않습니다. Parcel에 대한 정의가 나옵니다. "어떤 설정도 요구하지 않는다" 라는 말이 매우 매혹적이게 느껴졌습니다.그럼, 시작 해보겠습니다. .. 더보기
일급 함수, 간단한 함수형 프로그래밍 1급 함수에 대해서 알아보기전에 한 번쯤은 들어봤을 1급 시민의 개념에 대해서 간단하게 알아보는 것이 좋을 거 같습니다. 1급 시민 ? 1급 시민이란 우리가 흔히 알게 모르게 코딩을 할때 이용했던 특징들을 가지고 있다. 1급 시민의 특징은 다음과 같습니다. 변수(variable)에 할당 할 수 있어야 한다.인자(parameter)로 전달 할 수 있어야 한다.반환 값(return value)으로 전달 할 수 있다 위 3가지의 특징을 가지고 있습니다. 숫자 타입의 데이터들은 대부분의 프로그래밍 언어에서 1급 시민의 조건을 충족 합니다. 1급 함수 ? 1급 객체라는 말도 있는데 1급 객체는 말 그대로 1급 시민의 조건을 충족하는 객체를 말하며, 자바스크립트에서 함수는 객체로 관리 되기때문에 1급 객체에 속합니.. 더보기
함수형 프로그래밍 - 정의 그리고 순수함수 이 글은 유인동 개발자님의 강의를 듣고 강의를 토대로 정리한 글임을 미리 알려드립니다.(유인동 개발자님께 허락을 받고 정리한 글입니다.) 함수형 프로그래밍이란? 함수형 프로그래밍이란 성공적인 프로그래밍을 위해 부수 효과를 미워하고 조합성을 강조 하는 프로그래밍 패러다임이다. 함수형 프로그래밍의 목적은 4단계에 걸쳐 말하고 있다. 부수 효과를 미워한다. => 순수 함수를 만든다.조합성을 강조한다. => 모듈화 수준을 높인다.순수 함수 => 오류를 줄이고 안정성을 높인다.모듈화 수준이 높다. => 생산성을 높인다. 여기서 말하는 조합성이란 단어는 모듈의 독립성으로도 대체 할 수 있을거 같다.결국 모듈의 수준을 높이기 위해 모듈의 독립성과 응집력을 높입니다. 모듈화 수준이 높아지면 얻을 수 있는 효과로는기획 .. 더보기
Kubernetes with Google Cloud Platform 시작하기 [2/2] Google Cloud Platform 시작하기 무료 크레딧 Google Cloud Platform 에 들어가시면 위와 같은 페이지를 찾을 수 있습니다.무료 크레딧을 받으시면 무료로 진행 하실 수 있습니다.(처음에 해외 승인 1$가 부과 되지만 곧 자동 취소 됩니다.) 무료 크레딧을 받으셨으면 콘솔로 이동 합니다. 그럼 위 이미지와 같은 화면이 나옵니다. 프로젝트가 없다면 만들기 버튼을 누르시고 원하시는 이름으로 프로젝트 생성 후 대시보드에 보여질 프로젝트로 설정 합니다. 위 이미지처럼 나오시나요?잘 나오신다면 다음 단계로 넘어가시면 되겠습니다. GCP SDK 설치하기GCP SDK 는 Google Cloud Platform 서비스를 관리 및 제어하기 위한 CLI 입니다.여기에 들어가셔서 설치 방법대로 설.. 더보기
Kubernetes with Google Cloud Platform 시작하기 [1/2] kubernetes와 GCP를 도입 하기에 앞서 Kubernetes와 Google Cloud Platform이 무엇 인지, 특징, 주요 용어를 알아보겠습니다.이 두 플랫폼을 공부 하기 이전에 Docker 와 DockerHub에 대해서 먼저 이해하고 시작 하는 것을 추천 드립니다.What is Kubernetes ? Kubernetes is a portable, extensible open-source platform for managing containerized workloads and services, that facilitates both declarative configuration and automation. 요약을 하자면 Kubernetes는 컨테이너 작업 부하 및 서비스를 관리 하기 위한 확.. 더보기
Google Analytics in Angular 적용기 이 글은 프로젝트에 Google Analytics 적용에 대해 정리 하고자 합니다. 기존 웹사이트의 적용 방식과 Angular 프로젝트의 Google Analytics 적용 방식은 약간의 차이가 있다.어떠한 차이가 있는지 알아보기전에 우선적으로 알아야 할 개념이 있습니다.SPA (Single Page Application) 이미 다들 알고 계시겠지만 글 이해을 돕기 위해 다시 한번 개념을 정리 해보도록 하겠습니다. SPA(Single Page Application) 방식은 기본적으로 단일 페이지로 구성된다. 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 렌더링시 모두 불러옵니다. 따라서 초기 구동 속도가 매우 느리고 최초 렌더링이 완료 될 때까지 시간이 오래 걸립니다.전통 웹 링크 방식은 새로운 페이.. 더보기
알아 두면 유용한 Angular CLI 1탄! 오늘은 알아 두면 유용한 Anaular CLI에 대해서 정리 해보도록 하겠습니다.처음 Angular(version 2)로 프로젝트를 진행 할 때는 Angular CLI를 Angular 기본 구조와 문법을 익히는데 방해가 될 거 같은 느낌이 들어 일부러 잘 사용하지 않았습니다. 하지만 이번에 Angular CLI를 사용 해보면서 알아 두면 정말 Angualr로 개발을 진행 하는데 있어 정말 편하고 개발 시간을 조금이나마 단축 시킬 수 있을거 같아 정리 해봅니다. 우선 CLI를 사용 하기 위해서 Angular CLI를 install 해보도록 하겠습니다. * Angualr CLI 설치 $ npm install -g @angular/cli $ npm i -g @angular/cli 위에 보이는 둘 중 어느 명령.. 더보기