Jacob's Development Blog

웹 개발을 처음 할 때 열심히 외웠던 페이지가 만들어지는 과정. 아무런 경험 없이 무작정 외우다 보니 휘발성 기억이 돼버렸다. 지금도 물론 배워나가는 단계지만, 이제는 암기가 아닌 이해를 해보려고 이 글을 작성한다. 다시 한번 보자. 참고로 사실 웹 브라우저가 어떻게 동작해야 한다는 표준은 없다. 이 글은 크롬을 기반으로 설명하며, 모든 브라우저에 대응되는 글은 아님을 꼭 인식하자. 렌더러 프로세스(Renderer Process) 렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다. 렌더러 프로세스 안에서는 메인 스레드가 우리가 구현한 대부분의 코드를 처리하게 된다. 렌더러 프로세스의 핵심 역할은 HTML, CSS, JS를 사용자가 인터렉션 할 수 있는 웹 페이지로 만드는 것이다. DOM..

앞쪽 내용은 기록용으로 조금 남들에겐 쓸데없는 소리가 글에 있으니, 제목에 해당되는 내용이 궁금하다면 바로 아래를 보자. 처음에 왜 enum을 왜 쓰게 되었는가. 사내에서 디자인 라이브러리를 만들다 보면, 사용자(개발자)의 생산성 향상에 많은 고민을 하게 된다. 각기 다른 컴포넌트에서 최대한 일관된 인터페이스를 제공해 주어 사용자가 새로운 컴포넌트가 추가되더라도 중요한 필드는 "예측 가능하도록" 만들고 싶었다. 물론 처음에는 enum 대신 union 타입을 사용했었다. 하지만 사용하다 보면 문제점이 있었다. Typo 관련 컴포넌트만 보더라도 수많은 크기들이 존재했고, union 타입으로 만들 시 위에서 보이는 많은 타입들을 아래와 같이 정의해 줘야 했다. type Props = { ... scale: "..

2021.03.12 - [Side-Project] - 얼떨결에 만들어본 CSS 사이드 프로젝트 얼떨결에 만들어본 CSS 사이드 프로젝트 세상에 뭐든 잘하는 괴물 같은 사람이 많다. 왜 난 아니지... 근데 처음부터 괴물이었을까. 늦게 시작했으면 부러워 말고 더 열심히 하자. 넋두리... 사실 이 프로젝트의 첫 시작은 프론트 개발 code-masterjung.tistory.com 위에 있는 첫 번째 사이드 프로젝트를 계속하고 있던 중 사실 몇 가지 마음에 들지 않는 것들이 있었다. 1. 처음에는 깃허브에만 올려두고 누가 보면 좋고 아니면 혼자 볼 것이다!라고 시작했지만, 글도 올리고 내 글에서 쓴 예제를 위 스토리북에서 구현하다 보니, 구조나 스토리북 관련 설정들이 마음에 들지 않았다. 뭐랄까... 스토리..

세상에 뭐든 잘하는 괴물 같은 사람이 많다. 왜 난 아니지... 근데 처음부터 괴물이었을까. 늦게 시작했으면 부러워 말고 더 열심히 하자. 넋두리... 사실 이 프로젝트의 첫 시작은 프론트 개발자로서 CSS가 부족하다고 느낄 때가 많았지만, 얼렁뚱땅(?) 화면만 만들고 끝내는 경우가 많았다. 뭐 지금까지는 큰 문제는 없었다. UI가 깨지면 밤을 새우면서 고쳤고 주변 개발자들한테 도움도 많이 요청했다. 그러던 중 지금 회사에서 사내에서 여러 프로젝트에 사용할 목적으로 디자인 라이브러리를 만들게 되었다. 처음에는 어려운건 "material-ui" 랩핑 해서 쓰고 쉬운 것만 직접 만들어서 사용하면 되겠지!"라는 생각으로 시작했다. 정말 오만하면서도 만만하게 생각했던 것이었다. 그리고 만들려고 해 보니 정말 일..

이 글에 들어가기 앞서, 혹시 화려한 애니메이션만 보고 흥미를 가졌다면, 한 가지를 더 생각하면 좋을 거 같다. 예상했겠지만 수학이다. 결국 3D 그래픽은 세 개의 좌표를 선으로 연결해서 입체적으로 보이게 하고, 다음 좌표를 계산하고 다시 렌더링 해서 움직이는 것처럼 보이게 한다. 물론 이 글을 쓰는 나 또한 수학을 잘하진 못한다. 많이 사용하는 삼각 함수는 잘 기억도 나지 않는게 현실이다(벌써 배운 지 10년이 넘었다). 하지만 잔잔한 일상 속에서 나를 더 성장시켜 줄 수 있을 거라는 근거 없는 확신이 든다. 일단 해보자. WebGL이란? WebGL은 Web Graphics Library의 약자로 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API이다. OpenGL E..

최근 three.js나 canvas, d3.js 등에 관심이 생겨 공부하다 보니, 기본적인 수학 개념들을 알아야 했다. 문과지만 수학을 싫어하지 않았기 때문에 "근방(?) 할 수 있겠지?" 하는 마음으로 한번 도전해 본다. 아래 글은 Javascript의 Math API를 기준으로 작성하였다. Math.sin(radians: number): number 이 함수는 숫자의 sin 값인 -1과 1 사이의 수를 반환한다. 여기서 말하는 숫자는 우리가 일반적으로 사용하는 각도가 아닌 라디안(radian or rad) 값인 것을 유의하자(각도를 구하고 싶다면 (radian * PI / 180) ). 라디안이란, 반지름과 호의 길이가 같을 때의 중심각의 크기를 말한다. cf) 라디안(radian) 수학에서 각도에 ..

