TOAST Mobile Contact 소개 (TOAST Service 들여다 보기) Mobile Contact 이란 모든 서비스들은 고객센터 채널을 제공하고 있으며 특히 결제가 포함된 경우에는 고객 문의에 대한 빠른 처리를 위해 콜센터를 제공하고 있습니다. 다만, 정해진 시간과 장소/인…
API Gateway 소개 (TOAST Service 들여다 보기) API Gateway 란? 최근 서비스는 마이크로서비스 아키텍처 형태로 독립적인 기능을 수행하는 작은 단위의 서비스로 나누어 개발하고 있습니다. 작은 단위의 서비스로 분리함에 따라 서비스의 복잡도를 줄일 수 있으며, 변…
Load Balancer 통계 기능 (TOAST Service 들여다 보기) 로드밸런서는 유입된 트래픽을 인스턴스로 분배하기 위해 사용하는 서비스입니다. TOAST 로드밸런서 서비스를 이용하면 인스턴스 하나로 처리하기 힘든 부하를 여러 대의 인스턴스로 분산하여 처리량을 높일 수 있고,…
CloudTrail 소개 (TOAST Service 들여다 보기) TOAST CloudTrail Cloud 를 사용하는 고객들은 자신의 조직, 프로젝트에서 일어나는 일들에 대해서 이력을 확인하여 운영 감사, 위험 감사를 진행할 필요가 있을 수 있습니다. TOAST CloudTrail은…
데이터테크랩의 빨리 세는 법 데이터테크랩의 나기호 선임님과 함께 진행하고 있는 과제를 소개해 드리는 글 입니다. 오늘은 부서에서 개발 중인 플랫폼 중 많은 데이터의 숫자를 빨리 세기 위해, 혹은 빨리 찾기 위해 만들고 있는 DataMart를 소개해 드리겠습니다. 빨리 집계하기 위해 가장…
TOAST CDN 소개(TOAST Service 들여다 보기) CDN (Content Delivery Network) 이란? CDN (Content Delivery Network)은 콘텐츠(이미지, 텍스트, 미디어 파일 등)를 최적화된 경로를 통해 전송할 수 있도록 전 세계적으로 분산된…
실전! Python 실행 환경 설정하기 배경 이 글은 Linux 환경에서 Python으로 안정적인 서비스 애플리케이션을 제공하기 위해 사용할 환경을 마련하는 방안에 대해서 다룹니다. Python 런타임은 각 OS에서 사용되는 패키지 관리자나 인스톨러를 이용하여 잘 설치되어 있다고 가정하…
TOAST FORWARD - Spring Framework Core 후기 NHN에서 'TOAST FORWARD'라는 이름으로 우수한 내부의 기술교육 콘텐츠를 외부에 공개하고 있다는 것, 알고 계셨나요? 지난 7월 11일에 진행한 '하루에 정리하는 Spring Framework Core'…
BloomFilter는 언제 쓰나요? "데이터테크랩의 김준성 전임님, 박지수 전임님과 함께 수행한 업무 중 공유하면 좋을 것 같은 내용을 정리한 글입니다." 확률적 자료구조인 블룸필터가 저장소도 아낄 수 있고 빨리 검색할 수 있어서 hbase, redis 등 여러 디비에서도 활용되고 있…
더 가볍고 강력해진 TOAST UI Grid v4.0을 만나보세요! TOAST UI Grid 4.0 TOAST UI Grid는 여러분의 데이터를 효과적으로 표현하고, 편리한 사용성을 제공하기 위해 많은 노력을 해왔습니다. TOAST UI Grid 4.0은 더 빠르고, 가벼우면서 사용하기…
0.7KB로 Vue와 같은 반응형 시스템 만들기 TOAST UI Grid는 현재 새로운 메이저 업데이트인 버전 4를 릴리스하기 위해 열심히 준비중이다. 버전 4는 Backbone과 jQuery를 사용해서 작성했던 기존의 코드를 모두 버리고 처음부터 새로 작성하는 대대적인 개편 작업이다.…
[Kotlin] 메모리릭 방지하기 | Kotlin, Lambda의 강력함 | Lambda는 진리입니다. 안녕하세요. 이번 시간에는 제가 사랑하는 Kotlin과 Lambda/SAM가 제공하는 수많은 장점 중, memory leak 을 회피하는 것에 대해서 살펴보고자 합니다. 안드로이드 중…
[Java] Integer.valueOf(127) == Integer.valueOf(127) 는 참일까요? 안녕하세요. Java에는 최적화를 위해 객체들을 Cache를 하는 로직이 있습니다. Cache 로직은 애플리케이션의 성능 향상을 하도록 도와주지만, 의도치 않은 결과를 발생시키기도…
[Kotlin | Android] 테스트 코드 작성이 힘든 이유와 테스트 가능 코드에 대한 고민 안녕하세요. 요새 저는 테스트 코드 작성에 혈안 집중을 하고 있는데요, 많은 분들이 '테스트 코드' 작성이 힘들다고 생각하시며, 과연 그게 '필요한가' 하는 고민까지 하는 것을 보았습니다.…
크롬 네이티브 레이지 로딩 레이지 로딩이란? 좋은 기회로 2019년 구글 I/O에 참석했다. 웹 기술 세션 중에는 크게 눈에 띄는 세션은 없었지만, 일부 세션에서 소개된 웹과 관련 기술 몇 가지는 흥미로웠다. Native Lazy Loading, Portals, Duplex, Rich…
타입 스크립트에서 Vue 컴포넌트를 개발하는 방법 여기까지 오기까지 내가 처음 SPA 프로젝트를 진행했던 때는 2012년이다. 그때 제일 핫했던 백본(Backbone)을 기반으로 구축한 꽤 큰 규모의 프로젝트였다. 그때는 지금처럼 프런트엔드 개발환경이 좋지 않았고 SPA라는 개념 자체가…
AngularJS에서 Vue로 전환하면서 배운 것 프롤로그 나는 NHN에서 협업도구인 Dooray!를 개발하고 있다. 프로젝트, 메일, 메신저, 캘린더, 드라이브, 위키, 주소록, 칸반 등 방대한 기능을 담은 서비스이며 약 5년 전부터 개발되기 시작하여 현재까지 잘 유지되고 있는 서비스…
실용적인 프론트엔드 테스트 전략 (3) 2부에서는 스토리북을 사용해서 시각적 요소에 대한 테스트를 자동화하는 방법에 대해 알아보았다. 기억을 되살리기 위해 우리가 작성하고 있는 할 일 관리 애플리케이션의 실행 단계를 다시 정리해보자. 애플리케이션이 실행되면 화면에 기본 UI를 보여준다.…
TOAST IAP 소개 (TOAST Service 들여다 보기) In App Purchase란? In App Purchase는 Google Play, Apple App Store 등의 스토어에서 설치한 앱 안에서, 상품을 유료로 구매하는 것을 의미합니다. 혹은 앱 밖에서 구매할 수도 있…
실용적인 프론트엔드 테스트 전략 (2) 1부에서는 테스트 자동화와 테스트 전략의 중요성, 시각적 테스트를 자동화하는 것이 어려운 이유 등을 살펴보았다. 사실 시각적 테스트를 자동화하는 것이 불가능하지는 않지만, 현재 우리가 가진 도구로는 기대하는 만큼 효용을 얻기가 어렵다. 이 글은 "…
TOAST Object Storage 소개 (TOAST Service 들여다 보기) TOAST Object Storage는 여러 서비스의 백엔드 스토리지로 사용되고 있습니다. Dooray!, TOAST File, TOAST Image 등 비정형 데이터를 저장하는 많은 서비스의 근간이라고…
오토스케일(Autoscale)의 이해와 예제를 통한 구성(TOAST 서비스 들여다보기) 오토스케일은 인스턴스의 부하를 모니터링해서 특정 이벤트에 대해 인스턴스를 추가/삭제하는 기능을 제공하는 서비스 입니다. 예를 들어, 급작스러운 서비스 트래픽의 증가 상황에서 운영자의 개입없이 자동으로…
오픈소스 프로젝트를 운영하며.. 2018년은 FE개발랩에 좋은 일이 많은 한 해였다. 랩에서 내놓은 오픈소스 프로젝트들이 좋은 반응을 얻었고, 몇 가지 의미있는 성과를 얻었다. 아직 오픈소스 생태계에서 큰 역할을 하지 못하는 대한민국에서 좋은 오픈소스 프로젝트들이 많이 나왔으면 하는 바…
실용적인 프론트엔드 테스트 전략 (1) 바야흐로 자바스크립트의 시대이다. 최근 2~3년 동안 자바스크립트는 가장 인기있는 언어 순위 1위를 유지하고 있고, 여전히 빠른 속도로 성장하고 있다. 10여년 전, 웹 표준이라는 개념조차 없을 때부터 프론트엔드 개발을 해 오던 나 같은 개발자에게…
DB도 형상관리를 해보자! 개발 코드는 VCS(Version Control System)로 형상 관리를 하는데, DB 이력은 형상 관리를 할 수 있을까? 하고 고민하셨던 적이 있으신가요? 여기 DB 이력도 형상 관리를 할 수 있는 오픈 소스 도구 Flyway를 소개합니다. 버전별 DB…
HTTP 쿠키와 톰캣 버전별 이슈 HTTP 쿠키 - HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하는 데이터 조각입니다. - 브라우저는 이 데이터 조각들을 저장할 수 있고 다음 요청 시에 전송할 수 있으며 방문자의 상태를 저장하는 용도로 사용합니다. 쿠키의 목적 1. 세션 관리 (…
Big things in JDK 11 Java 11 2018년 09월 25일에 final release된 신규 버전의 jdk 입니다. 신규 features는 아래의 JEPS에서 살펴보실 수 있습니다. jdk 11 버전에는 약 90개의 신규 feature들이 공개되었는데요, 그 중 몇 가…
Big things in JDK 10 JDK 10 2018년 3월 20일에 발표된 JDK 10에서 추가된 전체 기능은 아래의 JDK Enhancement Proposals(JEPS)에서 살펴볼 수 있습니다. 약 109개의 신규 기능들로 이루어져있으며, 대표적으로 var 를 사용한 지역변…
Fixed IP vs Floating IP(TOAST 서비스 들여다보기) Fixed IP vs Floating IP 지난달 뉴스레터에서는 VPC를 이용해 이를 통해 격리된 환경의 인프라 운영이 가능하다는 설명을 드렸는데, 이번달에는 VPC 내부 망에서만 사용할 수 있는 사설 IP와 외부…
[TOAST FORWARD] 두번째 - Scouter를 이용한 성능 분석 NHN엔터테인먼트 기술사업 브랜드인 TOAST가 교육 나눔을 통해 앞으로 나아가자는 의미로 만들어진 TOAST FORWARD! 본사 내부의 개발 인력들을 위해 기술 교육 프로그램을 열심히 진행하다 보니 이렇게나 질…
KakaoTalk Bizmessage 서비스와 친구톡 기능 소개(TOAST 서비스 들여다보기) KakaoTalk Bizmessage 서비스 최근에 TOAST에 친구톡이라는 기능을 새롭게 마련하면서, 알림톡과 친구톡을 합쳐서 KakaoTalk Bizmessage라는 이름의 서비스로 개편하…
VPC 사용법(TOAST 서비스 들여다보기) VPC (Virtual Private Cloud) VPC는 논리적으로 격리된 가상 네트워크을 구성할 수 있는 기능을 제공합니다. 이를 통해 격리된 환경의 인프라 운영이 가능합니다. VPC는 Subnet, Internet Gateway, Rou…
Push 광고성 메시지 수신 동의 여부 처리방법 안내(TOAST 서비스 들여다보기) 필요성 광고 메시지를 전송할 때, 광고 전송 사업자는 정보통신망법의 의무사항을 준수해야 합니다. KISA 가이드에 따르면 영리목적의 광고성 정보를 전송하는 경우에는 "광고"라는 문구와 발송자의 연락처,…
[TOAST FORWARD] NHN Ent.가 기술 교육을 야심차게 오픈했어요. NHN Ent.의 기술교육에 대해서 들어보셨나요?? NHN Ent.의 교육은!! 어디서도 볼 수 없는 NHN Ent.만의 수준 높은 강사진 구성과 원하는 교육을 골라 들을 수 있는 빵빵한 커리큘럼. 참석자들…
Proxy 모드 로드밸런서 이용시 클라이언트 IP 로깅하기(TOAST 서비스 들여다보기) 로드밸런서란? 기본적으로 LB는 외부로 부터 들어온 요청에 대해 내부에 있는 서버들로 부하를 분산하는 용도로 사용이 됩니다. 자체적으로 내부에 있는 서버들의 상태를 체크해서, 서비스가 불가능한 서버…
블록체인과 비트코인 이 글은 2017년 5월 사내에서 발표한 자료 입니다. 지금과는 다른 내용이 포함되어 있을 수 있습니다. 들어가기에 앞서 (이미지 출처: https://www.blockchain.com/) 블록 체인 기술이 왜 화제가 되고, 매커니즘은 어떻게 되는지, 어떤 분야에 적…
SMS의 080 수신 거부 설정 기능 소개 (TOAST 서비스 들여다보기) SMS 서비스에는 080 수신 거부를 쉽게 설정할 수 있는 기능이 있습니다. SMS를 이용하여 광고성 메시지를 보낼 경우에 반드시 무료 수신 거부 방법을 기재해야 하며, 수신 거부 방법을 제공하지 않으면 3천만원…
100,000개의 아이템도 거뜬한 셀렉트박스 만들기 (1/2) 안녕하세요. 분석서비스팀 심준식입니다. 거의 모든 웹사이트에 있다시피 한 셀렉트박스는 매우 쉽게 구현할 수 있는 간단한 컴포넌트이지만, '잘' 만들기는 어려운 컴포넌트이기도 합니다. 아이템의 갯수가 10~100개 정도일 때에…
장애 복구를 위해 Floating IP를 이용하는 방법 (TOAST 서비스 들여다보기) 장애 복구를 위해 Floating IP를 이용하는 방법 외부에서 Instance 또는 Load Balancer에 접속하기 위해 Public IP가 연결되어야 하는데, Floating IP를 이용하여…
Proxy와 가상 돔을 사용하여 나만의 프레임워크 만들기 Javascript Proxy Proxy는 ES2015에 소개된 기능이다. IE11을 제외하고는 모던 브라우저에서 지원하고 있어서 사용할 수 있다. babel 트랜스파일로도 지원되고 있지 않지만, 구글에서 폴리필을 만들어 공개하고…
Log&Crash Search의 Network Insight 기능 소개 Log&Crash Search의 Network Insight 기능 소개 Network Insight 기능은 앱과 서버 간의 네트웍 품질을 살펴볼 수 있는 기능입니다. Log&Crash Search의 [Settings…
요즘 잘나가는 프론트엔드 개발환경 만들기(2018): ES6 본 시리즈의 이전 아티클에서는 웹팩4에 대해 다루면서 바로 쓸 수 있는 환경을 만들어봤다. 이번편에는 그 환경 그대로 이용해 ES6 개발 환경을 추가한다. ES6는 이제 충분히 써도 될만한 시기라고 생각한다. "나는 프런트 개…
앱실행속도 개선을 위한 최적화 가이드 (1) 1. 들어가는 말 우리 게임은 왜 이렇게 로딩 시간이 긴 거야 ?! 경쟁사 게임은 이펙트도 화려하고 브금도 좋은데 왜 빠른 거고 ? [킹덤스토리] 작년 측정기록 24초에 비해 약 3초 개선되어 21초로 측정 되었다. 입장 버튼 터치 후 게임화…
앱실행속도 개선을 위한 최적화 가이드 (2) 스마트폰의 하드웨어적 성능은 날로 높아만 가고 있다. 당연한 얘기같지만 필자가 경험한 게임들은 기기 성능에 따라 실행시간이 대체로 빨라졌었다. 그럼 결론은 간단해 진다. '고객님 기기가 문제였네요. 고성능 폰을 쓰세요'라고 말이다. 실제로 대…
요즘 잘나가는 프론트엔드 개발 환경 만들기(2018): Webpack 4 요즘 잘나가는 프론트엔드 개발 환경 만들기(2018): Webpack 4 최근에 새로운 프로젝트를 진행하게 되면서 기존에 간만 살짝 보고 있던 뷰(Vue, 이하 뷰)를 본격적으로 도입하게 되었다. 사실 팀에서는 리…
spring-boot-starter 작성하기 서론 spring-boot 에서 starter 란 의존성과 설정을 자동화해주는 모듈을 뜻한다. 예를 들어, spring-boot-starter-jpa 를 의존성 추가했을 때 아래의 일을 해준다. spring-aop ,spring-jdbc 등의…
Spring에서 요청에 따른 부가 응답 추가하기(2) - reactor 적용 서론 앞 번에 개발한 소스에는 두 가지 문제점이 있었다 - Network I/O를 순차 실행 - O(n) 시간이 걸림 : timeout * attachment 갯수 - Async로 O(1)만에 끝내도록 튜닝 필…
(Spring Boot)Logging과 Profile 전략 서론 spring-boot 에서는 Logback을 확장해서 편리한 logging 설정을 할 수 있다. application.yml 의 설정을 읽어 오거나 특정 profile의 동작을 수행할 수 있다. 이 글에서는 Spring B…
(Spring)Filter와 Interceptor의 차이 서론 Spring을 익힌지 얼마 되지 않았을 때, 회원 인증 로직을 구현할 일이 생겼었다. 그 인증을 구현하기 위해 Filter와 Interceptor를 조사했었다. 하지만 Filter와 Interceptor를 어떤 경우에 써야…
Spring에서 요청에 따른 부가 응답 추가하기 (1) 개요 최근 들어 특정 콘텐츠에 부가 속성을 더하여 보여주는 UI가 증가하고 있다. 부가 속성의 예를 들자면 좋아요, 싫어요, 댓글, 공유 링크, 연관 게시물, 추천 게시물 등을 들 수 있다. 이러한 부가 속성들은 기획적 요구나 성능…
Spring BindingResult를 json으로 받기 개요 Spring은 Controller에서 Validation을 한 후, 유효하지 못한 값이 존재할 때, Error(BindingResult)에 그 내용을 담아서, JSP, FreeMarker 등의 View Template Eng…
스토어 정책 변경에 대비하는 우리의 자세 작년에 이미 Android 8.0(Oreo)와 iOS 11이 릴리즈 되었습니다. 새로운 OS의 출시와 함께 항상 Google 및 Apple의 스토어 검수 정책도 변화하는데요, 넋놓고 먼산만 바라 보다가는 소중한 우리의 어플리케이션이 정상적으로 돌…
Redux-Saga: Channel 이번 글에서는 Redux-Saga의 Channel(이하 채널)에 대해 정리해보고자 한다. 채널은 Redux-Saga의 초기 버전에서부터 고려했던 API는 아니다. 그런데 Stackoverflow에서 외부 이벤트를 Saga와 어떻게 연결하냐는 질문에서…
리액트 HOC 집중 탐구 (2) 1부에서는 HOF(Higher Order Function)의 개념부터 시작해서 HOC(Higher Order Component)의 개념이 무엇인가와 어떤 상황에 이용될 수 있는지에 대해 알아보았다. 하지만 1부의 내용만 읽어서는 HOC를 실제 프로젝트에…
ECMAScript 스펙 톺아보기: Primitive ECMAScript 스펙 톺아보기: Primitive 프리미티브에 대한 의문 현재 팀 내부에서는 시니어들이 팀 인력 채용 프로세스를 개선하고 있다. 프로세스 중에서도 현재는 필기시험 문제를 재출제하는 중인데 이게 생각보다 쉽지 않아…
웹 워드프로세서 기초 만들어 보기(2) 웹 워드프로세서(이하 웹 워드)는 브라우저만 있으면 어디서나 문서 편집을 할 수 있다는 장점이 있어 매력적인 소프트웨어이다. 아직 네이티브 워드프로세서로 할 수 있는 모든 기능을 다 지원하는 것은 아니지만 가까운 미래에는 가능하리라고 믿는다. 2년…
3년 된 오픈소스가 1주일 만에 3,000 GitHub 스타를 받다 3년 된 오픈소스가 1주일 만에 3,000 GitHub 스타를 받다 # 시작하며 TOAST UI Editor는 2015년 3월에 첫 커밋이 이루어진, 대략 3년이 된 프로젝트이다. 2017년 12월 30일 이 프로젝트의…
Redux-Saga: 제너레이터와 이펙트 지난 글에서 Redux-Saga와 사이드 이펙트를 가지고 공부 겸 정리 겸 글을 작성했다. 이번 글에선 Redux-Saga에서 사용하는 제너레이터함수, 이펙트에 대해 정리해보려 한다. 제너레이터함수는 협력적이고, run-to-completion이…
웹 워드프로세서 기초 만들어 보기(1) 웹 워드프로세서 기초 만들어 보기(1) 웹 워드프로세서(이하 웹 워드)는 생각보다 오래된 역사를 가지고 있다. 구글 독스가 2006년에 소개되면서 많이 알려졌으니 벌써 십여 년의 역사가 있는 소프트웨어 분야이다. 씽크프리는 자바 애플릿 기반으로 동…
리액트 HOC 집중 탐구 (1) 리액트 HOC 집중 탐구 (1) 리액트가 정식으로 릴리즈된 지도 벌써 4년이 훌쩍 지났다. 얼마전 나온 16.0 버전에 이르기까지 내부적으로도 많은 발전이 있었고, 수 많은 리액트 관련 라이브러리들이 나오는 등 외부적으로도 많은 발전이 있었다. 지금은 거…
Redux-Saga: 사이드 이펙트 관리 Redux-Saga: 사이드 이펙트 관리 지난 1년 6개월 동안 리액트, 리덕스를 공부하고 활용해 웹 애플리케이션을 개발했다. 지금도 개발하고 있고, 여전히 비동기 처리와 같은 사이드 이펙트(Side effects)를 고민하고 있다. 리액트, 리…
JBake로 API문서 관리하기 1. 프로젝트 배경 및 목적 - 배경 1. Java는 가장 인기있는 프로그래밍 언어로 많은 회사에서 주력언어로 선택하고 있음 2. 대부분의 CMS(Content Management System)는 Python, JavaScript 언어로 되어 있어, Ja…
HTML diff HTML diff란? - MS워드의 '변경 내용 추적'기능처럼 HTML의 렌더링 결과 화면의 변경 부분을 탐지하고 해당 내용을 시각화하여 표시해주는 기능이다. - HTML 텍스트에서 태그와 속성 데이터를 파싱하여 트리같은 자료구조로 구조화하고 구조화한 트리를 비교해서…
이맥스와 함께하는 개발환경 금단의 영역에 손을 대다 에디터, IDE뿐 아니라 업무에 관련된 새로운 도구가 나오면 꼭 써봐야 직성이 풀리는 성격이었지만 언젠가부터 그놈이 그놈이고 저놈이 그놈이고 새로운 기능이 있어도 개발을 할 때 사용하는 기능들은 매우 한정적이라는 사실을 깨닫게 되었다.…
Front-End 테스트 환경 (2) - 멀티 브라우저 테스트 환경 구축하기 멀티 브라우저 테스트 환경 구축하기 로컬 테스트 환경의 한계 이전 글에서는 단일 PC에서 테스트 환경을 구축하고 테스트를 실행하는 과정을 설명했다. 로컬 PC 내에서 브라우저 자동화 테스트를 수행하는 테스트의…
웹 기술로 구현하는 Adaptive HTTP Streaming 한국은 물론 세계적으로 엄청난 양의 동영상 콘텐츠가 소비되고 있다. 플래시가 대세였던 웹 동영상 기술이 점차 표준 기술인 HTML5 비디오로 전환되었고 요즘은 대부분의 동영상 서비스는 HTML5를 기반으로 서비스되고 있다.…
자바스크립트에서 타임존 다루기 (2) 자바스크립트에서 타임존 다루기 (2) - 이전 글 : 자바스크립트에서 타임존 다루기 (1) 이 글은 2부로 구성된 '자바스크립트에서 타임존 다루기'의 두 번째 글이다. 1부에서는 타임존과 오프셋에 대한 개념과 IANA timezone Database…
자바스크립트 함수(3) - Lexical Environment 자바스크립트 함수(3) - Lexical Environment 지난 글을 통해 함수의 생성과 함수의 호출 과정에 대해 간략히 알아보았다. 앞선 글(함수의 호출)에서 간단히 설명한 Execution Context에는 Lexic…
What's New in iOS11 안녕하세요. 게임플랫폼클라팀 박판기입니다. 해당 포스트에서는 곧 출시될 iOS11의 새로운 피처들과 향상된 기능들, 그리고 변경된 점들을 다뤄보겠습니다. WWDC 2017 + iOS11 Beta 지난 WWDC 2017 에서 iOS11에 대한 많은 정보…
Web Components(4): Template Element & HTML Imports - Web Components(1): Keep calm and #UseThePlatform - Web Components(2): Custom Elements - Web Components(3):…
Front-End 테스트 환경 (1) 간단하게 테스트 환경 구축하기 이 글에서는 간단하게 Front-End 테스트 환경을 구축하는 방법에 대해 공유하고자 한다. 참고) 본 글은 Karma 설정과 Jasmine의 API에 대해서는 깊게 다루지 않는다. 우선 Front-End 테스트를 실행…
자바스크립트에서 타임존 다루기 (1) 최근 나는 팀에서 관리하는 자바스크립트 캘린더 라이브러리에 타임존 기능을 추가하는 작업을 한 적이 있다. 자바스크립트의 타임존 지원이 다른 언어에 비해 부실하다는 얘기는 이미 들어 알고 있었지만, 기존 Date 객체를 잘 추상화하면 어렵지 않게 구현…
Spring Boot Test 간단히 Spring Boot의 테스트 기능에 대해서 정리한 글입니다. 그저 Spring Boot 공식 문서를 정리한 수준이지만 앞으로 Spring Boot 에플리케이션을 개발하고 테스트하실 때 많은 도움이 되었으면 합니다~ Spring Boot에서 테스트를…
자바스크립트 함수 (2) - 함수 호출 저번 글을 통해 함수가 어떻게 생성되는지 대략 살펴보았다. - 함수는 일반 객체의 확장이다. - 함수 생성 시점에 그 함수의 역할이 어느 정도 결정될 수 있다. (callable과 constructor) - 함수 생성 시점에 저장하는 데이터들을 통…
GitHub의 Merge, Squash and Merge, Rebase and Merge 정확히 이해하기 GitHub의 새 버전에서 merge, squash and merge, rebase and merge 세 종류의 merge를 모두 지원하기 시작했습니다. 각 머지 방식에 따라 커밋…
웹 어셈블리를 보다 쉽게 웹 어플리케이션에 적용하는 방법 본 글은 웹 어셈블리를 보다 쉽게 웹 어플리케이션에 적용하는 방법을 소개하고, 자바스크립트와 WebAssembly의 간단한 성능 테스트 결과를 공유한다. 세상에는 많은 프로그래밍 언어들이 있고 여러 가지 측면에서 장단점을 이야기…
non-blocking socket에 OpenSSL 적용하기 이 문서에서 사용하는 OpenSSL 버전은 1.0.1u이다. 하트블리드 취약점을 피하려면 1.0.1g 이상을 사용해야 한다. - 공식 OpenSSL 페이지 : https://www.openssl.org/ - 공식 문서 : ht…
Web Components(3): Shadow DOM 이 글은 웹 컴포넌트 소개 연재로 그중 세 번째인 쉐도우 돔에 대한 글이다. 아마도 이전 글의 커스텀 엘리먼트 글을 읽고 온 분은 여러 스펙, API, 기억해 두어야 할 것들로 질렸을지도 모르겠다.(두 번으로 잘라서 글을 썼으면 좋았…
자바스크립트 함수 (1) - 함수 객체, 함수 객체 생성 자바스크립트로 유명한 개발자 Douglas Crockford의 말을 빌리면, 자바스크립트는 지구에서 가장 오해하고 있는 프로그래밍 언어다. 물론 지금 글을 작성하는 2017년에는 그 오해가 많이 풀리긴 했지만, 여전히 자바스크립트…
글로 다이어그램을 그려요 – PlantUML 소프트웨어 설계를 하다 보면 UML 다이어그램으로 표현해야 할 일이 종종 있다. 객체지향 설계이거나, 여러 가지 모듈이 연동되어 동작하는 시스템이거나 또는 상태 변화를 설명해야 할 때 UML 다이어그램은 아주 좋은 표현 방법이다. 다이어그램은…
GitHub 환경에서의 실전 Git 레시피 저희 팀은 Git으로 소스를 관리하고, GitHub로 코드 리뷰를 진행하고 있습니다. 또한, 저희 팀 상황에 맞춰 변형한 Git Flow 전략으로 브랜치 관리를 하고 있죠. 하지만 Git을 사용하며 개발을 하다 보면 종종 뭔가 잘못되거나, 예상…
Web Components(2): Custom Elements 오늘은 이전에 썼던 글 WebComponents: Keep calm and #UseThePlatform에 이어지는 것으로, Web Components의 주요 표준 중 하나인 Custom Elements에 대한 글이다. TL;…
Redux-Saga에서의 WebSocket(socket.io) 이벤트 처리 React(이하 리액트), Redux(이하 리덕스) 생태계에서 소켓과 같은 외부 이벤트 처리는 개발에 많은 고민을 안겨준다. 똑같은 외부 이벤트가 발생하더라도 앱의 상태에 따라 다르게 처리하고 싶을 수도 있고,…
Web Components(1): Keep calm and #UseThePlatform Web Components: Keep calm and #UseThePlatform 이 포스터(Keep Calm and Carry On)은 영국 정부가 제2차 세계 대전이 발발하기 전 대규모 공중 폭격…
Socket.io-Client for Unity3D 소개 들어가면서 socket.io 웹 환경에서는 클라이언트인 브라우저와 서버 간에 푸쉬나 실시간 데이터를 처리하는데 여러 가지 방법을 활용했습니다. 그중에 Ajax를 이용한 polling, Long polling과 Streaming의…
Redux 분석하기 Redux는 Event Sourcing패턴과 Functional programming을 결합하여 라이브러리 형태로 구현한 컨테이너다. 이 컨테이너는 애플리케이션의 상태를 저장하고, 쉽게 예측할 수 있도록 하여 일관된 구현을 유지할 수 있도록 하고, 테스트, 유지보수,…
React 렌더링과 성능 알아보기 React는 간단하면서도 충분히 빠르다. 하지만 착각하지 말자. 대충 만들어도 빠르다는 것은 아니다. React 애플리케이션은 잘 만들어야 빠르다. React의 동작 원리를 이해하고 애플리케이션이 느려질 수 있는 상황들을 찾아 해결하는 것이 중요하다.…
자바스크립트 AOP 맛보기 AOP(Aspect Oriented Programming)가 뭔데? 자바스크립트 개발 이야기에서 AOP는 생소한 주제이다. 보통 AOP 개념을 설명할 때 대표적으로 Cross-cutting Concern 이라는 말을 한다. 직역하자면 횡단 관심사 라고할 수 있…
상호작용 데이터모델링 데이터운영팀은 데이터모델링과 DBMS에 관련된 주제를 기술적 깊이에 상관없이, 정기적은 아니지만 지속적으로 공유할 예정입니다. 첫 번째 주제는 상호작용 데이터모델링이라고 제목을 붙여봤습니다. 때늦은 감이 없지 않지만, 앞으로 더 많이 고민하고 다루어져야 될 주제이기…
Postman 개요 / 설치 / 사용법 / 활용 방법 Postman 이란 (https://www.getpostman.com/) A powerful GUI platform to make your API development faster & easier, from building API r…
좋은 git 커밋 메시지를 작성하기 위한 7가지 약속 본 글은 Chris Beams의 How to Write a Git Commit Message 블로그 내용을 이해하기 빠르고 쉽게 전달하기 위해 번역, 편집하고 도움이 될만한 내용을 추가한 것입니다. git 커밋 메시지를 잘 쓰려고 노…
OAuth 2.0 대표 취약점과 보안 고려 사항 알아보기 목차 - OAuth 2.0 이란? - 대표 보안 취약점 - CSRF, Covert Redirect - 보안 검수 항목 - 마무리 - 참고 자료 1. OAuth 2.0 이란? OAuth 2.0은 다양한 플랫폼 환경에서 권한 부여를…
쉽게 이해하는 자바스크립트 프로토타입 체인 자바스크립트는 객체 지향 언어이자 함수를 1급 객체로 취급하기 때문에 함수형 프로그래밍도 가능한 멀티 패러다임 언어이다. 자바스크립트를 조금이라도 다뤄봤던 사람이라면 익히 알고 있겠지만, 자바스크립트에는 클래스란 개념이 없어 객체 생성이나 상속…
Wireshark로 내가 만든 프로토콜 분석하기(Wireshark Custom Dissector 제작) 목차 Custom Dissector가 왜 필요한가요? 이 글에서 다룰 내용 예제를 만들어 보겠습니다. Wireshark에 적용해 보겠습니다 마치며 Custom Dissector가 왜…
TOAST Haste 소개 목차 들어가기에 앞서 TOAST Haste Let's haste 결론 들어가기에 앞서 우리는 오랜 시간 동안 TCP(Transmission Control Protocol)를 이용해서 많은 애플리케이션을 개발해왔습니다. TCP는 패킷 순서 보장, 흐름 제어, 혼…