shiren the creator

https://blog.shiren.dev shiren the creator 2026-10-15T12:51:29.762Z https://github.com/jpmonette/feed Sungho Kim shirenbeat@gmail.com https://blog.shiren.dev/ let the games begin. https://blog.shiren.dev/logo.jpg https://blog.shiren.dev/favicon.ico All rights reserved 2026, Sungho Kim <![CDATA[번아웃 극복하기(경험자편)]]> https://blog.shiren.dev/ko/post/2025-03-25 2025-03-24T15:00:00.000Z

혹시 번아웃인 걸까? 하고 의심해봤던 적이 있나요? 대한민국은 특히나 마음 건강에 대해 무심한 편이고 부끄러운 것으로 생각하기 때문에, 증상을 무시하면서 살아가는 경우가 많습니다.. 별 것 아닌 것으로 치부하거나 그저 술 한 잔 마시면, 시간이 지나면 다 풀려야 한다고 여기죠. 그걸 못 이겨내면 나약한 사람인 것 같죠. 스스로 강해야 한다는 방패를 앞에 두고 뒤에서 베이고 찔리고 있는 것을 모른 척하죠. 자기도 버티지 못하면서 괜찮은 척, 다른 사람에게 충고나 위로를 하고요. 번아웃에 대해 기사들을 검색해 보면 다양한 원인들을 이야기해요. 단순히 일을 많이 해서 생기는 것처럼 말하는 경우도 있고요. 경험자의 입장에서...]]>

갈수록 세분화되고 다양화되면서 복잡도가 높아지고 있는 FE 생태계입니다. 새삼스럽죠. 저는 가급적이면 뭐 하나라도 디펜던시를 줄이려는 편입니다. 가급적 표준안에서 변화하지 않는 영역을 더 늘리려고 하죠. 자바스크립트 애니메이션도 그렇습니다. 공개된 오픈소스들을 이용하면 DOM상에서 복잡하고 나이스 한 움직임을 만들어낼 수 있습니다. 하지만 이렇게까지 애니메이션의 비중이 큰 웹 프로젝트는 드문 편입니다. 간단한 애니메이션을 구현하기 위해 또 다른 디펜던시를 늘리는 것은 꽤나 부담스러운 일이고요. 한두 번 사용하기 위해 디펜던시를 늘리는 것은 용량이나 학습비용 뿐 아니라 다양한 부분에서 비효율적입니다. 별도의 도구 없이...]]>

이력서는 최소한 분기별로 업데이트를 하며, 지난 분기 성과를 반성하고 새로 오는 분기를 계획하는 것이 좋다고 생각합니다. 애초에 회사를 월급도 받고 성과도 만들어, 내 경력을 더욱 풍성하게 만들어 주는 곳이라고 생각하면 좋을 것 같아요. 그러면 절대 수동적으로 일할 수 없습니다. 시키는 일만 하는 것이 아니라, 능동적으로 눈에 불을 켜고 해야 할 일을 찾게 되는 것이죠. 단순히 주어진 업무를 수행하는 것에서 그치지 않고, 성과로운 일로 승화시키는 것이 바로 능동적인 업무 태도입니다. 시킨 일이라도 그 안에서 개선점이나 문제점 혹은 효율적인 해결점을 발견하여, 별 볼 일 없던 과제도 본인의 경력에서 기술적으로 의미 있는...]]>

1년전에 좋은 기회로 취준생과 1~4년 차 개발자를 대상으로 채용과 관련된 강연을 했어요. 전반적으로 구직이나 이직에 도움 될만한 내용들을 준비했는데요. "이렇게 하면 채용될 수 있다"라는 위주의 내용은 가급적 피하려고 노력했지만 어쨌거나 채용과 관련된 내용이다 보니 공장의 쿵쾅 소리같이 너무 세속적으로 느껴졌어요. 그렇다고 근본적인 뭔가를 다루기엔 제 깜냥도 안되고 경험도 부족해요. 불필요한 단언을 내뱉지 않을까 하는 걱정도 있었고요. 도움이 필요하신 분들에게 제 어쭙잖은 경험으로 어떻하면 현실적인 도움을 줄 수 있을까 생각하고 있었는데요. 최근에 조카가 개발 공부를 시작한다고 책을 추천해달라고 하더군요. 뭐 나중에...]]>

페이지 가시성 API(Page Visibility API)는 이름에서 짐작할 수 있듯 페이지가 현재 유저에게 보이고 있는지 아닌지를 알 수 있게 해주는 API입니다. 정확히 말하면 모니터상에서 보여질 수 있는 상황인지 아닌지겠네요. 유저가 눈을 감거나 다른 곳을 보고 있으면 알 방법이 없으니까요 :) 예전엔 onblur와 onfocus 이벤트를 사용했었는데요 사실 이 이벤트들은 가시성을 판단하는 이벤트라기보다는 페이지가 액티브한지 아닌지를 판단하는 이벤트였죠. 그래서 나온 것이 Page Visibility API 즉 페이지 가시성 API입니다. 왜 쓸까? 페이지 가시성 API를 활용하면 다음과 같은 상황을 감지할 수 있...]]>

세션스토리지(sessionStorage), 로컬스토리지(localStorage)로 구성된 웹 스토리지는 이제 너무 익숙합니다. 다루기 힘들었던 쿠키와는 다르게 클라이언트 저장소로 사용 용도를 명확히 하고 더 나은 사용성으로 이미 우리의 친구가 됐죠. 프론트엔드 개발자가 자주 다루는 로컬 스토리지는 이런 것들을 할 수 있습니다. storage.length storage.key(n) value = storage.getItem(key) value = sotrage[key] storage.setItem(key, value) storage[key] = value storage.removeItem(key) delete stora...]]>

