RxJS 시작하기

RxJS

RxJS
RxJS 시리즈 포스팅은 Quick Start RxJS를 읽으면서 공부하고 정리한 내용입니다.


RxJS 시작하기

지난 포스팅인 Rxjs를 시작하기전에편에서 최근 개발트랜드와 Rxjs를 사용해야 하는 원인에 대해 알아보았습니다.
최근 개발패턴인 SPA(Single Page Application)는 데이터의 상태를 통해 웹페이지의 View와 데이터가 변경됩니다.
그렇기에 RxJS를 통해 상태체크를 통해 데이터의 흐름을 관리하는 라이브러리인 RxJS를 사용해 개발한다고 말씀드렸습니다.
실제로 RxJS 공식사이트에서도 'Observable을 사용하여 비동기 및 이벤트 기반 프로그램을 작성하기 위한 라이브러리이다.'이다.
간단히 '이벤트용 lodash정도...'라고 써있기도합니다.
그러면 이제부터 RxJS를 사용해 개발하는 패턴을 알아보겠습니다.

Read More

Rxjs를 시작하기전에...

RxJS

RxJS
RxJS 시리즈 포스팅은 Quick Start RxJS를 읽으면서 공부하고 정리한 내용입니다.


Rxjs를 시작하기전에…

개발 트랜드

최근 많은 개발자들이 사용하고 있는 SPA(Single Page Application)를 웹 어플리케이션 개발은 상태에 따라 변화하는 상태머신으로 보아도 무방합니다.
과거 개발시 각 기능별로 모든 페이지가 존재했었습니다.

Read More

아키텍처란 무엇인가?

Architecture

용어정리

이 카테고리는 비전공자로서 개발자로써 공부하며, 평소 이해하지 못한 단어를 제방식대로 정리하는 카테고리입니다.
제방식대로 풀어 쓴것이므로 오류가 있을 수 있습니다.
오류가 있을시 댓글로 남겨주시면 참고하도록 하겠습니다.


아키텍처(Architecture)

개요

업무를 진행하면서 듣는 많은 단어들이 있습니다. 그중에 어떤 프로젝트를 시작하기전에 항상 들리는 단어가 있습니다. 바로 아키텍처입니다. 보통 초보개발자가 아키텍처를 구성하는 일은 지극히 드문 케이스입니다.

하지만 저와 같은 ‘초보 개발자들도 도대체 아키텍처가 무엇이길래? 왜 우리한테는 이 업무가 주어지지 않는가?’ 에 대해 생각해 볼 수 있기에 정리를 해보려고 합니다.

Read More

개발자도구 - Audits편

DevTool

개요

웹 개발자라면 이슈가 생겼을 때 보통 브라우저에서 개발자 도구를 열어 코드를 확인하며 어떠한 부분에서 이슈가 발생했는지 확인합니다. 제가 주로 사용하는 개발자도구는 크롬입니다. 개발자도구는 보통 브라우저에 포함된 기능입니다. 심지어 우리의 주적인 IE까지도 개발자도구가 존재합니다.

하지만 저도 개발자도구의 좋은 기능들을 활용하지 못했습니다. 최근 한 세미나에 참여하며, 개발자도구의 활용방법에 대해 배웠습니다. 생각보다 좋은 기능들이 많아 우리가 편리하게 개발을 하는데 도움을 받을 수 있습니다. 이러한 좋은 기능에 대해 기록해보겠습니다.

Audits탭

Audits탭은 해당 페이지의 전체적인 검사를 하는 기능이 있습니다.

audits 실행전
Desktop과 Mobile 중 어떤 플랫폼으로 실행을 할 것인지, 통신속도는 어떻게 할것인지 선택도 가능합니다.

Read More

개발자도구 - Performance편

DevTool

개요

웹 개발자라면 이슈가 생겼을 때 보통 브라우저에서 개발자 도구를 열어 코드를 확인하며 어떠한 부분에서 이슈가 발생했는지 확인합니다. 제가 주로 사용하는 개발자도구는 크롬입니다. 개발자도구는 보통 브라우저에 포함된 기능입니다. 심지어 우리의 주적인 IE까지도 개발자도구가 존재합니다.

하지만 저도 개발자도구의 좋은 기능들을 활용하지 못했습니다. 최근 한 세미나에 참여하며, 개발자도구의 활용방법에 대해 배웠습니다. 생각보다 좋은 기능들이 많아 우리가 편리하게 개발을 하는데 도움을 받을 수 있습니다. 이러한 좋은 기능에 대해 기록해보겠습니다.

Performance탭

performance탭은 말 그대로 성능을 측정 할 수 있는 있는 도구입니다.
맨위에 녹화 버튼을 눌러 녹화를 시작한 후 새로고침을 통해 페이지의 렌더링을 진행합니다.
렌더링이 완료되면 STOP 버튼을 클릭합니다.
그렇다면 아래와 같은 그래프 및 랜더링이 진행되는 화면들이 스냅샷으로 확인 가능합니다.

Read More

Axios를 사용하여 HTTP요청하기

Axios

Axios

소개

Axios는 HTTP통신을 하는데 매우 인기있는 Javascript라이브러리입니다. Axios는 브라우저와 Node.js 플랫폼에서 모두 사용할 수 있습니다.

또한 IE8이상을 포함한 모든 최신 브라우저를 지원합니다.

Axios는 Promise를 기반으로하여 async/await문법을 사용하여 XHR요청을 매우 쉽게 할 수 있습니다.

Fetch API보다 Axios가 더 좋은 장점은 아래와 같습니다.

  1. 구형브라우저를 지원합니다.(Fetch API의 경우는 폴리필이 필요합니다.)
  2. 요청을 중단시킬 수 있습니다.
  3. 응답 시간 초과를 설정하는 방법이 있습니다.
  4. CSRF 보호 기능이 내장되어있다.
  5. JSON 데이터 자동변환
  6. Node.js에서의 사용

    Read More