너무 깊은 내용은 다루지 않는다. 사실 나도 모른다. 적어도 개발자가 svg를 다룰 때 알면 도움이 될만한 정도로 내용을 정리해 보려고 한다. 일반적으로 래스터 이미지의 크기를 변경하는 경우 어떻게 하면 될까? img 태그의 속성으로 width와 height를 지정해도 되고, css selector를 통해 스타일 값을 부여해줘도 된다. png 하지만 내가 다룰려는 요소가 svg라면 조금 다르게 결과가 나올 수도 있다. 왜냐하면 svg의 크기 조정은 단순 이미지의 크기 조정보다는 더 많은 크기 조절 옵션을 제공하기 때문에 조금 복잡하다. 위 이미지의 svg을 다운로드하여 width와 height값을 넣어줬다. 과연 제대로 동작할까? ... 거의 똑같이 나오는거 같다. 근데 실수로 height를 날려버렸다...

svg가 jpg나 png보다 좋다고 말하는 것을 많이 들어봤을 것이다. 그래서 왜 좋냐고 물어본다면 정확히 대답한 사람은 없었다. svg가 크기를 늘리거나 줄여도 안 깨져~ 물론 틀린 말은 아니지만, 더 알고 싶다...! SVG (Scalable Vector Graphics) 상호작용(interactivity)과 애니메이션(animation)을 지원하는 2차원 그래픽스를 위한 확장형 마크업 언어(XML) 기반 벡터 이미지 포맷이다. svg의 장점 백터 기반의 svg는 래스터 이미지(or 비트맵 이미지)와는 다르게 화면 크기가 달라져도 깨지지 않는다. 다만 화면 크기가 달라지면 svg는 "더 크게(혹은 작게) 다시 그려라"라고 명령하면 그만이기 때문이다. svg 이미지는 이미지 그 자체라기보다는 일련의 그..

2021/01/23 - [React] - React로 Threejs 예제 따라 구현하기 React로 Threejs 예제 따라 구현하기 css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 code-masterjung.tistory.com 2번째 구현이다. 처음 예제에서 광원을 줘서 조금 더 3D 다운 개체를 만들었다. 용어가 생소한 부분이 많아 일단 무작정 외울 작정이다. 용어의 이질감을 없애고 이해를 하자(발음도 안되는데 자꾸 이해를 하려고 하니 시간만 낭비했다..) // https://threejsfundamentals.org/threejs/les..

2021/01/28 - [go] - go lang 기본기 다지기1 - 패키지, 변수와 자료형, 포인터 go lang 기본기 다지기1 - 패키지, 변수와 자료형, 포인터 워크스페이스에 3개의 폴더를 생성했다. 소스코드를 저장하는 "src", 컴파일된 패키지를 저장하는 "pkg", go의 바이너리를 저장하는 "bin" 폴더이다. 패키지 패키지 이름은 모든 go 파일의 최상단에 code-masterjung.tistory.com 1편 글에 이어 단순 공부글이다. 함수와 클로저 // main 함수 func main() { // logic ... } // 매개 변수가 있는 경우 func add(a int, b int) { // logic } // 자료형이 같을 경우 한번에 가능 func add(a, b int) {..

요구 사항에 따라 자동으로 늘어나는 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시간 동안 코딩했었다.) 그러다 학원도 다니고 개발자로 일도 처음 했던 작년이라, 정신없이 지나갔다. 그래서 올해는 어땠는가! 인생..

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