프론트엔드 프로젝트를 시작할 때마다 매번 정해야 하는 것들이 있습니다. 개발 환경과 개발 스택을 정하고 대부분 Git이겠지만 형상관리 도구도 정하고 브랜치를 어떻게 관리할지도 정해야 하고 버저닝은 어떻게 해야 할지 등등 프로젝트를 새로 시작할 때면 매번 점검하거나 새롭게 정해야 할 것들이 많았어요. 물론 이미 오랜 기간 숙련된 팀의 경우 기존의 방식을 활용할 수 있겠지만 매번 기존 프로젝트 진행했던 문제가 됐던 것들은 항상 있었기 때문에 같은 방법과 도구들을 그대로 사용하는 경우는 없었던 것 같아요. 조금이라도 달랐어요. 프로젝트들이 짧은 숨으로 진행되는 회사라면 그 변경 정도가 적겠지만 긴 숨으로 진행되는 프로젝트들이...]]>

아직 젊고 건강하다고 생각했습니다. 결국 허리가 나갔습니다. 디스크라고 불리는 노화의 대표적인 질병 추간판 탈출증입니다. 허리가 종종 아팠습니다. 어렸을 때부터 엉망진창이었던 자세를 생각한다면 그래도 지금까지 잘 버텨준 것 같습니다. 코딩 작업과 같은 집중이 필요한 작업을 할 때면 어느덧 자세는 거의 누워있는 자세가 됐었고 뒤늦게 자세를 고쳐잡아도 금방 뒤로 자빠지길 반복했습니다. 몇 해전 목통증으로 우연히 척추부터 엑스레이 사진을 찍었던 적이 있습니다. "목이 거의 일자목이며 척추도 C자 모양이어야 하는데 1자를 넘어 반대쪽으로 휘어있습니다. 관리 안 하면 목 디스크 허리디스크 옵니다" 의사의 경고를 듣고도 한 몇 달...]]>

FSM(Finite State Machine, 유한 상태 기계)은 UI를 구현할 때 가끔씩 사용했었습니다. 기본적인 개념만 응용해서 enum과 조건문을 이용해서 구현했었죠. 정해진 상태들이 많이 있고 상태에 따라 다른 동작들이 가능한 상황에서는 고민 없이 FSM을 적용할 것 같습니다. 그럴 땐 어떻게 코드를 짜도 복잡하기 때문에 코드만이라도 상태에 따른 정해진 동작으로 최대한 일관성 있게 만드는 편이 복잡도를 줄일 수 있습니다. 우연히 XState에 대한 내용을 SNS에서 접하고는 대충 FSM의 자바스크립트 구현체인 것은 알고 있었어요. 언젠간 한번 살펴봐야지 했었는데 최근에 시간을 내서 이것저것 공부해 봤습니다. 먼저...]]>

저는 와인을 좋아합니다. 정확한 기억은 아니지만 와인을 적극적으로 마시기 시작한 시기는 대략 2010년 정도 부터 였던 것 같습니다. 적어도 10년은 넘게 주기적으로 마셨죠. 한 달에 서너 병은 항상 마셨던 것 같습니다. 10년 넘게 마셨으니 뭔가 전문적인 지식도 있고 와인 맛도 잘 구별하고 할 것 같은데요. 딱히 그렇진 않습니다. 그래도 관심이 있어 유튜브나 블로그 등에서 간혹 정보를 얻곤 하지만 정말 비루합니다. 제가 사용하는 와인 정보 앱에는 테이스팅 노트를 남길 수가 있는데요. 아직도 가격대 비 좋다 나쁘다 정도만 남기는 수준입니다. 보통 상대평가입니다. 저것보다 이게 더 좋다. 이것보다 저게 더 좋다. 이렇게요...]]>

React(리액트) 18이 얼마 전에 출시했습니다. 개발하시는 프로젝트에 이미 업데이트 했거나 조만간 업데이트 하실 계획일텐데요. 리액트와 Typescript(타입스크립트)를 같이 사용했던 프로젝트라면 반드시 수정해야 할 타입 정의의 브레이킹 체인지 몇가지 공유드립니다. React.FC 타입에서 암묵적인 children 선언 제거 ReactFragment 타입에서 {} 제거 this.context는 이제 unknown 타입 어차피 검색하게 되실 겁니다. 미리 파악해두시면 좋을 것 같아요 :) React.FC 타입에 암묵적인 children 선언 제거 약간 놀라실 분도 계실 텐데요. 자바스크립트와 리액트를 사용하시다가...]]>

이제는 메타(Meta)라고 불러야 하는 페이스북에서 일하는 지인이 휴가차 한국에 입국했었어요. 오랜만에 얼굴도 보고 술 한잔했습니다. 오랜만에 만나는 자리다 보니 참 많은 이야기를 나눴었죠. 어느덧 자리가 무르익으니 늘 하던 대로 또 개발 이야기를 하기 시작했어요. 업무나 개발에 대해 서로 이야기를 많이 나누던 친구다 보니 자연스럽게 그렇게 됐죠. 이 글에서는 다룰 수 없지만 네이티브 앱에 대한 동적이고 유연했던 파격적인 아키텍처는 제게 많은 영감을 줬죠. 그 자리는 페이스북의 개발자는 어떻게 일하는가에 대한 이야기가 주 주제가 됐습니다. 시간 가는 줄도 모르고 이야기를 나눴습니다. 위드코로나 시기였지만 아쉽게 일찍 자...]]>

최근 주말마다 아이를 위해 리액트로 간단한 게임을 만들고 있습니다. 무한의 계단이란 게임을 너무 집중해서 하길래 게임에서 아이한테 위해가 될 수 있는 중독적인 요소는 빼고 핵심 재미(?)만 갖고 있는 게임을 만들어볼 심산이었죠. 단순히 계단을 좌우로 오르면서 얻은 점수로 아바타를 사거나 해서 캐릭터를 꾸밀 수 있는 게임인데 여기서 점수로 게임 내의 재화를 사는 기능을 뺐습니다. 제목은 "유한의 계단"입니다. 공을 들여 계단도 만들고 캐릭터도 만들고 하면서 재미있게 만들고 있었는데요. 생각지도 못한 부분에서 문제가 발생했어요. 이 게임은 계단을 오를 때 그리고 실패했을 때 효과음을 출력하는데요. 여기서 크로스 브라우저 이...]]>

