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

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

Audits탭

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

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

2019-04-02

공부►ETC

개발자도구 - Performance편

DevTool

개요

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

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

Performance탭

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

2019-03-21

공부►Javascript

Axios를 사용하여 HTTP요청하기

Axios

소개

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

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

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

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

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

2019-03-12

공부►SEO

SEO(Search Engine Optimization) 검색 엔진 최적화 3편

SEO

개요

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

본문

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

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

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

2019-03-04

공부►SEO

SEO(Search Engine Optimization) 검색 엔진 최적화 2편

SEO

개요

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

noindex

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

2019-02-27

공부►Javascript►Typescript

Typescript - 접근 제한자

[Typescript] - 접근제한자

접근제한자

개요

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

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

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

Public

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

예제를 보겠습니다.

2019-02-22

공부►Javascript

번역 - 자바스크립트 코드 30초 시리즈<Utiltity> 1편

[Utiltity]코드 30초 시리즈

Javascript 30 seconds

개요

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

Utiltity편

castArray

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

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

2019-02-17

공부►Javascript

번역 - 자바스크립트 코드 30초 시리즈<Date> 1편

[Date]코드 30초 시리즈

Javascript 30 seconds

개요

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

Date편

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

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