Jacob's Development Blog

요구 사항에 따라 자동으로 늘어나는 textarea를 구현해야 될 때가 있다. 그전에 textarea에서(input도 동일) caret의 색상을 변경하고 싶다면 아래의 속성을 변경해 주면 된다. caret-color: lightskyblue; 하지만 두께 등도 변경하고 싶다면 기본 제공해 주는 것으로는 불가능하며, 따로 만들어야 한다. 이 글을 쓰는 시점에서는 위 속성만 커스텀이 가능하다. 높이가 변하는 textarea를 구현하는 건 어렵지 않다. 바닐라나 react나 크게 다른 건 사실 없긴 하다. input에 데이터가 입력될 때마다 ref를 가져와서 scrollHeight의 높이만 더해주면 되기 때문이다. const handleResizeHeight = useCallback(() => { if (re..

워크스페이스에 3개의 폴더를 생성했다. 소스코드를 저장하는 "src", 컴파일된 패키지를 저장하는 "pkg", go의 바이너리를 저장하는 "bin" 폴더이다. 패키지 패키지 이름은 모든 go 파일의 최상단에 선언한다. package jacob - go 프로그램은 한 개 이상의 패키지로 구성된다. 각 패키지는 한 개 이상의 go 소스파일을 포함하는 폴더이며, 모든 go 파일은 패키지에 속한다. 패키지 폴더는 워크스페이스의 src 폴더 하위에 위치한다. - 패키지 이름은 소문자로 선언하며, 패키지의 폴더명은 패키지와 이름을 동일하게 지정한다. - import 키워드를 이용해 패키지를 가져올 수 있다. package jacob import "fmt" - 만약 다른 패키지 폴더 안에 존재한다면 아래와 같이 가져..

css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 따라 하면서 react로 구현한 거 이외에는 별다른 게 없기 때문에 이 글에서는 쓸 내용은 많지 않았다. 하지만 시작한 기록을 남기기 위해 조금만 적어본다. Three.js란? Three.js는 웹에 3D 객체를 쉽게 렌더링하도록 WebGL을 근간에 둔 자바스크립트 3D 라이브러리이다. 사실상 WebGL이지만, WebGL의 경우 점, 섬, 삼각형만 그리는 단순한 자바스크립트 API이기 때문에, 3D 객체를 조금 더 편하고 효율적으로 짤 수 있게 도움을 주는 Three.js 같은 라이브러리를 사용한다..

커머스의 배송 상태, 음식 배달앱에서 배달 상태에 따라 타임라인 형식으로 구현된 화면을 많이 볼 수 있다. 교육 서비스인 우리 앱에서는 현재 구현할 일이 없어 혼자 한번 구현해 봤다. 실제 상태가 존재하지 않다 보니, hover를 통해 상태가 이동되도록 구현하였다. 여기 코드에서 조금 눈여겨볼 방법은 'component selector'를 사용했다는 것이다. 안타깝게도 react-native에서는 지원하진 않지만, 일반적인 웹과 웹뷰에서는 사용할 수 있다. const Date = styled...; const Title = styled...; const Contents = styled...; const TimelineItem = styled.div` position: relative; padding: 2..

atlassian에서 만든 react-beautiful-dnd를 이것저것 궁금해져, 내부 코드를 보기 전에 기본 구현 학습을 위해 먼저 만들어 봤다. 자연스러운 애니메이션이나 특별한 기능은 없지만, 기본 드래그 앤 드롭이 어떻게 동작하는지 학습하는 데에는 나쁘지 않은 경험이었다(쉽지 않아~~). 기본적인 이벤트에 대한 설명은 이미 정리해놓은 블로그가 많고 더 특이하거나 추가된 내용도 없기 때문에 생략한다. HTML Drag and Drop API - Web APIs | MDN HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elemen..

더보기 넋두리... 오랜만에 받은 2주의 휴가. 사실 전부 주말근무 대체 휴가다. 신규 서비스 오픈으로 인해 어쩔 수 없이 대체휴가를 내야 했고, 연말에 몰아 쓴(?) 덕분에 시간이 많이 생겼고 너무 행복했다. "아 드디어 내 공부를 할 수 있겠구나...!" 물론 회사일도 재밌긴 하지만, 파이썬부터 블록체인까지 너무 해보고 싶은 공부가 많았다. 그리고 그 하고 싶던 공부를 하기 시작했다. 하다 보니 문뜩 심심해졌다. 왜지? 나는 이번 회사에서는 온전한 프론트 개발자였다. 늘 내가 친 코드는 화면에 모두 보였다. 그런데 파이썬으로 백엔드를 만들다 보니 크게 보이는 게 없었다. 리액트를 view로 쓸 거기 때문에 템플릿을 써서 장고로 어드민을 굳이 만들고 싶지가 않았다. "그래서 내가 쉬는 시간마다 아니면 ..

왜 이런 방법을 찾아봤을까? 이번에 현재 회사로 이직하면서 디자인 시스템을 만들고 싶다는 디자이너 분과 함께 일하게 되었다. 그분은 이미 다 갖춰진 대기업에서 디자이너로 일하셨었고 실무는 많이 안 해보셨다. 전에 있던 개발자가 모든 페이지마다 컴포넌트를 따로 만들어서 개발했다고 하시며, 그렇게 안 하면 좋겠다는 의사를 보이셨다. 그래서 미리 컴포넌트를 정의하고 그걸 여러 군데에서 사용하면 좋겠다고 했는데, 결국 디자인 시스템을 만드는 방향으로 갔다. 나 역시 동의했고 앞으로 계속 진행될 신규 프로젝트나 레거시 프로젝트 리뉴얼 등 많은 곧에서 재사용되며 우리 회사의 브랜딩을 일관화하며 개발 속도까지 높일 수 있다고 판단했기 때문이다. 여튼 그래서 피그마에 여러 컴포넌트들이 정의되었고, 나는 그것을 기반으로..

실제 프로덕션 환경에서 컴포넌트를 만들다 보면, 여러 경우에 따라 다른 컴포넌트를 보여줘야 하는 경우가 많다. 예를 들어 파일 다운로드 관련하여 준비, 진행, 완료라는 세 가지 타입을 가진 데이터를 내려준다고 해보자. export enum DownLoadStatus { "ready" = "ready", "progress" = "progress", "complete" = "complete" } 그리고 프론트에서는 이 상태에 따라 다른 컴포넌트를 보여줘야 한다. 그럼 아래와 같이 코드를 작성할 수 있을 것이다. import React from 'react'; export function DownLoad({ status }) { ...logic if (DownLoadStatus.ready === status)..

누구보다 치열하게 공부했고 치열하게 많은 것을 배웠다. 온전히 개발자로서 생활한 첫 해를 마무리해본다. 사실 온전한 개발 경력으로만 따지만 아직 길지 않다. 개발을 작년부터 시작했을뿐더러, 그전에는 엑셀 VBA로 AMD로 일하며 사무 자동화를 하고, python을 배워서 최저가를 대량으로 크롤링하는 등 전문적으로 한 것도 아니고 내가 일하기 귀찮아서 코딩을 배우고 한 게 전부였다. (물론 위 시기에도 치열하게 공부하긴 했다. 새벽 4~5시까지 코딩을 하다가 일하러 가는 날이 대부분이었고, 버그를 잡고 싶어서 점심도 건너뛰고 형이 사준 맥북 13인치를 들고 몰래 카페에 가서 1시간 동안 코딩했었다.) 그러다 학원도 다니고 개발자로 일도 처음 했던 작년이라, 정신없이 지나갔다. 그래서 올해는 어땠는가! 인생..

나는 왜 갑자기 리팩터링에 관심을 가졌을까? 최근 실무를 하다가 고객이 보는 정산서 로직을 리팩터링 해야 되는 경우가 생겼다. 이것이 필요했던 가장 큰 이유는 첫째는 성능 이슈가 컸다. 기존에 사용하던 레거시 코드의 경우 처음에는 많은 계산 로직이 없었으나, 점점 요구 사항과 세금 관련 이슈가 많이 생기다 보니, 한 가지 서비스가 정말 많은 것들을 판단하고 계산하는 로직이 되어버린 것이다. 두 번째 이유는 첫 번째 이유로 인해 이미 너무 복잡해져 버리고 비대해져 버린 서비스 로직의 문제였다. 평소 리팩터링을 자주하긴 했었다. 우리는 항상 보이스카우트('지나간 자리는 지금보다 깨끗이 만든다')라는 원칙을 가지고 있고, 나는 그 누구보다 그 원칙을 따랐었다. 그래서 기존 로직을 약간 수정하거나 정말 작은 규..