얼마 전 진행했던 코드리뷰에서 undefined의 사용에 대한 문제로 이야기가 나왔어요. 개인적으로는 너무도 오랫동안 당연하게 null과 undefined를 나름 명확하게 구분했었고, 각 사용처에 맞게 사용하고 있었기에 사실 이 부분에 관해서는 더 알아볼 생각도 없었습니다. 아이러니하게도 이야기가 나왔던 문제는 오해로 생긴 다른 문제였기에 쉽게 해결됐어요. 하지만 관련해서 검색하다가 생각지 못한 내용을 만나게 됩니다. null을 사용하지 말고 undefined만을 사용하자는 주장이었죠. 타입스크립트는 컨벤션에도 명시되어 있었습니다. "Use undefined, do not use null." 이건 예전에 봤었지만 그냥...]]>

몇 달 전에 ECMAScript 2021 최종 스펙이 공개되었어요. 바로 쓸만한 것도 있고 언어를 조금 더 깊게 활용할 수 있는 기능들도 생겼습니다. 매해 이렇게 달라지고 개선되는 것을 보면서 좋기도 하지만 점점 이것도 무뎌지는진 건지 아니면 개선점이 와닿지 않는 건지 예전만큼 관심이나 파급효과가 적어진 것 같아요. 스펙을 보자마자 조만간 정리해야지 했지만 많은 시간이 흘렀네요. 벌써 9월이라니... 다소 생소할 수 있는 WeakRefs와 Finalizers를 조금 더 많이 다뤄봤습니다. 일단 요약을 하면 이래요. 객체를 향한 약한 참조를 만들 수 있는 WeakRefs 객체가 가비지 컬렉트 되는 시점을 알 수 있는...]]>

개발을 하다 보면 개발자의 실수로 생긴 코드 상의 문제로 뻘건 에러 메시지를 자주 만나게 됩니다. 개발 중에 버그가 발견된다면 다행이지만 실 서비스에서 에러 메시지가 출력된다면 개발자로써 손발이 오그라들고 식은땀이 솟구칠 겁니다. 자바스크립트는 런타임에서만 에러 메시지를 만날 수 있기 때문에 종종 이렇게 심각한 버그를 놓치기도 합니다. 이 부분에선 요즘 타입스크립트와 그밖에 많은 도구들이 도움을 주고 있죠. 뛰어난 개발자분이라면 에러 메시지를 보자마자 빠바박 문제를 바로 파악할 수 있겠지만 저 같은 평범한 개발자는 에러 메시지를 볼 때마다 당황스럽고 새롭습니다. 이런 분들을 위해 준비해봤습니다. 비교적 경력이 낮...]]>

저는 반복적으로 하는 작업이 있다면 가장 나에게 맞는 최적화된 루틴을 만들고 그 작업을 할 때마다 생각 없이 그대로 하는 편이에요. 정해진 루틴은 고집스럽게 유지하진 않고요. 경험에 따라 혹은 관련 지식이 늘어남에 따라 루틴을 조금씩 개선합니다. 루틴은 “현재 내가 이 일을 잘 하기 위해 알고 있는 위한 가장 나은 방법”이라고 할 수 있겠네요. 그리고 실행할 때는 이 생각 저 생각 할 필요 없이 그냥 실행합니다. 각 단계에 대한 생각만 하는 것이죠. 예를 들어 제가 사는 아파트는 매주 한 번 재활용 수거를 하는데 재활용을 할 때도 버릴 것들을 정리하는 순서가 있고 다 정리된 재활용 봉투를 손에 쥐는 순서와 방법이 있습니...]]>

직장인이라면 자연스럽게 업무를 대하는 태도가 캐릭터 처럼 만들어져요. 개발자도 마찬가지고요. 신입이라고 태도가 항상 나쁜 것도 아니고 경력이라고 항상 태도가 좋은 것도 아니에요. 코딩 스킬처럼 개선될 수도 있고요. 연차가 적을수록 몰라서 잘못된 태도를 갖는 경우가 많습니다. 이렇게 만들어진 태도는 보통 연차가 높을수록 개선되기 힘들다고들 하죠. 태도라는 큰 추상적인 덩어리는 억울하게도 한 부분, 한 사건에 의해 모든 것을 퉁쳐서 판단되기도 하죠. 이런 태도의 중요한 한 부분은 업무 중 문제가 발생했을 때에 뚜렷하게 나타난다고 생각합니다. 누구나 문제는 발생합니다 어떤 사람은 업무를 맡기면 어떻게든 잘 해내는 반면 어떤...]]>

(2022-03-04 업데이트: webpack-dev-server, babel, jest 관련 설정 코드가 수정됐습니다.) 파트 1에서는 기본 자바스크립트 개발 환경을 러나와 함께 구축해봤어요. 기본 환경만으로 충분하신 분들도 계시겠지만 보통은 그렇지 않을 겁니다. 이제 두 가지 개발 환경을 추가할 건데요. 타입 스크립트와 리액트 개발 환경이에요. 우선 타입스크립트 환경을부터 추가할 거예요. 그전에 러나로 해줘야 할 작업이 있습니다. 타입스크립트 환경도 결국 지금까지 저희가 구축한 자바스크립트 환경 위에 만들어질 것이기 때문에 디펜던시 모듈을 공유할 수 있도록 만들고 환경 설정 파일들도 기본 자바스크립트의 환경설정 파일...]]>

