2020-12

링크 & 읽을거리

npm-init <initializer>

보통 새로운 프로젝트를 시작할 때, npm init -y를 수행해 기본 값이 지정된 package.json을 만들거나, 또는 특정 프레임워크라면 create-XXX(create-react-app)와 같은 도구를 사용해 프로젝트 스캐폴딩을 통해 시작한다.

스캐폴딩 도구를 자주 사용하는 경우라면, 전역 영역에 설치하고 사용하거나 자주 사용되지 않는 경우라면 npx를 통해 한 번만 다운로드해 실행하는 경우가 일반적이다.

npx create-react-app my-app

잘 알려지지 않은 사실 중 한 가지는, npm init 명령어를 사용해 보다 간편하게 이 작업을 수행할 수 있다는 점이다. npm v6+부터 <initializer>지정을 통해 외부 도구를 활용한 스캐폴딩을 수행할 수 있다.

npm init <initializer>

npm init foo # ==> npx create-foo
npm init foo -- --hello # ==> npx create-foo --hello

npm 패키지명이 create-<initializer>와 같이 존재하는 경우, npx를 통해 해당 패키지를 다운로드 후 해당 패키지를 통한 프로젝트 스캐폴딩을 생성한다.

npm init react-app my-app
npm init react-app@3.3.0 my-app

# Yarn의 경우도, 유사한 "yarn create"를 사용할 수 있다.
yarn create react-app my-app # Yarn 0.25+

How Web Apps Work: JavaScript and the DOM

웹 개발은 넓고 다양한 콘셉트, 정의, 도구 그리고 기술들을 포함한다. 처음 웹 개발 영역에 접근하는 이들은 이들 각각이 어떻게 결합되고 동작하는지 잘 알지 못한 채 시작하는 경우가 대다수다.

이 글에서는 기본적인 웹 개발 개념과 기술들에 대해 무엇인지, 왜 필요한지, 그리고 그것들이 어떻게 서로 연관되어 있는지를 개괄적으로 다룬다.

Chrome Dev Summit 2020

12월 9-10일, 크롬 브라우저와 웹 기술과 관련된 총 26개의 세션으로 구성되어 있는 크롬 개발자 서밋이 진행된다. 올해는 다른 개발자 행사들과 마찬가지로 온라인으로 진행된다.

본 행사에 앞서 12월 7-8일 진행되는 워크숍을 통해 각 분야별 전문가들을 통해 직접 새로운 기술들을 배워볼 수도 있다.

Why I will no longer be using console.log() to check React state updates

React 개발을 하다 보면 종종 state를 보기 위해 console.log를 이용할 때가 있다. 하지만, console.log는 가독성 면에서 좋지 않을 때가 많다. 이 글은 console.table과 columns 파라미터를 통해 React state를 좀 더 보기 쉽게 디버깅하는 방법을 설명한다.

10 React security best practices

React 환경에서 개발 시 쉽게 놓칠 수 있는 10가지 보안 위협 케이스와 그에 대한 해법을 제시한다.

TypeScript's Release Process

타입스크립트 팀이 타입스크립트 릴리스 프로세스에 대한 글을 작성하였다. 릴리스 단계, 주기 등을 타입스크립트 팀은 어떻게 관리하는지 엿볼 수 있다.

React SSR 그 고통의 기록

운영 중인 서비스에 SSR 적용을 위한 개발 경험을 공유하는 글로, SSR을 통해 성능적인 개선을 이루기도 했지만 많은 리소스를 투입할 만큼 매력적인 기능인지에 대한 의문점을 얘기한다.

SSR이 초기 페이지 렌더링 속도 향상과 SEO를 위해 꼭 적용해야 하는 테크닉처럼 인식되고 있지만, 무조건 적용하면 좋다는 식의 접근보다는 균형 잡힌 접근이 필요함을 확인할 수 있다.

튜토리얼

Web Development for Beginners - A Curriculum

MS에서 12주, 24개의 강좌로 이루어진 JS, CSS, HTML 기초 수업을 공개했다. 각 강좌마다 퀴즈와 과제, 비디오 등이 포함되어 있어 학습을 돕는다.

코드와 도구

aleph

Next.js 영감을 받은 Deno 런타임을 위한 React 프레임워크로, 기본적으로 ESM import 문법 지원을 통해 Next.js와는 다르게 Webpack 또는 그 외 다른 번들러의 사용이 필요하지 않다.

SvgPathEditor

온라인 SVG path 에디터로, path 값만 넣으면 바로 시각화된 모습을 볼 수 있고 직접 편집점들을 조작해 원하는 형태로 수정할 수 있다.

spacetime

15kb (gizipped) 크기를 갖는 아주 경량화된(moment-timezone은 98kb) timezone 라이브러리로, moment와 유사한 API를 제공한다.

let s = new spacetime('January 5 2018', 'Africa/Djibouti');

s.date() // 5
s.isAsleep() // true
s.time() // '2:30pm'

Operator Lookup

JavaScript의 다양한 연산자들의 사용법과 간단한 예제를 검색해 볼 수 있다.

faker.js

더미 데이터(fake data)를 생성해 주는 JS 라이브러리이다. address, commerce, company 등 매우 다양한 데이터 형식을 지원한다.

다음은 Browser와 Node 환경에서의 사용 예시이다:

<script src = "faker.js" type = "text/javascript"></script>
<script>
    var randomName = faker.name.findName(); // Caitlyn Kerluke
    var randomEmail = faker.internet.email(); // Rusty@arne.info
    var randomCard = faker.helpers.createCard(); // random contact card containing many properties
</script>

var faker = require('faker');

var randomName = faker.name.findName(); // Rowan Nikolaus
var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz
var randomCard = faker.helpers.createCard(); // random contact card containing many properties

[참고] 프로젝트의 높은 인기도와는 상관없이 원 개발자는 프로젝트 메인터넌스를 위한 어려움을 겪고 있는 것으로 보이며, 최근 라이브러리 사용을 원하는 기업들은 비용을 지불하거나 포크 하라고 선언하기도 했다.

• No more free work from Marak - Pay Me or Fork This

jsdiff

문자열 비교(diff) Javascript 라이브러리이다. 다음과 같이 간단한 로직으로 문자열 비교 결과를 출력할 수 있다:

require('colors');
const Diff = require('diff');

const one = 'beep boop';
const other = 'beep boob blah';

const diff = Diff.diffChars(one, other);

diff.forEach((part) => {
  // green for additions, red for deletions
  // grey for common parts
  const color = part.added ? 'green' :
    part.removed ? 'red' : 'grey';
  process.stderr.write(part.value[color]);
});

console.log();