Photo by Battlecreek Coffee Roasters on Unsplash

Jest is well-known test framework, it uses jsdom, which runs tests faster than karma. Let’s implement jest in the project and make test step by step.

Jest setting

npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core jasmine-spec-reporter

You might have types and more dependencies on jasmine and karma. It’s time to let them go.

npm install jest jest-preset-angular @types/jest --save-dev

jest-preset-angular is preset for angular. It makes easy to implement jest to angular.

If you tsconfig.json is suitable for testing, you can use it, but it is better to make new environment for it.

{ "compilerOptions": { "baseUrl": "./", "types": ["jest", "node"…


Photo by pine watt on Unsplash

First time I used typescript, enum was great, but by some reasons I stopped using it in typescript. And this article is to demonstrate why I stopped using.

https://www.typescriptlang.org/docs/handbook/enums.html

enum ActionType {
ADD = 'ADD',
SUB= 'SUB',
MULT= 'MULT',
DIV = 'DIV'
}

Typescript generates enum object in plain javascript like this shape.
with var keyword, it is translated into Immediately-Invoked Function Expression(IIFE).

var ActionType;
(function (ActionType) {
ActionType["ADD"] = "ADD";
ActionType["SUB"] = "SUB";
ActionType["MULT"] = "MULT";
ActionType["DIV"] = "DIV";
})(ActionType || (ActionType = {}));

This is not a big problem, but some might be bothered by this result, first…


Photo by James Pond on Unsplash

Dependency Injection is popular pattern in programming, creates value or instance outside of the class and inject it into another object to use that.
When you see the Module of Angular, you can see how hard they tried to make applying DI simple by declaring metadata.

@NgModule({   
declarations: [AppComponent],
imports: [BrowserModule],
providers: [AppAPIService],
bootstrap: [AppComponent]
})
export class AppModule {}

An instance created upon angular concepts(like component, module, service), they look into the dependencies at their level, but if nothing found, it crawls back to the root and use it(like prototype chaining).

This means that you can always inherit the…


Photo by Joanna Kosinska on Unsplash

Always assuming is the enemy of learning, back to angular for 3 months, I realized how much React and Angular chose different path to the problem(managing DOM and update).

So I wanted to summarize libraries/frameworks I worked with and what I think of them.

JQuery(to standard API)

jQuery is the first library that I ever used(even before vanilla javascript) and still found it brilliant.

When jQuery was out, browsers provided different spec of DOM Api and Spec, the mission of jQuery was simple, to try to build the web standards on the solution. …


Photo by Maria Teneva on Unsplash

Redux

Redux is a famous state management library, it offers centralized global store and helps maintain the states with consistency. But when the store gets bigger and bigger you get wonder, is this a good way to manage states shared among components as global state.

Redux is simple.
Reducer returns new state(or same one if no change requires) by the action dispatched and triggers listeners to notify its change.
In other words dispatch triggers this notification. Here’s the code.
https://github.com/reduxjs/redux/blob/master/src/createStore.ts#L225

function dispatch(action: A) { ... if (isDispatching) { throw new Error( 'Reducers may not dispatch actions.') } try { isDispatching =…

Photo by Olav Ahrens Røtne on Unsplash

RxJS is a real life savior when it comes to the app with complex data structuring, helps building solid data pipelines easy and elegant.
Like any other tools, this conveniency and simplicity comes with the chance of messing up if you don’t know the proper use case, that requires the knowledge of which is the Better Practice (still figuring out what is the best).

This is from KnowledgeShare at my team and based on some mistakes we’ve seen. Some are silly and some are critical to the app. …


Photo by Luke Chesser on Unsplash

It is good to have meaningful commits merged to master branch but when you actually commit, usually they are not so.

So we do rebase and most time we use rebase squash.
But you know, there’s easier way to squash commits with reset.

Reset: easier than rebase squash

we use reset to remove working-tree or change HEAD(which indicates the last commit of the branch) of the branch.

rebase has 2 options.
hard and soft.

hard removes all the working tree and the staging(except untracked files), but soft preserve changes as working tree.

With this definition we don’t need to process every steps of rebase(remember, this…


To access spreadsheet of other apps over APIs, you need to make a credential.
I usually store language packs on spreadsheet and wrap it to json on my project. This is about how you create credentials.

| Create Project.

Visit https://console.developers.google.com/projectcreate to create a project

I named project name i18nManger
When you click CREATE it will jump to Credentials

| Create Credential

If you failed to go to Credentials, you can access it by menu
(Move to APIs & Services > Create Credentials > Service Account)


Suguru Inatomi

이글은 Suguru Inatomi 의 `Angular: Test Reactiveness with OnPush strategy`를 번역한 글입니다. 원문을 보기 원하시는 분은 아래 링크를 클릭해주세요.

ChangeDetection은 angular가 template 리렌더링을 위해 변경을 확인하는 작업입니다.
ChangeDetectionStrategy는 이 변경을 확인하는 작업을 어떤 상황에서 처리할 것인지를 결정하는 전략입니다.

OnPush 변경감지 전략(Push 변경만을 변경감지에 이용하는 것- Push 변경은 아래에서 설명할 예정이다.)으로 Angular의 Reactiveness(변경에 대한 반응성)를 테스트 할 수 …


Photo by Alvaro Reyes on Unsplash

이직을 한지 2주 ..

현 회사는 코드 리뷰 프로세스가 아직 정립되어 있지 않아서 이에 대한 도입을 제안해보았다. 코드리뷰는 에러방지와 리팩토링의 원활함과는 별개로 개발자를 더욱 성숙시키는 툴이라고 믿기 때문에 이에 대한 내용을 제안하게 된 것이다.

물론 나 역시 이 프로세스에 익숙해지는데 시간이 걸렸고 여전히 미성숙한 부분이 많다. 하지만 잘하기 위해 필요한 것이 연습이고 시작을 하지 않는다면 결코 잘한다는 단계에 도달할 수 없다.

바로 뛰어 들기 보다는 어떤 식으로 진행이 되는지를 나누고 이에 따라 조금씩 가능한 시간에 부담없이 조금씩 팀들이 함께 참여하기를 원한다.

아래는 이를 제안하며 작성했던 글이다.

코드리뷰, 왜 해야 할까?

코드리뷰는 프로덕트 …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store