(2022-03-04 업데이트: webpack-dev-server, babel, jest 관련 설정 코드가 수정됐습니다.) 개발을 하다 보면 특정 환경에서 빠르게 코드를 작성하고 그 결과를 확인해보고 싶을 때가 있어요. 라이브러리나 프레임웍 혹은 언어를 공부할 때나 아이디어를 빠르게 실험하거나 프로토타입 해보고 싶을 때 그렇지요. 바닐라 자바스크립트로 충분한 환경이라면 디렉터리 하나 만들고 js 파일 하나 html 파일 하나 만들어서 에디터를 열고 브라우저를 열어서 html 파일을 불러오는 것까지 하면 기본적인 준비가 끝나요. 근데요. 이런 바닐라 자바스크립트 환경을 만드는 것조차도 사실 귀찮을 때가 있어요. 이런 기본...]]>

언젠가부터 브라우저스리스트(browserslist)라는 것이 자주 눈에 띄더니 지금은 FE 개발 환경에서 뺄 수 없는 도구가 되었어요. 아마도 바벨(Babel)이라는 FE 계의 걸출한 스타 프로젝트에서 도입했기 때문일 거라고 생각합니다. 바벨을 사용하는 프로젝트들이 많다 보니 간접적으로 혹은 직접적으로 브라우저스리스트까지 사용하게 되는 것이죠. 사실 좋아요 좋은 도구라고 생각합니다. 아마 브라우저 환경을 정의하는 표준처럼 당분간 사용될 것 같아요. 보통 공식 사이트에서 자세히 알 수 있는 내용들은 글을 따로 안 쓰려고 하는 편인데요. 짧게 바로 쓸 수 있는 내용만 요약해서 정리해볼게요. Browserslist가 뭘까 소...]]>

5~6년 차 즈음부터 개발자 채용에 조금씩 관여하기 시작했고 현 회사에서는 면접관으로 활동한지 5년이 넘은 것 같다. 면접은 1차 면접에 해당하는 기술 면접이었고 팀의 채용 프로세스를 개선하거나 사전과제, 라이브 코딩 문제 출제에 주도적으로 참여했다. 그간 다양한 개발자들을 만났고 운 좋게도 좋은 개발자들을 많이 채용할 수 있었다. 채용 과정에서 좋은 개발자도 만났지만 그렇지 못했던 개발자도 많았고, 아쉬웠던 개발자도 있었다. 아쉬웠던 개발자들은 노력을 하고 있지만 “어느 정도”로 “어떤 방향”으로 해야 하는지 모르는 경우였고 채용에 대한 준비가 부족했던 경우도 많다. 이런 분들에겐 면접이 끝나기 전에 선배 개발자로서...]]>

독서를 습관으로 만들기 위해 그간 많은 노력을 했었다. 습관적으로 SNS를 열면서 “이럴 시간에 책을 읽었으면…” 하고 자주 생각했지만 SNS 아이콘을 터치하는 유혹을 뿌리치기 힘들었다. 여러 가지 시도를 했고 “하루 25분 실행하기: 하루를 대하는 14년차 개발자의 자세” 에서 밝혔다시피 아직 다독가에 비하면 보잘것없지만 그래도 나름 습관 만들기에는 성공한 것 같다. 독서 습관을 만들면서 알게 된 몇가지 좋은 팁을 공유한다. 읽기 속도 측정하기 독서 습관을 만들 때 제일 중요한 것은 책 읽는 속도를 파악하는 것이라고 생각한다. 책을 읽을 시간이 없다고 말하기 전에 내가 책을 읽을 때 시간이 얼마나 필요한지를 알아야...]]>

하루 24시간은 모두에게 공평하지만 그 24시간을 모두가 공평하게 사용하진 않는다. 하루의 여가시간을 어떻게 하면 더 효율적으로 사용할 수 있을까는 나의 오랜 고민거리였다. 단기 목표도 세워보고 장기 목표도 세워보고 포모도로, GTD도 도입하고 간츠도 사용해보고 하루 표준 계획표도 짜보고 일주일 보고서도 만들어봤다. 하루를 온전히 “노력”하기 위한 ”노력”을 많이 했다. 시도했던 것 대부분은 조금씩 달랐지만 주로 나에게 맞는 일상 패턴을 찾는 과정이었다. 개발자로서 회사 업무시간이나 여가 시간, 하루 대부분의 시간을 개발과 관련된 것들로만 채워왔다. 뭐 꽤 노력했다고 생각한다. 그렇게 13년이 넘는 시간이 흐르니 나에게...]]>

이벤트 핸들러는 UI를 개발할 때면 항상 사용된다. 웹뿐만 아니라 네이티브 어플리케이션에서도 약간의 차이가 있을뿐 거의 동일한 추상이 사용된다. 자주 사용되는 만큼 중요하지만 사실 너무 자주 사용되다 보니 가볍게 생각하며 습관적으로 고민 없이 좋지 않은 코드를 만들곤 한다. 자주 사용된다는 건 코드의 양적인 비중도 크다는 것이고 그만큼 조금만 더 신경 쓴다면 큰 효과를 볼 수도 있다. 이런 이벤트 핸들러를 어떻게 다루면 좋은지에 대해 간략하게 정리해봤다. 이벤트 핸들러라고 해서 꼭 DOM 이벤트에만 해당하는 것은 아니며 모듈 간의 커플링을 줄이기 위해 사용하는 이벤트 버스나 RX, 각종 이벤트 관련 패턴에서 사용되는 이...]]>

각종 커뮤니티에 주기적으로 등장하는 "private 메서드를 테스트하려면 어떻게 하나요?" 혹은 "private 메서드를 테스트해야 하나요?" 와 같은 질문을 보면서 언젠가는 관련해서 정리해봐야겠다고 생각했었는데 꽤 시간이 흘러 이 내용으로 글을 써본다. 주제 자체는 간단한 편이지만 사람마다 생각이 다른 것 같다. 특히 해외 개발자들의 의견이 분분한 것 같다. 사실 이 문제는 효과적인 테스트 케이스(이하 TC)란 무엇인가란 질문과 비슷하다. private 메서드는 객체지향적인 관점에서 생각한 것이고 노출된 함수 내부에서 접근하는, 클로저안에 숨겨진 함수 역시 동일한 대상이다. 모듈의 외부 인터페이스 뒤에 숨겨진 캡슐화...]]>

