RxJS

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

RxJS 시작하기

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

자세히 보기

RxJS

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

Rxjs를 시작하기전에…

개발 트랜드

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

자세히 보기

이 카테고리는 책을 읽고, 느낀점에 대해 리뷰를 남기는 카테고리입니다.

게임으로 익히는 코딩 알고리즘

한줄평 리뷰

알고리즘을 게임을 통해 보다 쉽고 즐기면서 배울 수 있었다.

자세히 보기

용어정리

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

아키텍처(Architecture)

개요

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

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

자세히 보기

이 카테고리는 책을 읽고, 느낀점에 대해 리뷰를 남기는 카테고리입니다.

알고리즘이 욕망하는 것들(What Algorithms Want)

한줄평 리뷰

알고리즘에 대한 공학적인 도서라고 생각하면 대단히 잘못된 생각이다. 매우 어려운 한글로 풀어져 있는 인문학도서이다.

자세히 보기

개요

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

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

Audits탭

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

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

자세히 보기

개요

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

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

Performance탭

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

자세히 보기

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에서의 사용

   자세히 보기

개요

지난번 SEO 검색 엔진 최적화 2편에서는 noindex처리와 canonical처리로 색인차단
또는 같은 페이지의 paramter값으로 인해 다른 url로 인식되는 문제를 하나의 대표페이지로 지정하여 검색 순위에 대한 문제를 해결해보았습니다.

본문

이번 포스팅을 통해 우리의 서비스 페이지를 구글 또는 네이버의 검색 봇이 들어와 검사를 진행하고, 색인도 생성하여 필요한 url등을 가져가고,
sitemap.xml등을 확인하여, 키워드에 대한 검색 랭킹을 등록합니다.
이러한 봇이 어떻게 우리 페이지를 바라보게 되는지 테스트를 할 수 있는 크롬 extensions을 소개해 드리겠습니다.

사실 우리가 바라보는 웹페이지와 다르게 봇이 보는 우리의 웹사이트는 조금 차이가 있습니다.

UI, UX의 디자인적 요소를 바라보는 사람과 달리 봇은 웹사이트의 내용을을 코드로 바라본다고 보시면 될것같습니다.
그렇기에 css로 어떻게 표현했는지 이런 것은 바라보지 않습니다.

자세히 보기

개요

지난번 SEO 검색 엔진 최적화 1편에 이어서 업무를 하면서 추가로 알게 된 내용들이 있어, 2편을 작성하게 되었습니다.
서비스를 검색에 최대한 효율적이고 빈번히 노출시키는 것이 유저를 유입시키는 점에 있어 SEO(검색 엔진 최적화)작업은 매우 중요하다고 1편에서도 말씀드렸습니다.
추가적인 내용을 정리해보겠습니다.

noindex

먼저 noindex에 간략히 말씀드리면, bot이 페이지를 크롤링할때 검색 색인 생성 차단하는 방법이라고 간략히 설명하겠습니다.
접근을 차단하는 다른방법으로는 robots.txt파일을 웹마스터 도구에 등록하므로써 차단하는 방법도 있습니다.
하지만 noindex의 경우는 색인은 bot이 색인을 생성하는 부분을 HTTP request에서 noindex header를 반환하여, 검색엔진에 표시가 되지 않게 하는 방법입니다.

자세히 보기