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

지난시간 1편에서 동기와 비동기에 대해 배우고, callback을 통해 비동기 통신을 해보았습니다.
이번시간에는 callback이 아닌 Promise을 알아보고 이를 통해 비동기 작업을 진행하는 방법을 알아보겠습니다.

Promises

1
2

Promise는 아마도 자바 스크립트로 비동기 프로그래밍에서 가장 중요한 추상적인 개념 일 것입니다. 
Promise는 다른 많은 비동기 추상적인 개념을 위한 토대를 마련하기 때문에 이 섹션을 반드시 주의 깊게 읽으십시오.

Promise는 미래의 특정 시점에서 실행될 때 성공하거나 실패할 수 있는 비동기 작업의 결과를 나타내는 개체입니다. 예를 들어 API 서버에 요청을 할 때 api 호출의 결과를 나타내는 약속을 반환할 수 있습니다.
api 호출은 성공할 수도 있고 성공하지 못할 수도 있지만 결국에는 사용할 수있는 promise 객체를 얻게됩니다. 아래의 함수는 api 호출을 수행하고 그 결과를 promise 형식으로 반환합니다.

1
2
3
4
5
6

// code/promises/axios-example.js
const axios = require('axios'); // A
function getDataFromServer() {
  const result = axios.get('https://jsonplaceholder.typicode.com/posts/1'); // B
  return result; // C
}

• A 행 axios에서 promise 기반 http 클라이언트 인 모듈을 로드합니다.
• B 행에서 우리는 axios api의 endpoint에서 GET 요청을하고 그 결과를 result 상수로 저장합니다.
• C 행에서 우리는 promise를 리턴합니다.

  Read More

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

JavaScript로 비동기 프로그래밍 배우기

JavaScript의 비동기 특성은 많은 사람들을 혼란스럽게 할 수있는 언어 측면 중 하나입니다. 그러나 기본 비동기 구문을 잘 이해하면 언어에 대한 많은 혼란을 줄일 수 있습니다. 이 가이드의 목표는 JavaScript로 비동기 프로그래밍을 소개합니다. 그리고 깨끗하고 유지 보수가 가능한 비동기 코드를 작성하는 데 필요한 기술을 제공하는 것입니다. 동기식 및 비동기식 실행 모델과 그 차이점을 살펴 보는 것으로 시작합니다. 그런 다음 콜백 기능에 대해 자세히 알아보고 비동기 작업 결과를 캡처하는 데 어떻게 사용되는지 조사하겠습니다. 그런 다음, promise에 대해 알아보고 콜백 기능을 추상화하여 비동기 흐름을 단순화하는 방법에 대해 알아보겠습니다.
또한 제너레이터를 살펴보고 비동기 흐름에 어떻게 사용할 수 있는지 알아보겠습니다. 끝으로 async 함수를 살펴보고 비동기 작업을 더욱 단순화하기 위해 promise와 함께 사용할 수있는 방법을 보여줍니다.

예제코드

이 가이드의 모든 코드 예는 Gitlab에서 확인할 수 있습니다.
https://gitlab.com/aj_meyghani/asyncjs-code-examples

당신은 Repository를 복제하거나 zip 파일로 다운로드 할 수 있습니다.

기타 간단한 참고서

다른 간단한 참고서를 확인해보세요

1. JavaScript Functions
2. JavaScript Prototypes

소개

JavaScript에서 비동기 프로그래밍을 처음 접한 경우 다음 코드를 보고 놀랄 수 있습니다.

Read More

CSS에서 스타일을 중심으로 배치하는 방법

솔직하게 말해봅시다.

때때로 우리의 코딩 경력 전반에 걸쳐 우리는 CSS의 중심에 좌절감을 나타 냈습니다(Google 또는 스택 오버 플로우에서 div 내에서 div를 가운데에 배치하는 방법을 찾는 방법).
이 작업은 가장 간단한 작업 중 하나일 수 있지만 페이지에 더 많은 요소와 스타일을 추가하면 빠르게 혼란이 올 수 있습니다.
이것이 꽤 흔한 문제이기 때문에, 저는 이 가이드에서 CSS를 중심으로 하는 방법을 정리했습니다.
또한 CodePen에서 만든 각 예제와 함께 코드/링크도 포함했습니다. 원한다면 마음대로 포크, 공유 또는 복사하세요!