언젠가부터 여러 가지 걱정들로 머릿속이 복잡해지고 있었다. 이런 상황에서는 운동과 독서가 해결책이 될 수 있는데 운동은 평소 꾸준히 하는 편이었고 독서량을 많이 늘려봤다. 기술 서적이 아닌 내 삶에 필요하다고 생각하는 주제의 책들을 읽었다. 하지만 뭔가 부족했다. “생각을 정리할 시간이 필요하다.”라고 생각했지만, 막상 생각을 정리할 시간을 내기 힘들었다. 지금 생각해보면 그게 힘들었던 건지 생각을 직접적으로 대면하기 두려웠었는지 모르겠다. 몸뚱아리는 현재에 있었지만, 정신과 생각은 미래와 과거를 수없이 오갔다. 마음이 평화롭지 않았다. 작년 말에는 평소 같았으면 3년 치 분량에 해당하는 책들을 몇 개월 만에 읽었다...]]>

ECMAScript 클래스 필드(class field) 명세중에 Private field 즉 Private Property (이하 Private 속성) 가 있다. 클래스 필드 스펙은 Stage 3(Candidate)까지 올랐으니 아마 곧 Stage 4(Finished)를 거쳐 표준 스펙이 될 것이다. 사실 초기에 명세 문서를 봤을 때는 "드디어 private이 생기는건가?"하는 기대감과 "문법이 좀 별론데"라는 실망감이 있었을 뿐 뭔가 현실감은 없었다. 그렇게 시간이 흘러 기억 속에서 잊힌 채로 지내다가 얼마전에 타입스크립트 3.8에서 정식으로 지원한다는 소식을 들었고 이를 계기로 Private 속성 에 대해 제대로 알...]]>

2019년 11월에 개최한 회사 컨퍼런스 NHN FORWARD에서 프런트엔드에 대한 고민이나 궁금증을 해결할 수 있는 프런트엔드 상담소 를 운영했었다. 다양한 고민이 있었지만, 연차나 직책별로 궁금증과 고민거리들이 비슷하다는 것을 알 수 있었다. 명확하게 묘수를 알려줄 수 있는 트러블 슈팅부터 프런트 엔드 개발자가 가야할 방향까지 다양한 고민이 있었다. (상담소 전경… 핸드폰 파는거 아니다) 상담 내용 중에 많은 비중을 차지한 것이 바로 개발 문화에 대한 고민이었다. 현재 꽤 괜찮은 개발 문화를 가진 팀에서 일하고 있다고 생각하고 그 과정을 함께 했었기 때문에 내담자들에게 경험을 토대로 답변을 해줄 수 있었다. 내담자...]]>

레이지 로딩이란? 좋은 기회로 2019년 구글I/O에 참석했다. 웹 기술 세션 중에는 크게 눈에 띄는 세션은 없었지만, 일부 세션에서 소개된 웹과 관련 기술 몇 가지는 흥미로웠다. Native Lazy Loading, Portals, Duplex, Rich Results 정도가 나의 관심을 끌었다. 그중 키노트에서 시작해 몇 개의 세션에서 두루두루 언급한 네이티브 레이지 로딩이 제일 기대됐다. 레이지 로딩, 특히 이미지 레이지 로딩은 새로운 기술은 아니다. 기존 브라우저는 웹페이지를 불러올 때 초기부터 전체 영역에 해당하는 이미지들을 동시에 모두 내려받는다. 서비스의 사용자는 웹페이지의 모든 이미지를 보지 못한 채 다...]]>

여기까지 오기까지 내가 처음 SPA 프로젝트를 진행했던 때는 2012년이다. 그때 제일 핫했던 백본(Backbone)을 기반으로 구축한 꽤 큰 규모의 프로젝트였다. 그때는 지금처럼 프론트엔드 개발환경이 좋지 않았고 SPA라는 개념 자체가 겨우 슬슬 알려지기 시작한 시기였다. MVC에서 벗어나질 못한 프레임웍들이 주를 이루었던 프론트엔드 진영이었다. 앵귤러JS(AngularJS)가 MVC가 맞느니 아니니 박터지는 가운데 리액트(React)라는 아종이 등장했다. 리액티브와 함수형 패러다임의 영향을 받은 이 프레임웍은 빠르게 성장했다. 그걸 이끈 개발자들이 나보다 나이가 어려서 배가 아프다. 그리고 엄청난 생략이지만 Vue가...]]>

2018년은 FE개발랩에 좋은 일이 많은 한 해였다. 랩에서 내놓은 오픈소스 프로젝트들이 좋은 반응을 얻었고, 몇 가지 의미있는 성과를 얻었다. 아직 오픈소스 생태계에서 큰 역할을 하지 못하는 대한민국에서 좋은 오픈소스 프로젝트들이 많이 나왔으면 하는 바람으로 몇 년간 우리가 오픈소스를 운영하면서 얻은 나름의 결과를 글로 작성한다. 이 글은 TOAST UI Editor로 작성했으며 차트는 TOAST UI Chart로 만들었고 일부 이미지는 TOAST UI ImageEditor를 사용해 편집했다. 작은 시작 FE개발랩에서 공식적으로 공개한 첫 오픈소스 프로젝트는 TOAST UI Editor였다. 뒤늦게 좋은 반응을 얻게...]]>

원글: Why Using reduce() to Sequentially Resolve Promises Works https://css-tricks.com/why-using-reduce-to-sequentially-resolve-promises-works/ reduce() 를 이용해 순차적으로 프라미스를 해결하는 방법 Promise 객체를 사용하지 않고 비동기 자바스크립트 코드를 작성하는 것은 눈을 감고 케이크를 굽는 것 만큼 어렵다. 물론 할 수 있지만 복잡해질 것이고 결국 화딱지가 나서 못 해먹을 것이다. 꼭 필요하다고 말할 순 없지만 일단 사용해보면 곧 얼마나 좋은지 알 수 있을 것이다. 좋기는 하지만 가끔 특정...]]>

