[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

비동기 자바스크립트의 간단한 참고서 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