[Typescript] - 접근제한자

개요

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

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

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

Public

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

예제를 보겠습니다.

자세히 보기

[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]

자세히 보기

[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

자세히 보기

[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

자세히 보기

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

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

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

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

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

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

자세히 보기

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

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

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

배열 분해(destructuring)

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

자세히 보기

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

자세히 보기

비동기 자바스크립트의 간단한 참고서 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를 리턴합니다.

  자세히 보기

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

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

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

예제코드

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

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

기타 간단한 참고서

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

1. JavaScript Functions
2. JavaScript Prototypes

소개

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

자세히 보기

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

솔직하게 말해봅시다.

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

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

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

자세히 보기