원글: https://medium.com/scrumpy/dynamic-component-templates-with-vue-js-d9236ab183bb Vue.js에서의 다이나믹 컴포넌트 템플릿 컴포넌트들이 항상 같은 구조로 되어 있진 않다. 그리고 때론 관리해야할 상태들이 많을때도 있다. 이런 문제는 비동기적인 방법으로 해결할 수도 있다. 유즈 케이스 스크럼피는 알림, 댓글, 첨부 파일 등에서 컴포넌트 템플릿을 사용한다. 우선 댓글 부분을 살펴보면서 정확히 어떤 것을 말하는지 알아보자. 최근의 댓글은 더 이상 단순한 텍스트 필드가 아니다. 링크를 등록하고, 이미지와 비디오도 올리기도 하고 그밖에 여러 가지를 할...]]>

본 시리즈의 이전 아티클에서는 웹팩4에 대해 다루면서 바로 쓸 수 있는 환경을 만들어봤다. 이번편에는 그 환경 그대로 이용해 ES6 개발 환경을 추가한다. ES6는 이제 충분히 써도 될만한 시기라고 생각한다. "나는 프런트 개발자가 아니기도 하고 브라우저가 모두 지원하지도 않기에 ES6는 아직 못쓴다" 라고 생각하고 있다면 이 글을 통해 생각을 바꿀 수 있길 바란다. 어차피 쓰는 거 ES6뿐 아니라 ES8까지 사용하는 것을 권장한다. IE11 이하 버전들은 ES6나 이후에 대한 고려가 거의 없지만 엣지(MS Edge)를 포함한 모든 모던 브라우저들은 네이티브로 ES8(ECMAScript2017)의 대부분의 스펙을 지원...]]>

최근에 새로운 프로젝트를 진행하게 되면서 기존에 간만 살짝 보고 있던 뷰(Vue, 이하 뷰)를 본격적으로 도입하게 되었다. 사실 팀에서는 리액트를 선호하고 있었으나 회사 내부에서 뷰의 사용이 빠른 속도로 증가하고 있었고 그에 따라 팀내에서도 뷰에 대한 전문성이 필요하게 되었다. 뷰와 리액트는 서로 영향을 주고받고 발전해나가는 도구들이라 비슷한 부분이 많아 큰 어려움 없이 적응할 수 있었다. 새로운 프로젝트에서는 뷰를 사용하는것 뿐 아니라 다른 개발 환경도 요즘 것들로 업그레이드 해봤다. 웹팩 4 사용하고 테스트 러너도 기존에 팀 내에서 표준처럼 사용하던 카르마(Karma)에서 요즘(이미) 잘나가는 제스트(Jest)로 새...]]>

프리미티브에 대한 의문 현재 팀 내부에서는 시니어들이 팀 인력 채용 프로세스를 개선하고 있다. 프로세스 중에서도 현재는 필기시험 문제를 재출제하는 중인데 이게 생각보다 쉽지 않아 매일 매일 서로 의견이 분분하다. 그러던 어느 날 프리미티브에 대한 의견을 나누던 중 자바스크립트의 프리미티브를 객체 같이 사용된다고 설명해도 되느냐 안되느냐의 문제를 놓고 토론을 하게 되었는데 내 의견은 표면적으로 객체처럼 사용할 수 있기에 객체 같이 취급된다고 표현해도 된다는 의견이었고 다른 한 멤버는 중간에 프리미티브 래퍼가 관여하는 내용이기 때문에 그렇게 설명하면 안 된다는 것이었다. 한 명은 표면적인 결과에 다른 한 명은 내부의 동작에...]]>

금단의 영역에 손을 대다 에디터, IDE뿐 아니라 업무에 관련된 새로운 도구가 나오면 꼭 써봐야 직성이 풀리는 성격이었지만 언젠가부터 그놈이 그놈이고 저놈이 그놈이고 새로운 기능이 있어도 개발을 할 때 사용하는 기능들은 매우 한정적이라는 사실을 깨닫게 되었다. 인텔리제이도 일년 이상은 사용해봤지만 프론트 엔드를 주로 개발하기에 딱히 IDE가 필요하지 않았고 수많은 기능들을 거의 사용하지 않다 보니 필요 이상의 도구를 사용하는 느낌이었다. 그런 느낌이 조금씩 자라나던 중 생뚱맞게도 박웅현 작가의 여덟 단어 라는 책을 읽다가 한가지 결심을 하게 된다. 에디터의 본질은 변함이 없고 고전은 시대를 뛰어넘으며 변함없는 가치를 지...]]>

한국은 물론 세계적으로 엄청난 양의 동영상 콘텐츠가 소비되고 있다. 플래시가 대세였던 웹 동영상 기술이 점차 표준 기술인 HTML5 비디오로 전환되었고 요즘은 대부분의 동영상 서비스는 HTML5를 기반으로 서비스되고 있다. 동영상 기술은 점차 고도화되어 네트워크 환경에 따른 최적의 동영상 품질을 스트리밍해 버퍼링없는 서비스를 제공하기 위해 여러 방법들이 모색되었고 그중 하나가 새로 프로토콜을 만드는 대신 기존의 HTTP를 이용해 구현하는 Adaptive HTTP Streaming이다. Adaptive HTTP Streaming이 무엇인가? Adaptive HTTP Streaming은 말 그대로 적응형 스트리밍이다. 사용...]]>

