DarrenKwon님 글 목록

DarrenKwon

@free

Seoul

Joined on 2021년 05월 20일

3:35 5/23

darrengwon.tistory.com

3:35

darrengwon.tistory.com

HotHandCoding
https://darrengwon.tistory.com/

저작도구: tistory

최종 피드 수집: 2024-11-15 09:46

전체 (100)

10M

kernel study 03: Understanding the Calculation of Load Average in Linux Kernel

아래 블로그에서 좀 더 깔끔하고 제대로 읽을 수 있습니다.

https://darrenkwondev.github.io/posts/2023-12-28_kernel_study_03.md/

Linux kernel v6.7-rc

Linux, shell, web server

004

읽기모드

10M

kernel study 02: top을 통해 확인할 수 있는 프로세스 정보들

https://darrenkwondev.github.io/posts/2023-12-27_kernel_study_02.md/
아래에서 더 깔끔하게 읽을 수 있습니다.

top
top -hv|-bcEeHiOSs1 -d secs

Linux, shell, web server

000

읽기모드

10M

kernel study 01: 시스템 구성 정보 확인하기

https://darrenkwondev.github.io/posts/2023-12-27_kernel_study_01.md/kernel_study_01/

위에서 더 깔끔하게 읽을 수 있겠습니다.

---

+++
titl

Linux, shell, web server

000

읽기모드

10M

게임 엔진 제작하기

https://github.com/DarrenKwonDev/simple_2d_game_engine


