profile
정리하는 개발자

개발환경시리즈① NPM

Node.js는 노드 실행기입니다. 더 이상 브라우저에서만 동작하는 javascript가 아니라는 얘기죠. 이를 활용해 웹서버를 만드는 백엔드를 작업하기도 하지만 노드 기반의 프론트 관련 좋은 패키지들(webpack, gulp, typescript, sass...)이

2020년 5월 15일
·
0개의 댓글

homebrew 사용법

홈브류는 맥OS용 패키지 관리자입니다. OS패키지 관리자를 통해 프로그램을 설치하고 관리할 수 있습니다.프로그램 설치 삭제 관리를 터미널로 완전히 제어할 수 있어서 컴퓨터를 깔끔하게 관리하실 수 있습니다.homebrew 설치homebrew 홈페이지에서 복사하라고 한 /

2020년 5월 15일
·
0개의 댓글

DOM

DOM은 자바스크립트로 웹페이지(html)를 제어할 때 쓰는 객체입니다.이 객체는 트리형태로 구조화할 수 있습니다. 객체가 그러하듯이요.웹페이지의 모든 요소가 어떻게 document객체 안에 들어가는지 봅시다.DOM을 이루는 구성요소들을 node라고 부릅니다. node

2020년 5월 15일
·
0개의 댓글

브라우저 환경

자바스크립트는 여러 개의 호스트 환경에서 사용될 수 있습니다. 그 중에서 제일 오래된 호스트이자 우리의 주 무대인 브라우저 환경을 알아봅시다.자바스크립트는 환경에 따라 코어 자바스크립트 외에 사용할 수 있는 것들이 다르므로 브라우저의 구성을 살펴봅시다.브라우저 환경에는

2020년 5월 14일
·
0개의 댓글

커링(Currying)

함수와 함께 사용하는 고급 기술입니다. f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출될 수, 병합되도록 변환하는 것입니다. 다항의 인수 중 고정값으로 쓸 것이 있을 때, 함수를 간소화해줄 수 있

2020년 5월 14일
·
0개의 댓글

Proxy와 Reflect

특정 객체를 감싸서 객체에 가해지는 작업을 중간에서 가로채는 객체.target - 감싸는 객체. 함수도 가능handler - 동작을 가로채는 메서드인 trap이 담긴 객체. 프락시 설정하는 곳. trap이 없으면 target이 작업을 직접 실행함.proxy로 감싼 이후

2020년 5월 13일
·
0개의 댓글

Module

개발하는 애플리케이션의 크기가 커질 때 파일을 분리하는데, 이 때 분리된 파일 각각을 '모듈'이라고 부릅니다.보통 클래스 하나 혹은 복수의 함수로 구성된 라이브러리 하나로 나뉩니다.자바스크립트의 모듈 표준이 없었을 때, 써드파티 라이브러리들로 모듈시스템을 구현했습니다.

2020년 5월 13일
·
0개의 댓글
post-thumbnail

flex로 카드형 디자인 만들기

정말 많이 등장하는 카드형 디자인을 만들어봅시다.예를들면 아래 이미지와 같은 것을 일컫습니다.이미지 출처: https://www.nutrione.co.kr/

2020년 5월 12일
·
0개의 댓글

제너레이터

여러 개의 값을 필요에 따라 하나씩 반환할 수 있는 함수입니다.제너레이터 함수는 function\*을 통해 만들 수 있고,함수를 호출할 때 코드가 실행되는 것이 아니라 실행을 처리하는 특별 객체 '제너레이터 객체'가 반환됩니다.next제너레이터의 주요 메서드로써 호출

2020년 5월 12일
·
0개의 댓글

비동기 프로그래밍

비동기 데이터 통신을 하는 경우, 동기가 아니기 때문에 해당 통신 후, 그 결과물을 가지고 하는 작업 혹은 동기적으로 이루어져야 하는 작업을 할 때 오류가 발생합니다. 이를 위해 비동기 데이터 통신을 동기적으로 처리하는 작업 방법들을 알아봅시다.비동기 통신을 하는 함수

2020년 5월 6일
·
0개의 댓글

에러핸들링

문법

2020년 5월 4일
·
0개의 댓글

JSON

Javascript Object Notation은 값이나 객체를 나타내주는 범용 포맷입니다.원래 자바스크립트에서 사용할 목적으로 만들어졌지만, 다른 언어에서도 라이브러리를 활용하여 다룰 수 있어서 데이터 교환 목적으로 많이 쓰입니다.JSON.stringify(value

2020년 4월 22일
·
0개의 댓글

날짜 다루기

메서드를 활용한 방법밀리초로 계산하는 방법

2020년 4월 22일
·
0개의 댓글

Date 객체

new Date() 현재시간 기준 생성new Date(milliseconds) 타임스탬프 기준 생성1970.1.1 0시0분0초를 기준으로 밀리초 후의 시점을 표시new Date(datestring) 날짜 문자열 기준 생성new Date(year, month, date,

2020년 4월 21일
·
0개의 댓글

구조분해할당

한 자료형에 국한된 개념도 아니고, 다양하게 변조되어 쓰이고 있기에 하나의 챕터로 분리하였습니다.풀어 말하면 어떠한 자료형 '구조'를 '분해'하여 '할당'해 주는 것입니다. 파괴하는 것이 아니기에 기존 자료형 구조가 변경될 염려는 없으며, 할당 연산자 우측에는 모든 이

2020년 4월 21일
·
0개의 댓글

Map & Set

객체 - 문자열, 심볼 키가 있는 컬렉션을 저장함배열 - 순서가 있는 컬렉션을 저장함Map - 다양한 자료형 키가 있는 컬렉션을 저장함Set - 중복을 허용하지 않는 값을 모아놓은 컬렉션. 키가 없습니다.객체와 유사하지만 키에 올 수 있는 자료형의 제약이 없는 점이 다

2020년 4월 21일
·
0개의 댓글

문자형 String

문자형은 세 가지 방식으로 표현 가능합니다.작은따옴표 ''큰따옴표 ""역따옴표 \`\`자동 줄바꿈이 됩니다.string interpolation: 데이터를 ${}로 쉽게 연결합니다.tag function첫 번째 파라미터로 백틱 안에 있는 문자열들을 ${}기준으로 잘라서

2020년 4월 14일
·
0개의 댓글

랜덤값(난수) 생성하기

0~1 난수 생성하기 0~원하는 값 사이에서 난수 생성하기 최솟값~최대값 사이에서 난수 생성하기 리팩토링

2020년 4월 13일
·
0개의 댓글

숫자형 Number

자바스크립트에서 기본적으로 지원하는 진법은 3개입니다.이 외의 진법은 parseInt를 사용합니다.위의 코드를 실행해보면, 모두 255라는 값이 나옵니다. 우리가 몇진법으로 표현하든, 리턴되는 값은 10진법의 숫자인 셈이죠.그런데 우리가 코딩할 때, 해당 진법의 값을

2020년 4월 13일
·
0개의 댓글

분기처리 다루기

비교연산자 &&, ||, !을 활용하여 조건문을 더 간단하게 사용할 수 있습니다.&&은 false를 만나면 이후 평가를 멈추고 false로 평가된 식의 원래 값을 반환하고,false가 없으면 마지막 true로 평가된 식의 원래 값을 반환합니다.||는 true를 만나면

2020년 4월 10일
·
0개의 댓글