여기에서 저의 CodePen을 보세요.

더 이상 고민 말고, 그것에 대해 이야기합시다!

Read More

지난 앞선 포스팅에서 1편에서는 기본 이론을 알고,
2편에선 컴포넌트를 각각 구성해보고, vue-router에 대한 이론을 알아보았습니다.
3편에선 vue-router를 사용해 컴포넌트간 이동을 진행해보았습니다.
4편에서는 firebase를 연결하고 회원가입&로그인을 진행해 보겠습니다.

마지막으로 firebase에 가입된 데이터에 인증을 통해 페이지 접속이 가능하도록 해보겠습니다.

스텝4 인증 후 앱 접속

4.1 router에 meta 추가

이제 인증을 받았습니다! 하지만 아무 일도 일어나지 않습니다. 사용자를 인증 한 경우에만 응용 프로그램으로 접근 가능하도록 사용자를 리다이렉션시켜야합니다. 우리는 앱에서 인증 후 이동 될 컴포넌트가 Hello 컴포넌트라고 정의 하였습니다.

Vue 애플리케이션에서 이를 구현하기 위해 vue-router의 메타 필드를 사용할 수 있습니다. 메타 필드는 경로에 설정할 수있는 추가 정보입니다.

메타에 대한 자세한 내용을 보려면 여기에서 vue-router 설명서를 확인하십시오.
https://router.vuejs.org/en/advanced/meta.html

이 예제에서 사용할 Hello 뷰에 메타 필드를 추가해 보겠습니다.
이 메타는 requiresAuth라고하며 Hello 컴포넌트에 인증이 필요함을 알립니다.

모든 컴포넌트에 경로가 존재하며, 기본 디폴트 페이지의 앱 기본경로를 재정의해야합니다.

Read More

지난 앞선 포스팅에서 1편에서는 기본 이론을 알고,
2편에선 컴포넌트를 각각 구성해보고, vue-router에 대한 이론을 알아보았습니다.
3편에선 vue-router를 사용해 컴포넌트간 이동을 진행해보았습니다.

이번편에서는 firebase를 연결하고 회원가입&로그인을 진행해 보겠습니다.

스텝3 firebase 사용

우리의 프론트 엔드 애플리케이션을 준비가 되었습니다. 인증 시스템을 사용할 수 있도록 Firebase를 구현합시다!

3.1 Firebase에서 새로운 프로젝트 만들기

Firebase를 사용하려면, 먼저 firebase 콘솔에 새로운 프로젝트를 생성해야합니다.
가입된 계정이 없으면 계정을 만든 다음으로 이동하십시오.
<console.firebase.google.com>

Add project - 프로젝트추가 를 클릭하세요. 새 프로젝트를 만드는 팝업이 활성화됩니다.
그리고 원하는 이름을 정하세요. 나는 vue-firebase-tutorial 라고 정했습니다.

Read More

지난 앞선 포스팅에서 1편에서는 기본 이론을 알고,
2편에선 컴포넌트를 각각 구성해보고, vue-router에 대한 이론을 알아보았습니다.
이제 vue-router를 사용해 컴포넌트간 이동을 진행해보도록 하겠습니다.

스텝2 컴포넌트에서 컴포넌트의 이동

우리가 정의한 앱 구조를 살펴보면 Login 컴포넌트에서 SignUp컴포넌트로 이동하고 두 컴포넌트에서 Hello 컴포넌트로 이동할 수 있습니다.
어떻게 해야할까요?

우리는 router-link라는 vue-router 구성 요소를 사용할 것입니다.

1
2
3
4
5
6
7
8
9
10

<router-link>는 라우터를 사용하는 앱에서 사용자가 이동하기 위한 구성 요소입니다. 목표 위치는 to라는 prop으로 지정됩니다.
기본적으로 올바른 href로 <a> 태그로 렌더링되지만 tag의 prop으로 구성할 수 있습니다.