- [simple_2d_game_engine](#simple_2d_game_engine)

Tip

000

읽기모드

use vscode for Unity external editor + omnisharp intellisense setting in MAC!

you should know, C# does not well-supported arm64. so using C# in mac is quite annoying.
I'll omit to install process like dotne

❒ Unity

000

읽기모드

네이버 부스트캠프 recsys 과정에서의 extra miles

해당 포스트는 교육 컨텐츠를 노출하지 않았으며 콘텐츠 이용 및 보호 수칙을 준수하였습니다.
주차별 진행되는 과정 중 제가 추가적으로 공부한 것들을 나열하였습니다.

1주차 공부
python의 기본 사항들
youtube에서 pyt

Tip

001

읽기모드

네이버 부스트캠프 AI Tech 합격 후기

퇴사 후 recsys를 공부하고 싶다는 생각이 들었습니다.
통계 스터디를 진행하면서 수학과 통합된 기능 개발을 하고 싶었고(비록 첫 회사에서 개발한 추천 시스템은 무산되었지만) 무엇보다 일반 backend의 업무보다 보다 전문성

Tip

000

읽기모드

기획 잡 썰

그냥 주기적으로 업데이트

1.
그냥 다른 회사 사람들이랑 대화하면서 드는 생각인데,
기획이란 업무에서 추상(특정 문제) -> 구체(프로덕트) 방식의 기획은 초기 기획에서 어렵고, 어떻게 보면 지양해야 하는 것 같음.
구체

biz

000

읽기모드

[가안] MECE한 사고 방식의 통계, 알고리즘, 기획 분야에서의 적용

MECE하다는 것은 Mutually Exclusive (상호 배제) 적이고 Collectively Exhaustive(전체 포괄) 의 앞 문자를 딴 것이다.
이 사고 방식은 생각보다 많은 분야에 적용될 수 있다.

기획
보통 i

biz

001

읽기모드

latex 기반의 이력서

1.
https://github.com/James-Yu/LaTeX-Workshop/wiki/Install

2.
설치된 texlive는 /usr/local/texlive 경로 하위에 bin 폴더 내부에 있으므로 PATH에 추가할

Tip

000

읽기모드

VSCode 설치했으면 여기 오세요 : 내가 사용하는 VSCode

기본 Shell을 bash 혹은 zsh로 교체하기

F1을 누르고 Select Default Shell을 통해 설정해주자
윈도우 환경이라면 git bash를 선택해주자 bash를 사용할 수 있게 된다!

'code' comma

Tip

001

읽기모드

flavor 분리에 따른 iOS info.plist 자동 변경을 위한 bash script

flavor 분리는 다른 팀원 분이 해주셨는데 문제가 iOS에서 빌드시 다음과 같은 꼴을 유지해야 했다.

1. iOS 경로에 GoogleService-info.plist가 위치
2. 그 다음 프로젝트 내의 Info.plist의

Flutter v 2.0

0016

읽기모드

null safety

런타임 시점에 null이 들어오게 되어 발생하는 에러를 방지하고자 함.
이전과 다르게 모든 자료형은 nullable(?)이 붙지 않는 이상 non-nullable로 취급됨.

dart의 타입 시스템이 바뀌었음
https://d

Dart

000

읽기모드

2021년 회고 및 미래 계획

Notion에서 더욱 깔끔하게 읽을 수 있습니다.
https://glass-lily-8dc.notion.site/2021-8be2f1577d7c49e1836550788cb09746

1년을 회고해보니 회고와 동시에 미래에 대한

2021_회고

회고록

1026

읽기모드

runtime css-in-js is not free

runtime css-in-js

우리는 흔히 SPA 관련 프레임워크를 기반으로 프론트엔드 작업을 할 때 styled-components나 emotion과 같은 css-in-js(CIJ)를 사용하곤 합니다. CIJ는 컴포넌트와

⚛ React.JS

000

읽기모드

snu-mud-webgame

오랜만에 express + pug 조합으로 만들었다.
javascript로 진행되는 수업이라 typescript를 못 썼다는 점이 제약이었다.
기술적인 특이 사항은 전혀 없었다. 아래 정도가 특이 사항이라면 특이사항 일 것이다.

프로젝트 후기

002

읽기모드

typed-icon를 rollup으로 번들링해서 npm publish하자

초반 세팅
esm만 지원해도 괜찮은가
https://antfu.me/posts/publish-esm-and-cjs

알아둬야 하는 것들
By default, Rollup will expect config files to be E

Rollup

000

읽기모드

dart 기본기

Dart SDK version: 2.15.1 (stable) (Tue Dec 14 13:32:21 2021 +0100) on "macos_x64" 기준으로 작성되었습니다.

변수 초기화
var firstName = "Darren

Dart

000

읽기모드

Flutter의 속성 : hot reload, Widget, tree

flutter는 모바일 프레임워크가 아니다. 구글이 만든 멀티 플랫폼용 앱 빌드 SDK이다.
라고 주장하고 있지만 현재 플러터 웹의 성능문제로 대부분 모바일 제작에만 사용되고 있다.

JIT, AOT

Debug Mode에

Flutter v 2.0

006

읽기모드

firebase가 왜 production으로 적합하지 않은가

왜 firebase으론 scaling이 불가능한가…
애초에 제품으로 돈을 벌고 싶다면 firebase는 사용하지 않는 것이 좋다.

1. 조건에 만족하는 필터링이 불가능… record가 몇 개만 더 늘어나도 제대로 찾는게 매우

Firebase

000

읽기모드

환경 구성 (1) : lint: estlint, stylelint, formatter: prettier

lint와 formatter는 무엇이 다른가.
https://prettier.io/docs/en/comparison.html

1. eslint 설정
npm install eslint --save-dev

- extends

Frontend-tooling

002

읽기모드

Holacracy 조직 모델

holacracy는 자율적이면서 자급자족적인 집단을 의미하는 신조어 holachy와 cracy를 결합한 단어입니다. holacracy는 기본적 요소는 circle이라 불리는, 특정한 목적을 위해 직원들이 자율적으로 조직한 팀입니다

Startup

001

읽기모드

모바일 웹을 제작할 때 주의할 점들

앱을 설치를 해야하지만 웹을 설치하지 않아도 된다. 그 때문에 많은 스타트업이 초기에 모바일 웹을 제작하곤 한다.
필자도 여러번 모바일 웹을 제작해보았는데 다음과 같은 문제점을 겪어보았다.
앞으로도 더 늘어갈 것 같은데, 우선은

Tip

000

읽기모드

서핏(surfit)같이 유저의 new tab을 가로채보자

웹서비스를 제공하는 스타트업이라면 브라우저를 열자마자 자신의 서비스로 곧바로 redirect되었으면 하는 생각이 있을 것이다.
리텐션은 몰라도 단순 유저 수 늘리는데에는 이것만큼 좋은게 없다. (외부 장표에 넣을 마사지된 데이터

Chrome Extension

005

읽기모드

IndexDB (2) : 좀 더 indexDB를 사용해보자.

indexDB promise wrapper
우선 idb를 사용하자. 기존 IDB를 사용하면 콜백 패턴의 depth가 너무 깊어져서 코드 가독성이 좋지않아진다.
구글 web.dev에서도 추천한 녀석이다.

... 작성중

Web API

000

읽기모드

IndexDB (1) : 간단한 개념을 알아보고 사용해보자

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다. Web Storage(loc

Web API

000

읽기모드

custom hook에서 배열을 반환하는 경우의 타이핑

다음과 같이 열고 닫음을 처리하는 커스텀 훅이 존재한다고 가정하자.
import { useState, useCallback } from 'react'
const useToggle = (initialState: boolean) =>

React with Hooks

005

읽기모드

Angular 산책하기 (1) : angular-cli 설치와 appModule

기본만 살펴보면 Nest.js와 상당히 비슷하다고 알 수 있따.
(Nest.js아 Angluar에 영감을 받아 만들어졌지만 필자는 Nest를 먼저 맛 본 관계로...)

설치

angular-cli 설치
npm install

️ Angular

000

읽기모드

From neutrino v9 to Webpack v4 이전

교체 이유

neutrino를 교체하고자 하였으니, 저희가 사용 중인 neutrino 9버전에서는 typescript presets이 존재하지 않는다는 것을 알게 되었습니다. 뿐만 아니라 neutrino로 비롯한 매우 다양한 문

Webpack

webpack

002

읽기모드

css convention에 대해서

세상에서 제일 어려운 언어는 C도 아니고 Rust도 아니고 CSS이다. 디버깅할 수 없고, 왜 작동하는지, 왜 이상하게 작동하는지 알 수 없다.또한 프로젝트의 규모가 커질 때마다 마구 잡이로 설정된 CSS는 시간을 잡아먹는 녀석이

HTML, CSS

000

읽기모드

WebGL이란 무엇인가?

WebGL은 3D를 그리기 위한 도구가 아니다.
WebGL이란 벡터 객체를 개별 픽셀값으로 raterization하는 라이브러리이다.
raterization라 함은 포토샵에서 많이 들어보았겠지만, 연속적인 값을 밭갈퀴로 긁듯이 픽

WebGL과 three.js

0015

읽기모드

ArrayBuffer, Typed Arrays, DataView : raw binary data를 핸들링해보자

typed array?
es6에서 도입된 녀석이다. js의 배열은 raw binary data를 다루지 못했기 때문에 Typed Arrays(형식화 배열)가 도입되었다.
웹에서 영상, 음성, 파일과 같은 binary를 자주 다루게

Javascript

002

읽기모드

클라이언트단에서의 머신러닝?

클라이언트에서 머신러닝 등이 언급되는 건 다음과 같은 사실 때문이다.

1. 데스크탑 혹은 모바일 내에서 WebGL을 경유한 기기 GPU 성능 내에서 적당한 ML
2. 5G를 통한 빠른 데이터 전송
3. tensorflow.j

ML in browser

001

읽기모드

kotlin 기초

기본 변수 null 허용하지 않음. null pointer exception 차단을 위함.
단, nullable 변수 선언해서 사용은 가능함.
fun main() {
var variable: Int = 1
var nulla

☕ Kotlin

000

읽기모드

웹 개발자가 유니티를 배워야할 정당성이 있는가?

개인적인 생각임을 밝힙니다.

결론 먼저 말하자면 => 닭잡는데 소잡는 칼 쓰지말자

웹에서의 3d 구현 : three.js나 babylon.js를 사용하자. Unity는 너무 무겁다.
VR/AR 구현하고 싶다면 : 생태계가

❒ Unity

007

읽기모드

회사에서 기술 블로그 운영하기

쓰라고 강요하지 않고, 큰 chunk의 티켓을 마무리했을 때 공부하는 느낌으로 + 인센티브 지급!

센x버x도 시도하다가 참여율이 저조했다고 한다.
개발자들은 스스로 성장하고 공부하려는 욕구가 크기 때문에 회사에서 한 일을 복기

gatsby

002

읽기모드

DOM 구조화 : 하이라이트, 파싱, 에디터

Typed에서 구현한 하이라이트 기능에 대해

대외비임 ㅎ

gatsby.js의 mdx의 사례

gatsby.js를 만지다보니 재미있는 점을 발견했다. mdx가 파싱되는 꼴을 보자.
const saltyDuckEgg =

Javascript

001

읽기모드

react-query를 이해하는 몇가지 지식과 질문들

전제 지식들

staleTime : 마운트 되어 있는 시점에서 데이터가 구식인지 판단함.
cacheTime : 언마운트된 후 어느 시점까지 메모리에 데이터를 저장하여 캐싱할 것인지를 결정함.

refetching의 조건
N

react-query

009

읽기모드

gatsby를 gh-page로 deploy하는 github action

./package.json
"build": "gatsby build --prefix-paths",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,t

배포 자동화 (CI, CD)

000

읽기모드

Why Smart Companies Are Giving Customers More Data

2016년 스페인 은행 그룹 BBVA는 스페인에 기반을 둔 고객들에게 개인 금융 관리 앱을 제공했다. 앱의 툴 중 하나는 머신러닝 알고리즘을 사용하여 고객 트랜잭션을 공통 예산 범주로 분류했습니다.
임대료, 음식, 유흥료와 같은

Business

004

읽기모드

How to Monetize Your Data

오늘날 대부분의 기업은 데이터가 넘쳐납니다. 그러나 데이터 홍수로부터 이익을 얻는 방법을 알아내는 것은 시장에서 당신의 회사에 차별성을 부여하는 데 도움이 될 수 있습니다.

풍부한 양의 데이터를 소유하는 것은 오늘날 세계에서

Business

000

읽기모드

TS class(2) : implements, extends(상속), abstract 클래스

implements

클래스가 특정 interface의 조건을 만족하는지 체크하기 위해서 implements를 사용합니다.
object를 interface로 typing하듯, class도 interface로 typing한다고 생

Typescript

000

읽기모드

TS class(1) : class 생성, 접근 지정자, accesors(getter/setter), index signature

class 생성 및 shortcut

js에서 활용하듯 사용하면 됩니다만 사용하기에 앞서 클래스의 속성의 타입을 정의해야 합니다.
class Human {
public name: string;
private age: nu

Typescript

000

읽기모드

6 Digital Strategies, and Why Some work better than Others

디지털 기술과 20여년 동안 회사들을 방해하지만, 그 긴 역사에도 불구하고, 기존 기업들은 여전히 디지털 변환을 이행 법을 제정하기 위해 고군분투하는 시장 휘젓고 있다.

첫 번째 과제는 중단입니다. 디지털화는 기존 모델의 매출

Business

000

읽기모드

elasticSearch 7.10 REST API spec

api specification 좀 깔끔히 정리해주면 덧나나. 정말로 찾기가 힘들다.
7 버전으로 올라오면서 좀 나아지긴 했다.

Cluster APIs
https://www.elastic.co/guide/en/elastic

ElasticSearch

001

읽기모드

elastic Search 6.4 Docker 기반 세팅

7.13 버전이 나온 시점에 무슨 6.4 버전인가 싶지만, 교재가 6.4로 정리되어 있어 이를 토대로 정리한다.

https://www.elastic.co/guide/en/elasticsearch/reference/6.4/doc

ElasticSearch

000

읽기모드

Google Compute Engine (5): Instance group

https://cloud.google.com/compute/docs/instance-groups

Instance Template을 기반으로 여러 VM을 묶은, 인스턴스 그룹을 만들 수 있습니다.
인스턴스 그룹은 크게 두 부류로

☁️ GCP

000

읽기모드

Google Compute Engine (3): GCE 기본적 운영 (일정, OS patch/policy, NEG ...)

1. 일정 관리

[일정 만들기]를 눌러 인스턴스의 일정을 정하여, 특정 시간대에만 인스턴스가 가동되도록 만들 수 있다.
[일정 만들기]를 눌러 직접 살펴보면 아래와 같다.
제출하면 만들어진 것을 확인할 수 있다.
생성된 일정을

☁️ GCP

000

읽기모드

Alibaba and the Future of Business

중국의 혁신적인 디지털 거인의 교훈

알리바바는 2014년 9월에 세계에서 가장 큰 기업공개(IPO)로 헤드라인을 장식했다. 현재 시가총액은 세계 10위권 안에 들며 월마트를 제치고 세계 주요 시장으로 진출했다. 설립자 잭마는

Business

000

읽기모드

Portfolio

‍ Project List

000

읽기모드

Google Compute Engine (1) : GCE 생성 옵션

Google Compute Engine을 줄여서 GCE이라고 줄여부르는 듯 하다. 가상 머신이라 VM이라 부르기도 한다.
개념 자체는 AWS의 EC2와 동일하다. 생성한 GCE를 instance라고 부르는 것마저 같다.
그렇다면

☁️ GCP

000

읽기모드

GCP의 Region/Zone, 리소스 계층 구조

Region과 Zone

리전(Region), 리전 내부에 영역(Zone), 그리고 CDN을 위한 엣지(Edge)라는 개념은 AWS와 같다.
리전이 여러 영역으로 구분되어 운영되기에 높은 수준의 가용성(High Availabil

☁️ GCP

000

읽기모드

초기 스타트업의 배포 전략

작성중...

ref)
http://blog.hwahae.co.kr/all/tech/tech-tech/3848/

(startup) 고이

001

읽기모드

웹 프론트엔드에서의 MVVM 디자인 패턴에 대해서

회사에서는 hook기반 MVC에서 MVVM로 이전이 진행되고 있다.
지그재그에서도 프론트엔드에서 디자인 패턴으로 MVVM을 채용했다고 한다. (2021년 9월 현재 기준으로는 모르겠다.)

기존 MVC 패턴에 대해서

가장 직

⚛ React.JS

000

읽기모드

react dev tools로 profiling하기

최초의 렌더를 줄이려면 scaffold, skeleton loader, 부분 렌더링을 해야 함

아래와 같이 "first time component rendered", 즉, 최초 렌더는 어쩔 수 없음. 이 녀석을 방지하려면 필요

⚛ React.JS

000

읽기모드

func in TS (3) : overloading (오버로딩)

java에서 쓴 글을 가져와보자 (https://darrengwon.tistory.com/1347)
오버로딩(Overloading) : 같은 이름의 메서드 여러개를 가지면서 매개변수의 유형과 개수가 다르도록 하는 기술
오버라이딩(

Typescript

000

읽기모드

func in TS (2) : generic func, 타입 제약

제네릭을 통해 다양한 곳에서 활용될 수 있는 함수 정의
특정 타입이 아닌 제네릭을 잘 활용하면 type-safe하면서도 활용도가 높은 함수를 정의할 수 있습니다.
function getFisrtElem<T> (arr: T[]) {

Typescript

000

읽기모드

func in TS (1) : 함수 시그니처, type(타입 별칭), void

Typescript

000

읽기모드

[setting] default, QueryClient, Dev tools

react-query 문서에서는 자신들의 핵심적인 기능으로 queryClient, useQuery, useMutation을 소개하고 있다. (https://react-query.tanstack.com/quick-start)

일

react-query

000

읽기모드

never 타입은 대체 왜 있는 거임? : Exhaustive Type Checking

대표적으로 switch 문에서, 모든 case에 대한 처리가 이루어지지 않아서 default로 빠지게 되는 경우가 있다.
typescript에서는 이러한 케이스를 방지할 수 있다. 아래와 같은 케이스를 살펴보자.
interface

Typescript

000

읽기모드

type narrowing(type guard)와 Type Predicates(타입 명제)

type guard가 왜 필요한가

아래의 경우 유니언 타입으로 잡아주었기 때문에 공통적인 프로퍼티만 사용할 수 있습니다.
만약 intersection을 사용하면 정의 자체를 name, age, skill을 전부 넣어줘야 하니

Typescript

000

읽기모드

literal type과 const assertion

literal type

literal type은 간단히, 특정 값을 타입으로 고정시키는 것이다.
물론 특정 값을 type 선언해서 사용할 수도 있긴 하다. deprecated라고 뜰 뿐이지...
type name = 'Darr

Typescript

000

읽기모드

clipboard API와 붙여넣기 이벤트에 대해서

paste 이벤트와 클립보드 검사는 다른거다!

paste 이벤트에서 읽어온 클립보드 데이터 (pasteEvent.clipboardData)

- 웹에서 저장한 이미지의 이름은 무조건 name: "image.png"임. 크로

Web API

000

읽기모드

typed의 git 전략부터 코드 리뷰 문화까지 (가안)

처음 회사에 신입으로 입사하면 처음으로 마주하는 관문은 회사의 형상 관리 시스템, 쉽게 말해서 branch 운용 전략에 익숙해지는 것입니다. 대표적인 branch 운용 전략으로는 git flow, git-hub flow, git-

typed blog

001

읽기모드

갓 시작한 startup에서 구축해야할 것들

스타트업을 흉내도 내보고, 직접 입사해서 어설프게나마 배운 것들을 정리해보고자 합니다.
팀원 모집이나 법인 설립 등의 절차는 매우 중요하지만 여기서는 생략하고, 일을 시작하기 여러 방법론들에 대해서만 다루겠습니다.
+ frame

(startup) 고이

001

읽기모드

Iframe 태그와 origin이 다른 iframe 내부 dom tree 조작에 대해서

회사에서 다른 origin을 가진 iframe 내부 dom tree에 접근해야할 일이 생겼는데, 이 때 시도해 본 여러가지 방법에 대해서 적겠습니다.
결론은 "안된다"는 겁니다. 왜 안 되는지에 대해 적어보고자 합니다.

ifr

HTML, CSS

001

읽기모드

React에서 dnd 구현하기 (react-dnd)

web API로서의 dnd API
https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API

onDragStart, onDragEnter, onDragEnd 이벤

⚛ React.JS

001

읽기모드

redux-toolkit (1) : redux와 RTK를 비교해보자

회사에서 툴킷을 써서 부랴부랴 배워보기로 했다.

0. 설치
속이 다 시원하네
// immer, redux, redux-devtools-extension 자체 내장되어 있으므로 설치 ㄴㄴ
yarn add @reduxjs/tool

⚛ Redux

001

읽기모드

firebase ver 8 with React (4) Storage

https://firebase.google.com/docs/reference/js/firebase.storage

firebase가 db라면, storage는 aws s3 버킷 같은 스토리지 서비스이다.
살펴보니 1 계정 = 1

Firebase

001

읽기모드

ssh-keygen, ssh 프로토콜로 원격저장소 활용하기.

터미널에서 등록된 키가 있나 확인
ls -al ~/.ssh

없으면 하나 만들기
ssh-keygen -t rsa -C "youremail@email.com"

비공개키(id_rsa)와 pub (공개키) 생성확인

공개키 내

Git

002

읽기모드

firebase ver 8 with React (3) Firestore

no sql이고, mongoDB랑 비슷합니다.
MongoDB가 DB - 컬렉션 - 도큐먼트의 구조로 이루어져있듯, firestore도 컬렉션-도큐먼트의 구조를 가지고 있습니다.

doc: https://firebase.googl

Firebase

001

읽기모드

React Testing Library(RTL) (1) render, query, matcher, user Event

테스트의 순서는 대체로 다음과 같다.
@testing-library/react에 있는 render로 dom 그리고
@testing-library/user-event로 이벤트를 발생시키고
@testing-library/jest-d

⚛ React Testing

001

읽기모드

firebase ver 8 with React (2) Authentication

가이드 : firebase.google.com/docs/auth
참고 : firebase.google.com/docs/reference/js/firebase.auth.Auth

프로젝트를 진행하면서 Authentication과

Firebase

001

읽기모드

firebase ver 8 with React (1) setting

flutter에서 사용해봤으니까, 가입 등 간단한 절차는 생략하고 사용 위주로 작성해보겠습니다.
firebase 버전 8을 기준으로 설명합니다.

firebase.google.com/docs/web/setup?authuser=

Firebase

001

읽기모드

jest (6) : snapshot testing. toMatchSnapshot()!

https://jestjs.io/docs/snapshot-testing

snapshot이란 무엇인가?
성공한 케이스를 사진처럼 찍어서 저장해두고, 해당 케이스와 일치하는 지를 체킹하는 것입니다. 그래서 UI가 혹여나 예측할 수

test (jest, mocha...)

001

읽기모드

jest (5) : Mock, 외부 패키지 Mock, Spy

https://jestjs.io/docs/mock-function-api

What mocking is?

mocking?
unit test를 작성함에 있어 실제 DB를 건드리게 되고 이러한 테스트가 자주 발생하게 된다면

test (jest, mocha...)

001

읽기모드

jest (4) : Setup and test block scope

테스트를 구동하기 전에 모듈을 임포트하는 등의 작업 혹은 테스트를 구동한 후에 처리해야 하는 작업 등 테스트 전, 후에 작업을 해야할 경우가 종종 있습니다.

setup
테스트 전, 후에 트리거 되는 코드 조각들은 (befor

test (jest, mocha...)

000

읽기모드

jest (3) : 비동기 코드 테스트하기

https://jestjs.io/docs/asynchronous

비동기 테스트를 잘못 짜면 아래와 같은 경고 문구가 터미널에 출력됩니다.

Jest did not exit one second after the test run

test (jest, mocha...)

001

읽기모드

jest (2) : Matcher 사용하여 테스팅하기

using matchers : https://jestjs.io/docs/using-matchers

matcher란 이거 맞아? 라고 물어보는 메서드입니다. 기대한 값이 실제 반환된 값과 일치하는 지를 확인하는 작업인 것이죠.

test (jest, mocha...)

001

읽기모드

MySQL SQL문 기본 : CRUD, 연산자, 서브쿼리, etc...

SQL문 정리

DB server(mySQL) ⊃ schema(DB) ⊃ table

Quick guide

⬤ DB
CREATE DATABASE [DB 명];
SHOW DATABASES;
USE [DB 명] => S

MySQL

SQL

002

읽기모드

snu-coin 거래소

과제 하기 싫어서 미루고 미루다가 마감 이틀 전에 후다닥해버림

딱히 새로운 기술을 사용한 것은 아니지만, 지금까지 써온 것들을 잘 가다듬고 한 곳에 몰아서 정리해보는 의의가 있었다.

1. 다크모드 지원

https

프로젝트 후기

001

읽기모드

proto vs prototype

__proto__는 (이 글)에 정리해두었다. 그런데 prototype은 또 무엇일까?

Remember that __proto__ means an object’s prototype.
The prototype property a

Javascript (Core)

001

읽기모드

MIT 스타트업 바이블

이번 수업의 기말 과제가 <MIT 스타트업 바이블>을 기반으로 출제된다고 하니, 이번 기회에 짧고 빠르게 읽어보려고 한다.
사실 이 수업이 아니어도 굉장히 유명한 책이 아닌가. 언젠가 읽었어야 하는 책이었다.

* 책의 내용에

Startup

001

읽기모드

git hook 사용하기 with husky v6

현재 작업 플로우와 예상되는 문제점

일반적으로 git을 이용해 혼자 프로젝트를 할 때는 branch를 팔 일도 없으니 다음과 같은 전략으로 git을 사용했다.
git init => git add . => git commit -

Git

108

읽기모드

jest (1) 수정중...

installation
(1) 설치
yarn add jest
yarn add jest-cli -D
"scripts": {
"dev": "babel-node index.js",
"test": "jest"
},

(2)

test (jest, mocha...)

001

읽기모드

한글 음절과 초/중/종성 분리, 결합 작업

한글과 유니코드에 대해
유니코드 상에서 한글의 위치에 대해서는 https://darrengwon.tistory.com/1425 를 참고해봅시다.

한글의 음절(Hangle Syllables)은 유니코드 상의 Hangul Jamo

NLP

206

읽기모드

유니코드와 한글의 영역

유니코드
유니코드 문자의 경우 해당 글자의 코드를 표기할 때 U+(16진수 숫자)로 표기한다.
한글 '가'는 AC00(0xAC00)이고, 유니코드 상에선 U+를 붙여 AC00으로 표현한다. 10진수로 표현하면 44032다.

NLP

101

읽기모드

javascript 모듈 시스템 : CJS, AMD, UMD, ESM

모듈 시스템은 뭐고 왜 필요하게 되었는가?
패키지를 쓰다보면, 다양한 방식의 모듈 빌드 방식이 있습니다.
대표적으로 제가 애용하는 fuze 검색 라이브러리는 아래와 같이 다양한 방식으로 빌드되었다고 문서에서 알려주고 있습니다.

Javascript (Core)

2010

읽기모드

Utility types : Partial, Record, Pick, Omit ...

원본) https://www.typescriptlang.org/docs/handbook/utility-types.html
typescript-kr.github.io/pages/utility-types.html

우선 급하게

Typescript

202

읽기모드

예비창업패키지 후기

개인적인 추측과 의견이며 아무런 책임을 지지 않습니다. 재미로 읽어주세요

2021 예비창업패키지를 붙었다. 2020년 뭣 모르고 법인을 설립하고 수치도 없이 초창패에 부딪힌 것은 큰 실수였다.
초창패에 진입하는 기업의 사이즈를

Startup

003

읽기모드

예시로 공부하는 javascript 정규식

솔직히 설명 백날 읽어봐야 절대 이해 안된다. 코드로 바로 직행을 추천.

프코캠에서 regex 알려주길래 밤에 커피 마시면서 함 돌려봤다. 설명도 안 쓸테니 코드를 음미하자.
let testStr = "Hello, my nam

Javascript

002

읽기모드

자료구조 in javascript (4): Queue

Queue에 대해 생각해보자면, 마이크로 태스크 큐, 그냥 태스크 큐, 메세징큐 인프라인 카프카 뭐 이런 것들이 생각난다.
Stack과 반대로 먼저 들어온 녀석이 먼저 나가는 선입선출 방식이다.

javascript의 배열로

Data structure in js

002

읽기모드

자료구조 in javascript (3): Stack

Stack에 해당하는 것이 무엇이 있는지 잠깐 생각해보자면
브라우저 히스토리가 stack으로 쌓이고, 모바일 페이지가 stack으로 쌓이는 것이 일반적이고, javascript call stack도 stack이죠.
기본적으로

Data structure in js

001

읽기모드

자료구조 in javascript (2): Linked list. 배열과는 다르다!

배열과 리스트는 다르다!
포인터 개념이 있는 Go에서는 이 지점이 명확하게 보이는데, javascript에서는 포인터가 없으니 애매하게 보인다.
애매하다기보다 "이걸 왜 구현해야지? js에선 배열 쓰면 되는데?"라는 생각.
어쨌거

Data structure in js

001

읽기모드

자료구조 in javascript (1): 배열

js에서는 배열이 linked list, stack, queue등을 전부 다 대체할 수 있어서 자료 구조를 배운다고 해서 굳이 자료구조 구현체를 이용하여 프로그래밍을 할 이유가 없습니다... 연습을 위해서 굳이 따로 만들어서 사용

Data structure in js

002

읽기모드

generator의 yield*로 for...of 대체하기

flatten을 lazy evaluation으로 만들기 위해 아래와 같은 함수를 작성했습니다.
depth를 2 이상 가진 배열을 돌리면, 완전히 flatten되지 않습니다.
우선 위 함수 내부에 for...of 문이 중첩되어 들어

Javascript (Core)

001

읽기모드

HotHandCodinghttps://darrengwon.tistory.com/

HotHandCoding
https://darrengwon.tistory.com/