Page 16

20 POSTS

#typescript#nodejs
타입스크립트로 koa 미들웨어 만들기
koa 미들웨어 만들기
2020-04-151분
#nodejs#websocket
Socket.IO 공부하기 (1)
## WebSocket 웹은 전형적으로 HTTP 요청에 대한 HTTP 응답을 받고, 이에 따라 브라우저 화면을 새로 만드는 방식이다. 따라서 데이터 통신은 요청과 응답이 한 쌍으로 묶여왔다. 그러나 웹 페이지가 보다 쉽게 상호작용을 하려면, 브라우저와 웹 사이에 이러한 요청 - 응답 방식이 아닌 더 자유로운 양방향 메시지 송수신 기술이 필요하다. 이러한 ...
2020-03-224분
#python#backend
[Python] Send ncloud sms message
네이버 클라우드 플랫폼의 서비스 중 하나인 https://www.ncloud.com/product/applicationService/sens 로 SMS를 발송하는 예제. ncloud서비스를 다 써본건 아니지만, `make_signature`는 전 서비스에 다 똑같이 쓸 수 있을 것 같은 기분이다. ```python import time import req...
2020-03-171분
#javascript#regex
Javascript Regex 숫자를 comma와 함께 Formatting 하기
regex를 활용해서 숫자를 보기좋게 formatting을 해보자.
2020-03-172분
#nextjs#react#frontend
NextJS 1. Page & Route
요즘 리액트를 쓰는 많은 프로젝트에서, SSR을 지원하기 위해 [nextjs](https://nextjs.org/)를 쓰고 있다. 초기 로딩 속도나, SEO 지원 이슈 등 등 때문에 아무래도 SPA는 요즘 트렌드에서 많이 밀린 기분이다. 물론 [razzle](https://github.com/jaredpalmer/razzle) 을 쓰거나 custom ser...
2020-03-128분
#nextjs#frontend
NextJS 2. Data Fetching
[nextjs의 공식 문서](https://nextjs.org/docs/basic-features/data-fetching)를 보고 요약한 내용입니다. ```toc tight: true, from-heading: 1 to-heading: 2 ``` ## 1. getInitialProps Nextjs 9.3 이전에는 `getInitialProps` 밖에...
2020-03-1213분
#javascript
자바스크립트 커링과 클로져
## 커링 [이 글](https://www.sitepoint.com/currying-in-functional-javascript/) 에 잘 정리 되어 있습니다. Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다. 즉 커링은 함수 하나가 n개...
2020-03-052분
#javascript#web-performance
자바스크립트에서 http 요청하기 - fetch에 대한 고찰
`toc tight: true, from-heading: 2 to-heading: 3 ` ## 1. 서론 자바스크립트에서 http 요청을 하는 것은 이제 비일비재한 일이 되었다. 서버에서 모든 데이터를 가져와서 static 한 html을 만들어서 보여주고 있는 웹페이지는 아마 찾기 어려울 것이다. 맨 처음 웹을 배울 때, jquery의 ajax ...
2020-01-226분
#react#javascript#web-performance
React count down에서 배운 event-emitter 와 requestAnimationFrame
# 리액트에서 카운트 다운을 만들며 배운 것들 리액트에서 카운트 다운을 만든다고 가정해보자. 가장 먼저 생각나는대로, 빠르게 구현한다면 아래와 같은 느낌이 될 것이다. https://codepen.io/yceffort/pen/BayPyNe 하지만 이 코드는 한가지 문제를 가지고 있다. ## setInterval, setTimeout `setInte...
2020-01-156분
#github#career
2020년, 매일 github에 contribution 하기
## 블로그의 성장 2018년 5월 1일에 블로그를 시작한 이례로 헛소리를 지껄이는 블로그에서, 제법 이사람 저사람 찾아오는 블로그로 성장했다. ![history1](./images/history1.png) ![history2](./images/history2.png) 꾸준한 블로그 뻘 글과 회사에서 일하는 것 덕분에 github contributi...
2020-01-112분
#security#browser#backend
Chrome Samesite 쿠키 정책
# 문제의 시작 지난 주말, 엄청나게 급하게 빠른 속도로 프로젝트를 heroku에 올릴 일이 있었다. DB도 새로만들어야하고, 로그인도 필요한 사이트라 DB는 Heroku의 Clean DB를, 로그인은 [google sign-in for websites](https://developers.google.com/identity/sign-in/web)을 사용하...
2020-01-099분
#git#devops
머지된 브랜치를 삭제하는 스크립트
이미 머지된 브랜치를 로컬에서 삭제하기
2020-01-021분
#gatsby#frontend
블로그 개편했습니다. 😎
주말에 집구석에 혼자 오래있을 일이 있어서, 생각난 김에 블로그를 개편했습니다. 이 전에는 hexo 기반으로 만들어진 블로그를 작업했는데, hexo 생태계가 관리가 잘 안되고 있는 건지 플러그인이나 기능들이 제대로 동작을 안하더군요. wordpress -> ??? -> github pages -> hexo -> gatsby 까지 벌써 개편만 한 다섯번 쯤...
2019-12-303분
#javascript#browser
자바스크립트의 이벤트루프, 태스크, 그리고 마이크로 태스크
## 자바스크립트는 단일 스레드 기반의 언어 자바스크립트는 '단일 스레드' 기반의 언어다. 즉, 스레드가 하나이기 때문에 동시에 하나의 작업만 처리할 수 있다. 그러나 자바스크립트가 사용되는 웹을 곰곰히 생각해보면 동시에 여러개의 작업을 처리하는 모습을 볼 수 있다. 스레드가 하나인 자바스크립트는 동시성을 어떻게 처리할까? 먼저 브라우저 구동환경을 살펴보...
2019-12-275분
#ai#javascript#algorithm
2020년 목표
Don't do anything boring ## Tensorflow JS 중요도: ★★★★★ 난이도: ★★★★★ AI가 하고 싶어요 선생님... tensorflowjs 를 튜토리얼부터 따라하면서 배워보자. ## 알고리즘 강의 [백준강의](https://code.plus/bundle/8) 이제 알고리즘 정복할 때가 되었다. 자바스크립트와 파이썬으...
2019-12-192분
#git#devops
Github을 아름답게 관리하기
## Commit Message [좋은 git commit 메시지를 위한 영어사전](https://blog.ull.im/engineering/2019/03/10/logs-on-git.html) [좋은 git 커밋 메시지를 작성하기 위한 7가지 약속](https://meetup.toast.com/posts/106) ### 요약 Single Line ...
2019-12-183분
#react
리액트 텍스트 하이라이트 만들기
리액트에서 텍스트 강조하는 방법
2019-10-154분
#typescript#web-performance
typescript debounce
> Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel m...
2019-10-142분
#javascript#browser
브라우저 히스토리 조작
브라우저 히스토리 조작하기
2019-09-304분
#typescript
타입스크립트 제네릭
## 제네릭이란 제네릭은 클래스 내부에서 사용하는 데이터의 타입을 외부에서 지정하는 것을 의미한다. 어떤 타입의 데이터를 쓸지를, 클래스 선언부가 아니라 외부에서 결정하는 것이다. 일단 자바 코드로 한번 살펴보자. ```java class Person<T>{ public T name; } Person<String> p1 = new Person<...
2019-09-204분

Page 16

타입스크립트로 koa 미들웨어 만들기

Socket.IO 공부하기 (1)

[Python] Send ncloud sms message

Javascript Regex 숫자를 comma와 함께 Formatting 하기

NextJS 1. Page & Route

NextJS 2. Data Fetching

자바스크립트 커링과 클로져

자바스크립트에서 http 요청하기 - fetch에 대한 고찰

React count down에서 배운 event-emitter 와 requestAnimationFrame

2020년, 매일 github에 contribution 하기

Chrome Samesite 쿠키 정책

머지된 브랜치를 삭제하는 스크립트

블로그 개편했습니다. 😎

자바스크립트의 이벤트루프, 태스크, 그리고 마이크로 태스크

2020년 목표

Github을 아름답게 관리하기

리액트 텍스트 하이라이트 만들기

typescript debounce

브라우저 히스토리 조작

타입스크립트 제네릭