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

개요

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

본문

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

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

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

Read More

개요

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

noindex

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

Read More

[Typescript] - 접근제한자

개요

public, private, protected의 접근 제한자는 Typescript 공부를 진행하면서, Java에서 사용하던것은 알겠는데 정확히 무엇인지 인지하지 못해 정리를 하게되었습니다. 많이 보았지만 각각의 제한자는 어떤 범위까지 제한하는지 정리해보겠습니다.

우선 ES6에서부터 class를 통한 객체화가 가능해졌습니다. 그렇기에 상속도 가능해졌습니다.

하지만 Javascript의 상위 개념인 Typescript는 기존 Java와 같이 interface등을 통해 더욱 객체지향프로그래밍에 가까워 졌습니다. 또한 public, private, protected등 접근 제한자도 사용이 가능합니다.

Public

public은 영어단어 뜻은 공공의, 대중의입니다. 단어처럼 접근 제한이 따로 없습니다. 상속도 가능하고, 외부 객체를 통한 접근도 가능합니다.

예제를 보겠습니다.

Read More

[Utiltity]코드 30초 시리즈

개요

기능을 직접 한땀 한땀 개발하는 것은 개발자로써 매우 중요한 업무입니다.
하지만 모든 기능을 미리 만들어 놓고 util함수 처럼 사용한다고 하면 어떨까요?
코드 30초만 있다면 빠르게 필요한 기능을 찾아 개발 할 수 있습니다.
어떠한 라이브러리도 사용하지않고 오로지 ES6로만 작성되어 있습니다.
이제 필요한 코드 찾아 사용하세요.
코드 30초 시리즈는 https://30secondsofcode.org/index를 기반으로 번역 & 정리하였습니다.

Utiltity편

castArray

인자로 받은 값을 배열로 변경합니다.
Array.prototype.isArray()를 사용하여 인자로 받은 val을 값을 배열에 넣어 리턴합니다.

1
2
3
4

const castArray = val => (Array.isArray(val) ? val : [val]);
// EXAMPLES
castArray('foo'); // ['foo']
castArray([1,2,3,4]); // [1,2,3,4]

Read More

[Date]코드 30초 시리즈

개요

기능을 직접 한땀 한땀 개발하는 것은 개발자로써 매우 중요한 업무입니다.
하지만 모든 기능을 미리 만들어 놓고 util함수 처럼 사용한다고 하면 어떨까요?
코드 30초만 있다면 빠르게 필요한 기능을 찾아 개발 할 수 있습니다.
어떠한 라이브러리도 사용하지않고 오로지 ES6로만 작성되어 있습니다.
이제 필요한 코드 찾아 사용하세요.
코드 30초 시리즈는 https://30secondsofcode.org/index를 기반으로 번역 & 정리하였습니다.

Date편

###dayOfYear
Date객체에서 새해로부터 몇번째 날인지 가져옵니다.
new Date()를 하고 Date.prototype.getFullYear()를 사용하여, 해당 연도의 첫날의 Date객체에서 인자로 받은 date를 뺀 값을 milliseconds로 나누워 결과를 얻습니다.
Math.floor()으로 결과를 정수로 적절하게 반올림하여 사용하세요.

1
2
3
4
5

const dayOfYear = date => {
  return Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); 
}
// EXAMPLES
dayOfYear(new Date()); // 272

Read More

[Array 1편]코드 30초 시리즈

개요

기능을 직접 한땀 한땀 개발하는 것은 개발자로써 매우 중요한 업무입니다.
하지만 모든 기능을 미리 만들어 놓고 util함수 처럼 사용한다고 하면 어떨까요?
코드 30초만 있다면 빠르게 필요한 기능을 찾아 개발 할 수 있습니다.
어떠한 라이브러리도 사용하지않고 오로지 ES6로만 작성되어 있습니다.
이제 필요한 코드 찾아 사용하세요.
코드 30초 시리즈는 https://30secondsofcode.org/index를 기반으로 번역 & 정리하였습니다.

Array편

all

제공된 조건부 함수가 컬렉션의 모든 요소에 대해 true를 반환하면 true를 반환하고 그렇지 않으면 false를 반환합니다.
Array.prototype.every()를 사용하여 컬렉션의 모든 요소가 fn에 따라 true를 반환하는지 테스트합니다. 부울을 기본값으로 사용하려면 두 번째 인수 fn을 생략하십시오.

1
2
3
4

const all = (arr, fn = Boolean) => arr.every(fn);
// EXAMPLES
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

Read More

OOCSS, BEM, SMACSS를 사용하여 CSS 구조를 효과적으로 구성하는 방법

필자는 레고 블록을 매우 좋아하는 장난감으로 아주 많았습니다.
레고블록은 저의 첫번째 창의적인 작품이었습니다. 그것들은 무엇이든 생각하는대로 조립이 가능했습니다.
나는 그 당시 왜 그렇게 레고를 좋아했는지 몰랐습니다.
하지만 스타워즈 팔콘을 만들어보면 색깔 및 7000여조각이 각 조각별로 어떻게 완벽하게 맞아 떨어지는지를 보여주었습니다.

이런식으로 처리가 된다면 조직화되어 HTML은 더 작아지고, CSS는 훨씬 관리하기 쉬워져 프론트엔드 개발속도가 빨라지게 됩니다.

이번 글에서는 CSS 구조를 레고블록처럼 동작하게하여 HTML / CSS 블록으로 구성하는 방법을 설명합니다.

CSS 방법론중에 세가지 모듈화 방법을 소개하겠습니다.
이 방법론은 우리가 이해하고, 유지하고, 재사용하기 쉽게 컴포넌트화 하는데 도움이 될 것입니다.

저는 당신이 사용하고 있는 프론트엔드 프레임워크에 상관없이 이러한 방법들이 당신의 일하는 방식의 일부가 될꺼라고 확신합니다.
당신이 이 방법론들을 사용한다면 확신합니다.

Read More

자바스크립트 객체와 배열 분해(destructuring)

destructuring은 배열 및 객체의 값으로 변수를 생성하는 강력한 방법입니다.
이 방법은 코드를 더 간결하게 만드는 방법입니다.

다만 destructuring은 ES2015(ES6)의 일부이며 모든 브라우저와 호환되지 않습니다.
모든 사용자에게 완전한 호환성을 보장하기 위해 babel, typescript 또는 코드를 ES5로 컴파일하는 모든 것을 사용할 것을 권장합니다.

배열 분해(destructuring)

배열의 값을 별도의 변수에 할당하려는 경우, destructuring을 통해 간단하고 깨끗하게 할당 할 수 있습니다.
인덱스나 루프를 사용할 필요가 없습니다!

Read More

비동기 자바스크립트의 간단한 참고서 3편

지난시간 1편에서 동기와 비동기에 대해 배우고, callback을 통해 비동기 통신을 해보았습니다.
2편에서는 callback이 아닌 Promise을 알아보고 정적메소드를 알아보았습니다.
이번시간에는 Promise를 순서대로 진행해보고, 실습을 진행해 보겠습니다.

Promise순서대로 실행하기

만약 두 개의 비동기 작업을 순서대로 실행하려면 다음과 같은 패턴을 따라야합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const promiseChain = task1()
  .then(function(task1Result) {
    return task2();
  })
  .then(function(task2Result) {
    return task3();
  })
  .then(function(task3Result){
    return task4();
  })
  .then(function(task4Result) {
    console.log('done', task4Result);
  })
  .catch(function(err) {
    console.log('Error', err);
  });

Read More