원글: https://tutorials.technology/tutorials/11-webassembly-initial-steps-tutorial.html 소개 웹어셈블리는 미래에 매우 유용하게 사용될 새롭고도 새로운 표준이다. 이 기술은 W3C 커뮤니티 그룹에서 애플, 구글 , 마이크로소프트 그리고 모질라와 함께 개발되고 있다. 이 프로젝트의 초기 시점인 지금은 고 수준의 언어가 아닌 C/C++로 초점이 맞춰져 있고 웹어셈블리의 약어는 wasm 이며 자바스크립트와 브라우저의 개선 사항 중 하나이다. 웹어셈블리는 자바스크립트를 대체하려는 목적이 아니며 사실 보완하려고 나왔다. 웹어셈블리를 사용하려면 크롬 카나리 버전이...]]>

자바스크립트는 객체 지향 언어이자 함수를 1급 객체로 취급하기 때문에 함수형 프로그래밍도 가능한 멀티 패러다임 언어이다. 자바스크립트를 조금이라도 다뤄봤던 사람이라면 익히 알고 있겠지만 자바스크립트에는 클래스란 개념이 없어 객체 생성이나 상속이 다른 언어와 다르고 특히 OOP는 주로 프로토타입이란 메커니즘을 통해 이루어진다. 검색을 조금만 해보면 프로토타입을 다룬 아티클들은 많이 찾아볼 수 있다. 하지만 여기서는 프로토타입에서도 상속을 구현하는 핵심 메커니즘인 포로토타입 체인에 대해 집중적으로 다룬다. 객체 자바스크립트에서 객체를 만드는 방법은 두가지 방법이 있다. 객체리터럴을 이용하거나 혹은 생성자를 이용한다. var...]]>

원글: https://www.sitepoint.com/functional-reactive-programming-rxjs/ 이 글은 Moritz Kröger, Bruno Mota와 Vildan Softic의 검수를 받았다. SitePoint의 컨텐트들이 최고가 될 수 있게 도와주는 SitePont의 모든 동료 리뷰어들에게 감사를 표한다. 본론으로 들어가기 전에 한가지 중요한 질문을 던져 본다. "반응형 프로그래밍이란 무엇인가?" 지금 시점에서 가장 일반적인 답변은 "반응형 프로그래밍은 동시성 데이터 스트림을 이용한 프로그래밍"이 될 것이다. 그리고 적잖이 동시성이라는 단어가 비동기로 대체된 경우도 있을 것이다. 하지만...]]>

타임라인 타임라인은 웹페이지를 로드할때나 혹은 유저 인터렉션 등으로 인해 브라우저에서 발생하는 동작들을 레코딩하고 타임라인 형태로 시각화해주는 도구다. 시간의 흐름에 따라 브라우저의 이벤트(여기서의 이벤트는 DOM상의 이벤트가 아닌 브라우저 내부의 동작, 물론 DOM이벤트를 발생시키는 이벤트도 있다)뿐 아니라 CPU, 메모리, 네트워크 사용량과 FPS까지 확인 가능하다. 이벤트에 스택 트레이스 형태로 자바스크립트의 함수 콜 스택도 확인이 가능해 어떤 자바스크립트 코드가 성능에 영향을 주고 있는지도 쉽게 확인할 수 있다. 두가지의 성능 측정 예를 통해 타임라인의 기능을 살펴본다. innerHTML 성능 측정 innerHT...]]>

원문 http://jdlm.info/articles/2016/03/06/lessons-building-node-app-docker.html by John Lees-Miller 도커를 이용해 노드제이에스 어플리케이션을 개발 하고 배포 하면서 어렵게 배운 팁과 트릭을 공유하고자 한다. 이 튜토리얼 아티클에서는 socket.io chat example을 이용해 기초부터 프로덕션에 응용 가능한 상태까지 될 수 있으면 쉽게 이해할 수 있도록 설명하려 한다. 아래와 같은 내용을 다룬다. 도커를 이용해 노드 어플리케이션을 시작하는 방법 모든것을 루트로 실행 하지 않기(BAD!) 개발시에 테스트-수정-리로드 사이클을 짧게 유지하...]]>

클로저와 객체 클로저를 처음 접했을때 전혀 이해가 되지 않았던 기억이 난다. 클로저를 제대로 이해하려면 자바스크립트 코어에대한 지식이 적지 않게 필요하기 때문이다. 개인적으로는 자신이 사라지기전까지 스코프의 종결을 미루기에, 바꿔 말하면 자신의 사라지면 자신의 스코프도 종결해 버리기에 Closure(종결) 라고 한때 간단하게 정리 했었다.(뭐 틀린말은 아니다) 클로저에 관한 설명은 여기 링크에서 자세하게 알아 볼 수 있다. 참으로 훌륭한 글이다. 간단하고 빠르게 이해를 하기에는 MDN의 클로저 파트 상단에 적혀 있는 내용이 적절 하다고 생각한다. Closures are functions that refer to ind...]]>

시작하면서 꼭 프론트엔드 개발자가 아니더라도 웹 개발을 하다 보면 한 번쯤은 크롬 개발자 도구를 사용해 봤을 거라 생각한다. 크롬이 버전업할수록 크롬 개발자 도구 역시 나날이 발전해 왔고 현존하는 도구 중에는 최고의 웹 개발자 도구라고 말할 수 있다. 예전 IE6에서 alert과 status로 디버깅을 했던 시절을 생각하면 정말 좋은 세상에 살고 있다는 생각이 든다. 크롬 개발자 도구에는 정말 많은 기능들이 추가되었고 별도의 도구로 사용했던 기능들도 내부에 편입되어 더욱 유용해졌다. 심지어 로컬파일를 에디팅하고 저장해서 바로바로 브라우저에서 확인해 보는 에디터의 기능도 추가되었다. 이런 기능들이 모두 필요하지는 않을 수...]]>

원문 https://medium.com/developers-writing/how-to-get-a-performance-boost-using-node-js-native-addons-fd3a24719c85#.buw8o2rrn 아마도 천 번 정도는 들어봤을 법한 Node.js(이하 노드)의 네이티브 모듈에 대해 그것이 무엇이고 왜 고려되어야 할지 다뤄본다. 노드 애드온은 C나 C++로 작성된 동적 링크 공유 객체로 노드의 require() 함수에 의해 로드 되어 일반적인 노드 모듈처럼 사용된다. 좋아 보이는데 왜 이미 익숙한 자바스크립트를 놔두고 대학시절에나 봤었던 C++로 코드를 작성해야 할까? 대답은 오직 하나 퍼...]]>