<router-link tag="li" to="/foo">
   <a>/foo</a>
</router-link>

또한 대상 경로가 활성화되어 있으면 링크가 자동으로 활성화된 CSS 클래스를 가져옵니다.

vue-router 설명서<https://router.vuejs.org/en/api/router-link.html>

Read More

코드 작성하기!

지난 포스팅에서 우리는 vue에 대해 알아보고 실습을 위한 이론 및 프로젝트를 생성해 보았습니다.
이번시간에는 코드를 작성하면서 vue-router 실습을 진행해 보겠습니다.

우리의 미래 App 아키텍처

우리의 APP은 인증없이 접근 할 수 있는 2개의 View(로그인보기 및 가입보기)와 인증을 통해서만 접근 할 수 있는 1개의 뷰 View (Hello보기)로 총 3개의 View로 구성됩니다.

로그인이 성공적으로 완료되거나 새 계정을 만든 후에는 앱의 인증 된 부분 Hello의 View로 리다이렉션됩니다.

스텝1. 로그인과 회원가입

1-1 로그인 View

Login 컴포넌트를 만들어봅시다. src / components 아래에 Login이라는 새로운 Vue 구성 요소를 만듭니다.

일단 컴포넌트는 단순히 제목, 두 개의 input 필드, 버튼 그리고 간단한 문장으로 구성됩니다.

이제 컴포넌트가 생성되었습니다! 하지만이 새로운 컴포넌트를 우리 앱에 어떻게 보여 줄 수 있을까요?
음… 우리는 vue-router를 사용할것입니다. 기억하시나요? 우리는 Vue-cli로 앱을 초기 구성할때 이미 vue-router를 설치했습니다.

Read More

Vue 2 + Firebase: Firebase 인증 시스템을 사용하여 15분 안에 Vue 앱을 만드는 방법 2편

이 튜토리얼에서는 Vue 2, vue-router 사용 그리고 Firebase의 인증 시스템을 사용하여,
웹 어플리케이션을 신속하게 구축하는 방법을 알아봅니다.

Vue.js란 무엇인가?

다음은 놀랍고 가벼운 Javascript 프레임워크인 Vue.js의 개요입니다.

1
2
3
4

Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. Vue는 타 다른 프레임 워크와 다르게 점진적으로 채택 가능하도록 설계되었습니다. 핵심 라이브러리는 'View' 단에만 초점을 맞추고 있으며, 다른 라이브러리 또는 기존 프로젝트와 통합하기가 매우 쉽습니다.

vuejs 공식 문서: <https://vuejs.org/v2/guide>

Read More

SEO의 중요성

비지니스 측면에 있어서 검색순위 상위권에 노출되는 것은 매우 중요한 부분입니다.
검색시 페이지 이동을 해야 검색이 된다면, 그만큼 유저들이 이전페이지들에서 원하는 결과를 얻어 해당 웹사이트에 접속할 확률이 낮습니다.
물론 입소문이 타서 자연스럽게 해당 검색어를 정확하게 입력한다면 유저의 유입확률이 높을 것이지만, 그렇지 못한 경우가 많습니다.
노출의 효과는 광고를 보면 알 수 있습니다. 자주 보는 광고를 통해 유저에게 특정 비지니스 상품을 홍보하고 그로인해 수익이 됩니다.
검색 엔진 최적화도 마찬가지의 효과입니다.
그러므로 비지니스 측면에서 검색 엔진 최적화는 매우 중요합니다.
스타트업 또는 신제품의 경우 더더욱 중요합니다.

Read More

용어정리

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

알고리즘

알고리즘이란?

명령어들의 순서상 처리과정을 말합니다.
예를들어 우리가 학교에 등교할때도 잠에서 깨고, 아침을 먹고, 양치를 하고, 씻고, 교복을 입고, 학교에 도착하기까지의 순서상 처리하는 과정이 있습니다.
이들을 순서상 나열해놓은 것을 알고리즘이라고 합니다.

Read More