React로 개발깨나 하시는 분들은 hooks를 거의 반드시라고 해도 좋을 정도로 대부분 사용하고 계실 것 같습니다. 대표적으로는 useState, useEffect, useRef 등에서 부터 custom하게 만든 hooks까지 많은 hook이 있는데요, 그 중에서 useImperativeHandle이라는 hook을 사용하는 경우는 그다지 많은 것 같지 않습니다. 보통은 '이런 훅도 있었어?' 라는 반응을 보이는 경우가 많더라구요. 하지만, 이 hook을 사용하면, 부모가 자식의 상태에 대해서 아무 것도 알지 못해도, 자식의 데이터를 손쉽게 가져다 사용할 수가 있게 됩니다. 마치 클래스형 component에서 자식의 method를 가져다 사용하던 것처럼요! // Parent.jsx cons..
제가 중고등학교에 다니고 있을 무렵엔, 우울증에 걸려도 정신과 상담을 받는 것을 다들 꺼려하던 때가 있었습니다. 취업길이 막히고 혼삿길이 막힌다면서요. 또 그런 우울감 같은 것들은 정신력이 약해서 생기는 문제라면서, 병으로 받아들이지 않고 어리광쯤으로 치부하던 시절이었습니다. 하지만 최근 몇 년 사이에 정신건강이 화두로 떠오르게 되면서 이제는 상황이 조금 달라졌습니다. 누군가가 우울해하면 적극적으로 정신과 상담을 권하기도 하고, 주변에서도 우울증을 더 이상 가볍게만 치부하지는 않는 상황이 된 것 같아요. 개인적으로는 상당히 긍정적인 변화가 아닌가 하고 생각합니다. 하지만 '몸을 단련하는 방법'은 모두들 관심이 있고 열심히 하려고 하지만, 마음에 대해서는 여전히 그렇지 못한 경우가 많은 것 같아 보입니다...
발단 최근, 회사 프로젝트에 유닛 테스트를 도입하기로 했습니다. 기존에는 Cypress를 이용한 E2E 테스트만을 통해 데일리 빌드를 수행하고 있었는데요, Cypress가 유닛 테스트의 영역까지 차지하고 있는 게 좀 어색하게 느껴졌기 때문이에요. 컴포넌트가 다른 환경에 의존하지 않고 그 자체만으로 제대로 동작하는지는 유닛 테스트를 통해 확인되어야 한다고 생각하거든요. 테스트 방법론이야 여러가지가 있겠지만, E2E는 유저의 입장에서 전체적인 어플리케이션의 Flow를 테스트하는 것이라고 봅니다. 그에 비해 유닛 테스트는 별개의 컴포넌트의 무결성을 체크하는 것이라고 보면 될 것 같아요. 각종 Validation checking이나 그에 따른 UI 상태의 변화 같은 것들이죠. 기존에는 Jest를 이용한 테스트가..
github code server라고 들어보셨나요? 웹 브라우저를 통해 VSCode를 구동할 수 있도록 도와주는 라이브러리입니다. 나온지는 제법 오래 됐으므로 많은 분들이 이미 사용하고 계실지도 모르겠습니다만, 저는 최근에서야 이것의 존재를 알게 됐습니다. 맥북을 들고 다니기에는 무겁고, 그냥 가벼운 코드 수정이나 테스트 코드를 구동시켜보고 싶을 때, 아이패드로 작업을 하고 싶었거든요. 집에서 구동 중인 NAS는 사양이 너무 딸려서 도저히 실사용이 불가능할 것으로 판단한 저는 클라우드 서비스로 눈을 돌렸습니다. 많은 서비스를 비교해봤지만, 역시 갓마존의 AWS만한 게 없었어요. 하지만 저의 Freetier는 이미 만료된 상황이었습니다. gcp는 무료 사용 가능한 인스턴스의 사양이 너무 부족했습니다. 1기..
Introduction 일반적으로 Javascript에서 DOM에 직접 접근할 때는 document.getElementById등을 통해서 접근하고는 합니다. 하지만 React에서는 ref라는 것을 사용해서 접근하는데요, ref란 무엇이고, 기존의 방법과는 무엇이 다른지, 어떻게 사용하면 되는지 알아보겠습니다. What is ref? 우선 ref란, reference의 줄임말입니다. 노드나 컴포넌트에 ref 값을 만들어서 해당 요소의 값을 얻어오거나 해당 요소를 제어하는 데 사용되죠. React팀에서는 아래와 같은 경우에 ref를 사용할 것을 권장하고 있습니다. 내용을 보시면 알 수 있겠지만 React에서 만들고 통제하는 요소(제어 컴포넌트; Controlled Component)가 아닌 경우를 통제하고자..
이번 포스트는 atomic-web-design을 번역한 글임을 밝힙니다. 원문을 있는 그대로 옮겨오기보다는 자의적 판단에 의해 필요해 보이는 부분들을 가져왔습니다. 다소 의역이나 오류가 있을 수 있습니다. 댓글로 알려주시면 수정하도록 할게요. 개요 우리는 페이지가 아니라 시스템 컴포넌트를 디자인 해야 한다. — Stephen Hay 웹 디자인의 기술이 계속 발전함에 따라, 우리는 단순한 웹 페이지 모음을 만드는 것이 아니라 사려 깊은 디자인 시스템을 개발해야 할 필요성을 인식하고 있습니다. 디자인 시스템을 만드는 것에는 다양한 논의가 있어왔는데, 보통은 color, typography, grids, texture 같은 것들을 위한 것이 대부분이었습니다. 물론 이런 것들도 중요하겠지만, 제 생각에는 이것은..
개요 예로부터 Javasciprt 환경에서 날짜와 시간을 parsing하기 위한 도구로 가장 유명하게 사용돼 온 라이브러리는 Moment.js였습니다. 그런데 비교적 최근인 2020년 9월, Moment.js의 사망선고가 내려졌습니다. 이미 대체해서 사용하실 분들은 다들 대체하셨겠지만, 혹시 아직도 대체하지 않고 그대로 사용중이신 분들을 위한 포스팅입니다. goodbye Moment........ 😢 Moment.js는 2020년 9월 기준, 일주일에 1,200만 건 이상 다운로드 되고 있습니다. 하지만, Moment는 이전 세대의 자바스크립트 생태계를 위해 만들어졌고, 현대의 웹은 많이 달라졌습니다. 우리는 새로운 기능보다 안정성을 중시하기로 했습니다. (중략) 최근 크롬 개발 툴은 Moment를 교체..
화살표 함수(Arrow Function) 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다는 장점이 있는데, 아무 때나 사용할 수 있는 것은 아닙니다. 화살표 함수의 기본 문법은 다음과 같습니다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개면, 소괄호 생략가능 (x, y) => { ... } // 매개변수가 여러 개면, 소괄호 생략불가 // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄이면 중괄호를 생략가능. // 암묵적으로 return된다. ..
지난 금요일, 저는 얀센을 접종받았습니다. 군 복무를 한 덕분에 받은 유일한 혜택인 것 같네요. 이미 많은 후기들이 넘쳐나고 있긴 하지만 저 나름대로의 기록을 위해서, 혹은 과도한 백신 공포증에 접종을 고민하고 계시는 분들께 조금이나마 도움이 되기를 바라는 마음으로 최대한 간결하고 담백하게 적어보도록 할게요 :D 6/11 08:37 - 접종 완료. 15분 간 원내에서 대기하고 귀가하도록 안내 받음. 당일은 목욕 및 샤워도 하면 안 된다고 함. 접종 부위 통증 없음. 대기 결과 이상 증상이 없어서 병원을 나와 1층에 있는 편의점에서 이온음료 구매. 6/11 09:00 - 아직 아무런 증상은 없지만 미리 아세트아미노펜 650mg 2정 복용 (써스펜8시간이알서방정. 이후 써스펜.) 6/11 10:00 - 집 ..
ES6가 나온 지가 벌써 6년이 지났습니다. 그런데 코드리뷰를 하다보면 아직도 var로 변수를 할당하는 분들이 자주 보입니다. 물론 짤막하게 동작을 보여주기 위해서 코드를 작성하는 수준에서는 크게 문제될 게 없겠지만 그 코드를 보는 사람들 중 누군가는 그게 정설이라고 생각하고 개발을 시작하게 될지도 모릅니다. 그래서 변수 선언 방식에 대해서 피드백을 드리면, 물론 대부분은 수정해주시지만 왜 굳이 그렇게 써야 하냐고 되묻는 분들이 이따금씩 계셨습니다. 이미 이것에 대한 자료들이 인터넷 여기저기에 차고 넘치는데도요. 그래서 썼습니다. 왜 var를 버리고 const와 let을 사용해야 하는지! 하.. let? const? 일단 둘의 차이점을 먼저 언급하고 넘어가는 게 좋을 것 같습니다. 아주 간단히 설명해서 ..