디펜던시 모듈 관리 기존의 프론트엔드 자바스크립트는 특별히 모듈화나 디펜던시관리에 대한 방법이 없어 필요한 자바스크립트 파일을 정해진 순서에 맞게 직접 스크립트 태그로 로드하고 각각 약속된 네임스페이스에 담아 공유했었다. 이런 방식은 프로젝트가 커질수록 그리고 참여 개발자가 많을수록 문제를 일으켰다. 이후 개발자들에 의해 AMD와 CommonJS 두가지 방법으로 모듈 관리 환경이 발전하게 되었는데, AMD 방식은 RequireJS가 많이 사용되고 있고 CommonJS는 Browserify가 인기가 많았다. 그리고 CommonJS는 NodeJS에서 사용하고 있는 방식이다. //AMD style define([ ‘...]]>

원문 https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.9nbhrj3of Flux 카툰가이드 플럭스는 현재 웹개발에 대한 토픽들중에 가장 유명하지만 이것을 이해하고 있는 사람은 매우 적다. 본 가이드는 모두가 이해할 수 있도록 도움을 주려 작성되었다. 문제 첫번째로 플럭스가 해결하는 기초적인 문제부터 설명하려고 한다. 플럭스는 어플리케이션에서 데이터를 다루는 패턴으로 리액트와 함께 페이스북에서 성장해왔다. 각각 독립적으로 사용이 가능하지만 많은 사람들이 둘을 함께 사용한다. 플럭스와 리액트는 페이스북에서 보여졌던 몇가지 문제점들을 해결하기위해 개발되었다...]]>

원문 https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d 대부분의 개발자들은 어떻게 테스트 해야하는지 모른다. 모든 개발자들을 프로덕션으로 디플로이할 때 발생할 수 있는 결함을 방지하기 위해 유닛 테스트를 해야 한다고 알고 있지만, 대부분의 개발자들은 유닛 테스트의 필수적인 요소를 모른다. 내가 보아온 유닛 테스트의 실패 사례는 셀 수가 없다. 무엇이 잘못되는 건지 혹은 왜 이게 무슨 문제가 되는 것인지 뿐만 아니라 정확히 개발자가 무엇을 테스트하기 위한 것인지 조차 쉽게 알 수가 없었다. 최근 프로젝트에서 테스트의 목적이 무엇인지에...]]>

원문 https://medium.com/@kevincennis/currying-in-javascript-c66080543528 자바스크립트에서의 커링 최근 나는 함수형 프로그래밍에 대해 많은 생각을 해왔다. 함수형 프로그래밍은 일종의 커링함수 만들어가는 과정과 같이 재미있는 것이라 생각했다. 커링을 모르는 사람을 위해 설명을 하자면 커링은 n개의 인자를 가진 함수를 변형하여 하나의 인자를 받는 n개의 함수로 만드는 것이다. 각 부분이 적용된 함수들은 체인을 만들게 되고 마지막 체인에서 결국 value를 해결하게 된다. 아래 커링을 사용하는 간단한 예제가 있다. function volume( l, w, h ) {...]]>

How to Use ES6 for Isomorphic JavaScript Apps 원문 http://medium.com/javascript-scene/how-to-use-es6-for-isomorphic-javascript-apps-2a9c3abe5ea2 이런 저런 소란은 이제 조금 정리됐고, 나는 결국 프로덕션 앱에 ES6를 사용하기 시작했다. 그리고 isomorphic Javascript를 작업하기 때문에 Node.js와 Browser 둘 다 작동 해야한다. 이글은 ES6의 기능이나 동적인 자바스크립트에 대한 깊은 튜토리얼은 아닐것이다. 기본적인 내용으로 Babel 환경에서 개발하고 실행할 수 있게 하는데에 촛...]]>

Reactive MVC and the Vitual DOM by Andre Medeiros http://futurice.com/blog/reactive-mvc-and-the-virtual-dom 웹 프론트 엔드 씬에는 수많은 새로운 프레임웍과 작업 방식들이 나타났었다. 어느 때보다 빠르게 소프트웨어는 레거시화 되었고, 이게 사실 좀 짜증 난다. 그러나 사실 이것은 좋은 혁신이다 왜냐하면 개선의 기회가 거기에 있기 때문이다. 프레임웍은 나타났다 사라지지만 그것들이 세상에 가져온 좋은 아이디어들은 남아있다. 우리는 여기서 그 좋은 아이디어와 그리고 그리 좋지 않았던 아이디어에 대해 이야기하려 한다. **리액트(Reac...]]>

내용상 중요하지 않은 부분은 생략했습니다. 오역에 대한 제보 언제든지 환영합니다. Common Misconceptions About Inheritance in JavaScript by Eric Elliott 자바스크립트 상속에 대한 일반적인 오해들 원문 https://medium.com/javascript-scene/common-misconceptions-about-inheritance-in-javascript-d5d9bab29b0a "프로토타입을 이해하지 못했다면 당신은 자바스크립트를 이해하지 못하는것이다." Q. 클래스 방식의 상속과 프로토타입의 상속은 사실상 같은 것이고, 단지 스타일적인 취향이다? "아니다...]]>

2025-02 Updated: Next.js를 사용해 재개발했습니다. 2020-08 Updated: 현재 블로그는 지킬을 버리고 gatsby 를 이용해서 직접 개발한 블로그로 2020년 8월부터 배포했습니다. Github덕에 정말 간편하고 아무걱정없이 블로그를 만들수가 있구나.. Node.js를 애정하는 관계로 Hexo와 고민하다가 결국 Jekyll로 결정. 첫포슽!...]]>